CSSでの横並びの方法

• Web Create
• 2016.09.23

こんにちわこんばんはちばです。

日々のコーディングの際に横並びをよく使うと思います。

そんな横並びの方法を紹介したいと思います。(ง ˙ω˙)ว (ง ˙ω˙)ว (ง ˙ω˙)ว

float

おなじみのfloatです。

特長としては左または右寄せにでき、テキストやボックスの回り込みがされます。

また、floatしている要素の親の要素の高さがなくなります。

その際高さを持たせる方法としては、親の要素に overflow: hidden; を指定するか clearfixというcssのテクニックを仕様する方法があります。

clearfixは下記のようなコードで出来ています。

.clearfix:after{
  conetnt: "";
  display: block;
  clear: both;
}

clearfix書き方や仕組みについては調べていただくと詳しい説明されてる資料が見つかると思うので気になる方は調べてみてください。

display: inline;

インライン要素にするアレです。

span や a タグのように横並びになります。

注意する点としては要素の間に隙間が出来てしまう、マージンが使えない、上下のパディングが効かない。

隙間についての解決方法としては下記になります。

<ul>

  <li>lorem...</li><!--
  --><li>lorem...</li>

</ul>

<ul>

  <li>lorem...</li><li>lorem...</li>

</ul>

タグの間をコメントアウトする方法と、タグの間の改行をなくす方法です。

また、忘れがちなのですが、 vertical-align の指定も忘れずにしましょう。

display: inline-block;

便利なアレです。

こちらも基本は inline と同じなのですが違いとしては、マージンが使える、上下のパディングが効く、というところです。

inline-blockでもやはり隙間が出来てしまうところ、 vertical-align の指定はお忘れなく。

IE7を対象に入れない昨今では使いやすい良いやつですね。

display: table-cell;

内包している要素をテーブルセルにしてくれます。

特長として、マージンが使えない、高さが揃う、天地中央揃えなどが出来る。

癖があるプロパティですが、IE8から対応しており高さに関係なく天地中央揃えが可能だったり高さが揃ったりと使い所によっては便利なので覚えておくと良いと思います。

display: flex;

主要モダンブラウザでサポートしており、最近ちらほら使う機会ありそうかなっていうアレです。

こちらも内包している要素を横並びにします。

ただ横並びにするだけでなく、高さを揃える、天地中央揃えはもちろんのこと、要素の並び順を変えたり、要素との間隔を均一にしたりと様々なオプションを使用することが出来ます。

すべて紹介するとすごい量になってしまうので、気になる方は調べてみてください。

まとめ

5つの方法を紹介しましたが如何だったでしょうか？

最近では古いブラウザをサポート対象外にすることも多いと思うので状況に応じて使い分けることが出来ると思います。

それぞれに注意する点もありますので、勉強しておくといざという時に時間を取られずに済むと思います。

それではよき横並びライフを( ∩ˇωˇ∩)