ボックスの配置

要素ボックスを、本来の位置から別の位置へ移動させることを 「フロート(float)」と呼びます。

要素をフロートさせるには、floatプロパティに、 left、right、bothのいずれかを設定することで、 必要な場所に移動させることができます。 移動した画像やブロックに続くブロックは、 移動した画像やブロックに回り込むように配置されます。 以下に、それぞれの値に対する動作を示します。

left

左にフロート(移動)したブロックボックスを作ります。後に続く内容は、 そのブロックボックスの上辺の位置から、右側に回り込みます。

right

右にフロート(移動)したブロックボックスを作ります。後に続く内容は、 そのブロックボックスの上辺の位置から、左側に回り込みます。

none

その要素ボックスをフロートさせません。

フロートを行なう対象は、CSSのwidthプロパティや HTMLのwidth属性等で、 幅を決めておく必要があります。

フロートを行なうと、それに続く要素は、 フロートされた対象の回りに配置されます。 しかし、場合によっては、回りではなく下方に配置したいときがあります。 そのときには、clearプロパティに、 left、right、bothのいずれかを設定することで、 回り込みを停止して、フロートしたブロックの下方に配置します。

図をフロート(flot)させてみましょう。

.hidari {
  float: left;
}

.migi {
  float: right;
}

.cll {
  clear: left;
}

上記のように、左右へのフロート(hidari、migi)と、 左フロートの停止(cll)を定義して、これらを以下のように適用してみます。

<p> 
  <img src="./hearn.jpg" alt="Hearn先生" width="60px" class="hidari"> 
  画像をここに挿入しますが、左側にフロートさせます。
　左にフロートさせると、左側に、画像が表示されますが、
　それ以下の文章は図の右側に回り込みます。
</p> 
<p class="cll"> 
  <img src="./hearn.jpg" alt="Hearn先生" width="60px" class="migi"> 
  次のp要素になりましたが、まずは、
　左フロートを停止しています(class="cll")。
  次に、図を右にフロートさせています。
　この文章の右側に図が表示されていますよね？
</p> 

Webブラウザでは、次のように表示されます。

ところで、フロートの停止(回り込みの停止)である 「class="cll"」 が無いと どうなるでしょう? 左に図をフロートした状態が続いていますので、 2番目のp要素も、左側に表示されている図の右側に現われます。 つまり、以下のようになります。

今度は、段組みをするためにテキストボックスをフロートしてみましょう。

.flbox {
  height: 120px;
  width: 100px;
  margin: 5px;
  padding: 7px;
  background-color: #eea;
  float: left;
}

.mainbox {
  width: 300px;
  margin-left: 130px;  /* flboxのボックス幅(100+5*2+7*2=124) + 6 px */
  padding: 7px;
}

上記のように、左側にフロートさせる要素用スタイル(.flbox)と、 その右側に配置する本文用スタイル(.mainbox)の定義を行ない、 以下のようにHTMLで利用してみます。

<div class="flbox"> 
  <p>
  このブロックが、左側にフロートされます。背景色も変えています。
  </p>
</div> 
<div class="mainbox"> 
  <p>
    こちらが、フロートしない本文です。
  </p>
  <p>
    先のp要素を左側にフロートさせたので、
    そのまま続けて本文を書いても良いのですが、本文が長くなると、
    先のフロートしたブロックの下方に回り込みます。
  </p>
  <p>
   それを避けるために、このブロックは、
   左にフロートしたボックスの幅の分だけ margin-leftを取っています。
   (実際には、6px だけ余分にmargin-leftをとっています。)
  </p>
</div> 

すると、Webブラウザでは、次のように表示されます。

上記サンプル中の文章にも記述しましたが、本文用のスタイルでは、 左側にフロートさせたブロック全体の幅 (width+左右のmargin+左右のpadding) の分だけ、margin-leftプロパティを確保しています。 (実際には、6px だけ余分にmargin-leftをとっています。) これにより、本文部分が長くなっても、 左側にフロートしたボックスの下に回り込むことがありません。

テキストやインラインボックス(インライン要素の作るボックス)は、 ブロックボックス(ブロックレベル要素の作るボックス)の中に、 流しこまれます(下図参照)。

