KOJIKA17KOJIKA17HomeAboutRSSCSSで2カラムを作ってみる2014-07-04CSSで2カラムといっても、その作成方法は様々です。多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。floatを利用する基本的な方法です。子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。overflowを利用する必要があります。floatとmarginを一定方向にかける片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。floatのかかっている数値は固定して、文字の部分を伸縮させる時などに非常に効果的です。この方法を利用すると、floatのかかっていないボックスの高さに依存して、親の高さがとれます。そのため場合によっては、floatを解除しなくても、レイアウトを崩さずにコーディングすることも可能です。hidden;をかける上記の方法だとmarginに数値を設定する必要があるため、より柔軟にするためにoverflowを利用します。overflowを利用すると、書式コンテキストが確立するため、回り込みが起こらずに2カラムを実現することができます。レイアウトに、より柔軟性を持たせたい時に有効な手法です。20pxが指定されている場合。420全体幅が420pxとなり、400pxの親のボックスよりも大きくなるため、通常ならカラム落ちが発生します。マイナスマージンを加えることで、IE8以上であればカラム落ちを防げます。20px;}この方法は2カラムだけに限定するよりも、数カラムになっているリストなどにも役立つ方法です。このパターンは、よく使えるわりに計算が面倒くさいので、Preprocessorのmixinなどを利用すると計算が必要なくなります。border-boxもしCSSフレームワークを利用していないのであれば、これらのmixinは有効に働きます。レイアウトのmixinを用意しておくと、全体の幅、カラム数、間隔を指定するだけで、下記のようなレイアウトが簡単に作成できます。positionを利用するfloatは、clearfixなどのテクニックによって、親の高さを出す方法がありますが、positionは親の高さが自動算出する方法がありません。親の要素に高さを指定しておく必要があります。positionとmarginこの方法の理屈は、floatとmarginの一定方向を指定する方法と原理は一緒です。positionがかかっていないボックスの高さが、親の高さとして算出されます。利用する場面は少ないですが、見出しで飛び出したアイコンを表現する時などに、利用できるかもしれません。その名の通り、テーブル要素のように振る舞うことができます。50%;}table-cellだけでも、2カラムにすることが可能です。inline-block;を使った例2カラムというのは、強引かもしれませんが、widthなども利用でき、親の要素にtext-alignを指定すれば、中央寄せなども可能になります。CSS3のcolumnプロパティ今までは、2つのボックスを並べていましたが、このCSS3プロパティは、1つのボックスの中で、複数のカラムを生成することができます。仕様は勧告候補まで上がっていますが、なかなかベンダープリフィックスが取れず、使いどころの難しいプロパティです。名前を変えてきたCSSです。利用できるブラウザが限定されますが、非常に柔軟なレイアウトが可能になります。Safariやスマートフォンのブラウザのことを考えるのであれば、autoprefixerを利用した方がいいでしょう。Moduleなどありますが、ブラウザの実装状況が微妙な方法は省きました。今回10パターンを紹介しましたが、floatに関する部分をマスターすれば、ある程度のレイアウトは組み立てることができます。複雑そうなレイアウトに見えても、結局は紹介したパターンの繰り返しや、応用がほとんどです。floatとマイナスマージンで紹介したように、同じことをしつつも面倒な計算が必要となる場合は、Preprocessorなどに任せるのも、ひとつの手です。