CSSでボックスモデルを操作する方法

提供：Dev Guides
移動先:案内、検索

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

ボックスモデルは、ブラウザが要素のサイズと他の要素との相互作用を決定するために使用するルールセットです。 HTML要素のコンテンツといくつかのCSSプロパティはすべて、ブラウザがHTMLおよびCSSコードを最終的なレンダリングされたWebページに変換するために使用する計算に貢献します。 ボックスモデルがどのように機能し、それを効果的に操作するかを知ることは、適切に配置されたデザインと、不要な水平スクロールとコンテンツ間の余分なスペースがあるWebページとの違いになります。 ボックスモデルがどのように機能するかを理解すると、CSSをより効率的に記述し、ブラウザーでのレンダリングの問題の解決策を見つけるのに役立ちます。

注：ほとんどのHTML要素は、インラインまたはブロックの2つのカテゴリのボックスのいずれかに分類されます。 <span>要素は、テキストコンテンツとインラインのままであるため、一般的なインライン要素です。 <div>要素は、汎用ブロック要素です。 このチュートリアルでは、ボックスモデルのルールセットが最も広く使用されているため、ボックスモデルがブロック要素にどのように影響するかに焦点を当てます。

displayプロパティを変更すると、特にテーブル、Flexbox、CSSグリッドを操作する場合に、このチュートリアルの目的とは異なる方法でボックスモデルの機能が変更される可能性があることに注意してください。


このチュートリアルでは、主要なプロパティであるmargin、padding、border、width、およびheightプロパティを使用します。ボックスモデルが使用します。 また、box-sizingプロパティを使用して、ボックスモデルを変更する方法を理解します。 最後に、ブラウザの開発者ツールを使用してボックスモデルを検査します。

前提条件

HTMLおよび開発者ツールの設定

このセクションでは、チュートリアル全体で使用するHTMLベースを設定します。 また、ブラウザの開発者ツールにアクセスし、それらを使用して、ボックスモデルを構成するプロパティを特定するのに役立てます。

まず、テキストエディタでindex.htmlを開き、次のHTMLをファイルに追加します。

index.html 

<!doctype html>
<html>
    <head>
        <title>Box Model</title>
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
    </body>
</html>

HTMLには、<link />タグにstyles.cssファイルへの参照が含まれています。 先に進み、そのファイルを作成します。 次のセクションで編集を開始します。

次に、ボックスモデルにスタイルを適用し、作業を開始するためのコンテンツが必要になります。 次のコードブロックで、強調表示されたコードを<body>タグ内に追加します。 このような強調表示されたコードは、コードの変更と追加を識別するためにチュートリアル全体で使用されます。 コンテンツについては、2つの<div>要素を作成し、ルイス・キャロルによる不思議の国のアリスからの次の2つの引用符で埋めます。

index.html 

...
<body>
    <div>
        Alice had begun to think that very few things indeed were really impossible.
    </div>

    <div>
        "Begin at the beginning," the King said gravely, "and go on till you come to the end: then stop."
    </div>
</body>
...

次に、選択したブラウザでindex.htmlを開き、ブラウザの開発者ツールを開きます。 これは、多くの場合、ページを右クリックしてInspectまたはInspectElementを選択することで実行できます。 開発者ツールを開いたら、最初の<div>要素を調べます。 FirefoxとChromeの両方で、ボックスモデルの視覚的な図が表示されます。 以下は、Firefox開発者ツールにあるものです。

Firefoxからのボックスモデルの視覚化を詳しく見ると、ボックスモデルを構成するプロパティは、中央から外側に向かってwidth、height、padding、[として表示されます。 X175X]、およびmargin。 これらの5つのプロパティは、ボックスモデルを構成し、要素の寸法特性を提供します。 各プロパティを操作し、ブラウザで変更を更新するときは、要素のこのボックスモデルの視覚化を参照するために、開発者ツールを開いたままにしてください。

このセクションでは、チュートリアル用にHTMLを設定し、ブラウザの開発者ツールを開いて、ボックスモデルの視覚化ガイドにアクセスしました。 次のセクションでは、borderプロパティのCSSの記述を開始します。これにより、<div>要素のボックスモデルの最初の視覚スタイルが提供されます。

borderプロパティを使用したコンテナの視覚化

HTMLを設定したので、borderプロパティから始めてボックスモデルのプロパティの適用を開始します。 このセクションでは、borderプロパティを使用して、<div>要素の視覚的なアウトラインを作成し、プロパティがボックスモデルにどのように影響するかを確認します。

