CSS

CSS|サイズ設定でもう悩まない「box-sizing」の設定

スタイルシートでサイズを設定したはずなのに、
borderやpaddingを調整しているうちに最初に決めていた
サイズじゃなくなってしまったという経験はありませんか?

適当にコーディングするときは、まあ良いのですが、
ピッタリと要素に並べないといけないときなんかは計算が面倒ですよね。

今日は、そんな面倒なサイズの設定が
簡単にできるようになるプロパティをご紹介します。

まず、具体例を見てみましょう。
今、ここに200pxで設定したいボックスがあったとします。

See the Pen no_box-sizing01 by ken (@ken81) on CodePen.

そこにいろいろな事情があり、border(10px)とpadding(20px)を
設定することになりました。

See the Pen no_box-sizing02 by ken (@ken81) on CodePen.

はい、どうなりましたか?

最初の水色のボックスは200pxのままかもしれませんが、
borderとpaddingの分だけボックスが外側に太ってしまいました。
これだと、ボックス全体の幅が200pxではなく260pxになってしまいます。

これは指定したサイズが「コンテンツ」の部分、
つまり、水色のボックスを基準に設定されているためです。

実はこれにはちゃんとしたプロパティがあります。
「box-sizing」という名前のプロパティで、
初期値は「content-box」という値になっています。

この「content-box」を「border-box」に変えることで、
指定したサイズ内にborderとpaddingも収まってくれるようになります。

具体的には、こういう形で記入します。

box-sizing:border-box;

この1行を該当するセレクタ内に追加するだけです、簡単ですね。
実際にやってみましょう。

See the Pen box-sizing by ken (@ken81) on CodePen.

はい、これでイメージ通り、200pxの中にボックスが収まってくれました。
最後に、この「box-sizing」の使い方をまとめておきますので参考にしてください。

box-sizingプロパティ

content-box paddingとborderをサイズに含めない(初期値)
border-box paddingとborderをサイズに含める

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP