menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

【CSS3】CSS3のプロパティ box-sizing 値 border-boxでレイアウトの計算が簡単に

【CSS3】CSS3のプロパティ box-sizing 値 border-boxでレイアウトの計算が簡単に

こんにちは(・∀・)

今日はレイアウトする際に使うと便利なCSS3のbox-sizingプロパティの使い方についてご紹介して行きます。

box-sizingプロパティに関しての解説ページはこちらをご覧ください。
box-sizing【CSS3リファレンス】

またflexboxでレイアウトする方法に関しての解説ページはこちらをご覧ください。
【CSS3】display:flexについて

box-sizingプロパティ

box-sizingプロパティで指定できる値はcontent-boxとborder-boxの2種類です。

content-boxを指定した場合paddingとborderの大きさは含まないで表示します。要素内容の大きさはwidthで指定したままの大きさで表示され、外側が大きくなります。

border-boxを指定した場合paddingとborderの大きさを含んで表示します。なので要素内容が小さくなります。

今までレイアウトする際、本体要素にborderやpaddingが指定してある場合、本体要素の値だけではなくborderとpaddingの値も足して計算しておりましたが、このbox-sizingプロパティで値がborder-boxを指定した場合、本体要素の値以外は気にしなくてもよくなります。ただし、marginは除きます。

サンプル
HTML

<div class="box">
<p>box-sizingの指定なし。</p>
<!--box--></div>
<div class="content-box">
<p>box-sizing:content-boxで指定するとpaddingとborderの値も含みます。上記のbox-sizingの指定なしと同じ表示になります。</p>
<!--content-box--></div>
<div class="border-box">
<p>box-sizing:border-boxで指定するとpaddingとborderの値は含みません。</p>
<!--border-box--></div>
CSS

.box,
.content-box,
.border-box {
  width: 700px;
  border: 10px solid #ccc;
  margin: 10px auto;
  padding: 10px;
  text-align: left;
}
.content-box {
  box-sizing: content-box;
}
.border-box {
  box-sizing: border-box;
}
Result

サンプルデモ
スマホでの確認はこちら
QRコード

また次の指定をリセットCSSで最初に設定しておけばborderとpaddingの幅を気にすることなくコーディングすることができるのでオススメです。


* {
  box-sizing: border-box;
}

box-sizing:border-boxを指定するとborderとpaddingは要素に含まれますがmarginは含まれませんのでご注意ください。


関連リンク

box-sizing【CSS3リファレンス】
【CSS3】display:flexについて

  • CSS3 レイアウト
このエントリーをはてなブックマークに追加