borderプロパティは、border-width、border-style、およびborder-color。 さらに、borderのように機能し、border-right-width、border-right-style、およびborder-right-color。

border-width、border-style、およびborder-colorも、border-top、border-right、border-bottomの省略形として動作します。 X108X] に対応し、スタイルを時計回りに上から右、次に下、最後に左側に適用します。 たとえば、border-width: 10px 2px 8px 4px;は、10pxの境界線を上に、2pxの境界線を右に、8pxの境界線を下に、[ X142X]ボックスの左側の境界線。

テキストエディタでstyles.cssを開き、div要素のタイプセレクタを記述して、borderプロパティを追加します。 一般的な順序は幅、スタイル、色である傾向がありますが、値の順序は重要ではありません。 そのことを念頭に置いて、borderプロパティの値を1px solid redに設定します。

styles.css 

div {
    border: 1px solid red;
}

変更内容をstyles.cssに保存し、ブラウザでindex.htmlを開きます。 <div>要素の内容は、ボックスの周囲にある細い赤い線でしっかりと包まれます。 2行のテキストの間には、太い境界線があります。 これは、2つの異なる要素の境界線が並べて設定され、境界線の視覚的なサイズが2倍になる場合に発生します。 ブラウザでの変更は次のようになります。

ブラウザでindex.htmlを開いた状態で、ブラウザ開発者ツールに戻り、2つの<div>要素のいずれかを調べます。 要素のボックスモデルを表示する開発者ツールのビューに戻ります。 最も内側のボックスには、要素の幅と高さ、次にパディング、最後に境界線があり、ボックスの両側に1があることに注意してください。 Firefox開発者ツールからの次の画像を参照してください。

Firefoxウィンドウを986px幅に設定すると、ボックスモデル図の内側のボックスの幅は968 x 19になりますが、図に続くのは970x21の別の値です。 これは、計算されたの幅と高さであり、height、width、border、およびpaddingプロパティ値を一緒に。 このサイズの違いは、どちらの寸法でもさらに2つあり、境界線が高さと幅に追加するサイズと一致します。

このセクションでは、<div>要素にborderを作成し、この1つのプロパティがこれらの要素の計算された寸法にどのように影響するかを確認しました。 次のセクションでは、paddingプロパティを使用して、境界線とテキストの間に内側の間隔を適用することにより、スタイルを拡張します。

paddingプロパティを使用してコンテナ内にスペースを作成する

前のセクションのborderプロパティを使用した作業では、ボックスに視覚的な境界が与えられましたが、テキストに非常に近いものです。 次に、paddingプロパティを使用して、ボックスの内部にスペースを追加し、テキストとボックスの境界線の間にスペースを確保します。

borderプロパティと同様に、paddingプロパティも省略形のプロパティです。 ただし、paddingは、padding-bottomプロパティなど、側面のみの省略形です。 単一の値を使用する場合、同じ値がすべての側に適用されます。 たとえば、padding: 20px;は、すべての側面に20pxパディングを適用します。 2つの値を使用する場合、最初の値は上面と下面に適用され、2番目の値は左側と右側に適用されます。 たとえば、次のpadding: 20px 40px;は、ボックスの上下に20pxのパディングを適用し、40pxのパディングは左側と右側に適用します。 これは、上側、左側、右側、次に下部に続く3つの値に進みます。 4つの値では、各辺は上、右、下、および左として表されます。

テキストエディタでstyles.cssファイルを開き、borderプロパティの後に、30px 60pxの値を持つpaddingプロパティを追加します。 CSSが複数の値を区別する方法であるため、値の間にスペースを入れることが重要です。

styles.css 

div {
    border: 1px solid red;
    padding: 30px 60px;
}

最新の変更をstyles.cssファイルに保存してから、ブラウザのindex.htmlファイルに戻り、ページを更新します。 2つの要素の高さが増し、赤いボックス内のテキストの位置が右下にシフトし、テキストの下に余分なスペースがあります。 ブラウザがレンダリングすると予想されるものについては、次の画像を参照してください。

もう一度、ブラウザ開発者ツールに戻り、2つのボックスのいずれかを調べます。 ボックスモデル図には、ボックスの上下に30、左右に60のパディングが表示されます。

<div>要素のpaddingプロパティを使用して、境界線とテキストの間に視覚的なスペースを与えることにより、ボックスモデルの複雑さを拡張しました。 ブラウザの開発者ツールのボックスモデルビジュアルガイドでは、これらの変更と、表示される寸法値への影響を紹介しました。 次に、widthプロパティとheightプロパティを操作して、これらがボックスモデルにどのように影響するか、およびこれら2つのプロパティがpaddingプロパティによってどのように変更されるかを確認します。

widthおよびheightプロパティを使用して寸法幅を制限する

このセクションでは、定義されたwidthおよびheightプロパティ値を使用して、<div>要素に寸法を適用し、ボックスモデルでこれらのプロパティをどのように処理するかに焦点を当てます。 このセクションでは、widthとheightの値にピクセル単位を使用します。これは固定寸法と呼ばれることが多く、パーセント単位はと呼ばれます。流体寸法。 前の2つのプロパティとは異なり、widthとheightは省略形ではありません。 これらは定義された値を適用します。 ただし、CSSを使用してディメンション値を設定すると、言語の初期の仕様に戻る疑わしい効果が発生します。 widthおよびheightは、paddingおよびborderの値が適用される前の表示コンテンツの設定寸法です。 これにより、ボックスが予想よりも大きくなります。

ボックスモデルのこの側面を試すには、テキストエディタでstyles.cssファイルに戻り、[X132X]プロパティに250pxの値を追加します。

styles.css 

div {
    ...
    width: 250px;
}

変更内容をstyles.cssに保存し、ブラウザに切り替えて、index.htmlを更新します。 ページがリロードされると、コンテンツははるかに狭くなり、複数行のテキストに折り返されます。 これがブラウザでどのように表示されるかについては、次の画像を参照してください。

ブラウザ開発者ツールを開き、2つの<div>要素のいずれかを調べます。 ボックスの中央には、widthプロパティで定義された250x57の値があります。 ただし、Firefoxボックスモデル図の画像が示すように、要素の全幅は250ではなく、372です。

計算される幅は、コンテンツの幅を設定するwidth、左右のpadding値、左右のborder-widthの順に決定されます。 ]値。 ボックスモデルのこの構成はCSSの開発の初期に考案されたものであり、開発者はwidthおよびheightプロパティがボックスではなくコンテンツのサイズを定義することを覚えておく必要があります。 これはデフォルトの動作であり、それ自体を理解すると、将来の問題のデバッグに役立ちます。

幅に固定ピクセル値を使用する代わりに、100%の幅に流動的なパーセントを使用します。 デフォルトでは、<div>要素は全幅を拡張しますが、デフォルトの全幅を拡張することと、宣言されたwidth値を100%にすることには違いがあります。 styles.cssで、250pxを100%に変更します。

styles.css 

div {
    ...
    width: 100%;
}

styles.cssファイルを保存し、ブラウザでindex.htmlを更新します。 <div>要素は、ウィンドウのサイズに関係なく、ビューポートのエッジを超えて拡張されるようになりました。 何が起こっているかは、250が372になったときに起こったことと同じです。要素の全幅は、使用可能な幅の100%に、paddingと[で作成された122ピクセルを加えたものになります。 X195X]値。

styles.cssファイルに戻り、widthの値を250pxに戻すことから始めます。 次に、heightプロパティを追加し、コンテンツの高さよりも小さくなることがわかっている値を追加します。 40pxは、次のコンテンツで十分です。

styles.css 

div {
    ...
    width: 250px;
    height: 40px;
}

これらの変更をstyles.cssファイルに保存し、ブラウザでindex.htmlを更新します。 実際にブラウザがジレンマでポーズをとっている場合、パディングは下部で小さいように表示されます。高さは明示的に設定されていますが、コンテンツはコンテナよりも大きくなっています。 ブラウザが従うルールは、定義されたheight値を使用し、より長いコンテンツがある場合は、ボックスの外側に拡張されます。

ブラウザ開発者ツールを開いた状態で、<div>要素の1つを検査すると、その要素がレンダリングされたビューで強調表示されます。 ボックスモデル図のpadding領域にカーソルを合わせると、要素のパディング領域が強調表示されます。 テキストコンテンツはパディング領域に入ります。 ブラウザに表示される内容については、次の画像を参照してください。

コンテンツの長さが可変である可能性がある状況では、定義されたheight値を避け、代わりにコンテンツの自然な高さに高さを決定させるのが最善です。 Webブラウザーは、デフォルトで下向きに拡大し、垂直方向にスクロールするように構築されているため、高さは予測不可能で、制御しにくい寸法になっています。

