CSS簡易リファレンス − レイアウト関連
float − 左右に寄せて配置し、文章を回り込ませる
floatを使って指定された部分を、右もしくは左に寄せ、それを囲むように文章などを回り込ませます。CSSによるレイアウトではDIVタグで囲まれた範囲をfloatを用いて左右に寄せることで、複数段（カラム）のレイアウトを実現させます。
floatの値
- right
指定部分を右側に寄せ、文章等は指定部分の左側から回り込みます。 - left
指定部分を左側に寄せ、文章等は指定部分の右側から回り込みます。
HTMLの記述例
<img alt="画像説明" src="img/画像ファイル名.gif" style="float:right;">
floatの値に「right」を使用したため、指定した部分（画像）は右側に寄せられ、文章は左側から回り込みます。CSSによるレイアウトではDIVタグで囲まれた範囲をfloatを用いて左右に寄せることで、複数段（カラム）のレイアウトを実現させます。
<img alt="画像説明" src="img/画像ファイル名.gif" style="float:right;">
floatの値に「right」を使用したため、指定した部分（画像）は右側に寄せられ、文章は左側から回り込みます。CSSによるレイアウトではDIVタグで囲まれた範囲をfloatを用いて左右に寄せることで、複数段（カラム）のレイアウトを実現させます。
ブラウザでの表示例
floatの値に「right」を使用したため、指定した部分（画像）は右側に寄せられ、文章は左側から回り込みます。CSSによるレイアウトではDIVタグで囲まれた範囲をfloatを用いて左右に寄せることで、複数段（カラム）のレイアウトを実現させます。
floatの値に「right」を使用したため、指定した部分（画像）は右側に寄せられ、文章は左側から回り込みます。CSSによるレイアウトではDIVタグで囲まれた範囲をfloatを用いて左右に寄せることで、複数段（カラム）のレイアウトを実現させます。
clear − 回り込みを解除する
floatで指定された右もしくは左の回り込みを解除します。CSSを使ったレイアウトでは、ブラウザによる表示の崩れを防ぐ重要な役割を果たします。
clearの値
- right
「float:right;」で指定した回り込みを解除します。 - left
「float:left;」で指定した回り込みを解除します。 - both
左右両方の回り込みを解除します。
HTMLの記述例
<img alt="画像説明" src="img/画像ファイル名.gif" style="float:right;">
clearの役割は回り込みの解除です。
<br style="clear:right;">
CSSによるレイアウトではブラウザによる表示の崩れを防ぐ重要な役割があります。
<img alt="画像説明" src="img/画像ファイル名.gif" style="float:right;">
clearの役割は回り込みの解除です。
<br style="clear:right;">
CSSによるレイアウトではブラウザによる表示の崩れを防ぐ重要な役割があります。
ブラウザでの表示例
clearの役割は回り込みの解除です。
CSSによるレイアウトではブラウザによる表示の崩れを防ぐ重要な役割があります。
clearの役割は回り込みの解除です。
CSSによるレイアウトではブラウザによる表示の崩れを防ぐ重要な役割があります。
text-align − 文章等の揃えを左右に揃える
text-alignは、指定範囲内での文章や画像等の揃えを、左右いずれかに揃えるためのプロパティです。
clearの値
- left、right
左右のいずれかを指定します。
HTMLの記述例
<div style="text-align:right;">テキストを右に揃えます</div>
<div style="text-align:right;">テキストを右に揃えます</div>
ブラウザでの表示例
テキストを右に揃えます