【CSS】レッスン3-01:ボックス配置の基礎を理解しよう

レッスン2では基本的なCSSコードの書き方について学習しました。

今回からはCSSコードの応用的な書き方について見ていきましょう。

Lesson3-1:ボックス配置の基礎を理解しよう ◁今回はココ
Lesson3-2:ボックスサイズを変更しよう
Lesson3-3:ボックスを自在に配置しよう
Lesson3-4:画像を自在に配置しよう
Lesson3-5:画像のスタイルを変更しよう
Lesson3-6:背景画像を設定しよう
Lesson3-7:リンクボタンを設置しよう
Lesson3-8:リストとテーブルのスタイルを変更しよう
Lesson3-9:CSS変数を理解しよう

Webページを作るとき、HTMLの要素は「ボックス(箱)」として扱われることをご存じですか?

たとえば <div> タグや <p> タグは、それぞれ見えない「箱」として配置され、その大きさや並び方をCSSで調整することができます。

CSSを使うと、ボックスの大きさを変更したり、横に並べたり、背景色をつけたりと、デザインを自由にコントロールできるようになります。しかし、そのためには「ボックスがどのように配置されるのか」をしっかり理解することが重要です。

そこで本記事では、ボックスの基本的な配置ルールについて学んでいきます。
特に以下の3つの概念を詳しく解説します。

  • ブロックボックス(改行されて積み重なるボックス)
  • インラインボックス(横に並ぶボックス)
  • displayプロパティ(ボックスの表示形式を変更する)

これらを理解することで、HTMLの要素がどのように配置され、どのようにカスタマイズできるのかが明確になります。

さっそく、ボックス配置の基本から学んでいきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

ブロックボックスとは?

HTMLの要素は基本的に「ボックス(箱)」として扱われますが、その中でも ブロックボックス は、ページのレイアウトを決める重要な概念です。

ブロックボックスの特徴

ブロックボックスとは、自動的に横幅いっぱいに広がり、次の要素は改行されて下に配置される要素 のことを指します。

以下のような特徴があります。

  • 横幅(width)は親要素いっぱいに広がる
  • 次の要素は改行されて下に配置される
  • widthheight を自由に指定できる
  • 余白やボーダーを適用できる(margin、padding、border など)

代表的なブロック要素

ブロックボックスを持つ代表的なタグには、以下のようなものがあります。

タグ 役割
<div> レイアウト用の汎用ブロック
<p> 段落
<h1><h6> 見出し
<ul> <ol> <li> リスト
<table> テーブル

たとえば、以下のようなHTMLコードを見てみましょう。

<div style="background-color: lightblue;">これはブロック要素(div)です</div>
<p style="background-color: lightgreen;">これは段落(pタグ)です</p>
  • <div><p>ブロック要素 なので、横幅いっぱいに広がり、次の要素は自動的に改行される
  • background-color をつけると、ボックスの形がわかりやすい

ブロックボックスの大きさを変更する

ブロックボックスは widthheight を自由に指定できます。

<div style="background-color: coral; width: 300px; height: 100px;">
  このブロックは幅300px、高さ100pxです
</div>
  • width: 300px; → 幅を 300 ピクセルにする
  • height: 100px; → 高さを 100 ピクセルにする

ブロック要素の配置と余白(margin と padding)

ブロックボックスは、周囲のスペースを調整するために margin(外側の余白)や padding(内側の余白)を使うことができます。

<div style="background-color: lightcoral; width: 200px; padding: 20px; margin: 30px;">
  これは padding 20px、margin 30px のブロックです
</div>
  • padding: 20px; → 内側に20pxの余白をつける
  • margin: 30px; → 外側に30pxの余白をつける

まとめ

  • ブロックボックスは横幅いっぱいに広がり、次の要素が改行される
  • widthheight を指定できる
  • marginpadding を使って余白を調整できる

インラインボックスとは?

次にインラインボックス について理解を深めていきましょう。

インラインボックスの特徴

