表示方法/配置方法/フロート/背景

作成日：2018年1月14日

表示方法（display プロパティ）

要素の表示方法（生成するボックスの種類）を指定するために、display プロパティが利用できます。

display プロパティの主な値

block：その要素をブロックボックスとして生成します
inline：その要素を1つ以上のインラインボックスとして生成します
list-item：li 要素のようにブロックボックスとリスト項目のインラインボックスとして生成します
none：その要素のボックスを生成せず、子孫要素についてもボックスを生成しません。したがって、その要素は視覚的に非表示化されます
inline-block : その要素をブロックボックスとして生成するが、それ自体は置換要素のように１つのインラインボックスとして配置されます。
table : HTMLの table 要素のように、ブロックボックスとして表示されます。
flex :その要素は、ブロック要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。

これらの指定は、ブロックレベルとして生成されるボックス（li 要素など）に「inline」を指定してインライン化したり、その反対にインラインとして生成されるボックス（a 要素など）に「block」としてブロック化するなどのために使います。

インライン要素をブロックボックスとして指定することにより、width や height も指定できるようになり、上下のマージンも指定が可能になります。

また、インライン要素である a 要素を display: block でブロックボックスにしてリンクをボタン風にすることもできます。inline-block と指定することで、ボタンのサイズを文字サイズと比例して変えられるようにもなります。

<div id="display1">
  <ul>
    <li><a href="#display1">Home</a></li>
    <li><a href="#display1">News</a></li>
    <li><a href="#display1">Contact</a></li>
  </ul>
</div>

Home
News
Contact

li {
  display:inline; 
  padding: 5px 10px; 
}

Home
News
Contact

li {
  display:inline; 
  padding: 5px 10px; 
}
a {
  display:inline-block; 
  width: 32%;   /*幅が指定可能になる*/
  text-align: center; 
}

Home
News
Contact

<h3>Heading 3</h3>

h3 {
  padding:5px; 
  width: 300px;   /*幅を指定しないと、親要素の幅いっぱいに広がる*/
  border:1px solid #E36916; 
  background-color:#BF4F15; 
  color:#FFF;
}

Heading 3

h3 {
  padding:5px; 
  display:inline-block;    /*内容幅に合わせて背景が表示される*/
  border:1px solid #E36916; 
  background-color:#BF4F15; 
  color:#FFF; 
}

Heading 3

以下は a 要素を使ったボタン風のリンクの例です。

<a href="#" class="button">Button</a>

.button {
  display:inline-block; 
  background-color:#4A8C97; 
  border:1px solid #ACD5F3; 
  padding: 10px 20px; 
  margin: 20px;
  border-radius: 5px; 
  color:#fff;
  box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px, -1px 0 1px rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3) 0 -1px 1px;
}
a.button {
  outline: none; /*a 要素に表示される点線を消す*/
}
.button:hover {
  background-color:#7695A4;
  color:#ccc;
}

Button

配置方法（position）と位置（top, right, bottom, left）

要素の配置方法を指定するために、次のプロパティが利用できます。

static: 通常配置を意味します。その要素本来のボックスを生成し配置されます。top, right, bottom, left の各プロパティで指定しても無効となります。（規定値）

relative: 相対配置を意味します。その要素本来のボックスを生成し配置されますが、本来の位置から相対的に移動されて配置されます。移動距離は、position, top, right, bottom, left の各プロパティで指定します。後に続く要素のボックスは、このボックスが本来の位置から移動されていないものとして配置されます。

absolute: 絶対配置を意味します。その要素のボックスの位置（と大きさ）は、top, right, bottom, left の各プロパティで指定します。通常フローから完全に取り払われるので、後続の要素ははじめからその要素が無かったかのように振る舞います。この値が適用された要素は、マージンを指定している場合も他の要素のマージンと相殺されません。

fixed: 固定配置を意味します。その要素のボックスは「absolute」として配置されるだけでなく、ウィンドウスクロールなどの領域移動に対して固定されたり、出力メディアが印刷媒体であれば各ページの同じ位置に出力されます。ボックスの位置（と大きさ）は、top, right, bottom, left の各プロパティで指定します。この値が適用された要素は、マージンを指定している場合も他の要素のマージンと相殺されません。

position プロパティは、値が「static」以外の場合、位置指定には top, right, bottom, left の各プロパティを利用することができます。これらの各プロパティの値は「長さ」や「パーセンテージ」で指定できます。

長さ: 相対配置のときはその要素本来の位置からの距離になります。絶対配置や固定配置のときは包含ブロックの四辺からの距離なります。（但し、その要素の親要素以上の上位要素で「static」以外の値を適用している要素があれば、そのなかで最下位にある要素の左上端を基準とする距離になります）この距離のことをオフセットと呼びます。また、マイナスの値も指定可能です。

パーセンテージ: 相対配置の時はその要素自体の幅または高さを基準とします。絶対配置や固定配置のときは包含ブロックの幅または高さを基準とします。マイナスの値も指定可能です。; なお、top プロパティと bottom プロパティについては、包含ブロックの高さが明確ではなく内容量に依存する場合（内容の行高が line-height プロパティで指定されておらず、height プロパティで包含ブロック全体の高さが指定されていない場合）、「パーセンテージ」はすべて「auto」と解釈されます。

auto: 要素やボックスの種類、他の関連するプロパティが「auto」と指定されているかどうかに依存します。（規定値）

static　通常配置

ボックスを通常配置します。
ブロックボックスは垂直方向に上から下へと配置されます。
インラインボックスは水平方向に配置されます。
position プロパティを指定されていない要素は、static が初期値になり、通常フローであることを表します。
垂直方向に隣接するマージンは相殺され、大きい値のほうのマージンが適用されます。
包含ブロックは、祖先ブロックの中から最も近いブロックボックスの内容辺（内容領域の辺）になります。

<div>
  <p>position:static</p>
</div>
<div>
  <p>position:static</p>
</div>
<div>
  <p>position:static</p>
</div>

div {
  margin: 20px; 
  width:200px; 
  height: 60px;
  border:1px solid #93B4C4; 
  background-color:#E3F6FC; 
}
p {
  text-align:center; 
  line-height: 60px;
}

この例の場合、垂直方向に隣接するマージンは相殺され 20px になります。

position:static

relative　相対配置

ボックスを相対配置します。
ボックスはまず通常フローに従って配置され、そこを基点として相対的に配置されます。
基点からの距離は top, bottom, left, right プロパティで指定します。
隣接する他のボックスは、相対配置されるボックスを通常配置として計算して配置されます。
包含ブロックは、static と同様、祖先ブロックの中から最も近いブロックボックスの内容辺になります。

relative によって配置された要素の後に続く要素は、オフセットされていない状態（通常フローでの配置を）維持します。本来あった場所に空いた余白はそのままになります。つまり後続の要素は、オフセットされた要素が移動前の位置にあるかのように振る舞います。

<div>
  <p>position:static</p>
</div>
<div class="relative">
  <p>position:relative</p>
</div>
<div>
  <p>position:static</p>
</div>

div {
  margin: 20px; 
  width:200px; 
  height: 60px;
  border:1px solid #93B4C4; 
  background-color:#E3F6FC; 
}
.relative {
   position: relative; /* 相対配置 */
   top: 10px;  /* 基点から top 方向に 10px オフセット */
   left: 20px; /* 基点から left 方向に 20px オフセット */
   border:1px solid #D3CB67;
   background-color:#F4F7D1;
}
p {
  text-align:center; 
  line-height: 60px;
}

position:static

position:relative

position:static

以下のような HTML と CSS で写真とタイトル、説明文を表示する場合をみてみます。

<div class="outside">
  <p class="photo"><img src="../images/beach.jpg" width="300" alt="朝の海岸"></p>
  <p class="title">朝の海岸</p>
  <p class="description">メキシコの朝の海岸の風景</p>
