CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のbox-sizingプロパティを使ったレイアウト作成方法を解説

CSS3では、box-sizingプロパティを活用することで、要素の幅や高さの計算方法を柔軟に制御できます。本記事では、border-boxとcontent-boxという2つの主要な値を使ったレイアウトのサンプルコードとその出力結果を紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
    width: 500px;
    border:8px solid rgb(35, 0, 100);
}
.border {
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    border: 4px solid rgb(4, 97, 54);
}
.content {
    width: 100%;
    height: 100px;
    padding: 50px;
    border: 4px solid rgb(255, 0, 191);
    box-sizing: content-box;
}
</style>
</head>
<body>
<h1>Box sizing layout example</h1>
<div class="container">
<div class="border">This div has 100% width and box-sizing property set to border
box</div>
<br>
<div class="content">This div also has 100% width but has the box-sizing property set to
content box</div>
</div>
</body>
</html>

出力結果

上記のコードをブラウザで実行すると、以下のように表示されます。

CSS3のbox-sizingプロパティを使ったレイアウト作成方法を解説

box-sizingプロパティの違いを理解しよう

  • content-box（初期値）：CSS標準の計算方式です。widthやheightはコンテンツ領域のみに適用され、paddingやborderはその外側に追加されます。そのため、実際の表示サイズは指定値より大きくなります。
  • border-box：widthやheightにpaddingとborderが含まれて計算されます。指定したサイズどおりに要素が表示されるため、レスポンシブデザインなどでレイアウト崩れを防ぎやすくなります。

サンプルコードでは、同じwidth: 100%を指定していても、box-sizingの値によって要素の見た目が大きく異なることが確認できます。実務ではborder-boxを採用し、全要素に一括適用するケースも多くあります。

  1. CSS3で放射状グラデーションを作成する方法

    放射状グラデーション（Radial Gradient）とは、中心点から外側に向かって色が変化していくグラデーションのことです。CSSでは radial-gradient() 関数を使用し、色が切り替わる位置を示す「カラーストップ」を指定することで、自由な配色を実現できます。 形状はデフォルトで楕円（ellipse）に設定されていますが、circle を指定すれば正円のグラデーションに変更することも可能です。なお、放射状グラデーションを定義するには、最低でも2つのカラーストップを指定する必要があります。 radial-gradient の基本構文 background-image: radia

  2. CSS3のbox-sizingプロパティでボックスの幅と高さを自在に制御する方法

    CSS3のbox-sizingプロパティを使うと、要素の幅（width）だけでなく高さ（height）の計算方法も変更できます。通常、CSSでwidthやheightを指定した場合、その値はコンテンツ領域のみに適用され、paddingやborderを追加すると実際の表示サイズはそれ以上に膨らみます。しかし、box-sizingを活用すれば、paddingやborderを含めた全体サイズを意図どおりにコントロールできるようになります。box-sizingの主な値content-box（初期値）：width・heightはコンテンツ領域のみに適用され、paddingとborderは別途追加されます