これまで色や背景、枠線を学んできましたが、要素の配置ってどうやって制御するんですか？
大事なポイントだね。Webページで要素をどこに配置するかを決めるのがレイアウトの基本なんだ。今日は特にdisplayとpositionという2つの重要なプロパティを中心に学んでいこう。
レイアウトって難しそうですが、基本的な考え方はありますか？
確かに最初は複雑に感じるかもしれない。でも基本的な仕組みを理解すれば、要素を思い通りの場所に配置できるようになるよ。displayは要素の表示方法、positionは位置の決め方を制御するんだ。この2つをしっかり学べば、次の章で学ぶFlexboxやGridの理解もスムーズになるよ。
はじめに：CSSレイアウトの重要性
先生、レイアウトって具体的に何のことですか？ただ要素を並べるだけじゃないんですか？
レイアウトは、HTMLの各要素をページ上のどこに、どのように配置するかを決める仕組みのことなんだ。実は、見やすさや使いやすさに直結する、Webサイト制作で最も重要な要素の一つなんだよ。
レイアウトがWebデザインで果たす役割
レイアウトは単なる要素の配置ではなく、ユーザー体験の質を決定する重要な要素です。適切なレイアウトにより、情報が整理され、ユーザーが迷わずコンテンツにアクセスできるようになります。
レイアウトってそんなに重要なんですね。でも、難しそうです…
最初は難しく感じるかもしれないけど、基本となる考え方を理解すれば大丈夫だよ。今日はdisplayとpositionという2つの基本プロパティを中心に学んでいこう。
レイアウトを構成する主要プロパティ
CSSでレイアウトを制御する際、主に以下のプロパティを使用します。
- display 要素の表示方法を制御（ブロック、インライン、非表示など）
- position 要素の配置方法を制御（通常配置、相対配置、絶対配置など）
- float 要素の回り込みを制御（画像とテキストの配置など、限定的に使用）
現代のWeb開発では、FlexboxやGridという強力なレイアウト技術が主流となっています。 これらは次章で学習しますが、今日学ぶdisplayとpositionの基礎知識は、FlexboxやGridを理解する上でも不可欠な土台となります。
Webページの基本的なレイアウトパターン
実際のWebページでは、以下のような基本的なレイアウトパターンがよく使われます。
これらのレイアウトって、全部displayとpositionで作れるんですか？
基本的にはそうだね。特にdisplayとpositionの理解は必須なんだ。ただ、より複雑で柔軟なレイアウトを作る時は、次章で学ぶFlexboxやGridを使うことが多いよ。まずは基礎をしっかり固めていこう。
displayプロパティの基本
レイアウトの重要性はわかったんですが、displayプロパティって具体的に何をするものなんですか？
displayプロパティは、要素がどのように表示されるかを制御するんだ。ブロック要素として縦に並べるか、インライン要素として横に並べるか、それとも非表示にするか、といったことを決められるよ。
Webページの要素は、それぞれ異なる「表示方法」を持っています。この表示方法を制御するのがdisplayプロパティです。displayプロパティを理解することで、要素の並び方や占有する領域を自在にコントロールできるようになります。
ブロック要素とインライン要素の違い
ブロック要素とインライン要素って、「幅と高さの指定方法」で出てきましたよね？
よく覚えてたね！そうだよ。「幅と高さの指定方法」ではサイズ指定の観点から簡単に触れたけど、ここではレイアウト全体における役割をより詳しく学んでいこう。displayプロパティを使うと、この表示方法を自由に切り替えられるんだ。
「幅と高さの指定方法」のレッスンでは、ブロック要素とインライン要素でwidth・heightの効き方が異なることを学びました。
今回は、レイアウトの観点から、これらの要素がどのように配置されるかに焦点を当てて学習します。
HTMLの要素は、デフォルトで大きく2つのタイプに分かれます。これらの違いを理解することが、レイアウトを理解するうえで非常に重要です。
ブロック要素（display: block）
ブロック要素は、横幅いっぱいに広がり、縦に並ぶ要素です。
- 横幅 親要素の幅いっぱいに広がる（デフォルト）
- 配置 要素の前後で新しい行になる（縦に積み重なる）
- サイズ指定 width、heightで幅と高さを指定できる
- 余白 margin、paddingを全方向に指定できる
- 代表例 div、p、h1〜h6、header、footer、sectionなど
インライン要素（display: inline）
インライン要素は、内容の幅だけを占有し、横並びになる要素です。
- 横幅 内容（テキストなど）の幅だけを占有
- 配置 要素の前後で行が変わらず、横に並ぶ
- サイズ指定 width、heightは効かない（内容で決まる）
- 余白 margin、paddingは左右のみ有効（上下は見た目上適用されるが領域を取らない）
- 代表例 span、a、strong、em、imgなど
なるほど！だからdivは縦に並んで、spanは横に並ぶんですね。
そういうこと。そして、このデフォルトの表示方法をdisplayプロパティで変更できるんだ。
displayプロパティで表示方法を変更
displayプロパティを使うことで、要素の表示方法を自由に変更できます。
基本的な書き方
セレクター {
display: 値;
}主な値とその特徴
- block ブロック要素として表示（横幅いっぱい、縦並び）
- inline インライン要素として表示（内容幅のみ、横並び）
- inline-block インラインとブロックのハイブリッド（横並びだがサイズ指定可能）
- none 要素を非表示にする（領域も確保しない）
/* ブロック要素をインラインに変更 */
div {
display: inline;
}
/* インライン要素をブロックに変更 */
span {
display: block;
}
/* 要素を非表示にする */
.hidden {
display: none;
}
/* インラインブロックに変更（横並びでサイズ指定可能） */
.inline-box {
display: inline-block;
width: 200px;
height: 100px;
}divやspanのような要素は、デフォルトの表示方法が決まっていますが、displayプロパティを使うことで、必要に応じて表示方法を切り替えることができます。
displayプロパティの動作確認
実際にdisplayプロパティを使って、要素の表示方法を切り替えてみましょう。
<div class="section">
<p class="label">1. divをinlineに変更</p>
<div class="div-to-inline">div1</div>
<div class="div-to-inline">div2</div>
</div>
<div class="section">
<p class="label">2. spanをblockに変更</p>
<span class="span-to-block">span1</span>
<span class="span-to-block">span2</span>
</div>
<div class="section">
<p class="label">3. divをinline-blockに変更</p>
<div class="div-to-inline-block">幅・高さ指定</div>
<div class="div-to-inline-block">横並び</div>
</div>
<div class="section">
<p class="label">4. display: noneで非表示</p>
<div class="block-element">表示される要素</div>
<div class="block-element hidden">この要素は非表示</div>
<div class="block-element">表示される要素</div>
</div>inline-blockは、インラインとブロックの良いところを組み合わせた値です。
- 横並び インライン要素のように横に並ぶ
- サイズ指定可能 width、heightで幅と高さを指定できる
- 余白全方向 margin、paddingを全方向に指定できる
- 使用例 ボタン、ナビゲーションメニュー、カード型レイアウトなど
inline-blockって便利ですね！横並びなのにサイズも指定できるなんて。
そうなんだ。ボタンやカードを横に並べたい時によく使われるよ。ただ、複雑なレイアウトを作る場合は、次章で学ぶFlexboxやGridの方が適していることが多いんだ。
positionプロパティによる位置制御
displayで要素の表示方法はわかったんですが、もっと自由に要素を配置する方法はないんですか？
それがpositionプロパティの役割なんだ。positionを使えば、要素を通常の位置からずらしたり、画面の特定の位置に固定したりできるよ。
positionプロパティは、要素をページのどこに配置するかを細かく制御できる強力なプロパティです。通常のドキュメントフローから要素を外して、自由な位置に配置することができます。
positionの値とその特徴
positionプロパティには、以下の5つの主な値があります。それぞれ異なる配置方法を提供します。
- static デフォルト値。通常の文書フロー（top、right、bottom、leftは効かない）
- relative 元の位置を基準とした相対的な移動（元の場所は空いたまま）
- absolute 親要素（positionが指定された最も近い祖先）を基準とした絶対配置
- fixed ブラウザウィンドウを基準とした固定配置（スクロールしても動かない）
- sticky スクロールに応じて相対配置と固定配置を切り替える
positionプロパティの詳細
static（デフォルト値）
すべての要素は、デフォルトでposition: staticが適用されています。通常の文書フローに従って配置されます。
div {
position: static; /* デフォルト値（指定不要） */
/* top, right, bottom, leftは効かない */
}- 移動の基準点 なし（移動しない）
- 配置場所 通常の文書フローに従って配置される
- 使用例 通常の要素配置（特に指定不要）
position: staticは全要素のデフォルト値です。通常、明示的に指定する必要はありません。top、right、bottom、leftプロパティは無視されます。
relative（相対配置）
要素を元の位置を基準に移動させます。元の場所は空いたまま残るため、他の要素には影響しません。
.relative-box {
position: relative;
top: 20px; /* 元の位置から20px下に移動 */
left: 30px; /* 元の位置から30px右に移動 */
}- 移動の基準点 元々あった位置
- 配置場所 元の位置を基準に移動し、元の場所は空いたまま残る（他の要素は影響を受けない）
- 使用例 要素を少しずらす、absolute配置の基準として使う
relativeは、要素を少し移動させるだけでなく、absolute配置の基準点を作るという重要な役割があります。
親要素にposition: relativeを指定することで、子要素のabsolute配置の基準になります。
absolute（絶対配置）
要素を文書フローから完全に外して、親要素（positionが指定された最も近い祖先）を基準に配置します。
.parent {
position: relative; /* 基準となる親要素 */
}
.absolute-box {
position: absolute;
top: 20px; /* 親要素の上端から20px */
left: 30px; /* 親要素の左端から30px */
}- 移動の基準点 position指定された最も近い親要素（なければbody要素）
- 配置場所 文書フローから外れ、空いた場所は詰められる
- 使用例 モーダルウィンドウ、ツールチップ、アイコンの配置など
absolute配置の要素は、デフォルトで内容に合わせたサイズになります。widthやheightを指定しない場合、内容がないと幅と高さが0になるため、見えなくなります。
- デフォルト 内容に合わせたサイズになる
- 空要素 内容がない場合、幅と高さは0になり見えない
fixed（固定配置）
要素をブラウザウィンドウを基準に固定します。スクロールしても位置が変わりません。
.fixed-header {
position: fixed;
top: 0; /* 画面上端に固定 */
left: 0;
right: 0;
z-index: 100; /* 他の要素より前面に */
}- 移動の基準点 ブラウザウィンドウ（ビューポート）
- 配置場所 スクロールしても画面上の同じ位置に固定される
- 使用例 固定ヘッダー、固定フッター、ページトップボタンなど
sticky（粘着配置）
要素をスクロールに応じて相対配置と固定配置を切り替えます。指定した位置に達すると固定されます。
.sticky-header {
position: sticky;
top: 0; /* スクロールで上端に達したら固定 */
z-index: 50; /* 他の要素より前面に */
}- 移動の基準点 通常はrelative、指定位置に達するとfixedになる
- 配置場所 指定位置に達するまで通常配置、達したら固定される
- 使用例 スクロールで固定されるヘッダー、サイドバーなど
z-indexで重なり順を制御
positionを使うと要素が重なることがあります。その重なり順を制御するのがz-indexプロパティです。
.front {
position: relative;
z-index: 10; /* 数値が大きいほど前面に */
}
.back {
position: relative;
z-index: 1; /* 数値が小さいほど背面に */
}- 値 整数（負の値も可能）
- 大きい値 より前面に表示される
- デフォルト z-index: auto（親要素と同じレベル）
- 注意 position: static以外の要素でのみ有効
- 実際に
z-indexの数値を変えて、重なり順を確認してみましょう。
z-indexの数値を変えると、重なり順が変わりますね！大きい数値のボックスが前に来ました。
そうだね。例えば、ボックス1のz-indexを10に変更すると、一番前に来るよ。z-indexは、モーダルウィンドウやドロップダウンメニューなど、要素を前面に表示したい時によく使われるんだ。
実際の開発では、z-indexの値を計画的に管理することが重要です。
- 通常コンテンツ: 1-9
- ドロップダウン・ツールチップ: 10-99
- モーダル・オーバーレイ: 100-999
- 最前面（通知など）: 1000以上
floatプロパティ - 画像の回り込み
displayとpositionはよくわかったんですが、floatはどんな時に使うんですか？
floatは本来、画像とテキストの回り込みを実現するためのプロパティなんだ。雑誌のレイアウトのように、画像の横にテキストを流し込む時に使うんだよ。
floatは以前はレイアウト全般に使われていましたが、現在では画像の回り込みなど限定的な用途で使用されます。 複雑なレイアウトには、次章で学ぶFlexboxやGridが適しています。
floatの基本的な使い方
floatプロパティは、要素を左右に配置し、他のコンテンツを回り込ませることができます。
/* 画像を左に配置し、テキストを右に回り込ませる */
img {
float: left;
margin-right: 20px;
margin-bottom: 10px;
}
/* 画像を右に配置し、テキストを左に回り込ませる */
img {
float: right;
margin-left: 20px;
margin-bottom: 10px;
}
/* floatを解除 */
.clear {
clear: both;
}- float: left 要素を左に配置し、テキストを右に回り込ませる
- float: right 要素を右に配置し、テキストを左に回り込ませる
- float: none 通常の配置（デフォルト）
- clear floatの影響を解除し、回り込みを解除する（both、left、right）
画像とテキストの配置には便利ですね。でも、カードを横に並べるようなレイアウトには向いていないんですか？
その通り。昔はfloatでカードを並べたりしていたんだけど、制御が難しくてバグも起きやすかったんだ。今では、そういった複雑なレイアウトにはFlexboxやGridを使う方が圧倒的に簡単で柔軟なんだよ。
- 適している用途 画像とテキストの回り込み、シンプルな横並び
- 適していない用途 複雑なグリッドレイアウト、レスポンシブデザイン
- 現代の選択 FlexboxやGridの方が簡単で柔軟（次章で学習）
理解度チェッククイズ
それじゃあ、今日学んだ内容がしっかり理解できているか、クイズで確認してみよう！
基本的なレイアウトミニクイズ
.box {
position: relative;
top: 20px;
left: 30px;
}.box {
position: fixed;
top: 0;
right: 0;
}img {
float: left;
margin-right: 15px;
}まとめ
displayは要素の表示方法を決めて、positionは要素の配置場所を制御するんですね。使い分けが大事だと分かりました。
特にposition: relativeとabsoluteの関係が面白かったです。親にrelativeを指定して、子にabsoluteを使うと自由に配置できるんですね。
その通り。まずdisplayで要素の表示方法を決めて、positionで細かい位置調整をするという流れが基本だよ。そして、次章で学ぶFlexboxとGridも、displayプロパティの値として使うんだ。だから今日学んだdisplayの理解が、次のステップにつながるんだよ。
- display 要素の表示方法を決める基本プロパティ（block、inline、inline-block、none）
- position 要素を自由な位置に配置（static、relative、absolute、fixed、sticky）
- z-index position使用時の重なり順を制御（数値が大きいほど前面）
- float 画像とテキストの回り込みに使用（現代では限定的な用途）
- clear floatの影響を解除し、通常の配置に戻す
- 次のステップ FlexboxとGridで、より柔軟で強力なレイアウトを実現
今日学んだdisplayとpositionの基礎は、すべてのレイアウト技術の土台となります。次回は、より高度なセレクター技術を学んで、さらに柔軟なスタイル指定ができるようになります。