読者です 読者をやめる 読者になる 読者になる

プログラミングノート

プログラミングの備忘録です

CSS ブロック要素を横に並べる

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

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

 

◆インライン要素とブロック要素

▼インライン要素

 テキスト、imgタグなど

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

▼ブロック要素

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

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

 

◆インライン要素の整列・改行による空白表示

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

 

◆インライン要素をブロック要素として扱い、左から右へ並べる

 ▼HTMLファイル

<div id="test">

    <img src="img-test1.png" />

    <img src="img-test2.png" />

</div>

 

CSSファイル

/* 外側のブロック */

#test {

    overflow:hidden;

}

/* 内側の画像 */

#test img {

    display: block;

     float:left;

}

▼displayプロパティとは

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

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

 

▼floatプロパティとは

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

 

▼overflowプロパティとは

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

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

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

 

※clearプロパティとは

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

<使用例>

.clear {

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

}

 

参照

overflow-スタイルシートリファレンス

display-スタイルシートリファレンス

float-スタイルシートリファレンス

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