blob: 3021ce3f4a2bf52c89d054d5550cccc7567ec7e9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
---
title: CSS フローレイアウト
slug: Web/CSS/CSS_Flow_Layout
tags:
- CSS
- Reference
- ガイド
- フロー
- フローレイアウト
- レイアウト
- 中級者
translation_of: Web/CSS/CSS_Flow_Layout
---
<div>{{CSSRef}}</div>
<p class="summary"><ruby><em>通常フロー</em><rp> (</rp><rt>Normal Flow</rt><rp>) </rp></ruby>、またはフローレイアウトは、レイアウトに変更が加えられる前にブロック要素やインライン要素がページに表示される方法です。このフローは本質的に、共に動作するすべてのものの組み合わせで、レイアウトの中で互いについてを知っています。いったん何かが<em>フローの外</em>に出ると、独立して動作します。</p>
<p>通常フローでは、<strong>インライン</strong>要素はインライン方向、つまり文書の書字方向に従って、文の中で言葉が表示される方向に表示されます。<strong>ブロック</strong>要素は、文書の<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>の中で、段落として一つが他の物の後に表示されます。従って英語では、インライン要素は左から始まり、一つが他の物の後に表示され、ブロック要素は上から始まり、ページの下に向かいます。</p>
<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2>
<p>以下の例はブロック及びインラインレベルボックスの例を示します。緑色の枠線がある二つの要素がブロックレベルで、他の物の下に表示されます。</p>
<p>最初の文は青い背景をもつ span 要素を含んでいます。これはインラインレベルで、文の中に表示されます。</p>
<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
<h2 id="Guides" name="Guides">ガイド</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローでのブロック及びインラインレイアウト</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">フロー内とフローの外</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">フローレイアウトと書字方向</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">フローレイアウトとオーバーフロー</a></li>
</ul>
<h2 id="Reference" name="Reference">リファレンス</h2>
<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の記事</h3>
<ul>
<li>{{Glossary("Block/CSS", "ブロック (CSS)")}}</li>
</ul>
<section id="Quick_links">
<ol>
<li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
</ol>
</section>
|
