【HTML・CSS】ブロック要素を横並びにする方法（その１）

私がWebアプリケーションを学習する際に最初に学んだのが「HTMLとCSS」でした。

その中で、ブロック要素の配置を横並びにする方法でちょっとつまずいてしまったので

備忘録をかねてこちらに記載したいと思います。

・「float」プロパティを利用する

HTML上で作成するコンテンツは、そのコンテンツの要素が同じ階層に存在する場合、通常左上から下に表示されます。

例えばHTMLとCSSファイルに下図の通り記載をしたとします。

＜HTML＞「wrapper」（親要素）の中に「ブロック」（子要素）が４つ存在する。

＜CSS＞

するとブラウザ（Chrome）だと下図のように表示されます。

４つのブロックが左上から下に表示されており、「wrapper」の中に内包されているのがわかります。

このブロックを横並びにしたい場合、下図のように各ブロックに対して「float」プロパティを記載することでブロックを「回り込み」させることができます。

下図の通り横並びに表示されます。

＜参考＞

ちなみにleftの部分をすべてrightに置き換えると、下図のように右側から順に横並びになります。

しかし、４つのブロックはwrapper部分の外側に表示されてしまいました。

・「float」プロパティの問題

floatを指定したブロックは「浮き上がった」状態となるため、親要素（wrapper）で高さを指定していない場合、子要素（ブロック）の高さを認識できなくなってしまいます。

そこで、横並びを維持しつつ親要素であるwrapperの内側に表示させるための方法として、以下の方法を挙げたいと思います。

１．clearfixを利用する

２．overflowプロパティを利用する

１．clearfixを利用する

親要素であるwrapperに対してclearfixという手法を使います。

＊当初、clearfixとはプロパティ、または要素の一種だと思っていましたが、今回調べてみるとあくまで「通称」のようなので、clearfixの名称を変えても問題なく動作します。

CSSの任意の場所（図では末尾）とHTMLの親要素に対して、下図のように追記します。

親要素wrapperに対して新たに「clearfix」というクラスを付与し、擬似要素afterに対して回り込み要素を解除しています。

＊擬似要素とは、HTMLにかかれない要素（のようなもの）になり、CSSで設定することができるものです。

そうすることで、下図のように親要素の高さが認識され、子要素の横並びを維持しつつ、親要素に内包させることができるようになります。

＊下図左下に表記されているのが擬似要素afterが生成された場所になります。

 

２．overflowプロパティを利用する

こちらも親要素に対して設定するのですが、clearfixと比べると簡単です。

下図のように親要素のCSSに対して「overflow: hidden;」を追加するだけです。

そうすることで、clearfixを利用した場合と同じ結果となります。

＊上図をよくよくみるとclearfixを利用した場合と異なり、wrapper文字の上部も高さとして認識されています。これは今回のサンプルでwrapperの文字にp要素（段落を示すブロック要素）を付与しており、文字の前後の空白部分についても高さとして認識しているためと推察されます。

実際にp要素を外すと、clearfixの場合と同じ高さになりました。

いかがでしたでしょうか、色々と端折って書いていますので、わかりづらい部分があったかと思いますが、説明は以上となります。

また、ブロック要素を横並びにする方法として、「フレキシブルボックスレイアウト（通称：フレックスボックス）」という方法もあるようですので、次回はこちらについて学習し、記事にして見たいと思います。

ありがとうございました。