8.1 ノーマルフロー
CSSでの要素の配置は、ウェブページ上のその位置と相互作用を管理するために重要な役割を果たすんだ。 他の要素やコンテナに対してどう配置されるかを決定するんだよね。さて、色々な種類の配置がどう要素のフローに影響するか見てみよう。
ドキュメントフローと配置
ノーマルなドキュメントフローでは、HTMLのマークアップで指定された順序に従って、要素が次々と配置されるよ。ブロック要素 （例えば、<div>, <p>, <h1>）は垂直に配置されて、 親コンテナの全幅を占めるんだ。一方、インライン要素（例えば、<span>, <a>, <em>） は水平に配置され、必要なスペースだけを占めるんだよね。
例:
CSS
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
HTML
<div class="block">ブロック要素</div>
<span class="inline">インライン要素</span>
<span class="inline">インライン要素</span>
8.2 配置がドキュメントフローに与える影響
様々なタイプの配置が標準のドキュメントフローを変えちゃうんだ。どんな感じか見てみよう：
position: static
デフォルトのposition: staticはノーマルフローに変更を加えないんだ。position: staticを持つ要素は HTMLマークアップで指定された順序に従って配置されるよ。
フローへの影響:
- 要素はノーマルフローに留まる
- HTMLの順序に従って次々と配置される
position: relative
position: relativeを持つ要素はノーマルフローに留まるが、top, right, bottom, leftプロパティを使って 自分のノーマルな位置からずらすことができるんだ。このずれは他の要素の位置に影響を与えないよ。
フローへの影響:
- 要素はノーマルフローに留まる
- 要素のずれは隣接する要素の配置を変えない
position: absolute
position: absoluteを持つ要素はドキュメントフローから外れ、最も近い位置指定された祖先に対して配置されるんだ。 もしそんな祖先がいなければ、初期コンテナ（通常は<html>や<body>）に対して配置されるよ。
フローへの影響:
- 要素はノーマルフローから外れる
- 最も近い位置指定された祖先に対して配置される
- 他の要素はその要素がないかのように振る舞う
position: fixed
position: fixedを持つ要素はノーマルフローから外れ、ブラウザのウィンドウに対して配置されるんだ。 ページをスクロールしてもその位置に留まるよ。
フローへの影響:
- 要素はノーマルフローから外れる
- ブラウザのウィンドウに対して配置される
- ページをスクロールしても位置はそのまま
- 他の要素はその要素がないかのように振る舞う
position: sticky
position: stickyを持つ要素は、スクロールのしきい値に達するまでは相対的に配置されるように振る舞い、 その後は固定されるんだ。
フローへの影響:
- 要素はスクロールのしきい値に達するまではノーマルフローに留まる
- しきい値に達した後は固定され、ノーマルフローに影響を与えなくなる
8.3 フローへの影響の視覚的な例
1. 固定配置の例:
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
HTML
<div class="wrapper">
<div class="fixed">固定された要素</div>
<div class="content">スクロール可能なコンテンツ
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. スティッキー配置の例:
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
HTML
<div class="wrapper">
<div class="sticky">スティッキー要素</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION