【CSS基礎】もう迷わない!ボックスモデルの基本を初心者にも分かりやすく解説(図解付き)【CSS基礎】もう迷わない!ボックスモデルの基本を初心者にも分かりやすく解説(図解付き)HTML&CSS2022年04月14日いきなりボックスモデルと言ってもピンと来ませんよね。ボックスモデルはページのデザインやレイアウトに直接関係するとても大事な概念になります。文章や画像などの間に全く余白がなくぎゅうぎゅうに表示されてる場合、どこからどこまでがひとつのまとまりなのか分からず、とても見辛いサイトになりますよね。・コンテントボックスとボーダーボックスの違い私たちが普段目にしているホームページの写真、文字、ボタンなど、丸い形もあれば四角や三角など色々な形状がありますが、実は全て目には見えない「四角形」に収まっています。その四角形を作り出しているのがHTML<タグ>〜</タグ>のひとつのかたまりで、これを要素と言います。イメージとしては下記図のような感じです。>〜</>で囲まれた要素は、四角形の箱を作ってるんだなと思っていただければいいです。上図の例でも、目に見えない四角形<div>〜</div>の中に丸囲みでデザインされた『サ』が収まっているのです。この四角形(要素の表示領域)を「ボックス」、その取り決め(例えば、幅や高さや隙間など)を「ボックスモデル」と言います。「ボックス」には、以下2つの特徴があります。ボックスには大きく分けて「ブロックボックス」と「インラインボックス」の2種類がある。全てのボックスは「ボックスモデル」という規格で定義された構造をしている。「ブロックボックス」と「インラインボックス」。値によってボックスの種類を変えることも出来ます。「ブロックボックス」と「インラインボックス」にはどのような特徴があるのかをひとつずつ見ていきましょう。ブロックボックス「ブロックボックス」は、幅(width)や高さ(height)の指定は出来ますが、幅を指定しなければコンテンツを表示する領域が親要素(※親要素とは?)の幅いっぱいの大きさで作られるボックスです。ブロックボックスは、前後に改行が入ります。ブロックボックスの横に別のブロックボックスが並ぶことはありません。上から下へ縦方向に配置されると思って下さい。以下の例で、分かりやすいように線で囲んでみました。(横幅いっぱいに広がる)・下が250pxで幅を指定。ブロックボックスの特徴まとめ・幅を指定しなければ親要素の幅と同じになる・前後に改行が入る・改行が入るので上から下の縦方向に配置されるインラインボックスインラインボックスは要素が収まるピッタリの大きさのボックスです。インラインボックスの前後に改行は入りませんが、コンテンツが長くなって改行した時はボックスも一緒に改行します。行内の一部としてレイアウトされるイメージです。左から右へ横方向に配置されると思って下さい。以下の例で、分かりやすいように背景色を付けてみました。「こんなふうに」の部分が<span>こんなふうに</span>を用いたインラインボックスです。インラインボックスには次のプロパティが設定できません。レイアウトをする際にはボックスモデルを理解する必要があります。『この箱とこの箱の隙間はこれくらいにしよう!』、『この箱の中身はこれくらいの感覚で並べていこう!』と、そんな感じです。コンテンツ領域(中身)の外側には、余白や枠線を描いたりするための3つの領域があります。このボックスモデルは、段ボールに入って送られてきた商品に例えると分かりやすいです。段ボール箱コンテンツ(要素)コンテンツ(要素)の内容が表示される領域です。画像や文章などがこの領域に入ります。height(高さ)プロパティで指定出来ます。ボーダーの間にある余白の領域です。コンテンツの内側周囲に余白を作りたい時、あるいはコンテンツとボーダーラインとの間を空けたい時に使います。px、em、%なども使え、それぞれを半角スペースで区切ってまとめて指定することも出来ます。外側にある領域で、枠線を引くことが出来ます。四辺を囲むことも一辺だけ線を引くことも可能です。太さ(主にpxを利用。)、形状、色をまとめて指定することもできます。ボックスに背景画像や背景色を適用するとボーダー領域の内側が塗りつぶされます。線の色;margin(マージン)ボックスの一番外側の余白の領域で、上下左右に隣接する別のボックスや、親要素のボックスとの間に余白を設けたい時に使います。書式や指定できる単位もパディングと同じです。左マージン;margin・paddingプロパティの値の省略記述marginプロパティ、paddingプロパティは上下左右の4つの値をまとめて指定出来ますが、省略する書き方も出来ます。Chromeの『デベロッパーツール』を利用すると分かりやすいです。次にその確認方法を説明していきますね。[デベロッパーツール]をクリックします。すると以下のような画面になります。表示されてるWebサイトとデベロッパーツールの場所は設定により左右に分かれたり、上下に分かれたりなど環境によって違いますが問題ないです。2確認方法では、以下の画像で確認方法を説明していきます。四角の上に矢印マーク(1)箇所をクリックし、検証したい箇所にマウスを合わせます。マウスを合わせた箇所は何やら怪しげな色や模様が出ますが今は気にせずクリック(2)します。すると、その検証したいボックスのマージンやパディングなどが今どんな状態なのか、自分が書いたCSSと同時に一番下の方に確認できるボックス(3)が出現します。これが先程から出てきてるボックスモデルです。Chromeの検証ツールでは、『お試し』も可能!3デベロッパーツールでCSSを編集してみるこのデベロッパーツールでは、現状のCSSを確認することはもちろん、お試しで編集することも可能です!まずは検証したい箇所をクリックし、【スタイル】タブ(1)が表示されてるのを確認して下さい。編集を試したい箇所のCSSが表示(2)されるので、チェックボックスを外してみたり、試したい箇所の色や数値の上でクリックし変更を試すことも可能になります。検証のためのお試し編集なので、実際のCSSをここから書き換えている訳ではありません。ページの更新をかければ元々のCSSが反映されます。Chromeのデベロッパーツールは実際の現場でWebサイトを制作する際、必須のツールです。色や数値の微調整や、余白の調整、他にもモバイルサイズではどう見えるか等、デバイスごとの検証も行えるため、このデベロッパーツールで確認しながらCSSファイルを編集する流れの方が効率よく捗ります。Chromeのデベロッパーツールを利用して検証した方が時間削減できます。height(高さ)プロパティを使って大きさを設定することが出来ます。その際、指定する幅や高さが、パディング領域やボーダー領域を「含む」のか「含まない」のかによって、ボックスモデルには2種類の定義があります。それが、「ボーダーボックス」と「コンテントボックス」です。コンテンツ領域に加え、パディング領域やボーダー領域を「含む」のがボーダーボックス。コンテンツ領域のみの幅や高さを設定、つまりパディング領域やボーダー領域を「含まない」のがコンテントボックスです。レイアウトがとても簡単になるボーダーボックスが便利です。ページ全体にボーダーボックスを反映させるCSSは以下のCSSになります。border-box;}まとめ今回書いた内容はボックスモデルの基本的な事になりますが、この基本はWebサイトを作る際にとても大切な知識です。押さえておきたいポイントになります。要素がはみ出たり、思ったような余白が得られなかった時などのヒントになるかもしれません。Webデザインを構築する際、実は余白はとても重要になってきます。余白を使って「ここまでが同じブロックなんだな」と視認性を高める事も必要になってきますので、このボックスモデルの基本を抑えておくことはとても大切です。