</div>

.outside {
  width:320px;
  margin:20px;
  padding: 10px; 
  border:1px solid #ccc; 
  border-radius: 4px;  
}
.photo img {
  margin: 0;
}
.photo, .title {
  text-align: center;
}
.title {
  width: 300px; 
  padding: 5px 0; 
  color: #FFF; 
  background:rgba(0, 0, 0, 0.3);
}

朝の海岸

メキシコの朝の海岸の風景

タイトルと説明文の位置を position:relative を使って変更してみます。

.outside {
  width:320px;
  margin:20px;
  padding: 10px; 
  border:1px solid #ccc; 
  border-radius: 4px;  
  height:220px; /* 追加 */
}
.photo img {
  margin: 0;
}
.photo, .title {
  text-align: center;
}
.title {
  width: 300px; 
  padding: 5px 0; 
  color: #FFF; 
  background:rgba(0, 0, 0, 0.3);
  position:relative;  /* 追加 */
  top: -178px;  /* 追加 */
  left: 0; /* 追加 */
}
.description {
  position:relative;  /* 追加 */
  top: -40px; /* 追加 */
}

朝の海岸

メキシコの朝の海岸の風景

.title に position:relative; top: -178px; （left: 0;）を指定して位置を変更
.description に position:relative; top: -40px; を指定して位置を変更
.outside の高さを指定（タイトルと説明文の要素の元の位置が空白になって残るため）

実際には、次項の絶対配置を使ったレイアウトで行うほうがこのような場合は、効率的というか自然な感じがします。これは、あくまで相対配置がどのようなものかという参考例です。

absolute　絶対配置

ボックスを絶対配置します。
position の値に static 以外の値を指定された最も近い祖先ボックスのパディング辺を基点（包含ブロック）とします。
該当するボックスが存在しない場合は、ルート要素（html 要素）が生成するボックスを基点（初期包含ブロック）とします。
基点からの距離は top, bottom, left, right プロパティで指定します。
絶対配置されたボックスは通常フローから外れます。
隣接する他のボックスは、絶対配置されたボックスが存在しないかのように、通常フローによって配置されます。
絶対配置された要素のマージンは、他のどの要素のマージンとも相殺しません。

<div class="outside">
  <div class="box">
    <p>position:static</p>
  </div>
  <div class="box absolute">
    <p>position:absolute</p>
  </div>
  <div class="box">
    <p>position:static</p>
  </div>
</div>

outside というクラスの div 要素を、絶対配置する要素の起点とするために、相対配置にします。

.outside {
  position:relative;  /* 相対配置：起点とするために指定 */
  width:270px;
  border:1px solid #ddd;   
}
.box {
  margin: 20px;
  width:200px; 
  height: 60px; 
  border:1px solid #93B4C4; 
  background-color:#E3F6FC; 
}
.absolute {
   position: absolute; /* 絶対配置 */
   top: 30px;  /* 基点からの距離 */
   left: 30px;  /* 基点からの距離 */
   margin: 20px; 
   border:1px solid #D49999; 
   background-color:#F9DEDE;
}
p {
  text-align:center; 
  line-height: 60px;
}

position:static

position:absolute

position:static

absolute というクラスの div 要素は、基点とした outside というクラスの div 要素から、top:30px と left:30px の位置に配置されます。この時、絶対配置された要素のマージンは、他のどの要素のマージンとも相殺されないので基点からは合計 50px （margin が 20px）の位置になります。

また、後続する要素は絶対配置されたボックスが存在しないかのように、通常フローによって配置されます。

相対配置の項でスタイル指定した HTML と CSS を絶対配置を使ってスタイリングしてみます。HTML は同じです。

<div class="outside">
  <p class="photo"><img src="../images/beach.jpg" width="300" alt="朝の海岸"></p>
  <p class="title">朝の海岸</p>
  <p class="description">メキシコの朝の海岸の風景</p>
</div>

.outside {
  position:relative;   /* 基点とするために追加 */
  width:320px; 
  margin:20px;
  padding: 10px;
  border:1px solid #ccc; 
  border-radius: 4px;  
}
.photo img {
  margin: 0;
}
.photo, .title {
  text-align: center;
}
.title {
  width: 300px; 
  padding: 5px 0; 
  color: #FFF; 
  background:rgba(0, 0, 0, 0.3);
  position:absolute;  /* 絶対配置 */
  top: 10px;  /* 基点からの距離 */
}

朝の海岸

メキシコの朝の海岸の風景

外側の div 要素（.outside）を絶対配置する要素の起点とするため position:relative; を指定します。
絶対配置された要素に後続する要素は絶対配置されたボックスが存在しないかのように、配置されるため、外側の div 要素（.outside）に高さを指定していません。
また、同様の理由で .description の位置を変更する必要がありません。

fixed　固定配置

ボックスを固定配置します。
absolute と同様の配置方法ですがが、基点はブラウザの表示領域（ウインドウ）になります。
そのため、スクロールしても位置が変化せず、ウィンドウの同じ場所に固定して配置されます。
絶対配置同様、通常フローから外れます。
絶対配置同様、指定したマージンが他の要素のマージンと相殺されません。

固定配置の例

<div class="box">
  <p>position:static 1</p>
</div>
<div class="box">
  <p>position:static 2</p>
</div>
<div class="fixed">
  <p>position:fixed 3</p>
</div>
<div class="box">
  <p>position:static 4</p>
</div>

.box {
  margin: 20px;
  width:200px; 
  height: 100px; 
  border:1px solid #93B4C4; 
  background-color:#E3F6FC; 
}
.fixed {
   position: fixed; /* 固定配置 */
   top: 10px;  /* 基点（ウィンドウ）からの距離 */
   left: 20px;  /* 基点（ウィンドウ）からの距離 */
   width:200px;
   border:1px solid #D49999; 
   background-color:#F9DEDE;
}
p {
  text-align:center; 
  line-height: 60px;
}
.fixed p {
  line-height: 20px;
}

重なり順序（z-index プロパティ）

要素（ボックス）の重なり順序を指定するために、z-index プロパティを利用することができます。

z-index プロパティ: z-index プロパティは、position プロパティで「static」以外の値を持つ要素にしか適用されません。つまり、相対配置、絶対配置、固定配置のいずれかで位置決めされている要素にしか適用されないことになります。

値

auto：そのボックスの重なり順序は親要素（親ボックス）と同じになります。（規定値）
整数：値の大きいボックスが値の小さいボックスよりも常に前面に表示されます。マイナス値も指定可能です。同じ値のボックスは、XHTML 上、後に出現する要素がより前面に表示されます。

以下のような HTML がある場合、z-index プロパティを指定して重なり順が変わることをみてみます。

<div class="zIndexBox">
  <div id="zindex01"></div>
  <div id="zindex02"></div>
  <div id="zindex03"></div>
</div>

.zIndexBox {
  width: 160px;
  height: 160px;
  margin:10px;
  padding:10px;
  border:1px solid #ccc;
  position: relative;  /* 親のボックスを基点に設定 */
}
#zindex01, #zindex02, #zindex03 {  /* 共通の設定 */
  width: 60px;
  height: 60px;
  margin: 20px; 
}
#zindex01 {
  position: relative;  
  border: 1px solid #D93A3D;
  background-color: #F89596; 
}
#zindex02 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px solid #5A78AD;
  background-color: #ACCDF4;  
}
#zindex03 {
  position: absolute;
  top: 50px;
  left: 50px;  
  border: 1px solid  #C4C04E;
  background-color: #F4F5CD;  
}

この場合、z-index プロパティを指定していないので HTML 上、後に出現する要素がより前面に表示されています。

z-index プロパティを指定してみます。