インラインボックスとは、横幅が内容の大きさに応じて決まり、改行されずに隣の要素と並ぶボックス のことを指します。

以下のような特徴があります。

  • 横幅(width)は内容の大きさに応じて決まる
  • 改行されずに横に並ぶ
  • widthheight を指定しても基本的に変化しない
  • marginpadding は適用できるが、一部制限がある

ブロックボックスとは異なり、インラインボックスの要素は行の流れ(インラインフロー)の中に配置されます。

そのため、文章内にリンクや強調表示を入れる際によく使用されます。

代表的なインライン要素

インラインボックスを持つ代表的なタグには、以下のようなものがあります。

タグ 役割
<a> ハイパーリンク
<span> 特定の部分をスタイル変更するための汎用要素
<strong> 重要な強調(太字)
<em> 強調(斜体)
<img> 画像(置換要素)

これらの要素はすべて改行されずに横に並ぶのが特徴です。

たとえば、以下のようなHTMLコードを見てみましょう。

<p>この文章の <span style="color: red;">この部分だけ赤く</span> する。</p>
<p>リンクの例:<a href="#">ここをクリック</a></p>
  • <span> はインライン要素なので、文章の一部だけスタイルを変えられる
  • <a> もインライン要素なので、文章の流れの中でリンクを設置できる

インライン要素はwidthheightを指定できない

ブロックボックスでは widthheight を自由に指定できましたが、インラインボックスではこれらの指定が基本的に無視されます。

<a href="#" style="background-color: lightblue; width: 200px; height: 50px;">
  リンクのボックスサイズは変えられる?
</a>
  • <a> はインライン要素のため、widthheight の指定は適用されない
  • 背景色は適用されるが、ボックスの大きさは変わらない

ぜひ上記のコードをブラウザ表示し、widthやheightの値を変更して挙動を確認してみて下さい。

まとめ

  • インラインボックスは内容の大きさに応じて横幅が決まる
  • 改行されず、隣の要素と並ぶ
  • widthheight を指定できないが、display: inline-block; を使えば可能
  • リンクやテキストの一部を装飾する際に使われる

次のコードでは、<div>(ブロック要素)と <span>(インライン要素)が一緒に使われています。

どのように表示されるかを確認してみましょう。

<p>ブロック要素の後</p>
<div style="background-color: lightcoral;">これはブロック要素の div</div>
<p>インライン要素の後</p>
<span style="background-color: lightgray;">これはインライン要素の span</span>
<span style="background-color: lightgreen;">これはもう一つのインライン要素</span>
  • <div><span> の表示の違いを確認する
  • <div> は改行されて表示されるか?
  • <span> は改行されずに横並びになるか?
  • display を入れ替えてみるとどう変化するか?

displayプロパティとは?

ここまでHTMLの要素がブロックボックスインラインボックスに分かれることを学びました。

すべての要素はデフォルトの表示方法(ブロックまたはインライン)が決まっていますが、CSSの display プロパティ を使うことで、それを変更することができます。

displayプロパティの基本

display プロパティは要素の表示形式を決定するCSSのプロパティです。

これを使うことでブロック要素をインラインにしたり、その逆にしたりすることができます。

主なdisplayの値

説明
block ブロック要素のように振る舞う(改行され、横幅が親要素いっぱいになる)
inline インライン要素のように振る舞う(改行されず、横に並ぶ)
inline-block インラインのまま widthheight を適用できる
none 要素を非表示にする(ページ上に存在しない扱いになる)

ブロック要素をインラインにする

たとえば通常はブロック要素である <div> をインライン要素に変更することができます。

<div style="background-color: lightblue; display: inline;">ブロック要素をインラインに</div>
<div style="background-color: lightgreen; display: inline;">変えてみる</div>

通常はブロック要素の <div>display: inline; に変更することで、改行されずに横並びになる。

インライン要素をブロックにする

逆に通常はインライン要素である <a><span> をブロック要素に変更することもできます。

