配置関連プロパティの値（CSS）

配置関連プロパティの値（CSS）

float

値（パラメータ）	内容
none	フロート（浮動化）させない（初期値）
left	ボックスを左に配置し、テキストなどを右側に回り込ませる
right	ボックスを右に配置し、テキストなどを左側に回り込ませる

フロートを解除するためには、clearプロパティを設定する必要があります。

入力例	float: left;

サンプルコード（CSS別記）

/*CSSコード*/
.float {
  background-color: #fdf2f4;
}
.float-left {
  float: left;
}
.clear {
  clear: left;
}

<!--HTMLコード-->
<div class="float">
  <p>フロート（左）を表示</p>
  <p><img class="float-left" src="https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-03.jpg" alt="">写真を左に<br>文章を右に表示しています</p>
  <p>段落を変えてもそのままです</p>
  <p class="clear">ここでフロート（左）を解除しました。</p>
</div>

サンプルコード（CSS別記） の表示

clear

値（パラメータ）	内容
none	フロート（浮動化）を解除しない（初期値）
left	左フロート（ ボックスを左、テキストを右など ）を解除する
right	右フロート（ ボックスを右、テキストを左など ）を解除する
both	左右両方のフロートを解除する

入力例	clear: left;

サンプルコード（CSS別記） や サンプルコード（CSS別記） の表示 については、上記float参照

position

値（パラメータ）	内容
static	通常の位置（初期値）
relative	通常の位置を基準とした相対的な配置
absolute	親要素で位置指定があれば、それを基準とした絶対的な配置 ない場合は、ウインドを基準とした絶対的な配置
fixed	ウインドを基準とした絶対的な配置に位置を固定

配置方法を指定後、top・right・bottom・leftプロパティで位置を特定します。
staticを指定すると、位置指定は無効になります。

入力例	position: relative;

＜2番目のボックスにstaticを指定＞

サンプルコード（CSS別記）

/*CSSコード*/
.position {
  background-color: #fdf2f4;
  width: 600px;
  height: 200px;
}
.position-static1 {
  background-color: #ffd6dd;
  width: 100px;
  height: 50px;
}
.position-static2 {
  background-color: #d6e3ff;
  width: 100px;
  height: 50px;
  position: static;
}

<!--HTMLコード-->
<div class="position">
  <div class="position-static1"></div>
  <div class="position-static2"></div>
  <div class="position-static1"></div>
</div>

サンプルコード（CSS別記）の表示

＜2番目のボックスにrelativeを指定し、左から50px離しています＞

サンプルコード（CSS別記）

/*CSSコード*/
.position {
  background-color: #fdf2f4;
  width: 600px;
  height: 200px;
}
.position-relative1 {
  background-color: #ffd6dd;
  width: 100px;
  height: 50px;
}
.position-relative2 {
  background-color: #d6e3ff;
  width: 100px;
  height: 50px;
  position: relative;
  left: 50px;
}

<!--HTMLコード-->
<div class="position">
  <div class="position-relative1"></div>
  <div class="position-relative2"></div>
  <div class="position-relative1"></div>
</div>

サンプルコード（CSS別記）の表示

top・right・bottom・left

値（パラメータ）	内容
auto	自動（初期値）
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位

入力例	position: relative; left: 50px;

positionの値でrelative・absolute・fixefを指定した場合に有効

サンプルコード（CSS別記）やサンプルコード（CSS別記）の表示については、上記positionを参照

z-index

値（パラメータ）	内容
auto	親要素と同じ階層（初期値）
任意の数値	0を基準として数値が大きいくなるほど前面に表示される

入力例	position: absolute; z-index: 2;

サンプルコード（CSS別記）

/*CSSコード*/
.z-index {
  background-color: #fdf2f4;
  width: 600px;
  height: 200px;
  position: absolute;
}
.z-index1 {
  background-color: #ffd6dd;
  width: 100px;
  height: 50px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.z-index2 {
  background-color: #d6e3ff;
  width: 100px;
  height: 50px;
  z-index: 3;
  position: absolute;
  top: 20px;
  left: 50px;
}
.z-index3 {
  background-color: #ffadbb;
  width: 100px;
  height: 50px;
  position: absolute;
  top: 40px;
  left: 30px;
  z-index: 1;
}

<!--HTMLコード-->
<div class="z-index">
  <div class="z-index1">2</div>
  <div class="z-index2">3</div>
  <div class="z-index3">1</div>
</div>

サンプルコード（CSS別記）の表示