#zindex01 {
  position: relative;
  z-index: 100;  /* z-index を指定 */
  border: 1px solid #D93A3D;
  background-color: #F89596;  
}
#zindex02 {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 50;  /* z-index を指定 */
  border: 1px solid #5A78AD;
  background-color: #ACCDF4;
}
#zindex03 {
  position: absolute;
  top: 50px;
  height: 60px;
  border: 1px solid  #C4C04E;
  background-color: #F4F5CD; 
}
/*z-index プロパティを指定するには、position プロパティが「static」以外である必要があります*/

フロート（float, clear プロパティ）

float プロパティを指定すると、指定したボックスを通常フローから外し、フロート（浮動化）させて、左または右に寄せることができます。以下は「float - CSS | MDN」からの抜粋です。

float プロパティは、要素を通常の流し込み処理（通常フロー）から外して、その包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこむように定義します。浮動要素 (floating element) とは、 float の計算値が none 以外の要素です。

float プロパティを指定する要素（ボックス）は何らかのかたちで幅を指定しておく必要があります。
固有の寸法を持ち、特定の内容に置き換えられる要素（置換要素：img 要素等）以外の適用には、同時に width プロパティで幅を指定します。
具体的には、width プロパティで幅を指定するか、それぞれの要素の属性（size や cols など）の値を利用します。
幅が指定されていない場合、ボックスの幅は「0」として扱われます。
フロートされたボックスのマージンは、隣接するボックスのマージンと相殺されません。
フロートは、後に続く他のブロックレベル要素のボックスについても有効であり、回り込みは解除されません。解除するには clear プロパティを使用します。
インラインボックスはフロートさせるとブロックボックスになるため、width を指定できるようになります。

float プロパティの値

left：その要素について、左にフロートされたブロックボックスを生成します。後に続く内容は、そのブロックボックスの上辺から右側に回り込みます。
right：その要素について、右にフロートされたブロックボックスを生成します。後に続く内容は、そのブロックボックスの上辺から左側に回り込みます。
none：その要素のボックスをフロートしません（規定値）。

フロートによる回り込みを解除するために、clear プロパティが利用できます。但し、clear プロパティはブロックレベル要素にのみ適用できます。

clear プロパティの値

none：回り込みは解除されません（規定値）。
left：左回り込み解除します。（左にフロートされたボックスよりも下に、新たなボックスを生成して表示）
right：右回り込み解除します。（右にフロートされたボックスよりも下に、新たなボックスを生成して表示）
both：左右の回り込み解除します。（左右にフロートされたボックスよりも下に、新たなボックスを生成して表示）

画像や見出し等（要素）を寄せる

画像や見出しをフロートを指定して、寄せてみます。

画像を寄せる

以下はフロートを指定していない状態です。

<div class="float_sample">
  <p><img src="../images/flower.jpg" alt="花の写真"></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, aperiam et veritatis officiis beatae iste earum totam dolores eaque enim voluptate at sed</p>
</div>

.float_sample {
  margin: 30px 10px;
  padding: 10px 20px;
  border: 1px solid #ccc;
  width: 320px;
}

花の写真

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, aperiam et veritatis officiis beatae iste earum totam dolores eaque enim voluptate at sed

img 要素にクラス「floatLeft」を追加して、フロートを適用してみます。

<div class="float_sample">
<p><img class="floatLeft" src="../images/flower.jpg" alt="花の写真"></p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>

.floatLeft {
  float: left; /* 左に寄せる指定 */
  width: 150px; /* 幅を指定（img 要素などの置換要素の場合は必須ではない） */
  margin: 1em 1.5em 1em 0; /* 適度な余白を入れるためマージンを指定 */
}

画像が左寄せさ、後続のテキストが回りこみます。テキストと画像の間の余白はマージンで指定します。

花の写真

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, aperiam et veritatis officiis beatae iste earum totam dolores eaque enim voluptate at sed

以下のような場合は、どうでしょうか。

<div>
  <p><img class="floatLeft" src="../images/css/flower.jpg" alt="花の写真"></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, aperiam et veritatis officiis beatae iste earum</p>
  <p><img class="floatLeft" src="../images/css/flower2.jpg" alt="花の写真2"></p>
  <p>Dolorum, praesentium, reprehenderit, id labore excepturi dolorem provident alias vel animi at dolores eius corporis adipisci asperiores ut eveniet itaque.</p>
</div>

フロートは、後に続く他のブロックレベル要素のボックスについても有効であり、回り込みは解除されません。

花の写真

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, aperiam et veritatis officiis beatae iste earum

花の写真2

Dolorum, praesentium, reprehenderit, id labore excepturi dolorem provident alias vel animi at dolores eius corporis adipisci asperiores ut eveniet itaque.

フロートを解除するには clear プロパティを使用します。この例では、clear というクラスを作成して、それを後続の p 要素に適用してみます。

.clear {
  clear: both;
}

<p><img class="floatLeft" src="../images/css/flower.jpg" alt="花の写真"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit....</p>
<p class="clear"><img class="floatLeft" src="../images/css/flower2.jpg" alt="花の写真2"></p>
<p>Dolorum, praesentium, reprehenderit, id labore excepturi ...</p>

花の写真

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, aperiam et veritatis officiis beatae iste earum

花の写真2

Dolorum, praesentium, reprehenderit, id labore excepturi dolorem provident alias vel animi at dolores eius corporis adipisci asperiores ut eveniet itaque.

見出しを寄せる

見出しをフロートさせて、本文の開始する行と水平に配置させてレイアウトする例です。

HTML

<h3 class="float_index">Float Property</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, aperiam et veritatis officiis beatae iste earum totam dolores eaque enim voluptate at sed</p>

CSS

.float_index {
  float: left;  /* 左寄せ */
  width: 10em;  /* 幅を指定 */
  /*width: auto;  幅を固定させたくない場合はこれでもOKかも。  */
  margin: 0 1em 0 .5em;
  border-bottom: 6px solid #ddd;
  border-left: 8px solid #ddd;
  padding: 0 0 0 5px;
  color: #901808;
  font-weight: normal;
  text-transform: uppercase;
}

以下のような表示になります。

Float Property

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, aperiam et veritatis officiis beatae iste earum totam dolores eaque enim voluptate at sed

フロートと周囲のボックスの関係

div.outsidebox 内に４つの div 要素 box-A, box-B, box-C, box-D を記述し、各要素に 20px のマージンを指定します。

<div class="outsidebox">
  <div class="box box-A">
    <p>box-A ...</p>
  </div>
  <div class="box box-B">
    <p>box-B ...</p>
  </div>
  <div class="box box-C">
    <p>box-C ...</p>
  </div>
  <div class="box box-D">
    <p>box-D ...</p>
  </div>
</div>

それぞれのボックスは識別しやすいように背景色やボーダーカラーを指定します。（まだ、この時点ではフロートを指定していません）

.outsidebox {
  width: 80%;
  margin: 30px 0;
  border: 1px solid #ccc;
}
.box {
  margin: 20px; 
}
.box-A {
  border:1px solid #93B4C4; 
  background-color:#E3F6FC;
}
.box-B {
  border:1px solid #D78283; 
  background-color: #F7D0D1;
}
.box-C {
  border:1px solid #DFCE38; 
  background-color: #F5F7CA;
}
.box-D {
  border:1px solid #58B16A;;
  background-color: #D5F7CE;
}
.box p {
  padding: 10px 0 0 1em;
  color: #999;
}

各ボックスは通常フローの中にあるので、垂直方向に上から下へと配置されます。

ボックス間の垂直方向のマージンは相殺され、それぞれのボックスの余白は 20px になっています。

box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A ....

box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B ....

box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C ....

box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D ....

box-B に width: 50% で幅を指定して float: left を指定してフロートさせてみます。