<a href="#" style="background-color: lightcoral; display: block; padding: 10px;">
  ブロック要素のように表示されるリンク
</a>
  • <a> は通常インライン要素だが、display: block; を指定するとブロック要素のようになり、次の行に配置される
  • padding: 10px; を指定して、見た目をボタンのようにもできる

inline-block でインラインのままサイズ変更する

これまでの説明で「インライン要素は widthheight を指定できない」というルールがありました。

しかしdisplay: inline-block; を使うことで、インライン要素のまま widthheight を指定できるようになります。

<a href="#" style="display: inline-block; width: 200px; height: 50px; background-color: lightblue; text-align: center; line-height: 50px;">
  ボタン風リンク
</a>
  • display: inline-block; を指定すると、インライン要素のまま widthheight が有効になる
  • text-align: center;line-height: 50px; を使って文字を中央に配置

display: none で要素を非表示にする

display: none; を指定すると、その要素は完全にページ上に存在しない状態になります。

<p>この文章は表示される</p>
<p style="display: none;">この文章は非表示</p>

2つの <p> タグのうち、2つ目の p タグは display: none; にしているため、ブラウザには表示されない

まとめ

  • display プロパティを使うと、要素の表示方法を変更できる
  • block を指定すると、ブロック要素のように改行される
  • inline を指定すると、インライン要素のように横に並ぶ
  • inline-block を使うと、インライン要素のまま widthheight を指定できる

通常のインライン要素は widthheight を指定しても無視されますが、display: inline-block; を使うとどうなるでしょうか?

次のコードを実行し、通常の inlineinline-block の違いを確認してください。

<span style="background-color: lightblue; width: 200px; height: 50px;">
  これはインライン要素
</span>

<span style="display: inline-block; background-color: lightgreen; width: 200px; height: 50px;">
  これはインラインブロック要素
</span>
  • widthheight はどのように適用されるか?
  • inline-block を使うと、通常の inline と比べて何が違うか?

まとめ

ここまで、「ボックス配置の基礎」について学んできました。

今回学んだ ブロックボックス・インラインボックス・displayプロパティ は、すべてのWebページのレイアウトに関わる重要な概念です。

しっかりと理解した上で、先へ進みましょう。

今回学んだポイント

display block inline inline-block
width/height 指定可 指定不可 指定可
border 指定可 制限あり 指定可
padding 指定可 制限あり 指定可
margin 指定可 制限あり 指定可
  1. ブロックボックス
    • 横幅いっぱいに広がり、次の要素は改行される
    • widthheightmarginpadding を自由に調整できる
  2. インラインボックス
    • 横幅は内容の大きさに応じて決まり、改行されずに横に並ぶ
    • widthheight は指定できない(ただし inline-block を使えば可能)
  3. displayプロパティ
    • blockinline を指定することで要素の表示形式を変更できる
    • inline-block を使うと、インラインのままサイズを指定できる
    • none を使うと要素を非表示にできる

練習問題3-1:ボックスの配置を理解しよう!

以下の条件に従ってHTMLとCSSを書き、ブロックボックス・インラインボックス・displayプロパティ・置換要素の理解を深めましょう。

すべてのコードを書いたらブラウザで確認し、要素の配置が予想通りになっているかを確かめてください。

1. ブロック要素(div)

  • 300px、高さ 150px のブロック要素を作成する
  • 背景色は lightblue にする
  • margin: 20px; を指定して、他の要素との間に余白をつける

2. インライン要素(span)

  • 文章の中に span タグを使い、一部のテキストの背景色を yellow にする
  • widthheight を指定しても影響がないことを確認する

3. display: inline-block; を使用

  • display: inline-block; を指定し、幅 200px、高さ 100px の要素を作成する
  • 背景色を lightcoral にして、text-align: center; を指定する
  • この要素が 横に並ぶかどうか を確認する

初めてのWebサイトを作ろう3-1

このサイトの Lesson1-1(HTML学習の入り口) か Lesson2-1(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

現在準備中です。暫くお待ちください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る