レイアウト関連のCSSプロパティ
この記事ではレイアウト関連のCSSプロパティについて説明します。
displayとpositionプロパティについて、利用用途や記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-layout.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-layout.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>display: block</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26.block-element {
27 display: block;
28 width: 400px;
29 background-color: lightblue;
30 padding: 10px;
31 margin-bottom: 10px;
32}
33</pre>
34 <header><h4>HTML</h4></header>
35 <pre><div class="block-element">This is a block element.</div></pre>
36 <header><h4>HTML+CSS</h4></header>
37 <section class="sample-view">
38 <div class="block-element">This is a block element.</div>
39 </section>
40 </section>
41 </article>
42 <article>
43 <h3>display: inline</h3>
44 <section>
45 <header><h4>CSS</h4></header>
46<pre class="sample">
47span.inline-element {
48 background-color: lightgray;
49 padding: 10px;
50}
51
52div.inline-element {
53 display: inline;
54 background-color: lightblue;
55 padding: 10px;
56}
57</pre>
58 <header><h4>HTML</h4></header>
59<pre>
60<span class="inline-element">This is an inline element.</span>
61<div class="inline-element">div tag with "display: inline"</div>
62</pre>
63 <header><h4>HTML+CSS</h4></header>
64 <section class="sample-view">
65 <span class="inline-element">This is an inline element.</span>
66 <div class="inline-element">div tag with "display: inline"</div>
67 </section>
68 </section>
69 </article>
70 <article>
71 <h3>display: inline-block</h3>
72 <section>
73 <header><h4>CSS</h4></header>
74<pre class="sample">
75.inline-block-element {
76 display: inline-block;
77 width: 200px;
78 background-color: lightblue;
79 padding: 10px;
80}
81</pre>
82 <header><h4>HTML</h4></header>
83<pre>
84<span class="inline-element">This is an inline element.</span>
85<div class="inline-block-element">This is an inline-block element.</div>
86<span class="inline-element">Another inline element.</span>
87</pre>
88 <header><h4>HTML+CSS</h4></header>
89 <section class="sample-view">
90 <span class="inline-element">This is an inline element.</span>
91 <div class="inline-block-element">This is an inline-block element.</div>
92 <span class="inline-element">Another inline element.</span>
93 </section>
94 </section>
95 </article>
96 <article>
97 <h3>display: none</h3>
98 <section>
99 <header><h4>CSS</h4></header>
100<pre class="sample">
101div.none-element {
102 display: none;
103 background-color: lightblue;
104 padding: 10px;
105}
106</pre>
107 <header><h4>HTML</h4></header>
108 <pre><div class="none-element">This is a none element.</div></pre>
109 <header><h4>HTML+CSS</h4></header>
110 <section class="sample-view">
111 <div class="none-element">This is a none element.</div>
112 </section>
113 </section>
114 </article>
115 <article>
116 <h3>display: flex</h3>
117 <section>
118 <header><h4>CSS</h4></header>
119<pre class="sample">
120.flex-container {
121 display: flex;
122 justify-content: space-between;
123 background-color: lightgray;
124 padding: 10px;
125}
126
127.flex-container div {
128 width: 120px;
129 background-color: lightblue;
130}
131</pre>
132 <header><h4>HTML</h4></header>
133<pre>
134<div class="flex-container">
135 <div>Item 1</div>
136 <div>Item 2</div>
137</div>
138</pre>
139 <header><h4>HTML+CSS</h4></header>
140 <section class="sample-view">
141 <div class="flex-container">
142 <div>Flex item 1</div>
143 <div>Flex item 2</div>
144 </div>
145 </section>
146 </section>
147 </article>
148 <article>
149 <h3>display: inline-flex</h3>
150 <section>
151 <header><h4>CSS</h4></header>
152<pre class="sample">
153.inline-flex-container {
154 display: inline-flex;
155 width: 250px;
156 justify-content: space-between;
157 background-color: lightgray;
158 padding: 10px;
159}
160
161.inline-flex-container div {
162 width: 100px;
163 background-color: lightblue;
164}
165</pre>
166 <header><h4>HTML</h4></header>
167<pre>
168<span class="inline-element">Inline element</span>
169<div class="inline-flex-container">
170 <div>Inline Flex item 1</div>
171 <div>Inline Flex item 2</div>
172</div>
173</pre>
174 <header><h4>HTML+CSS</h4></header>
175 <section class="sample-view">
176 <span class="inline-element">Inline element</span>
177 <div class="inline-flex-container">
178 <div>Inline Flex item 1</div>
179 <div>Inline Flex item 2</div>
180 </div>
181 </section>
182 </section>
183 </article>
184 <article>
185 <h3>display: grid</h3>
186 <section>
187 <header><h4>CSS</h4></header>
188<pre class="sample">
189.grid-container {
190 display: grid;
191 grid-template-columns: repeat(2, 1fr);
192 gap: 10px;
193 background-color: #f3f3f3;
194 padding: 10px;
195 height: 200px;
196}
197.grid-container div {
198 background-color: lightblue;
199 border: 1px solid #aaa;
200 padding: 5px;
201 text-align: center;
202 width: 100px;
203}
204</pre>
205 <header><h4>HTML</h4></header>
206<pre>
207<div class="grid-container">
208 <div>Item 1</div>
209 <div>Item 2</div>
210 <div>Item 3</div>
211 <div>Item 4</div>
212</div>
213</pre>
214 <header><h4>HTML+CSS</h4></header>
215 <section class="sample-view">
216 <div class="grid-container">
217 <div>Item 1</div>
218 <div>Item 2</div>
219 <div>Item 3</div>
220 <div>Item 4</div>
221 </div>
222 </section>
223 </section>
224 </article>
225 <article>
226 <h3>display: inline-grid</h3>
227 <section>
228 <header><h4>CSS</h4></header>
229<pre class="sample">
230.inline-grid-element {
231 display: inline-grid;
232 grid-template-columns: 1fr 1fr;
233 gap: 5px;
234 background-color: lightblue;
235 padding: 5px;
236 width: 200px;
237 height: 150px;
238}
239.inline-grid-element div {
240 background-color: lightskyblue;
241 padding: 5px;
242 text-align: center;
243 border: 1px solid #ccc;
244 width: 80px;
245 height: 25px;
246}
247</pre>
248 <header><h4>HTML</h4></header>
249<pre>
250<span class="inline-element">This is an inline element.</span>
251<div class="inline-grid-element">
252 <div>Item 1</div>
253 <div>Item 2</div>
254 <div>Item 3</div>
255 <div>Item 4</div>
256</div>
257<span class="inline-element">Another inline element.</span>
258</pre>
259 <header><h4>HTML+CSS</h4></header>
260 <section class="sample-view">
261 <span class="inline-element">This is an inline element.</span>
262 <div class="inline-grid-element">
263 <div>Item 1</div>
264 <div>Item 2</div>
265 <div>Item 3</div>
266 <div>Item 4</div>
267 </div>
268 <span class="inline-element">Another inline element.</span>
269 </section>
270 </section>
271 </article>
272 <article>
273 <h3>display: table</h3>
274 <section>
275 <header><h4>CSS</h4></header>
276<pre class="sample">
277.table-container {
278 display: table;
279 border-collapse: collapse;
280 width: 100%;
281 height: 100%;
282}
283
284.table-row {
285 display: table-row;
286}
287
288.table-cell {
289 display: table-cell;
290 border: 1px solid #999;
291 padding: 8px;
292 text-align: center;
293 vertical-align: middle;
294 background-color: lightblue;
295}
296
297.header-row .table-cell {
298 font-weight: bold;
299 background-color: lightskyblue;
300}
301</pre>
302 <header><h4>HTML</h4></header>
303<pre>
304<section>
305 <div class="table-container">
306 <div class="table-row header-row">
307 <div class="table-cell">Header 1</div>
308 <div class="table-cell">Header 2</div>
309 </div>
310 <div class="table-row">
311 <div class="table-cell">Row 1, Cell 1</div>
312 <div class="table-cell">Row 1, Cell 2</div>
313 </div>
314 <div class="table-row">
315 <div class="table-cell">Row 2, Cell 1</div>
316 <div class="table-cell">Row 2, Cell 2</div>
317 </div>
318 </div>
319</section>
320</pre>
321 <header><h4>HTML+CSS</h4></header>
322 <section class="sample-view">
323 <div class="table-container">
324 <div class="table-row header-row">
325 <div class="table-cell">Header 1</div>
326 <div class="table-cell">Header 2</div>
327 </div>
328 <div class="table-row">
329 <div class="table-cell">Row 1, Cell 1</div>
330 <div class="table-cell">Row 1, Cell 2</div>
331 </div>
332 <div class="table-row">
333 <div class="table-cell">Row 2, Cell 1</div>
334 <div class="table-cell">Row 2, Cell 2</div>
335 </div>
336 </div>
337 </section>
338 </section>
339 </article>
340 <article>
341 <h3>display: list-item</h3>
342 <section>
343 <header><h4>CSS</h4></header>
344<pre class="sample">
345.list-item-element {
346 display: list-item;
347 list-style-position: inside;
348 list-style-type: disc;
349 margin-left: 20px;
350 background-color: lightblue;
351 padding: 10px;
352 height: min-content;
353}
354</pre>
355 <header><h4>HTML</h4></header>
356<pre>
357<div class="list-item-element">This is a list item element.</div>
358<div class="list-item-element">Another list item element.</div>
359<div class="list-item-element">Yet another list item element.</div>
360</pre>
361 <header><h4>HTML+CSS</h4></header>
362 <section class="sample-view">
363 <div class="list-item-element">This is a list item element.</div>
364 <div class="list-item-element">Another list item element.</div>
365 <div class="list-item-element">Yet another list item element.</div>
366 </section>
367 </section>
368 </article>
369 <article>
370 <h3>position</h3>
371 <section style="height: auto;">
372 <header><h4>position: static</h4></header>
373 <section class="sample-view">
374 <div class="static-element">This is a static element.</div>
375 </section>
376 <header><h4>position: relative; top: 10px; left: 20px;</h4></header>
377 <section class="sample-view">
378 <div class="relative-element">This is a relative element.</div>
379 </section>
380 <header><h4>position: absolute; top: 10px; left: 20px;</h4></header>
381 <section class="sample-view">
382 <div class="absolute-container">
383 <div class="absolute-element">This is an absolute element.</div>
384 </div>
385 </section>
386 <header><h4>position: fixed; bottom: 10px; right: 10px;</h4></header>
387 <section class="sample-view">
388 <div class="fixed-element">This is a fixed element.</div>
389 </section>
390 <header><h4>position: sticky; top: 0;</h4></header>
391 <section class="sample-view">
392 <div class="sticky-container">
393 <div style="width: 20px; height: 400px; background: linear-gradient(to top, red, blue);"></div>
394 <div class="sticky-element">This is a sticky element. Scroll down!</div>
395 </div>
396 </section>
397 </section>
398 </article>
399 </main>
400</body>
401</html>{^ i18n 配置・レイアウト ^}
displayプロパティ
displayは、CSSのプロパティで、要素がどのように表示されるかを定義します。要素がブロック、インライン、フレックス、グリッド、もしくは非表示など、どのような形式で描画されるかを決定します。
displayプロパティの値
block
1.block-element {
2 display: block;
3 width: 400px;
4 background-color: lightblue;
5 padding: 10px;
6 margin-bottom: 10px;
7}blockを指定すると、要素がブロックレベル要素として表示されます。- ブロック要素は、ページ内で新しい行に表示され、他の要素をその次の行に移動させます。
- 代表的なブロック要素には、
<div>,<p>,<h1>,<section>,<article>などがあります。
inline
1span.inline-element {
2 background-color: lightgray;
3 padding: 10px;
4}
5
6div.inline-element {
7 display: inline;
8 background-color: lightblue;
9 padding: 10px;
10}inlineを指定すると、要素がインライン要素として表示されます。- インライン要素は隣の要素と同じ行に表示され、横に並びます。
- 代表的なインライン要素には、
<span>,<a>,<strong>などがあります。 - インライン要素は他のインライン要素と同じ行に配置され、ブロック要素とは異なり、横に連続して表示されます。
inline-block
1.inline-block-element {
2 display: inline-block;
3 width: 200px;
4 background-color: lightblue;
5 padding: 10px;
6}inline-blockを指定すると、要素がインライン要素として表示されますが、ブロック要素の特性も持っています。- インラインブロック要素は他のインライン要素と同じ行に表示されますが、ブロック要素のように高さや幅を設定できます。
<img>や<button>,<canvas>などはデフォルトでinline-blockのように機能します。
none
1div.none-element {
2 display: none;
3 background-color: lightblue;
4 padding: 10px;
5}noneを指定すると、要素が表示されない状態になります。- その要素は完全に非表示となり、画面からもレイアウトからも除外されます。
flex
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 background-color: lightgray;
5 padding: 10px;
6}
7
8.flex-container div {
9 width: 120px;
10 background-color: lightblue;
11}flexを指定すると、要素がフレックスボックスコンテナとして表示されます。- 子要素（フレックスアイテム）を柔軟に配置し、整列するために使用します。
- フレックスボックスを使うと、子要素が横並びに表示され、余白や整列が自動で調整されます。
inline-flex
1.inline-flex-container {
2 display: inline-flex;
3 width: 250px;
4 justify-content: space-between;
5 background-color: lightgray;
6 padding: 10px;
7}
8
9.inline-flex-container div {
10 width: 100px;
11 background-color: lightblue;
12}inline-flexを指定すると、インラインフレックスボックスコンテナとして要素を表示します。- フレックスボックスの特性を持ちながら、インライン要素のように扱われ、他の要素と同じ行に表示されます。
grid
1.grid-container {
2 display: grid;
3 grid-template-columns: repeat(2, 1fr);
4 gap: 10px;
5 background-color: #f3f3f3;
6 padding: 10px;
7 height: 200px;
8}
9
10.grid-container div {
11 background-color: lightblue;
12 border: 1px solid #aaa;
13 padding: 5px;
14 text-align: center;
15 width: 100px;
16}gridを指定すると、要素がグリッドコンテナとして表示されます。- 子要素を行と列で整列させる、グリッドレイアウトを適用できます。
- グリッドコンテナ内の子要素は、列と行に沿って整然と配置されます。
inline-grid
1.inline-grid-element {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6 padding: 5px;
7 width: 200px;
8 height: 150px;
9}
10.inline-grid-element div {
11 background-color: lightskyblue;
12 padding: 5px;
13 text-align: center;
14 border: 1px solid #ccc;
15 width: 80px;
16 height: 25px;
17}inline-gridを指定すると、インライングリッドコンテナとして要素を表示します。- グリッドレイアウトシステムを使用しつつ、インライン要素として扱われます。
table
1.table-container {
2 display: table;
3 border-collapse: collapse;
4 width: 100%;
5 height: 100%;
6}
7
8.table-row {
9 display: table-row;
10}
11
12.table-cell {
13 display: table-cell;
14 border: 1px solid #999;
15 padding: 8px;
16 text-align: center;
17 vertical-align: middle;
18 background-color: lightblue;
19}
20
21.header-row .table-cell {
22 font-weight: bold;
23 background-color: lightskyblue;
24}tableを指定すると、要素がテーブルとして表示されます。HTMLの<table>と似たレイアウトを持ち、子要素がテーブルセルとして扱われます。- この例のように、子要素の
displayプロパティには、table-rowやtable-cellを指定します。table-rowを指定すると、<tr>要素のようにテーブルの行として機能します。table-cellを指定すると、<td>要素のようにテーブルのセルとして機能します。
list-item
1.list-item-element {
2 display: list-item;
3 list-style-position: inside;
4 list-style-type: disc;
5 margin-left: 20px;
6 background-color: lightblue;
7 padding: 10px;
8 height: min-content;
9}list-itemを指定すると、要素がリストアイテムとして表示されます。通常<ul>や<ol>内で使用される<li>要素に適用されます。
positionプロパティ
1.static-element {
2 position: static;
3 background-color: lightblue;
4 padding: 10px;
5 margin-bottom: 20px;
6}
7
8.relative-element {
9 position: relative;
10 background-color: lightblue;
11 top: 10px;
12 left: 20px;
13 padding: 10px;
14 margin-bottom: 20px;
15}
16
17.absolute-container {
18 position: relative;
19 width: 500px;
20 height: 150px;
21 background-color: lightgray;
22 margin-bottom: 20px;
23}
24
25.absolute-element {
26 position: absolute;
27 top: 10px;
28 left: 20px;
29 background-color: lightblue;
30 padding: 10px;
31}
32
33.fixed-element {
34 position: fixed;
35 bottom: 10px;
36 right: 10px;
37 background-color: lightblue;
38 padding: 10px;
39}
40
41.sticky-container {
42 overflow: scroll;
43 height: 150px;
44 width: 500px;
45}
46
47.sticky-element {
48 position: sticky;
49 top: 0;
50 background-color: lightblue;
51 padding: 10px;
52}positionは、CSSにおける要素の配置方法を制御するプロパティです。このプロパティを使って、要素の位置を親要素や他の要素に対して相対的または絶対的に配置したり、固定表示したりできます。
positionプロパティの値
static
1.static-element {
2 position: static;
3}static-elementクラスでは、positionにstaticを指定しています。要素は通常の位置に配置されます。staticはデフォルトの値です。positionを指定しない場合、staticが適用されます。- 要素は通常の文書フロー（ドキュメントの流れ）に従って配置されます。
top,right,bottom,leftのプロパティは使用できません。
relative
1.relative-element {
2 position: relative;
3 top: 10px;
4 left: 20px;
5}relative-elementクラスでは、positionにrelativeを指定しています。要素は、通常の位置から相対的に移動します。この例では、上から10px、左から20pxの位置に配置されます。relativeを指定すると要素を相対位置で配置します。通常の文書フローに従い、要素の最初の位置からtop,right,bottom,leftプロパティで指定された位置に移動します。- 相対位置に設定された要素は、移動後もその領域は元の位置に残ります（つまり、スペースは確保されたままです）。
- この例では、要素は元の位置から10ピクセル下、20ピクセル右に移動しますが、文書のフローは元の位置に基づいて処理されます。
absolute
1.absolute-element {
2 position: absolute;
3 top: 10px;
4 left: 20px;
5}absolute-elementクラスでは、positionにabsoluteを指定しています。この例では、要素は親要素（またはビューポート）の左上隅から10ピクセル下、20ピクセル右に配置されます。absoluteを指定すると、要素は親要素に対して絶対的に配置されます。親要素のpositionがrelative、absolute、fixedのいずれかに設定されている場合、その親要素を基準にしてtop,right,bottom,leftプロパティで移動します。もし親要素が見つからなければ、ページ全体（ビューポート）を基準に配置されます。- 絶対位置に設定された要素は、通常の文書フローから外れ、他の要素に影響を与えません。
fixed
1.fixed-element {
2 position: fixed;
3 top: 0;
4 right: 0;
5}fixed-elementクラスでは、positionにfixedを指定しています。fixedを指定すると要素を固定位置で配置します。要素はビューポートに対して固定され、スクロールしてもその位置は変わりません。- 例えば、ページのヘッダーやナビゲーションバーを常に表示させたい場合に使用されます。
- この例では、要素は画面の右下隅に固定され、ページをスクロールしてもその位置に留まります。
sticky
1.sticky-element {
2 position: sticky;
3 top: 0;
4}sticky-elementクラスでは、positionにstickyを指定しています。stickyを指定すると要素をスクロールに応じて動的に配置します。通常の文書フローに従いますが、ページをスクロールすると指定したtop,right,bottom,leftの値に基づいて、要素が特定の位置で「固定」されるようになります。stickyは、特定の範囲内で固定要素のように動作します。- この例では、要素は通常の位置に表示されますが、ページをスクロールして指定の
topの位置まで来ると、スクロールに追従してその位置に固定されます。
top, left, bottom, rightプロパティ
top, left, bottom, rightは、CSSで要素の位置を制御するためのプロパティです。これらのプロパティはpositionプロパティと一緒に使用され、要素の位置を基準にどの方向にどれだけ移動するかを指定します。
ただし、これらのプロパティはpositionがrelative、absolute、fixed、stickyのいずれかに設定されている場合にのみ適用されます。デフォルトのstaticではこれらのプロパティは無効です。
top, left, bottom, rightの使い方
top
1.relative-element {
2 position: relative;
3 top: 20px; /* Positioned 20px from the top */
4}topプロパティには、要素を上からどれだけ離すかを指定します。- この例では、要素が通常の位置から20px下に移動します。
left
1.absolute-element {
2 position: absolute;
3 left: 50px; /* Positioned 50px from the left */
4}leftプロパティには、要素を左からどれだけ離すかを指定します。- この例では、要素が左から50px右に移動します。
bottom
1.fixed-element {
2 position: fixed;
3 bottom: 10px; /* Positioned 10px from the bottom */
4}bottomプロパティには、要素を下からどれだけ離すかを指定します。- この例では、要素が画面の下から10px上に固定されます。スクロールしてもその位置に留まります。
right
1.sticky-element {
2 position: sticky;
3 right: 20px; /* Positioned 20px from the right */
4}rightプロパティには、要素を右からどれだけ離すかを指定します。- この例では、スクロール時に要素は右から20px左に移動し、その位置で固定されます。
positionプロパティとの関係
relative: 要素の通常の位置を基準に、top,left,bottom,rightで指定した分だけ移動します。absolute: 最も近いpositionがrelative,absolute,fixedである親要素を基準に、top,left,bottom,rightで指定された場所に移動します。fixed: ビューポート（画面全体）を基準にして、要素を指定された位置に固定します。スクロールしてもその位置に留まります。sticky: スクロール時に要素が特定の位置で固定されるまで通常の位置にあり、固定位置に達すると指定の位置で「粘着」します。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。