October 20, 2016

リキッドレイアウトでカラム間の余白だけ固定pxにする方法

リキッドレイアウト小ネタです。
サイト上で必ず出てくる横並びのレイアウトですが、ブラウザ幅に合わせて伸縮させつつも、カラム間の余白は大きくなりすぎると困る!ということで固定pxで指定したいことがあります。
横幅を%指定しつつ、余白をpx指定するサンプルです。border-boxとpaddingを使うのがポイントです。

実装サンプル

デモはこちら

liquid-column-px-demo.jpg

HTML

HTMLは特別な組み方はなく、普通にリスト(li)タグ並べてるだけなので、省略。
ポイントはCSSです。

CSS

ポイントとなる部分のみ。親要素のスタイルなどは本題とは関係ないので省略。


ul{
    margin-left: -20px;
}
li{
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding-left: 20px;
    margin-bottom: 20px;
}

要点

floatでの横並び 4カラムの例です。
まずwidthを「100% ÷ カラム数」の%で指定します(25%)。
このまま margin を使うと当然 横幅不足でカラム落ちになってしまいます。
※ 縦はリキッドではないので、普通にそのまま margin で余白をつけます。

そこで margin を使わずに padding を使います。
padding は 「box-sizing: border-box;」を組み合わせることで、width の幅内に含めることができます。

このままだと先頭のカラムにも余白がつく分、全体の幅がやや小さくなってしまっています。
nth-child を使って先頭にあたる liタグにだけ padding をなくすでもいいのですが、 ulタグに余白と同じpx数のネガティブマージンをつけてあげればOKです。

ちなみにliタグに背景色つけるから padding指定したら余白まで色ついちゃう ってときは 、liタグの内側に divタグを入れてそっちに背景色をつけるなどで何とかなるのではないでしょうか。

デモ

文章だとわかりづらいところもあると思いますので、デモをご覧頂ければと思います。
デモはこちら

おまけ:マルチカラムレイアウト(column-)での組み方

マルチカラムレイアウト(column-)使えばいいんじゃない? と思ったので、作ってみました。
対応ブラウザを見ると、IEもバージョン10以上から使えるためそろそろ実用的な感じがします。

参考サイト(Web developer guide | MDN)など見ると、段組み(文章)の多段レイアウトとして使用する想定のものみたいですね。
そのため、リストのレイアウトをするとfloatの時とは順番が変わります。また、リストの数がカラムの倍数にならない時に崩れます。
デモを見て頂けるとわかりやすいかと思います。
デモはこちら

上手いやり方もあるのかもしれませんが、リストの横並びには適切ではない感じがするので、やはりfloatの方を使うかな―という感じです。
ちなみにFlexboxでの組み方は試してないので、また別の機会に。

« 番組収録×イベント!新しいフリーランス「N-Worker」の働き方 に参加しました | Home | 2016年「今年お世話になったCSS」5選 〜 transition、calc()関数、:nth-childセレクタ など〜 »