このような状況では、height属性を完全に削除することをお勧めします。 テキストエディタでstyles.cssに戻り、heightプロパティとその値をファイルから削除して、変更を保存します。 heightの値を削除すると、高さはコンテナー内のコンテンツの量に依存します。 CSSは次のようになります。

styles.css 

div {
  border: solid red 1px;
  padding: 30px 60px;
  width: 250px;
}

このセクションでは、widthおよびheightプロパティを<div>要素に適用しました。 heightプロパティは、Webコンテンツの流動性のために、実装が難しい場合があることを発見しました。 最後に、これらのディメンションプロパティがpaddingプロパティの前の要素に適用され、意図したよりも大きなディメンションにつながる方法を学びました。 次に、marginプロパティを使用して要素の外側の間隔を操作します。

marginプロパティを使用してコンテナの外側にスペースを作成する

この次のセクションでは、marginプロパティを使用して境界線の外側に間隔を適用し、他のボックス間に間隔を空けます。 marginプロパティは、paddingプロパティと同様に機能しますが、同じロングハンドプロパティとショートハンドプロパティのバリエーションがあります。 marginを使用して、ページ上の2つの<div>要素の間にスペースを設け、marginがpaddingとどのように異なるかを調べます。

まず、テキストエディタでstyles.cssを開き、marginプロパティをdivタイプセレクタに追加し、20pxの値を指定します。 これにより、ページの<div>要素の両側に20pxスペースが適用されます。

styles.css 

div {
    ...
    margin: 20px;
}

変更内容をstyles.cssに保存し、ブラウザを開いてindex.htmlファイルをロードまたは更新します。 コンテナが右下に20ピクセル移動していることがわかります。 これがどのように見えるかについては、次の画像を参照してください。

ブラウザの2つの<div>要素間の間隔を確認してください。 これらの間隔は20pxであり、40pxではありませんが、最初の<div>の下部にマージンがあり、2番目の[の上部にマージンがあります。 X165X]。 これは、marginプロパティの機能により、隣接するコンテナがmarginプロパティとオーバーラップし、より大きなマージンから値を取得するためです。 これは最初は意味がないかもしれませんが、ボックスモデルを物理オブジェクトを記述し、次にそれらのオブジェクトのそれぞれの周りに必要なスペースを定義するものと考えると役立つ場合があります。 たとえば、10人の人がいて、各人の周囲に2メートルのスペースが必要な場合、ある人から次の人までのスペースは4メートルではなく2メートルになります。

最大のmargin値が外側の間隔の値として使用されるため、プロパティの値を変更して、上下が異なるようにします。 リストの最初の値と3番目の値が異なることを確認するか、margin-topプロパティとmargin-bottomプロパティを使用して、省略形でこれを行うことができます。 上、右、左の値を20pxのままにしますが、下の値を60pxに変更します。

styles.css 

div {
    ...
    margin: 20px 20px 60px;
}

marginの短縮リストの最初の値は上限値を定義し、2番目の値は左右を定義し、3番目の値は下限値を定義します。 変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新します。 次の画像に示すように、2つのコンテナの間にはるかに多くのスペースができます。

次に、ブラウザ開発者ツールを使用して、2つの<div>要素の1つを調べます。 他のすべてのプロパティとは異なり、marginの値は、計算されたコンテナの高さや幅を変更しません。

marginプロパティには、paddingにはない2つの特別な機能があります。 まず、marginは負の値を受け入れます。つまり、隣接する要素に近づき、それらをオーバーラップさせる可能性があります。 さらに、marginプロパティは、コンテンツの中央揃えに使用できるautoの値を受け入れます。 ブラウザのデフォルトの動作により、このauto値は、コンテンツを水平方向に中央揃えにし、定義されたwidthプロパティが使用可能な合計スペースの100% o未満の場合にのみ適用されます。

テキストエディタでstyles.cssファイルに戻り、marginプロパティの2番目の値を20pxからautoに変更します。

styles.css 

div {
    ...
    margin: 20px auto 60px;
}

この変更をstyles.cssに保存し、ブラウザにindex.htmlをリロードします。 次の画像のように、<div>コンテナは水平方向の中央に表示されます。

このセクションのmarginプロパティを使用して、<div>要素の引用符の間にスペースを追加しました。 marginを変更して、隣接する値の最大値とどのように重なり、延期されるかを示しました。 また、margin-leftプロパティとmargin-rightプロパティの値を、コンテナを中央に配置するautoに設定します。 最後のセクションでは、box-sizingプロパティを使用して、ボックスモデルの動作とプロパティの相互関係を変更します。