.box-B {
  float: left;
  width: 50%;
  border:1px solid #D78283; 
  background-color: #F7D0D1; 
}

box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A....

float: left box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B box-B ....

box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C ....

box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D....

box-B は通常フローから外れてその左マージン辺を、包含ブロックである div.outsidebox の左辺まで横に移動します。
後続するボックス box-C、box-D は、フロートした box-B が存在しないかのように通常フローによって配置され、フロートする box-B の裏へ重なります。
このとき、フロートするボックスの横に位置する行ボックス（box-C のテキストと box-D のテキストの一部）は、フロートする領域を確保するために幅が調整されます。
また、フロートするボックスのマージンは相殺されないので、box-A と box-B の間のマージンはお互いのマージンの合計である 40px の余白が空きます。

フロートの解除（clear プロパティ）

float プロパティによって許可された流し込み（回り込み）を解除するには clear プロパティを使用します。

clear プロパティーはブロックレベル要素に指定します。

box-D に clear プロパティを指定してみます。

.box-D {
  clear: both;
  border:1px solid #58B16A;;
  background-color: #D5F7CE;
}

box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A....

box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C ....

クリアランス

clear: both box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D....

clear プロパティで流し込みの解除を指定したボックスは、上方マージン、それでも足りない場合はクリアランスと呼ばれる特殊な隙間（box-C と box-D の間の空間）を広げ、フロートしたボックスの下方に位置するように調整されます。

重なったブロックにマージンを指定

フロートしたボックスに後続する通常の（フロートしない）ボックスは、フロートしたボックスの背面に隠れるように重なります。

この重なったブロックボックスにマージンを指定し、フロートしたボックスと重ならないように余白を取ることで、列を分割したレイアウトを作ることができます。

前述の例の場合、 box-C がフロートしたボックス box-B の背面に隠れるように重なているので、box-C に box-B と重ならないように必要な左マージンを指定してみます。（マージンの幅は box-B の幅 50% では、ボーダーやマージン部分があるので不十分です。）

また、フロートした box-B は box-A とのマージンが相殺されませんが、box-C は box-A とのマージンが相殺されるため、マージンを調整して、横に並ぶようにしてみます。

.box-C {
  margin-left: 60%;  /* 左マージンを指定 */
  margin-top: 40px;  /* マージントップを調整 */
  border:1px solid #DFCE38; 
  background-color: #F5F7CA;
}

box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A....

margin-left: 60% box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C ....

clear: both box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D....

重なったブロックにマージンを指定する代わりに、後続のボックスの幅を調整して、そのボックスもフロートさせることで似たようなレイアウトを作成することもできます。

それぞれのボックスの幅は、マージンやボーダーの値を元に算出します（ここではかない大雑把に指定していますが）。

以下の例では box-B と box-C に親要素のボックスに納まるように幅を指定して、それぞれをフロートさせています。この場合、 box-C には float: left を指定しても OK です。

.box-B {
  float: left;
  width: 43%;
  margin-right: 0;
  border:1px solid #D78283; 
  background-color: #F7D0D1; 
}

.box-C {
  float: right;
  width: 43%;
  border:1px solid #DFCE38; 
  background-color: #F5F7CA;
}

box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A box-A....

float: right box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C box-C ....

clear: both box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D box-D....

複数フロートの横並び

ボックスがフロートするとき、先行するフロートしたボックスが存在する場合、それぞれのマージン辺が重ならないように横に並んで配置されます。

この時、フロートするボックスの左右のマージン辺は包含ブロックの左右の内容辺を超えてあふれることは禁止されています。

そのため包含ブロックの左右の内容辺を超える場合は、先行するフロートしたボックスの下に配置され、float プロパティの指定により左右いずれかに寄せられることになります。

<div class="outsidebox">
  <div class="float_box box-1">
    <p>box-1</p>
  </div>
  <div class="float_box box-2">
    <p>box-2</p>
  </div>
  <div class="float_box box-3">
    <p>box-3</p>
  </div>
  <div class="float_box box-4">
    <p>box-4</p>
  </div>
  <p class="clear">clear するためのブロックレベル要素</p>
</div>

各ボックスには .float_box というクラスを付与して、マージン、フロート、幅と高さの指定をします。

また、フロートを解除するために、最後に p 要素を配置して clear を指定します。（配置しない場合どうなるかを確認してみてください。）

.outsidebox {
  width: 80%;
  margin: 30px 0;
  border: 1px solid #ccc;
}
.float_box {
  margin: 20px; 
  float: left;
  width: 80px;
  height: 80px;
}
.float_box p {
  text-align: center;
  line-height: 80px;
  color: #999;
}
.box-1 {
  border:1px solid #93B4C4; 
  background-color:#E3F6FC;
}
.box-2 {
  border:1px solid #D78283; 
  background-color: #F7D0D1;
}
.box-3 {
  border:1px solid #DFCE38; 
  background-color: #F5F7CA;
}
.box-4 {
  border:1px solid #58B16A;;
  background-color: #D5F7CE;
}

p.clear {
  clear: both;
  margin: 20px; 
  color: #999; 
  background-color: #F2E0F9;
}

十分な幅がある場合、それぞれのボックスはそれぞれのマージン辺が重ならないように横に並んで配置されます。（左右のマージンは相殺されないので、それぞれ 40px (20px + 20px) の間が空いています。

複数フロート 1

box-1

box-2

box-3

box-4

clear するためのブロックレベル要素

フロートするボックスの左右のマージン辺が包含ブロックの左右の内容辺を超えた場合は下に移動します。

以下のように包含ブロック（div.outsidebox）の幅を小さくすると、並び切らないボックスは下に移動してしまいます。

.outsidebox {
  width: 60%;
  margin: 30px 0;
  border: 1px solid #ccc;
}

複数フロート 2

box-1

box-2

box-3

box-4

clear するためのブロックレベル要素

ページレイアウトではこの現象を「カラム落ち」と呼び、閲覧者にはレイアウトの崩れと認識されることがあります。

これを防ぐためには、親ボックスに width を指定して固定させ、フロートするボックスが十分に並べる幅を確保する必要があります。

複数フロートの横並びのレイアウト方法

フロートさせる方向によって、XHTML 文書構造を順に左から並べることも、右から並べることもできる
width プロパティの値をパーセントで指定することで、可変幅にも対応できる
但し、可変幅の場合は、その合計が 99% 以内に収まるようにする（IE6 では、100% になるとカラム落ちが発生するため）
また、IE6 では各カラムの内容領域の幅をはみ出す長い単語や画像などを配置した場合にもカラム落ちが発生する

フロートしたボックスを含む親ボックスの高さの算出

ボックスサイズの算出時、フロートした子のボックスは計算に含まれません。

別の言い方をすると、親要素の高さはフロートされた子要素の高さを含めません。

前述の例では、そのため最後に p 要素を配置して clear を指定しました。それでは、最後に配置した p 要素の clear の指定を外してみるとどうなるでしょうか。

<div class="outsidebox">
  <div class="float_box box-1">
    <p>box-1</p>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
</div>

.outsidebox {
  width: 60%;
  margin: 30px 0;
  border: 1px solid #ccc;
}
.float_box {
  margin: 20px; 
  float: left;
  width: 80px;
  height: 80px;
}
.box-1 {
  border:1px solid #93B4C4; 
  background-color:#E3F6FC;
}
p {
  margin: 20px; 
  color: #999; 
  background-color: #F2E0F9;
}

以下のようなことが発生します。

div.outsidebox の高さの算出には通常フローにある p 要素が使用され div.box-1 は無視される
高さのある div.box-1 は div.outsidebox を突き抜ける
その影響を受けて p 要素は div.box-1 の横へ流し込まれ、行ボックスがフロートする領域を確保するために幅が調整される

box-1

Lorem ipsum dolor sit amet

