レッスン9: Webページを思い通りに！CSS表示形式の使い分けを学ぼう
要素の表示形式（display プロパティ）について学び、レイアウトの基礎を理解します。
🎯 学習目標
- 要素の表示形式（block、inline、inline-block、none）を理解する
- ブロック要素とインライン要素の違いを説明できる
- displayプロパティを使って要素の表示形式を変更できる
- 実際の場面で適切な表示形式を選択できる
📘 目次
📚 レッスン
1. ブロック要素とインライン要素の基礎
HTML要素には「ブロック要素」と「インライン要素」という2つのタイプがあります。これらの違いを理解することで、Webページのレイアウトがより理解しやすくなります。
ブロック要素の特徴
| 特徴 | 説明 |
|---|---|
| 幅 | 親要素の幅いっぱいに広がる（基本的に100%） |
| 改行 | 前後に改行が入る（縦に並ぶ） |
| サイズ設定 | width（幅）、height（高さ）を自由に設定できる |
| 余白 | margin（外側の余白）、padding（内側の余白）が効く |
代表的なブロック要素：
<div>- 汎用のコンテナ<p>- 段落<h1>〜<h6>- 見出し<ul>、<ol>- リスト
ブロック要素のデモ
div要素（ブロック要素）
p要素（ブロック要素）
h4要素（ブロック要素）
- リスト項目1
- リスト項目2
上のデモでは、各ブロック要素が親要素の幅いっぱいに広がり、前後に改行が入って縦に積み重なっていることがわかります。
インライン要素の特徴
| 特徴 | 説明 |
|---|---|
| 幅 | 内容の分だけ幅を取る |
| 改行 | 改行されない（横に並ぶ） |
| サイズ設定 | width、heightは基本的に効かない |
| 余白 | 左右のmargin、paddingは効くが、上下は効きにくい |
代表的なインライン要素：
<span>- 汎用のインラインコンテナ<a>- リンク<strong>- 強調（太字）<em>- 強調（斜体）
インライン要素のデモ
これはspan要素とa要素（リンク）とstrong要素（太字）とem要素（斜体）が横に並んでいる例です。
上のデモでは、インライン要素が横に並んで表示され、内容の分だけ幅を取っていることがわかります。
イメージとしては：
ブロック要素 = 「箱」のように積み重なる
インライン要素 = 文章の中の「単語」のように横に流れる
ブロック要素 = 「箱」のように積み重なる
インライン要素 = 文章の中の「単語」のように横に流れる
2. displayプロパティの基本
CSSのdisplayプロパティを使うことで、要素の表示形式を変更できます。これにより、もともとブロック要素だった要素をインライン要素のように表示したり、その逆も可能になります。
よく使うdisplayの値
| 値 | 説明 | 使用場面 |
|---|---|---|
block |
ブロック要素として表示 | 縦に並べたい時 |
inline |
インライン要素として表示 | 横に並べたい時 |
inline-block |
横に並ぶが、サイズ指定可能 | 横に並べつつサイズも指定したい時 |
none |
表示されない（非表示） | 要素を隠したい時 |
3. display: block; の使い方
display: block;を指定すると、その要素はブロック要素のように動作します。
コード例とデモ
<style>
.block-example {
display: block;
background-color: lightblue;
padding: 10px;
margin: 5px 0;
width: 200px;
}
</style>
<span class="block-example">ブロック1</span>
<span class="block-example">ブロック2</span>
<span class="block-example">ブロック3</span>デモ
ブロック1 ブロック2 ブロック3本来<span>はインライン要素ですが、display: block;により縦に並んで表示されています。
どんな時に使う？
- リンク（
<a>）を大きなボタンのように表示したい時 - インライン要素に幅や高さを設定したい時
- レスポンシブデザインでモバイル表示時に縦並びにしたい時
4. display: inline; の使い方
display: inline;を指定すると、その要素はインライン要素のように動作します。
コード例とデモ
<style>
.inline-example {
display: inline;
background-color: lightcoral;
padding: 5px 10px;
margin: 0 5px;
}
</style>
<div class="inline-example">インライン1</div>
<div class="inline-example">インライン2</div>
<div class="inline-example">インライン3</div>デモ
インライン1
インライン2
インライン3
本来<div>はブロック要素ですが、display: inline;により横に並んで表示されています。
どんな時に使う？
- リストアイテムを横並びにしたい時（ナビゲーションメニューなど）
- ブロック要素を文章の流れの中に配置したい時
- タグのような小さなUIパーツを作る時
5. display: inline-block; の使い方
display: inline-block;は、「横に並ぶ」というインライン要素の特徴と、「サイズを指定できる」というブロック要素の特徴を併せ持ちます。
コード例とデモ
<style>
.inline-block-example {
display: inline-block;
background-color: lightgreen;
padding: 15px;
margin: 5px;
width: 100px;
height: 80px;
text-align: center;
}
</style>
<div class="inline-block-example">ボックス1</div>
<div class="inline-block-example">ボックス2</div>
<div class="inline-block-example">ボックス3</div>デモ
ボックス1
ボックス2
ボックス3
横に並んでいるのに、幅と高さを指定できているのがわかります。
どんな時に使う？
- カードレイアウト（商品一覧など）を作る時
- ボタンを横に並べたい時
- 画像ギャラリーのサムネイルを配置する時
- フォームの入力欄を横に並べたい時
6. display: none; の使い方
display: none;を指定すると、その要素は完全に非表示になります。他の要素からも存在しないものとして扱われます。
コード例とデモ
<style>
.show {
display: block;
background-color: lightyellow;
padding: 10px;
margin: 5px 0;
}
.hide {
display: none;
}
</style>
<div class="show">表示される要素</div>
<div class="hide">非表示の要素</div>
<div class="show">また表示される要素</div>デモ
表示される要素
また表示される要素
真ん中の要素が完全に非表示になり、スペースも空いていないことがわかります。
どんな時に使う？
- モバイル表示時に一部の要素を隠したい時
- 条件によって表示する内容を切り替えたい時
注意：
display: none;と似た効果を持つvisibility: hidden;もありますが、こちらは要素は非表示になるものの、スペースは残ります。用途に応じて使い分けましょう。
7. 実践的な使用例
実際のWebサイトでよく見る例を紹介します。
例1：ナビゲーションメニュー
<style>
.nav-menu {
list-style: none;
padding: 0;
}
.nav-menu li {
display: inline-block;
margin-right: 20px;
}
.nav-menu a {
display: block;
padding: 10px 15px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
}
</style>
<ul class="nav-menu">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>デモ
今日のまとめ
🎉 お疲れ様でした！
- ブロック要素は縦に並び、サイズ指定が可能
- インライン要素は横に並び、内容分の幅だけ取る
display: block;で縦並び表示display: inline;で横並び表示display: inline-block;で横並び＋サイズ指定可能display: none;で完全非表示- 適切なdisplayの選択でレイアウトが自在に操れる
✍️ 演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。
右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。
演習1: ナビゲーションメニューの作成
次のHTMLを編集して、横並びのナビゲーションメニューを作成しましょう。
完成イメージ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ナビゲーションメニュー</title>
<style>
/* リストのデフォルトスタイルを削除 */
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
/* リスト項目を横並びに */
nav li {
/* ここにCSSを追加してください */
}
/* リンクをボタンのように表示 */
nav a {
display: block;
padding: 10px 15px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
}
/* ホバー時のスタイル */
nav a:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">商品一覧</a></li>
<li><a href="#">サービス</a></li>
</ul>
</nav>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ナビゲーションメニュー</title>
<style>
/* リストのデフォルトスタイルを削除 */
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
/* リスト項目を横並びに */
nav li {
display: inline-block;
margin-right: 10px;
}
/* リンクをボタンのように表示 */
nav a {
display: block;
padding: 10px 15px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
}
/* ホバー時のスタイル */
nav a:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">商品一覧</a></li>
<li><a href="#">サービス</a></li>
</ul>
</nav>
</body>
</html>
解説：
li要素にdisplay: inline-block;を適用して横並びにしています。a要素にdisplay: block;を適用して、クリック可能な範囲を広げています。- 余白やデザインを整えるために、padding、margin、background-colorなどのプロパティも設定しています。
📚 リファレンス
このレッスンで学んだCSSプロパティの詳細については、リファレンスページで確認できます。
✅ 理解度チェック
クイズに正解すると、このレッスンは「完了済み」として記録されます。
📘 次回予告
次回はCSSで自由自在！Flexboxの基本をマスターしようです。Flexboxを使って、複雑なレイアウトを簡単に実現する方法を学びます。