このとき、行幅(一行の長さ)は、widthプロパティが指定してあればその長さになり、 もし指定してなければmarginやpaddingと親ボックスの幅で自動的に決まるのでしたよね。

また、一行を構成する複数のインラインボックスを含むボックス (上図における紫色のボックス) が作られますが、これを「行ボックス」と呼びます。 この「行ボックス」内のインラインボックスの高さは、 line-heightプロパティによって決められます (上図参照)。

ここでは、 インラインボックス間の行内(行ボックス内)の水平位置と垂直位置を調整する text-alignプロパティと、 vertical-alignプロパティについて説明します。

テキストの水平位置を揃えるtext-alignプロパティを 使ってみましょう。これは、ワードプロセッサ等で行なう、 センタリング、左右揃えのことです。

値として設定できるのは、left、right、centerです。 どういう動きをするのかは、想像できるでしょう。

それでは、早速このプロパティを使ってみましょう。

.al {
  text-align: left;
}

.ar {
  text-align: right;
}

.ac {
  text-align: center;
}

上記のように、スタイルを定義して、以下のようにHTMLで利用してみます。

<p class="al"> 
  December 1, 2005<br>
  2005年12月1日
</p> 
<p class="ar"> 
  December 1, 2005<br>
  2005年12月1日
</p> 
<p class="ac"> 
  December 1, 2005<br>
  2005年12月1日
</p> 

すると、Webブラウザではこのように表示されます。

垂直位置の設定は、 vertical-alignプロパティで設定します。 このプロパティの取る値は、 たくさんの種類が有るのですが、ここでは一般的に利用される top、middleについてのみ例示します。

.atop {
  vertical-align: top;
}
.amid {
  vertical-align: middle;
}

上記のように、スタイルを定義して、以下のようにHTMLで利用してみます。

<p> 
  ハーン先生は、
  <img src="./hearn.jpg" alt="似顔絵" width="40px" class="atop">
  このようなお顔だったようです。
</p>
<p> 
  ハーン先生は、
  <img src="./hearn.jpg" alt="似顔絵" width="40px" class="amid">
  このようなお顔だったようです。
</p> 

すると、Webブラウザではこのように表示されます。

これから分りますように、vertical-align プロパティの値が、top、middleのとき、対象となるインラインボックスは、それぞれ、 行ボックスの上辺、中央に揃うことになります。

インラインボックスの高さは、 line-heightプロパティで設定します。 このプロパティの値とfont-sizeプロパティの関係で、 テキストの行間が決まります。

.lwide {
  line-height: 2em;
}

.lnarrow {
  line-height: 0.9em;
}

上記のように、スタイルを定義して、以下のようにHTMLで利用してみます。

<p> 
  このブロックは、line-heightを何も指定していません。<br>
  基準となる行間です。
</p> 
<p class="lwide"> 
  このブロックは、line-heightプロパティの値が 2emです。<br>
  行間が随分空いているでしょう。
</p> 
<p class="lnarrow"> 
  このブロックは、line-heightプロパティの値が 0.9emです。<br>
  行間が狭くなっていますね。
</p> 

すると、Webブラウザではこのように表示されます。

テキストの最初の行のインデント幅は、 text-indentプロパティで設定します。 値は、マイナス値を取ることもできます。

p.ind {
  text-indent: 1em;
}

p.ind_minus {
  text-indent: -2em;
  margin-left: 2em;
}

上記のように、スタイルを定義して、以下のようにHTMLで利用してみます。

<p> 
  このブロックは、何も指定していません。<br>
  パラグラフの最初の行である上の行もこの行もンデントされていません。
</p> 
<p class="ind"> 
  このブロックは、text-indentプロパティの値が 1emです。<br>
  パラグラフの最初の行である上の行が、1文字分インデントされていますね。
</p> 
<p class="ind_minus"> 
  このブロックは、line-heightプロパティの値が -2emです。<br>
  パラグラフの最初の行である上の行が、2文字分左にインデントされています。
  そのままでは、ボックスからはみ出してしまいますので、
  margin-left プロパティを2文字分とっています。
</p> 

すると、Webブラウザではこのように表示されます。