子のボックスが全てフロートした場合は親ボックスの算出に使用するボックスがなくなり、親ボックスの内容領域の高さは「0」になります。

以下のように子のボックスを全てフロートさせ、clear するためのブロックレベル要素を削除してみます。

<div class="outsidebox">
  <div class="float_box box-1">
    <p>box-1</p>
  </div>
  <div class="float_box box-2">
    <p>box-2</p>
  </div>
  <div class="float_box box-3">
    <p>box-3</p>
  </div>
  <div class="float_box box-4">
    <p>box-4</p>
  </div>
</div>

.outsidebox {
  width: 80%;
  margin: 30px 0;
  border: 1px solid #ccc;
}
.float_box {
  margin: 20px; 
  float: left; /* 子要素のボックスを全てフロート */
  width: 80px;
  height: 80px;
}
.box-1 {
  border:1px solid #93B4C4; 
  background-color:#E3F6FC;
}
.box-2 {
  border:1px solid #D78283; 
  background-color: #F7D0D1;
}
.box-3 {
  border:1px solid #DFCE38; 
  background-color: #F5F7CA;
}
.box-4 {
  border:1px solid #58B16A;;
  background-color: #D5F7CE;
}

親ボックスの内容領域の高さは「0」になり、線のように表示されています。

box-1

box-2

box-3

box-4

親ボックスの高さを算出させる方法

親ボックスの高さを算出させるには、以下のような方法があります。

後続の要素で float を clear する

フロートした子のボックスを包むように表示させる最もシンプルな方法は、float を指定する要素の後続の要素に clear プロパティを指定し、流し込みを解除させることです。

<div class="outsidebox">
  <div class="float_box box-1">
    <p>box-1</p>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
</div>

.outsidebox {
  width: 60%;
  margin: 30px 0;
  border: 1px solid #ccc;
}
.float_box {
  margin: 20px; 
  float: left;
  width: 80px;
  height: 80px;
}
.box-1 {
  border:1px solid #93B4C4; 
  background-color:#E3F6FC;
}
p {
  clear: both; /* 後続の要素に clear プロパティを指定 */
  margin: 20px; 
  color: #999; 
  background-color: #F2E0F9;
}

clear の指定されたボックス（この例の場合は p 要素）は、フロートしたボックスの下方に位置するように調整されます。

これが親ボックスの高さの算出に影響を与え、結果的に親ボックスはフロートする子のボックスを包み込むようになります。

box-1

Lorem ipsum dolor sit amet

clearfix でフロートを解除する

clearfix という手法を使うことで、フロートを解除することができます。

clearfix には様々なコードがありますが、IE5 や Netscape などのほとんど使われなくなった古いブラウザを切り捨てても問題がない場合は以下のコード（micro clearfix）が利用できます。

 /* micro clearfix */
.clearfix:before, 
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

上記のように clearfix というクラスを作成しておき、親要素にこのクラスを指定します。

<div class="outsidebox clearfix"><!-- clearfix のクラスを追加 -->
  <div class="float_box box-1">
    <p>box-1</p>
  </div>
  <div class="float_box box-2">
    <p>box-2</p>
  </div>
  <div class="float_box box-3">
    <p>box-3</p>
  </div>
  <div class="float_box box-4">
    <p>box-4</p>
  </div>
</div>

これにより、以下のように後続の要素で float を clear しなくとも高さが算出され、フロートボックスを内包してくれるようにまります。

box-1

box-2

box-3

box-4

オリジナルの clearfix は以下のようなコードです。こちらでも問題なくフロートを解除できます。使い方は micro clearfix と同じで、高さを算出させたい親要素にこのクラスを指定します。

 /* original clearfix */
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}

.clearfix {
  display: inline-block;
} 

.clearfix {
  display: block;
}

clearfix は、 :after 疑似要素と content プロパティーを使ってブロックボックスを生成し、それに clear: both を指定することでフロートを解除する方法です（その他、IE の仕様やバグを利用したものです）。

以下のサイトに詳しく解説されています。

floatを解除する手法のclearfix と次世代のレイアウトの話

最近のコンパクトな clearfix

IE6・IE7 を考慮する必要がなければ、以下のようなコンパクトな clearfix でも同じ効果が得られます。

.clearfix:after {
  display: table;
  content: "";
  clear: both;
}

以下のようにフロートするボックス（div 要素）が内部にある場合、外側の親要素に clearfix を指定します。

<div class="outsidebox">
  <div class="float_box box-1">
    <p>box-1</p>
  </div>
  <div class="float_box box-2">
    <p>box-2</p>
  </div>
  <div class="float_box box-3">
    <p>box-3</p>
  </div>
  <div class="float_box box-4">
    <p>box-4</p>
  </div>
</div>

.outsidebox::after {
  display: table;
  content: "";
  clear: both;
}

上記の例では、クラスを指定するのではなく、要素（のクラス）に clearfix を指定しています。

また、この例では、::after のように擬似要素にはコロンを２つ使用しています（CSS3 の仕様。但し、IE8 以下では未対応）。

box-1

box-2

box-3

box-4

overflow:hidden でフロートを解除

この方法は、overflow プロパティで visible キーワード以外（hidden）を指定すると、float プロパティの指定された高さも認識してくれるので、親のボックスの高さが算出されるようになることを利用しています。

zoom: 1; は IE6/7 では、overflow プロパティが効かないのでそのための指定です。

.parentbox {
  overflow: hidden; /* 親のボックス高さを算出 */
  zoom: 1; /* 親のボックス高さを算出　IE6/7 対策 */
}

同じ HTML 構造で試してみます。

<div class="outsidebox">
  <div class="float_box box-1">
    <p>box-1</p>
  </div>
  <div class="float_box box-2">
    <p>box-2</p>
  </div>
  <div class="float_box box-3">
    <p>box-3</p>
  </div>
  <div class="float_box box-4">
    <p>box-4</p>
  </div>
</div>

.outsidebox {
  overflow: hidden; /* 親のボックス高さを算出 */
  zoom: 1; /* 親のボックス高さを算出　IE6/7 対策 */
  width: 80%;
  margin: 30px 0;
  border: 1px solid #ccc;
}
.float_box {
  margin: 20px; 
  float: left; /* 子要素のボックスを全てフロート */
  width: 80px;
  height: 80px;
}
.box-1 {
  border:1px solid #93B4C4; 
  background-color:#E3F6FC;
}
.box-2 {
  border:1px solid #D78283; 
  background-color: #F7D0D1;
}
.box-3 {
  border:1px solid #DFCE38; 
  background-color: #F5F7CA;
}
.box-4 {
  border:1px solid #58B16A;;
  background-color: #D5F7CE;
}

box-1

box-2

box-3

box-4

但し、overflow: hidden は、切り抜き用（はみ出す部分を非表示にする）プロパティーです。そのため、ボックスの端ギリギリの要素に box-shadow でドロップシャドウをかけてあった場合、ドロップシャドウが隠されてしまうなど表示上問題が発生する可能性もなくはないので、使用には注意も必要です。

フロートで並べた li 要素の中央寄せ

li 要素をフロートさせた場合、それらを中央寄せするには、「text-align: center;」や「margin: 0 auto;」ではうまくいきません。

以下のような HTML の場合、li 要素をフロートさせてそれらを中央寄せさせたいと思って、ul 要素に「margin: 0 auto;」を指定しても中央寄せはできません。

<div class="fl_li">
  <ul>
      <li>gold</li>
      <li>silver</li>
      <li>copper</li>
  </ul>
</div>

.fl_li ul {
  list-style-type: none;
  margin: 0 auto;
}
 
.fl_li ul li {
  float: left;
  padding: 0 10px;
}

gold
silver
copper

以下のようにすることで、中央寄せすることができます。

