
レッスン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)は親要素いっぱいに広がる
- 次の要素は改行されて下に配置される
width
やheight
を自由に指定できる- 余白やボーダーを適用できる(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
をつけると、ボックスの形がわかりやすい

ブロックボックスの大きさを変更する
ブロックボックスは width
や height
を自由に指定できます。
<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の余白をつける

まとめ
- ブロックボックスは横幅いっぱいに広がり、次の要素が改行される
width
やheight
を指定できるmargin
とpadding
を使って余白を調整できる


インラインボックスとは?
次にインラインボックス について理解を深めていきましょう。
インラインボックスの特徴
インラインボックスとは、横幅が内容の大きさに応じて決まり、改行されずに隣の要素と並ぶボックス のことを指します。
以下のような特徴があります。
- 横幅(width)は内容の大きさに応じて決まる
- 改行されずに横に並ぶ
width
やheight
を指定しても基本的に変化しないmargin
とpadding
は適用できるが、一部制限がある
ブロックボックスとは異なり、インラインボックスの要素は行の流れ(インラインフロー)の中に配置されます。
そのため、文章内にリンクや強調表示を入れる際によく使用されます。
代表的なインライン要素
インラインボックスを持つ代表的なタグには、以下のようなものがあります。
タグ | 役割 |
---|---|
<a> |
ハイパーリンク |
<span> |
特定の部分をスタイル変更するための汎用要素 |
<strong> |
重要な強調(太字) |
<em> |
強調(斜体) |
<img> |
画像(置換要素) |
これらの要素はすべて改行されずに横に並ぶのが特徴です。
たとえば、以下のようなHTMLコードを見てみましょう。
<p>この文章の <span style="color: red;">この部分だけ赤く</span> する。</p> <p>リンクの例:<a href="#">ここをクリック</a></p>
<span>
はインライン要素なので、文章の一部だけスタイルを変えられる<a>
もインライン要素なので、文章の流れの中でリンクを設置できる

インライン要素はwidth
やheight
を指定できない
ブロックボックスでは width
や height
を自由に指定できましたが、インラインボックスではこれらの指定が基本的に無視されます。
<a href="#" style="background-color: lightblue; width: 200px; height: 50px;"> リンクのボックスサイズは変えられる? </a>
<a>
はインライン要素のため、width
やheight
の指定は適用されない- 背景色は適用されるが、ボックスの大きさは変わらない
ぜひ上記のコードをブラウザ表示し、widthやheightの値を変更して挙動を確認してみて下さい。
まとめ
- インラインボックスは内容の大きさに応じて横幅が決まる
- 改行されず、隣の要素と並ぶ
width
やheight
を指定できないが、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 |
インラインのまま width や height を適用できる |
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
でインラインのままサイズ変更する
これまでの説明で「インライン要素は width
や height
を指定できない」というルールがありました。
しかしdisplay: inline-block;
を使うことで、インライン要素のまま width
や height
を指定できるようになります。
<a href="#" style="display: inline-block; width: 200px; height: 50px; background-color: lightblue; text-align: center; line-height: 50px;"> ボタン風リンク </a>
display: inline-block;
を指定すると、インライン要素のままwidth
やheight
が有効になる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
を使うと、インライン要素のままwidth
やheight
を指定できる
通常のインライン要素は width
や height
を指定しても無視されますが、display: inline-block;
を使うとどうなるでしょうか?
次のコードを実行し、通常の inline
と inline-block
の違いを確認してください。
<span style="background-color: lightblue; width: 200px; height: 50px;"> これはインライン要素 </span> <span style="display: inline-block; background-color: lightgreen; width: 200px; height: 50px;"> これはインラインブロック要素 </span>
width
やheight
はどのように適用されるか?inline-block
を使うと、通常のinline
と比べて何が違うか?
今回学んだポイント
display | block | inline | inline-block |
width/height | 指定可 | 指定不可 | 指定可 |
border | 指定可 | 制限あり | 指定可 |
padding | 指定可 | 制限あり | 指定可 |
margin | 指定可 | 制限あり | 指定可 |
- ブロックボックス
- 横幅いっぱいに広がり、次の要素は改行される
width
やheight
、margin
やpadding
を自由に調整できる
- インラインボックス
- 横幅は内容の大きさに応じて決まり、改行されずに横に並ぶ
width
やheight
は指定できない(ただしinline-block
を使えば可能)
- displayプロパティ
block
やinline
を指定することで要素の表示形式を変更できるinline-block
を使うと、インラインのままサイズを指定できるnone
を使うと要素を非表示にできる

練習問題3-1:ボックスの配置を理解しよう!
以下の条件に従ってHTMLとCSSを書き、ブロックボックス・インラインボックス・displayプロパティ・置換要素の理解を深めましょう。
すべてのコードを書いたらブラウザで確認し、要素の配置が予想通りになっているかを確かめてください。
1. ブロック要素(div)
- 幅
300px
、高さ150px
のブロック要素を作成する - 背景色は
lightblue
にする margin: 20px;
を指定して、他の要素との間に余白をつける
2. インライン要素(span)
- 文章の中に
span
タグを使い、一部のテキストの背景色をyellow
にする width
やheight
を指定しても影響がないことを確認する
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のテキスト&問題集トップへ戻る
トップページへ戻る