CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSボックスのサイズ設定


CSSボックスのサイズ設定

CSSbox-sizingプロパティを使用すると、要素の幅と高さの合計にパディングと境界線を含めることができます。


CSSボックスサイズ設定プロパティなし

デフォルトでは、要素の幅と高さは次のように計算されます。

幅+パディング+境界線=要素の実際の幅
高さ+パディング+境界線=要素の実際の高さ

つまり、要素の幅/高さを設定すると、要素は設定したよりも大きく表示されることがよくあります(要素の境界線とパディングが要素の指定された幅/高さに追加されるため)。

次の図は、指定された幅と高さが同じ2つの<div>要素を示しています。

このdivは小さくなります(幅は300ピクセル、高さは100ピクセル)。

このdivは大きくなります(幅も300px、高さは100pxです)。

上記の2つの<div>要素は、結果のサイズが異なります(div2にはパディングが指定されているため)。

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

box-sizingプロパティはこの問題を解決します



CSSボックスサイズ設定プロパティを使用

このbox-sizingプロパティを使用すると、要素の幅と高さの合計にパディングと境界線を含めることができます。

要素に設定した場合box-sizing: border-box;、パディングと境界線は幅と高さに含まれます。

両方のdivが同じサイズになりました!

やったー!

これは上記と同じ例ですが、box-sizing: border-box; 両方の<div>要素に追加されています。

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

を使用した結果box-sizing: border-box;は非常に優れているため、多くの開発者は、ページ上のすべての要素がこのように機能することを望んでいます。

以下のコードは、すべての要素がこのより直感的な方法でサイズ設定されることを保証します。多くのブラウザはすでにbox-sizing: border-box;多くのフォーム要素に使用しています(すべてではありません-そのため、入力とテキスト領域は幅で異なって見えます:100%;)。

これをすべての要素に適用することは安全で賢明です。

* {
  box-sizing: border-box;
}

CSSボックスのサイズ設定プロパティ

Property Description
box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not