ul 要素、li 要素に「position: relative;」と「float: left;」を指定
ul 要素を右に 50% 移動（left: 50%;）
li 要素を左に 50% 移動（left: -50%;）
親要素（.materials）への指定（overflow: hidden;）は横スクロールバーが出ないようにするため
IEには「position: relative;」が必要

.materials {
  position: relative;
  overflow: hidden;
}
 
.materials ul {
  position: relative;
  left: 50%;
  float: left;
  list-style-type: none;
}
 
.materials ul li {
  position: relative;
  left: -50%;
  float: left;
  padding: 0 10px;
}

gold
silver
copper

display、position、float の関係

ボックスの生成とレイアウトに関する3つのプロパティ（'display'、'position'、'float'）は次の様に相互作用します。

display の値が none であれば、User Agent は position と float を無視します。→ 結局要素はボックスを生成しません。
display の値が none 以外の場合で、 position の値が absolute または fixed であれば、
display は block に、 float は none に（強制的に）設定されます。
ボックスの位置は、top、right、bottom、left という4つのプロパティと包含ブロックによって決定されます。
上記以外の場合、 float の値が none でなければ（ left または right であれば）、 display が block に設定されてボックスは浮動します。
上記のいずれでもない場合、 display は指定された通りの値になります。

http://www.y-adagio.com/public/standards/tr_css2/visuren.html#q24 より

CSSレイアウトを学ぶ

背景（background）関連

要素の背景には、色と画像の両方を指定することができます。

背景は要素が生成するボックスの内容領域、パディング領域、ボーダー領域に適用されます。マージン領域は透過され、親要素の背景が透けて見えます（マージンは常に透明）。

ボーダーの色とスタイルはボーダーのプロパティで指定しますが、実際にはボーダーの背後には背景色や背景画像が存在します。

ルート要素（html 要素）が生成するボックスの背景はブラウザの表示領域全体に適用されて、例外的にマージン領域ににも背景が適用されます。CSS2 の仕様では、html 要素ではなく、body 要素に背景を指定することが推奨されています。

関連ページ：CSS3 で追加された背景関連プロパティ

background-color

background-color は、要素の背景色を設定するプロパティです。初期値は transparent で、透過され親要素の背景が透けて見えます。要素の背景色をキーワードまたはカラーコードで指定します。

body {  
  background-color: #EFEFEF;  
}

以下は div 要素に背景色と破線（dashed）のボーダーを指定した例です。ボーダーの背後に背景色が確認できます。

.bgbox1 {
  background-color: yellow;
  width: 90%;
  margin: 30px 0;
  border: 3px dashed #999;
  height: 100px;
}

background-image

background-image は要素の背景画像を設定するプロパティです。初期値は none で背景画像を指定しません。値は url() 関数で指定します。絶対パス、相対パスのどちらでも指定することができますが相対パスで URL を指定する場合には、HTML 文書からのパスではなく、CSS ファイルからのパスを指定する必要があります。

また、背景画像は背景色の上にレンダリング（表示）されます。（背景色を設定すると画像の透明部分で背景色が表示されます）

background-repeat などのプロパティを使って背景画像の表示方法を指定することができます。

body {  
  background-image: url(image/sample.gif);  
}

以下は div 要素に背景画像（300 x 200 ピクセル）と破線（dashed）のボーダーを指定した例です。ボーダーの背後に背景画像が確認できます。また、画像が繰り返し表示されているのがわかります（background-repeat プロパティで繰り返しを制御することができます）。

.bgbox2 {
  background-image: url(../images/sample.jpg);
  width: 90%;
  margin: 30px 0;
  border: 5px dashed yellow;
  height: 200px;
}

background-repeat

background-repeat は、背景画像の繰り返しを指定するプロパティです。初期値は repeat です。


値	意味
repeat	画像は水平方向と垂直方向の両方に繰り返されます。領域からはみ出る部分は切り取られます。（初期値）
repeat-x	画像は水平方向にのみ繰り返されます。
repeat-y	画像は垂直方向にのみ繰り返さます。
no-repeat	画像は繰り返されません。（１つのみ表示）
space	（*CSS3）背景画像は繰り返して表示され、領域からはみ出ないように、間隔が調整されて配置されます。
round	（*CSS3）背景画像は繰り返して表示されされ、領域内に収まるように、自動的に拡大・縮小されます。

以下は背景画像に 100 x 80 ピクセルの画像を指定した例です。

background-repeat: repeat（デフォルト）

.bgbox3 {
  background-image: url(../images/sample.jpg);
  background-repeat: repeat;
  background-color: #B3DFF4;
  width: 60%;
  height: 200px;
}

background-repeat: repeat-x

.bgbox4 {
  background-image: url(../images/sample.jpg);
  background-repeat: repeat-x;
  background-color: #B3DFF4;
  width: 60%;
  height: 200px;
  border: 1px solid #CCC;
}

background-repeat: repeat-y

.bgbox5 {
  background-image: url(../images/sample.jpg);
  background-repeat: repeat-y;
  background-color: #B3DFF4;
  width: 60%;
  height: 200px;
  border: 1px solid #CCC;
}

background-repeat: no-repeat

.bgbox6 {
  background-image: url(../images/sample.jpg);
  background-repeat: no-repeat;
  background-color: #B3DFF4;
  width: 60%;
  height: 200px;
  border: 1px solid #CCC;
}

background-repeat: space (CSS3)

.bgbox7{
  background-image: url(../images/sample.jpg);
  background-repeat: space;
  background-color: #B3DFF4;
  width: 60%;
  height: 200px;
  border: 1px solid #CCC;
}

background-repeat: round (CSS3)

.bgbox8{
  background-image: url(../images/sample.jpg);
  background-repeat: round;
  background-color: #B3DFF4;
  width: 60%;
  height: 200px;
  border: 1px solid #CCC;
}

background-attachment

background-attachment は、ページをスクロールしたときの背景画像の表示方法を指定するプロパティです。

以下の値を設定することができます。


値	意味
scroll	背景画像も内容と一緒にスクロールします。（初期値）
fixed	背景画像は、その要素に対して固定されるのではなく、ブラウザの表示領域に対して固定されてスクロールしません。
local	（*CSS3）背景画像は指定された要素の領域に固定されます。その領域にスクロール機能がある場合は、内容と一緒に背景画像もスクロールします。

以下はページ全体に対しての設定（fixed）の例です。