box-sizingプロパティを使用してボックスモデルの動作を変更する

この最後のセクションでは、box-sizingプロパティを使用します。これにより、ボックスモデルで定式化の方法を変更できます。 ボックスモデルで作業したように、width、height、padding、およびborderプロパティがボックスモデルの全体的な寸法に影響しました。 box-sizingプロパティを使用すると、ブラウザでpaddingとborderを計算して、widthと[ X159X]の値。

ここまでは、box-sizingプロパティのデフォルト状態であるcontent-boxを使用してきました。 content-boxボックスモデルは、width、padding-right、padding-left、border-right-width、およびborder-left-widthを追加して幅の寸法を決定します]ボックスの最終的に計算された幅の値になります。 同様に、content-boxは、height、padding-top、padding-bottom、border-top-width、およびborder-bottom-widthを追加して、高さの寸法を求めます。 ]ボックスの最終的に計算された高さの値に到達します。 前のセクションで説明したように、これにより、レイアウトとデザインが混乱する可能性のある意図したボックスよりも大きくなります。

box-sizingプロパティのcontent-box値の代替は、border-boxです。 宣言されたwidthおよびheight値にpaddingおよびborderプロパティを追加して計算値を取得する代わりに、値を減算します。 つまり、border-boxボックスモデルのボックスの幅は、widthプロパティから左右のpadding値と左右のborder-widthの値。 結果は、widthプロパティ値に等しい計算された幅です。

テキストエディタでstyles.cssを開き、border-boxの値を持つbox-sizingプロパティをdivタイプセレクタに追加します。

styles.css 

div {
    ...
    box-sizing: border-box;
}

ブラウザに戻り、index.htmlをリロードします。 width、padding、およびborderの計算された幅が超えないように、ブラウザーがボックスモデルの幅を縮小しているため、コンテナーのサイズは小さくなります。 CSSファイルで定義されたwidth値。

ブラウザ開発者ツールを使用して<div>要素の1つを調べ、box-sizingプロパティがボックスモデルにどのように影響したかを確認します。 Firefox開発者ツールでは、styles.cssのwidthプロパティの値が250pxであっても、幅は128pxとして定義されています。 要素の計算値は250pxで、右側のパディングから128pxと60px、左側のパディングから60pxを加算して計算されます。1px、左の境界線の幅から1px。 Firefox開発者ツールボックスのモデルを次の画像に示します。

box-sizingプロパティは、スターセレクターとも呼ばれるユニバーサルセレクター（*）を使用して、Webページのすべての要素で変更できます。 このセレクターは、ページ上のすべての要素にスタイルを適用します。 このセレクターは、すべての要素に影響を及ぼし、かなりの量の要素を含むページでパフォーマンスの問題を引き起こす可能性があるため、注意して使用する必要があります。

styles.cssを開き、divタイプセレクターからbox-sizingプロパティを削除します。 次に、box-sizingプロパティがborder-boxに設定されたdivセレクターの前にユニバーサルセレクターを追加します。

styles.css 

* {
    box-sizing: border-box;
}
...

これらの変更をstyles.cssに保存し、index.htmlをリロードします。 視覚的には違いはありません。 ボックスモデルを変更する責任は、明示的な設定からユニバーサルな設定に移動しました。

このセクションでは、box-sizingプロパティを使用して、ボックスモデルがborder-box値でどのように動作するかを変更し、ボックスモデルをより包括的に操作する方法を作成しました。 また、ユニバーサルセレクターと、box-sizingプロパティをWebページのすべての要素に適用する方法についても学びました。

結論

ボックスモデルは、スタイルが要素にどのように適用され、スタイルがコンテンツのフローにどのように影響するかを理解するために必要です。 このチュートリアルでは、border、padding、margin、height、およびwidthプロパティの使用方法とそれらの関係について学習しました。ボックスモデルでお互いに。 box-sizingプロパティのデフォルトのボックスモデルを使用しました。これは、スタイリング状況の計画とデバッグに役立ちます。 また、ボックスモデルの機能を変更し、ボックスモデルをより直感的に操作できるようにするborder-box値についても学習しました。 ブラウザのデフォルトに頼ることは、良好なパフォーマンスを維持するのに役立つため、ボックスモデルの変更は、普遍的ではなく、必要に応じて行う必要があることに注意してください。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。

「https://www.finddevguides.com/index.php?title=CSSでボックスモデルを操作する方法&oldid=102094」から取得
Powered by MediaWiki