box-sizingでカラム落ちさせない方法

テキストリンクなどを横並びにする際にボーダーを使ったりしてリンク同士を区切ることがあります。その際のレイアウトなCSSを使ってフロートさせたり、ボーダーをつけたり、幅や余白を指定したりするかと思います。そうすると、場合によってはカラム落ちすることもあります。もちろん、幅をpxで固定してその範囲内に収まるようにすることもできますが、スマートフォンサイトなどの場合は、端末によって横幅が違ってくるので、pxで幅を固定してしまうと横幅が広すぎたり足りなかったりする原因になるので、%などを使って可変レイアウトにしなければなりません。そんなカラム落ちしたときの解決方法として、box-sizingというプロパティを利用します。

box-sizingの使い方

例えば、以下のような指定で2カラムのレイアウトをしたとします。

#list {
  background: #dedede;
}

#list li {
  width: 50%;
  float: left;
  border: 1px solid #bbb;
  text-align: center;
}

#list li a {
  display: block;
  padding: 10px 0;
}

これをHTMLで表示するとおそらく以下のようにカラム落ちしてしまうと思います。

  • リンク1
  • リンク2
  • リンク3
  • リンク4

カラム落ちする原因は、2カラムなのでwidthを50%で指定しています。そこにボーダーの1px幅が左右についているためリストの合計幅が50%+2pxとなっているためです。それを解消するために使うのがbox-sizingです。このプロパティを指定することによって、borderやpaddingなどもwidthの幅に含めることができます。実際の指定方法は以下のようになります。

#list li {
  width: 50%;
  float: left;
  border: 1px solid #bbb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

すると、以下のようにカラム落ちすることなく2カラムで横並びに表示されます。

  • リンク1
  • リンク2
  • リンク3
  • リンク4

ちなみに、box-sizingプロパティは「border-box」以外に「content-box」と「inherit」が指定できます。

content-box widthやheightの値にborder、paddingを含まない(初期値)
border-box widthやheightの値にborder、paddingを含める
inherit 親要素の値を継承する
その他の記事
フォーム関連要素について
デバイスピクセルを考慮したサイト制作
ボタンをクリックしたときにアニメーションさせる
【WordPress】カスタムフィールドの使い方
asyncとdeferでjavascriptを読み込む方法

TOP