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

HTML DOM の boxSizing プロパティとは？使い方と設定値を解説

HTML DOM の boxSizing プロパティは、要素全体の幅と高さをどのように計算するかを指定するために使用されます。値として「border-box」または「content-box」を指定できます。

このプロパティを理解することで、padding（パディング）や border（ボーダー）を含めたレイアウトの計算方法を自由にコントロールできるようになり、レスポンシブデザインなどでも非常に役立ちます。

構文

boxSizing プロパティを設定する構文は以下のとおりです。

object.style.boxSizing = "content-box|border-box|initial|inherit"

プロパティ値の一覧

指定できる各値の意味は次の表のとおりです。

値説明
content-boxデフォルトの値です。padding や border の幅は、コンテンツボックスの最終的な幅に追加されます。そのため、指定した width に余白分が上乗せされたサイズになります。
border-box指定された width がそのまま維持され、padding や border を適用するとコンテンツ部分が縮小します。直感的なレイアウト設計がしやすいため、実務ではこちらがよく使われます。
initialこのプロパティを初期値（content-box）に戻します。
inherit親要素のプロパティ値を継承します。

boxSizing プロパティの使用例

それでは、boxSizing プロパティの具体的な使用例を見てみましょう。以下のコードでは、最初は「border-box」が適用された div 要素に対して、ボタンをクリックすると JavaScript で「content-box」に変更しています。

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        height:100px;
        width: 350px;
        border: 30px solid lightpink;
        box-sizing: border-box;
    }
</style>
<script>
    function changeBoxSizing(){
        document.getElementById("DIV1").style.boxSizing="content-box";
        document.getElementById("Sample").innerHTML="boxSizing を content-box に変更しました";
    }
</script>
</head>
<body>
    <div id="DIV1">
        THIS IS SAMPLE TEXT INSIDE DIV. HELLO WORLD DIV.
    </div>
    <p>下のボタンをクリックすると、上の div 要素の box-sizing プロパティが変更されます</p>
    <button onclick="changeBoxSizing()">Box Sizing を変更</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

ページを読み込んだ直後の表示は次のようになります。div 要素には width: 350px と border: 30px が指定されていますが、「border-box」が適用されているため、ボーダーを含めても全体の幅は 350px のままです。

HTML DOM の boxSizing プロパティとは？使い方と設定値を解説

ここで「Box Sizing を変更」ボタンをクリックすると、boxSizing が「content-box」に切り替わります。

HTML DOM の boxSizing プロパティとは？使い方と設定値を解説

「content-box」では、左右のボーダー（30px × 2 = 60px）が width に追加されるため、要素全体の幅は 350px + 60px = 410px に拡大します。このように、同じ CSS 指定でも box-sizing の値によって実際の描画サイズが変わることが確認できます。

  1. HTML DOMのborderRightWidthプロパティとは？使い方とサンプルコードを解説

    HTML DOMのborderRightWidthプロパティは、要素の右側の境界線（ボーダー）の幅を設定または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの太さを制御したい場合に活用できます。構文borderRightWidthプロパティを設定する場合の基本的な構文は以下の通りです。object.style.borderRightWidth = thin|medium|thick|length|initial|inherit;プロパティの値borderRightWidthプロパティに指定できる値は以下の通りです。値説明thin細い境界線を指定します。mediu

  2. HTML DOM の borderWidth プロパティの使い方を解説

    HTML DOM の borderWidth プロパティとはHTML DOM の borderWidth プロパティは、要素の境界線（ボーダー）の幅を取得・設定するためのショートハンド（省略記法）です。値は 1 つから 4 つまで指定でき、指定した値の数に応じて以下のように解釈されます。値を 4 つ指定した場合：上・右・下・左の順（時計回り）に境界線の幅が適用されます。値を 1 つだけ指定した場合：4 つの境界線すべてに同じ幅が適用されます。値を 2 つ指定した場合：上下に 1 つ目の値、左右に 2 つ目の値が適用されます。構文borderWidth プロパティを設定する際の構文は以下のとおり