menu
menu

キーワード検索

 

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

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

CSS3のbox-sizing:border-boxでレイアウトの計算が簡単に

  • Labs

CSS3

こんにちは(・∀・)

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

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

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

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>
<!--content-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リファレンス】
flexboxでレイアウト

  • カテゴリー:Labs