body{
  width:800px;
  max-width: 800px;
  background-color:#ddd;
  background-position: top center;
  margin: auto;
  background-image: url(../images/sample.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color: #fff;
}

background-attachment（ページ全体）のサンプル（scroll, local は同じ）

以下は上記サンプルを iframe で表示したものです。

以下は要素内スクロールの場合の例です。要素内スクロールの場合は fixed, scroll は同じような挙動になりますが、ページ全体をスクロールすると違いがあります。

<div class="bgbox_wrapper">
  <p>scroll</p>
  <div class="bgbox9">
    <h3>background-attachment:scroll</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
  <p>fixed</p>
  <div class="bgbox10">
    <h3>background-attachment:fixed</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>  
  <p>local</p>
  <div class="bgbox11">
    <h3>background-attachment:local</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</div>

.bgbox9 {
  background-attachment: scroll ;
}
.bgbox10 {
  background-attachment: fixed ;
}
.bgbox11 {
  background-attachment: local ;
}
.bgbox9, .bgbox10, .bgbox11 {
  background-image: url(../images/sample.jpg);
  height: 250px ;
  border: 1px solid #ccc ;
  margin: 10px 25px ;
  overflow: scroll ;
}

scroll

background-attachment:scroll

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, asperiores, rem, error facere repellendus at suscipit illo quia adipisci doloribus eius quibusdam eos explicabo veniam voluptates commodi ipsa repudiandae quas?

Iste, minima illum sit corporis debitis rem ullam facere sunt repellendus! Hic, quam, ut iste numquam possimus blanditiis odit nihil officiis odio modi molestias architecto obcaecati adipisci ratione cupiditate voluptate!

Ab, eveniet quaerat officia deleniti voluptas necessitatibus est maiores consectetur fugiat nam adipisci tenetur nobis veritatis voluptatibus sapiente molestiae numquam dolor rem velit commodi et iure laboriosam officiis. Saepe, magni?

Porro, totam, velit, rerum quisquam consectetur ea facilis explicabo dolore modi nam ipsa molestias error laborum nesciunt quod atque accusamus? Quod, voluptate, ratione impedit suscipit corporis provident soluta qui obcaecati!

Iure, cumque, est dolore quam fuga doloribus sapiente possimus soluta non perferendis expedita atque porro! Minus, odit, nihil voluptates accusamus praesentium id voluptatem esse at ipsa nobis illo reiciendis et.

Dolorum, tempora, repellendus, ipsa enim fuga quidem possimus non nobis quis eaque odio libero nemo quos numquam tenetur ad soluta unde expedita animi error nisi doloremque repellat sint aliquid tempore.

fixed

background-attachment:fixed

local

background-attachment:local

background-position

background-position は、背景画像を表示する（水平・垂直）位置を指定するプロパティです。初期値は 0% 0% です。

値は1つ、または半角スペースで区切って2つ指定できます。パディング領域の左上端を基準に、基本的に最初の値が水平方向の位置を、後の値が垂直方向の位置指定になります（top や left などのキーワードで記述した場合は逆になる事もあります）。また、キーワードの指定が1つの場合、省略した値は center になります。負の値も指定可能です。


値	意味
%値	パディング領域の左上端を基準に、背景画像の左上端の位置をパーセンテージで指定します。「10% 50%」を指定すると領域の左端から10%、上端から50%の位置に配置されます。
数値＋単位	パディング領域の左上端を基準に、背景画像の左上端の位置を単位付きの数値で指定します。「0.7em 20px」を指定すると左端から0.7em、上から20pxに配置されます。
top	垂直0%と同じ
right	水平100%と同じ
bottom	垂直100%と同じ
left	水平0%と同じ
center	水平50%、垂直50%と同じ

以下は、background-position: 0%; を指定した例です。

.bgbox12 {
  background-image: url(../images/sample.jpg);
  background-repeat: no-repeat;
  background-position: 0%;
  /* 以下でも同じこと
  background-position: left;
  background-position: 0% 50%;
  background-position: 0% center;
  background-position: left center;
  */
  width: 300px;
  height: 200px;
  border: 1px solid #CCC;
}

以下は、background-position: right bottom; を指定した例です。

.bgbox13 {
  background-image: url(../images/sample.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
  /* 以下でも同じこと
  background-position: 100% 100%;
  */
  width: 300px;
  margin: 0 0 30px;
  height: 200px;
  border: 5px dotted #CCC;
}

以下は、background-position: 50% 50%; を指定した例です。

.bgbox14 {
  background-image: url(../images/css/bgimg02.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
   /* 以下でも同じこと
   background-position: 50% ;
   background-position: center;
   background-position: center center;
  */
  width: 300px;
  margin: 0 0 30px;
  height: 200px;
  border: 5px dotted #CCC;
}

以下は、ボーダーを基準に配置するため、ボーダーの幅分を調整して background-position: -5px -5px; を指定した例です。

.bgbox15 {
  background-image: url(../images/css/bgimg02.jpg);
  background-repeat: no-repeat;
  background-position: -5px -5px;
  width: 300px;
  margin: 0 0 30px;
  height: 200px;
  border: 5px dashed #CCC;
}

background

background は、背景関連のプロパティをまとめて指定するショートハンドプロパティです。

指定できる値は各プロパティと同じです。それぞれの値は半角スペースで区切って指定し、任意の順序で指定できます。

.bgbox16 {
  background:url(../images/sample.jpg) no-repeat center #FBCACA;
  width: 80%;
  margin: 0 0 30px;
  height: 300px;
  border: 1px solid #CCC;
}

display: table

display:table を指定することで、table 要素以外の要素にもテーブルレイアウトを適用することができます。つまり、<table> を使わずに、table タグと同様のスタイルを利用することができます。（IE7 以下は対応していません）

<table> 内でテーブルを構成するタグには以下のようなものがありますが、それぞれのタグごとに標準で適用される display の値が定義されています。

HTMLタグ	displayの値	構成されるボックス
<table>	table	テーブルボックス
<tr>	table-row	テーブルの行
<td> <th>	table-cell	テーブルのセル
<tbody>	table-row-group	行のグループ（ボディ）
<thead>	table-header-group	行のグループ（ヘッダー）
<tfoot>	table-footer-group	行のグループ（フッター）
<colgroup>	table-column-group	列のグループ
<col>	table-column	グループに属する列
<caption>	table-caption	テーブルのキャプション

以下のテーブルと同じような表示になるようにスタイルを指定する例を２つ作成してみます。

<table>
  <tr>
    <td>displayの値</td>
    <td>意味</td>
  </tr>
  <tr>
    <td>table</td>
    <td>tabl e要素のような表示にする</td>
  </tr>
  <tr>
    <td>table-row</td>
    <td>tr 要素のような表示にする</td>
  </tr>
  <tr>
    <td>table-cell</td>
    <td>td 要素のような表示にする</td>
  </tr>
</table>

1つ目は div 要素と p 要素でマークアップする例です。

<div class="disp_table">
  <div class="table_row">
    <p class="table_cell head">display の値</p>
    <p class="table_cell head">意味</p>
  </div>
  <div class="table_row">
    <p class="table_cell">table</p>
    <p class="table_cell">table 要素のような表示にする</p>
  </div>
  <div class="table_row">
    <p class="table_cell">table-row</p>
    <p class="table_cell">tr 要素のような表示にする</p>
  </div>
  <div class="table_row">
    <p class="table_cell">table-cell</p>
    <p class="table_cell">td 要素のような表示にする</p>
  </div>
</div>

.disp_table {
  display: table;
  border:  2px solid #CCC;
  border-spacing: 2px;
  color: #FFF;
  padding: 0;
}
.table_row {
  display: table-row;
}
.table_cell {
  display: table-cell;
  padding:  8px;
  background: #739074;
}
.head {
  background: #333;
}

クラスを使って外側の div 要素に display:table を、内側の div 要素に display:table-row を、各 p 要素に display:table-cell を指定してテーブルのような見栄えにしています。

各セルの区切りは、border-spacing: 2px と各セルの背景色を利用しています。また、各セルにはパディングを指定しています。

※border-spacing プロパティは、値が１つの場合は上下左右のスペースを、値が２つの場合は1つ目の値が左右のスペース、2つ目の値が上下のスペースを指定します。

display の値

意味

table

table 要素のような表示にする

table-row

tr 要素のような表示にする

table-cell

td 要素のような表示にする

クラスの指定は各要素にクラスを指定するのではなく、.disp_table div {display: table-row;} などいろいろな方法があると思います。

以下は同じ構造ですが、クラスの指定の方法を変更し、スタイルも border-collapse:collapse を指定し、各セルにボーダーを指定する例です。

display:table を指定した親要素に border-collapse や border-spacing を使ってセルの間隔を設定します。

<div class="disp_table2">
  <div>
    <p>display の値</p>
    <p>意味</p>
  </div>
  <div>
    <p>table</p>
    <p>table 要素のような表示にする</p>
  </div>
  <div>
    <p>table-row</p>
    <p>tr 要素のような表示にする</p>
  </div>
  <div>
    <p>table-cell</p>
    <p>td 要素のような表示にする</p>
  </div>
</div>
<style>

.disp_table2 {
  display: table;
  border-collapse: collapse;
  padding: 0;
  border: 2px solid #999;
}
.disp_table2 > div {
  display: table-row;
}
.disp_table2 > div > p {
  display: table-cell;
  border: 2px solid #999;
  padding: 8px;
}
.disp_table2 > div:first-child > p {
  background: #666;
  color: #FFF;
}

display の値

意味

table

table 要素のような表示にする

table-row

tr 要素のような表示にする

table-cell

td 要素のような表示にする

２つ目は ul, li 要素と p 要素でマークアップする例です。

<ul class="disp_table">
  <li>
    <p>display の値</p>
    <p>意味</p>
  </li>
  <li>
    <p>table</p>
    <p>table 要素のような表示にする</p>
  </li>
  <li>
    <p>table-cell</p>
    <p>td 要素のような表示にする</p>
  </li>
</ul>

こちらも同様にクラスを使って display:table、display:table-row、display table-cell を指定しています。

.disp_table {
  display: table;
  border:  2px solid #CCC;
  border-spacing: 2px;
  color: #FFF;
  padding: 0; /* ul 要素のデフォルトのパディングを0に　*/
}
.disp_table li {
  display: table-row;
}
.disp_table li p {
  display: table-cell;
  padding:  8px;
  background: #739074;
}
.disp_table li:first-child p {
  background: #333;
}

display の値

意味
table

table 要素のような表示にする
table-row

tr 要素のような表示にする
table-cell

td 要素のような表示にする

垂直位置（vertical-align）

display:table-cell を指定した要素は、vertical-align プロパティで垂直方向の位置を調整できます。

vertical-align プロパティをインライン要素に適用するのとセル要素（th 要素、td 要素、display:table-cell を指定した要素）に適用するのとでは、値の意味が異なります。

セル要素に指定する場合
値	意味
baseline	セルのベースラインを、そのセルがまたいでいる最初の行のベースラインに揃えます。
middle	セルの中心線を、そのセルがまたいでいる行全体の中心線に揃えます。
top	セルの上辺を、そのセルがまたいでいる最初の行の上辺に揃えます。
bottom	セルの下辺を、そのセルがまたいでいる最後の行の下辺に揃えます。
その他	sub, super, text-top, text-bottom, 長さ, パーセントはセルには適用されません。これらの値が指定されて場合は、セルをベースラインに揃えます。

vertical-align プロパティを指定することで、垂直方向の位置を指定して揃えることができます。

<ul class="disp_table3">
  <li>
    <p class="baseline">baseline</p>
    <p class="middle">middle</p>
    <p class="top">top</p>
    <p class="bottom">bottom</p>
  </li>
</ul>

.disp_table3 {
  display: table;
  border-collapse: collapse;
  padding: 0;
  text-align: center;
}
.disp_table3 li {
  list-style: none;
}
.disp_table3 li p {
  display: table-cell;
  border: 1px solid #ccc;
  height: 100px;
  width: 100px;
  padding: 10px;
}
.baseline {
  vertical-align: baseline;
}
.middle {
  vertical-align: middle;
}
.top {
  vertical-align: top;
}
.bottom {
  vertical-align: bottom;
}

baseline

middle

top

bottom

均等割り付け（table-layout）

display:table を指定すると、テーブルの表示方法の列幅を指定する table-layout プロパティが使えます。

table-layout プロパティ
値	意味
auto	列幅はテーブルの幅とセルの内容に合わせて自動的に調整されます。（デフォルト）
fixed	列幅は width で指定した値で固定されて表示されます。指定がない列の列幅は、テーブルの残りの幅に合わせて均等に分割されます。

デフォルト（auto）では中身の横幅に合わせて列の横幅が決定されますが、table-layout:fixed を指定すると横幅を均等配置することができます。

<div class="disp_table4">
  <p>123</p>
  <p>1234567</p>
  <p>1234567890</p> 
</div>

.disp_table4 {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 80%;
}
.disp_table4 p {
  display: table-cell;
  padding: 5px;
  border: 1px solid #ccc;
}

123

1234567

1234567890

table-layout:fixed を指定すると均等に割り付けることができるので、ナビゲーションメニューなどのスタイルで便利です。float で作成する場合は、各メニュー項目の幅を指定する必要があり、項目を追加・削除した場合は修正する必要がありますが、table-layout:fixed は自動的に均等配置してくれます。

<div class="side_nav">
  <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
  </ul>
</div>

.side_nav{
  width: 90%;
}
.side_nav ul {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.side_nav ul li{
  display: table-cell;
  vertical-align: middle;
}
.side_nav ul li a{
  text-decoration: none;
  display: block;
  padding: 10px 0;
  background:#2D335F;
  color: white;
  border-right: 2px solid  #C6E611;
  text-align: center;
}
.side_nav ul li:last-child a {
  border-right:  none;
}

セルの間隔の調整

table-cell に margin を指定することはできません（無効）。border-collapse で separate（ボーダーを分離）を指定すると、セルのボーダー間のスペースを border-spacing プロパティを使って指定することができます。

border-collapse
値	意味
collapse	表全体のボーダーと各セルのボーダーが結合されて表示されます。
separate	表全体のボーダーと各セルのボーダーが分離されて表示されます。

.side_nav2{
  width: 90%;
}
.side_nav2 ul {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;  /* ボーダーを分離しセルの間隔を空ける */
  border-spacing: 5px 0;  /* 左右 上下の順で記述 */
}
.side_nav2 ul li{
  display: table-cell;
  vertical-align: middle;
}
.side_nav2 ul li a{
  text-decoration: none;
  display: block;
  padding: 10px 0;
  background:#2D335F;
  color: white;
  text-align: center;
}

要素の高さを揃える

display:table を指定しテーブル表示にすると、table-cell を指定した要素の高さが一番高い要素の高さに自動的に揃えられます。

<div class="disp_table5">
  <p>Table Caption</p>
  <div>
    <img src="../images/table_01.jpg" alt="">
    <p>Lorem ipsum dolor sit amet....</p>
  </div>
  <div>
    <img src="../images/table_02.jpg" alt="">
    <p>Iusto, tenetur, id. Nisi quam harum... </p>
  </div>
  <div>
    <img src="../images/table_03.jpg" alt="">
    <p>Nihil tempore culpa dolorem...</p>
  </div>   
</div>

 .disp_table5 {
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
    text-align: center; 
    width: 90%;
  } 
  .disp_table5 div {
    display: table-cell;
    vertical-align: top;
    border: 1px solid #ccc;
    padding: 10px;
    background: #DAEEF9;
  }
  .disp_table5 div p {
    margin-top: 20px;
  }
  .disp_table5 > p {
    display: table-caption;
  }

Table Caption

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Iusto, tenetur, id. Nisi quam harum cum assumenda repudiandae sunt, quae sit voluptas eius accusamus vero possimus, omnis laudantium similique.

Nihil tempore culpa dolorem voluptates quas cupiditate ad, beatae quos.

固定幅と可変幅の列（カラム）

display:table を使うと、1つの列（カラム）は固定幅、もう1つの列は親要素の横幅に合わせて可変にすることができます。固定幅にしたい列に横幅を指定します。

<div class="disp_table6">
  <p>Lorem ipsum dolor sit amet<br>(Fixed: 160px)</p>
  <p>Nisi quam harum cum assumenda repudiandae sunt...</p>
</div>

.disp_table6 {
  display: table;
  border-collapse:collapse;
  text-align: center; 
  width: 95%;
} 
.disp_table6 p {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 10px;
}
.disp_table6 p:first-child {
  width: 160px;
}

Lorem ipsum dolor sit amet
(Fixed: 160px)

Nisi quam harum cum assumenda repudiandae sunt, quae sit voluptas eius accusamus vero possimus, omnis laudantium similique.

Web Design Leaves