CSS ブロック要素を横に並べる - プログラミングノート

CSSをまとめる機会がありませんでしたので、少しずつまとめていこうと考えています。

今回の目当ては、「インライン要素をブロック要素として扱い、そのブロック要素を横に並べる」です。

　テキスト、imgタグなど

　インライン要素は、左から右へと並びます。

　divタグ、pタグ、h3タグなど

　ブロック要素は、上から下へと並びます。

　HTMLのソースファイルで、インライン要素の中に改行を入ると、余分な空白が表示されます。一方、ブロック要素の中に改行を入れても、余分な空白は表示されません。そのため、インライン要素をブロック要素として扱いたい場合があります。

▼HTMLファイル

</div>

▼CSSファイル

/* 外側のブロック */

#test {

overflow:hidden;

}

/* 内側の画像 */

#test img {

display: block;

float:left;

}

　ブロック要素、インライン要素のそれぞれの表示形式（ブロック・インライン）を指定します。

　表示形式を指定することにより、インライン要素をブロック要素として扱うことができます。

　指定された要素を左または右に寄せて配置します。その要素の後に続く内容は、その反対側に回り込みます。

　ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定します。

　overflowプロパティでvisible以外を指定すると、新しいブロックのコンテキストが確立され、floatを解除するために使えるそうです。（参考：floatを解除する手法のclearfix と次世代のレイアウトの話｜Web Design KOJIKA17）

　clearプロパティ（※）を使う方法もあります。

floatプロパティで指定された要素に対する回り込みを解除します。

＜使用例＞

.clear {

clear:both; /* 左寄せまたは右寄せされた全ての要素に対する回り込みを解除 */

}