CSS レイアウト入門 - ウェブ開発を学ぶ

CSS レイアウト入門
===========

* Overview: CSS layout
* 次のページ

この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな `display` の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。

|  |  |
| --- | --- |
| 前提知識: |
 HTML の基礎（HTML 入門で学習）、および CSS の動作の考え方（
 CSS 入門で学習）
  |
| 学習目標: | CSS のページレイアウトのテクニックの概要を説明します。それぞれのテクニックは、以降のチュートリアルでより詳しく学ぶことができます。 |

CSS のページレイアウト技術によって、ウェブページに含まれる要素の位置を制御できます。通常のレイアウトフローによる初期配置、隣接する要素、それらの親コンテナー、またはメインビューポート、ウィンドウの位置、といったものが位置を制御する基準になりえます。 このモジュールでは次に挙げるページレイアウト技術の詳細について説明します。

* 通常フロー
* `display` プロパティ
* フレックスボックス
* グリッド
* 浮動要素
* 位置指定
* 表レイアウト
* 段組みレイアウト

どの技術にも、それぞれ用途、長所、短所があり、単独で使用するようには設計されていません。 ひとつひとつの技術がどのように設計されているかを理解することは、それぞれのタスクに最適なレイアウト方法を判断するための基礎になるでしょう。

通常フロー
-----

通常フロー (Normal flow) は、ページレイアウトの制御を何もしない場合に、ブラウザーが既定で HTML ページをレイアウトする方法です。 次の簡単な HTML の例を見てみましょう。

```html
<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>
```

既定では、ブラウザーはこのコードを次のように表示します。

ここでは、HTML がソースコードに現れる順序どおりに表示されていることに注意してください。最初の段落の後に番号なしリストが続き、その後に 2 番目の段落が続きます。

上下に並んで表示される要素は**ブロック**要素と呼ばれています。それに対して、**インライン**要素は段落内の個々の単語と同じように横に並んで表示されています。

**メモ:** ブロック要素のコンテンツがレイアウトされる方向は、ブロック方向 (Block Direction) と呼ばれます。 ブロック方向は、英語などの横書きモード (Horizontal Writing Mode) の言語では垂直に走ります。 日本語のような縦書きモード (Vertical Writing Mode) では、どの言語でも水平に走ります。 対応するインライン方向 (Inline Direction) は、インラインコンテンツ（文など）が走る方向です。

CSS で何かをレイアウトするとその要素を通常フローから遠ざけることになりますが、ページ上の多くの要素は通常フローにしたがって適宜レイアウトされます。これが、構造化された HTML 文書から始めることが非常に重要である理由です。 なぜなら、多くの要素のレイアウトに一から悪戦苦闘するかわりに、あらかじめ多くのものがレイアウトされている現状で作業できるからです。

CSS で要素をどのように配置するかを変更できる方法は次のとおりです。

* **`display` プロパティ** — `block`、`inline`、`inline-block` などの標準値は、要素が通常フローでどのようにふるまうかを変更することができます（詳細については、CSS ボックスの種類を参照してください）。それから、CSS グリッドやフレックスボックスのように、特定の `display` の値によって有効になる全体的なレイアウト方法があります。
* **浮動要素** — `float` に `left` などの値を適用すると、雑誌のレイアウトで画像の周囲をテキストが取り囲むことがあるように、要素の片側に沿ってブロックレベル要素が折り返されることがあります。
* **`position` プロパティ** — 他のボックス内のボックスの配置を正確に制御できます。 通常フローでは `static` 位置指定が既定ですが、他の値を使用して要素を異なる方法でレイアウトすることもできます。 例えば、ブラウザーのビューポートの左上に固定するなどです。
* **表レイアウト** — HTML 表の一部をスタイルするために設計された機能は、`display: table` とそれに関連するプロパティを使用して、表以外の要素にも使用できます。
* **段組みレイアウト** — 段組みレイアウトのプロパティを使用すると、新聞のようにブロックのコンテンツを段組みにレイアウトできます。
display プロパティ
-------------

CSS でページレイアウトを実現するための主な方法は、すべて `display` プロパティの値で指定します。 このプロパティにより、既定の表示方法を変更することができます。 通常フローに属するすべての要素には `display` の値が設定されており、この値によって要素の既定のふるまいが決まります。 例えば、英語の文書内で段落が上から下へ表示されるのは、`display: block` でスタイルが設定されているためです。段落内のテキストを囲んでリンクを作成した場合、そのリンクはテキストの他の部分と同じ行に表示され、改行されることはありません。これは `<a>` 要素が、既定値では `display: inline` だからです。

表示の既定のふるまいは変更できます。例えば、 `<li>` 要素は既定で `display: block` です。 つまり、英語の文書ではリストアイテムは下へ下へと表示されます。 `display` の値を `inline` に変更した場合、文中で単語が並部のと同様に、互いに隣接して表示されます。 任意の要素に対して `display` の値を変更できるということは、どのように見えるかについて心配することなく、意味論的 (semantic) な視点で HTML 要素を選択できるということです。 見た目はあなたが変えることができるものです。

あるアイテムを `block` から `inline` に、またはその逆に切り替えて既定の表示方法を変更することに加えて、より大きい単位で作用するいくつかのレイアウト手法を `display` の値を通じて使い始めることができます。 ただし、これらを使用するときは、通常、追加のプロパティを指定する必要があります。 要素のレイアウトを検討する目的において最も重要な値は `display: flex` と `display: grid` の 2 つです。

フレックスボックス
---------

フレックスボックス (Flexbox) はフレキシブルボックスレイアウトモジュールの略称で、物を 1 次元に、行と列のいずれかの方向にレイアウトしやすくするように設計されています。 フレックスボックスを使うには、`display: flex` をレイアウトしたい要素の親要素に適用します。 その直接の子はすべてフレックスアイテムになります。これは簡単な例で見ることができます。

### display: flex を設定

以下の HTML マークアップは、3 つの `<div>` 要素が入っている `wrapper` クラスを持つ包含要素を示しています。 既定では、これらは英語の文書では上下にブロック要素として表示されます。

ただし、`display: flex` を親に追加すると、3 つのアイテムは列に配置されます。 これは、それらが*フレックスアイテム*になり、フレックスボックスがそれらに与えるいくつかの初期値を使用するためです。 `flex-direction` の初期値は `row` なので、行として表示されます。 `align-items` プロパティの初期値は `stretch` であるため、それらはすべて最も高いアイテムの高さまで伸びているように見えます。 これは、アイテムがフレックスコンテナーの高さまで伸びることを意味します。 この場合、アイテムは最も高いアイテムによって定義されます。 アイテムはすべてコンテナーの先頭に配置され、行の末尾に余分なスペースが残ります。
```

\* {
  box-sizing: border-box;
}
.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```css
.wrapper {
  display: flex;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>
```

### flex プロパティの設定

フレックスコンテナーに適用できる上記のプロパティに加えて、フレックスアイテムに適用できるプロパティがあります。 これらのプロパティは、とりわけ、アイテムのたわみ方を変えることができ、利用可能なスペースに収まるようにアイテムを拡大および縮小することができます。

この単純な例として、すべての子アイテムに `1` の値の `flex` プロパティを追加できます。 これにより、末尾にスペースを残すのではなく、すべてのアイテムが拡大してコンテナーがいっぱいになります。 より多くのスペースがあるならば、アイテムはより広くなり、スペースが少ないと狭くなります。 さらに、マークアップに別の要素を追加すると、アイテムはすべてスペースを空けるために小さくなります — サイズに関係なく、同じ大きさのスペースを占めるようにサイズが調整されます。
```

\* {
  box-sizing: border-box;
}
.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```css
.wrapper {
  display: flex;
}

.wrapper > div {
  flex: 1;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>
```

**メモ:** これはフレックスボックスで可能なことの非常に短い紹介です。 詳細については、フレックスボックスの記事を参照してください。

グリッドレイアウト
---------

フレックスボックスは 1 次元レイアウト用に設計されていますが、グリッドレイアウト (Grid Layout) は 2 次元用に設計されています。行と列に物事を並べます。

### display: grid の設定

繰り返しになりますが、`display: grid` という特定の `display` の値でグリッドレイアウト (Grid Layout) をオンにすることができます。 以下の例では、コンテナーといくつかの子要素とともに、`flex` の例と同様のマークアップを使用しています。 `display: grid` の使用に加えて、`grid-template-rows` プロパティと `grid-template-columns` プロパティをそれぞれ使用して、親の行と列のトラックをいくつか定義します。 それぞれ `1fr` の 3 列と `100px` の 2 行を定義しました。 子要素にルールを置く必要はなく、自動的にグリッドが作成したセルに配置されます。
```

\* {
  box-sizing: border-box;
}

.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
  <div class="box6">Six</div>
</div>
```

### グリッドへのアイテムの配置

グリッドを作成したら、上記の自動配置のふるまいに頼らずに、明示的にアイテムを配置できます。 以下の 2 番目の例では、同じグリッドを定義しましたが、今回は 3 つの子アイテムを使用しています。 `grid-column` プロパティと `grid-row` プロパティを使用して各アイテムの開始ラインと終了ラインを設定しました。 これにより、アイテムが複数のトラックにまたがるようになります。
```

\* {
  box-sizing: border-box;
}

.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

.box1 {
  grid-column: 2 / 4;
  grid-row: 1;
}

.box2 {
  grid-column: 1;
  grid-row: 1 / 3;
}

.box3 {
  grid-row: 2;
  grid-column: 3;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>
```

**メモ:** これら 2 つの例は、グリッドレイアウトの機能のほんの一部です。詳細については、グリッドレイアウトの記事を参照してください。

このガイドの残りの部分では、他のレイアウト方法について説明します。 これは、ページの主なレイアウト構造にとってはそれほど重要ではありませんが、それでも特定のタスクを達成するのに役立ちます。 各レイアウトタスクの性質を理解することで、デザインの特定の構成要素を見たときに、それに最も適したレイアウトの種類が明らかになることがすぐにわかります。

浮動要素
----

要素を浮動すると、その要素とそれに通常フローで続くブロックレベル要素のふるまいが変わります。 要素が左または右に移動されて通常フローから除かれ、周囲のコンテンツが浮動アイテムの周囲に浮かびます。

`float` プロパティには次の 4 つの可能な値があります。

* `left` — 要素を左に浮かべる。
* `right` — 要素を右に浮かべる。
* `none` — まったく浮動しないことを指定する。 これが既定値です。
* `inherit` — `float` プロパティの値がこの要素の親要素から継承されるべきであることを指定します。

以下の例では、`<div>` を左に浮かべ、テキストを要素から遠ざけるために右に `margin` を与えます。 これはそのボックスの周りに巻かれたテキストの効果を与え、そしてあなたが最新のウェブデザインで使用される浮動要素（Floats）について知る必要があるものの大部分です。
```

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

p {
  line-height: 2;
  word-spacing: 0.1rem;
}

.box {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  border-radius: 5px;
}
```

```html
<h1>Simple float example</h1>

<div class="box">Float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>
```

```css
.box {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 30px;
}
```

**メモ:** 浮動要素については、float と clear のプロパティに関するレッスンで詳しく説明しています。 フレックスボックスやグリッドレイアウトなどの技術が登場する前は、浮動要素は段組みレイアウトの作成方法として使用されていました。 あなたはまだウェブ上でこれらの方法に出くわすかもしれません。これらについては、過去のレイアウト手法に関するレッスンで説明します。

位置指定のテクニック
----------

位置指定 (Positioning) を使用すると、通常フローのときに要素を配置されていた場所から別の場所に移動できます。 位置指定はメインページのレイアウトを作成するための方法ではなく、ページ上の特定のアイテムの位置を管理および微調整することを目的としています。

ただし、 `position` プロパティに依存する特定のレイアウトパターンには便利なテクニックがあります。 位置指定を理解することは、通常フローを理解し、アイテムを通常フローから移動させることとは何かを理解するのに役立ちます。

あなたが知っておくべき、次の 5 種類の位置指定があります。

* **静的位置指定** (Static positioning) は、すべての要素が取得する既定です。 これは、「要素をドキュメントレイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」という意味です。
* **相対位置指定** (Relative positioning) を使用すると、ページ上の要素の位置を変更して、通常フロー内の位置に相対的に移動できます — ページ上の他の要素と重なるようにすることも含まれます。
* **絶対位置指定** (Absolute positioning) では、要素は別のレイヤーに配置されているように、ページの通常のレイアウトフローから完全に外れます。 そこから、それをページの `<html>` 要素（あるいはそれに最も近くに位置する祖先要素）の端に相対的な位置に固定することができます。 これは、さまざまなコンテンツパネルを重ねて表示したり、必要に応じて表示/非表示にしたりするタブ付きボックスや、既定では画面外にありコントロールボタンを使用して画面上をスライドさせることができる情報パネルを作成するのに便利です。
* **固定位置指定** (Fixed positioning) は絶対位置指定と非常によく似ていますが、他の要素ではなく、ブラウザーのビューポートを基準にして要素を固定する点が異なります。 これは、他のコンテンツがスクロールしても常に画面上の同じ場所にとどまる永続的なナビゲーションメニューなどの効果を作成するのに役立ちます。
* **粘着位置指定** (Sticky positioning) は、要素が定義されたビューポートからのオフセットにぶつかるまで、要素は `position: static` のようにふるまい、その位置からは `position: fixed` のようにふるまう、より新しい位置指定方法です。
### 簡単な位置指定の例

これらのページレイアウトテクニックに慣れることを提供するために、いくつかの簡単な例を示します。例はすべて同じ HTML 構造（見出しと 3 つの段落が続く）で、次のようになります。

```html
<h1>Positioning</h1>

<p>I am a basic block level element.</p>
<p class="positioned">I am a basic block level element.</p>
<p>I am a basic block level element.</p>
```

この HTML は既定で次の CSS を使ってスタイルされます。

```css
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```
.positioned {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
}
```

レンダリングされた出力は次のとおりです。

### 相対位置指定

相対位置指定 (Relative positioning) を使用すると、既定で設定されている通常フローの位置からアイテムをずらすことができます。 これは、アイコンをテキストラベルに合わせるためにアイコンを少し下に移動するなどのタスクを実行できることを意味します。 これを行うには、相対位置指定を追加するために次のルールを追加します。

```css
.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}
```

ここで、中央の段落の `position` に `relative` の値を与えます。これはそれ自身では何もしませんので、 `top` プロパティと `left` プロパティも追加します。これらは影響を受けた要素を右下に動かすのに役立ちます。期待とは反対のように思えるかもしれませんが、要素の左側と上側を押されていると考える必要があり、その結果として右下に移動します。

このコードを追加すると、次のようになります。
```

<h1>Relative positioning</h1>

<p>I am a basic block level element.</p>
<p class="positioned">This is my relatively positioned element.</p>
<p>I am a basic block level element.</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```
.positioned {
  position: relative;
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  top: 30px;
  left: 30px;
}
```

### 絶対位置指定

絶対位置指定 (Absolute positioning) は、通常フローから要素を完全に外し、包含ブロックの端からのオフセットを使用して配置するために使用されます。

元の位置指定されていない例に戻ると、絶対位置指定を実装するために以下の CSS ルールを追加することができます。

```css
.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}
```

ここでは、中央の段落の `position` に `absolute` の値と、前と同じ `top` プロパティと `left` プロパティを指定します。このコードを追加すると、次のようになります。
```

<h1>Absolute positioning</h1>

<p>I am a basic block level element.</p>
<p class="positioned">This is my absolutely positioned element.</p>
<p>I am a basic block level element.</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```
.positioned {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
}
```

これはとても違います。位置指定要素は、ページレイアウトの残りの部分から完全に分離され、その上に配置されています。 他の 2 つの段落は、配置された兄弟が存在しないかのように一緒にいます。 `top` プロパティと `left` プロパティは、絶対位置指定要素に対しては、相対位置指定要素とは異なる効果があります。 この場合、オフセットはページの上側と左側から計算されています。 このコンテナーになる親要素を変更することは可能で、位置指定のレッスンでそれを見ます。

### 固定位置指定

固定位置指定 (Fixed positioning) は、絶対位置指定と同じ方法で、文書フローから要素を外します。 ただし、コンテナーからのオフセットが適用されるのではなく、ビューポートからのオフセットが適用されます。 アイテムがビューポートに対して固定されたままであるので、ページがその下でスクロールするときに固定されたままであるメニューのような効果を作成することができます。

この例では、HTML を 3 段落のテキストにして、ページをスクロールさせます。 また、`position: fixed` を指定したボックスもあります。

```html
<h1>Fixed positioning</h1>

<div class="positioned">Fixed</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci.
</p>

<p>
  Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed
  auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
  vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex
  malesuada et.
</p>

<p>
  In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet
  turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas
  augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id
  ornare felis, eget fermentum sapien.
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

.positioned {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```css
.positioned {
  position: fixed;
  top: 30px;
  left: 30px;
}
```

### 粘着位置指定

粘着位置指定 (Sticky positioning) は、私たちが自由に使える最後の位置指定方法です。 既定の静的位置指定に固定位置指定を組み合わせたものです。 アイテムに `position: sticky` があるとき、それは定義したビューポートからのオフセットにぶつかるまで通常フローでスクロールします。 その時点で、`position：fixed` が適用されているかのように「動かなくなります」。
```

<h1>Sticky positioning</h1>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<div class="positioned">Sticky</div>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

.positioned {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```css
.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}
```

**メモ:** 位置指定の詳細については、位置指定の記事をご覧ください。

表レイアウト
------

HTML の表は、表形式のデータを表示するのには適していますが、何年も前、基本的な CSS さえブラウザーの間で確実に対応されていなかった頃、ウェブ開発者は、ヘッダー、フッター、段組みなどをさまざまな表の行や列に配置し、ウェブページ全体のレイアウトにも表を使っていました。表のレイアウトは柔軟性に欠け、マークアップがとても重く、デバッグが難しく、意味づけも間違っています（例えば、スクリーンリーダーのユーザーは表のレイアウトをナビゲートするのに問題があります）。

表のマークアップを使用したときに表がウェブページ上で表示される方法は、表レイアウトを定義する CSS プロパティのセットによるものです。 これらのプロパティは、表ではない要素をレイアウトするために使用することができ、その使用法は「CSS 表の使用」として説明されることがあります。

以下の例はそのような使い方の 1 つを示しています。注意しなければならないのは、レイアウトに CSS の表を使用するのは、この点では古い手法と考えるべきであり、フレックスボックスや グリッドに対応していない古いブラウザーに対応するためにのみ使用するべきだということです。

例を見てみましょう。 まず、HTML フォームを作成する簡単なマークアップです。 各入力要素にはラベルがあり、段落内にキャプションも含まれています。 各ラベル/入力ペアは、レイアウトのために `<div>` で囲まれています。

```html
<form>
  <p>First of all, tell us your name and age.</p>
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname" />
  </div>
  <div>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" />
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age" />
  </div>
</form>
```

CSS に関しては、 `display` プロパティを使用している以外は、ほとんど普通のものです。 `<form>`、`<div>`、`<label>`、`<input>` はそれぞれ表、表の行、表のセルのように表示するように指示されています。基本的には HTML の表のマークアップのように動作し、既定ではラベルと入力がきれいに行えるようになります。あとは、サイズやマージンなどを追加して、すべてがきれいに見えるようにすれば完了です。

キャプション段落には `display: table-caption;` が指定され、表の `<caption>` のように動作することが分かります。また、 `caption-side: bottom;` が指定され、マークアップがソースの `<input>` 要素の前にあっても、スタイル設定のためにキャプションを表の下に置くように指示しています。これにより、ちょっとした柔軟性が生まれます。

```css
html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label,
form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}
```

これにより、次のような結果が得られます。

この例は css-tables-example.html でもライブで見ることができます（ソースコードも見る）。

**メモ:** 表レイアウトは、このページの他のトピックとは異なり、古いアプリケーションであるため、このモジュールではこれ以上取り上げません。

段組みレイアウト
--------

段組みレイアウトモジュール (Multi-column layout module) は、新聞のテキストの流れと同じように、コンテンツを列にレイアウトする方法を提供します。 ユーザーに強制的に上下にスクロールさせたくない場合は、列を上下に読むことはウェブのコンテキストではあまり役に立ちませんが、コンテンツを列に配置することは便利なテクニックです。

ブロックを段組みコンテナーに変えるには、次のどちらかを使います。 `column-count` プロパティは、ブラウザーにいくつの列を持たせたいかを指示します。 `column-width` プロパティは、ブラウザーにその幅以上の列をコンテナーに入れるように指示します。

以下の例では、`container` クラスを持つ `<div>` 要素を含む HTML ブロックから始めます。

```html
<div class="container">
  <h1>Multi-column Layout</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem.
  </p>

  <p>
    Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris
    ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus
    viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum
    sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus.
  </p>
</div>
```

このコンテナーでは `column-width` を 200 ピクセルで使用しており、ブラウザーは 200 ピクセルの段組みを収まるだけ作成します。段組みの間に残っている空間はすべて共有されます。
```

body {
  max-width: 800px;
  margin: 0 auto;
}
```

```css
.container {
  column-width: 200px;
}
```

まとめ
---

この記事では、知っておくべきすべてのレイアウト技術について簡単に説明しました。 個々の技術の詳細については、続きを読んでください。

* Overview: CSS layout
* 次のページ


フレックスボックス - ウェブ開発を学ぶ

フレックスボックス
=========

* 前のページ
* Overview: CSS layout
* 次のページ

フレックスボックス (Flexbox) は、アイテムを行または列に並べるための 1 次元のレイアウト方法です。アイテムがたわんで（伸びて）追加の空間を埋めたり、縮んで小さい空間に収まったりします。この記事では、すべての基本事項について説明します。

|  |  |
| --- | --- |
| 前提知識: | HTML の基本（HTML 入門で学んでください）、および CSS の動作の仕組みの考え方（CSS 入門で学んでください）。 |
| 目標: | フレックスボックスレイアウトシステムを使用して、ウェブのレイアウトを作成する方法を習得する。 |

なぜフレックスボックスなのか
--------------

長い間、CSS レイアウトを作成するために利用可能な唯一の信頼できるブラウザー間で互換性のあるツールは浮動要素と位置指定などでした。 これらは問題なく機能しますが、いくつかの点ではかなり限定的でイライラするものです。

次のような単純なレイアウト要件は、このようなツールを使用しても、便利で柔軟な方法で実現するのが困難または不可能です。

* コンテンツのブロックをその親内で垂直方向に中央揃えにする。
* コンテナーのすべての子が、使用可能な幅や高さに関係なく、使用可能な幅や高さについて等しい量を占めるようにする。
* 複数列レイアウトのそれぞれの列に含まれているコンテンツの量が異なっても、高さが同じになるようにする。

以降のセクションで見るように、フレックスボックスは多くのレイアウト作業をずっと簡単にします。 さあ始めましょう！

簡単な例の紹介
-------

この記事では、フレックスボックスがどのように機能するのかを理解するのに役立つ一連の演習を進めていくようにします。 まず始めに、github リポジトリーから最初のスターターファイル flexbox0.html のローカルコピーを作成し、最新のブラウザー（Firefox や Chrome など）にロードして、コードエディターでコードを確認してください。 ここでもライブで見ることができます。

![フレックスボックスチュートリアルのスタート地点を示す画像](/ja/docs/Learn/CSS/CSS_layout/Flexbox/bih741v.png)

内部に最上位の見出しを持つ `<header>` 要素と、 `<section>` 要素があり、その中に 3 つの `<article>` を含むます。 これらを使用して、かなり標準的な 3 列のレイアウトを作成しましょう。

柔軟な箱としてレイアウトする要素を指定
-------------------

まず最初に、どの要素を柔軟な箱 (flexible box) としてレイアウトするかを選択する必要があります。 これを行うために、影響を与えたい要素の親要素に `display` の特別な値を設定します。 この場合、 `<article>` 要素をレイアウトしたいので、これを `<section>` に設定します。

```css
section {
  display: flex;
}
```

これによって、 <section> 要素が**フレックスコンテナー**となり、その子は**フレックスアイテム**になります。その結果、以下のような感じになるでしょう。

![1行目に1列、2行目に3列のレイアウトを含む2列のコンテナで、ウェブページが内容に応じて異なるレイアウトに分けられることを示すもの](/ja/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example2.png)

それで、このたった一つの宣言が必要なものすべてを与えてくれます。信じられないでしょう？ 同じ幅の列を持つ複数列のレイアウトがあり、列の高さはすべて同じです。 これは、フレックスアイテム（フレックスコンテナーの子）に与えられる既定値が、このような一般的な問題を解決するために設定されているためです。 それらについての詳細は後で。

はっきりさせるために、ここで何が起こっているのかをもう一度説明しましょう。`display` の値として `flex` を指定された要素は、ページの他の部分とやり取りする方法についてはブロックレベル要素のように動作しますが、その子要素はフレックスアイテムとしてレイアウトされます。次の節では、この意味をより詳しく説明します。なお、ある要素の子要素をフレックスアイテムとしてレイアウトしたいが、その要素はインライン要素のように取り扱いたい場合は、 `display` 値として `inline-flex` を使用することができます。

フレックスモデル
--------

要素が柔軟な箱として配置されるとき、それらは次のように 2 つの軸に沿って配置されます。

![左から右に記述された 3 つのフレックスアイテムが、フレックスコンテナーの中に横に並んでいる。主軸（フレックスアイテムが配置される方向のフレックスコンテナーの軸）は水平である。この軸の両端は主始点と主終点と呼ばれ、それぞれ左側と右側にある。交差軸は垂直で、主軸に直交している。交差始点と交差終点はそれぞれ上部と下部にある。主軸に沿ったフレックスアイテムの長さ、この場合は幅を主サイズと呼び、交差軸に沿ったフレックスアイテムの長さ、この場合は高さを交差サイズと呼ぶ。](/ja/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png)

* 主軸 (**main axis**) は、フレックスアイテムが配置されている方向に走る軸です（例えば、ページを横切る行、またはページ下の列として）。 この軸の始点と終点は、主始点 (**main start**) と主終点 (**main end**) と呼ばれます。
* 交差軸 (**cross axis**) は、フレックスアイテムが配置されている方向に対して垂直に走る軸です。 この軸の始点と終点は、交差始点 (**cross start**) と交差終点 (**cross end**) と呼ばれます。
* `display: flex` が設定されている親要素（この例では `<section>`）は、フレックスコンテナー (**flex container**) と呼ばれます。
* フレックスコンテナー内の柔軟な箱としてレイアウトされているアイテムは、フレックスアイテム (**flex item**) と呼ばれます（この例では `<article>` 要素）。

この後の節を読むときに、この用語を覚えておいてください。使用する用語に迷ったときは、常にこの用語を参照してください。

列か行か
----

フレックスボックスは `flex-direction` というプロパティを提供します。 これは主軸が走る方向（フレックスボックスの子がどの方向にレイアウトされるか）を指定します。既定では `row` に設定されていて、ブラウザーの既定の言語が動作する方向（英語のブラウザーの場合は左から右に）にそれらが横一列にレイアウトされます。

次の宣言を `<section>` のルールに追加してみてください。

```css
flex-direction: column;
```

これにより、 CSS を追加する前と同じように、アイテムが縦一列のレイアウトに戻されます。 先に進む前に、この宣言を例から削除してください。

**メモ:** `row-reverse` と `column-reverse` の値を使用して、フレックスアイテムを逆方向にレイアウトすることもできます。 これらの値も試してみてください。

折り返し
----

レイアウトの幅や高さが決まっているときに発生する問題の 1 つは、最終的にはフレックスボックスの子がコンテナーをはみ出してレイアウトが壊れることです。 flexbox-wrap0.html の例を見て、それをライブで見てみてください（この例に沿って進めたい場合は、このファイルのローカルコピーを取ってください）。

![サンプルのフレックスボックスの例では、すべてのフレックスアイテムがフレックスコンテナーの単一の行にレイアウトされています。8 つ目のフレックスアイテムはブラウザーウィンドウからはみ出し、ページには水平方向と垂直方向のスクロールバーが表示されますが、これは前の 7 つのフレックスアイテムがビューポート内で使用できる空間を占めているため、ウィンドウ幅に収まらないためです。既定値では、ブラウザーは、 flex-direction を row に設定した場合はすべてのフレックスアイテムを単一の行に、 column に設定した場合は単一の列に配置しようとします。](/ja/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example3.png)

ここでは、子要素が実際にコンテナーからはみ出してることがわかります。これを修正させる一つの方法は、 `<section>` ルールに以下のような宣言を追加することです。

```css
flex-wrap: wrap;
```

また、 `<article>` のルールに次の宣言を追加してください。

```css
flex: 200px;
```

試してみてください。 これが含まれていると次のようにレイアウトがはるかに良く見えることがわかります。

![フレックスアイテムは、フレックスコンテナー内に複数列でレイアウトされます。フレックスコンテナーでは flex-wrap プロパティが 'wrap' に設定されており、前の行のフレックスアイテムがフレックスコンテナーからはみ出した場合、新しい行にフレックスアイテムが表示されます。各フレックスアイテムには 200 ピクセルの幅が指定されました。すべての項目は同じ高さになるように伸張され、最も多くの内容を含むフレックス項目の高さと同じになります。](/ja/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example4.png)

現在、複数の行があります — 多くのフレックスボックスの子が各行に納められているので、オーバーフローは次のラインに移動します。 `article` に設定した `flex: 200px` の宣言は、それぞれが少なくとも 200px 幅になることを意味します。 このプロパティについては後で詳しく説明します。 また、最後の行の最後の数個の子がそれぞれ幅広になっているので、依然として行全体がいっぱいになっていることに気付くかもしれません。

しかし、ここでできることは他にもあります。 まず最初に、 `flex-direction` プロパティの値を `row-reverse` に変更してみてください。 これで、まだ複数行のレイアウトがあることがわかりますが、ブラウザーウィンドウの反対側の隅から開始して逆方向に流れます。

flex-flow 一括指定
--------------

ここで、 `flex-direction` と `flex-wrap` には `flex-flow` という一括指定が存在することに注目する価値があります。 例えば、次のように置き換えることができます。

```css
flex-direction: row;
flex-wrap: wrap;
```

を

```css
flex-flow: row wrap;
```

フレックスアイテムの柔軟なサイズ変更
------------------

それでは、最初の例に戻って、フレックスアイテムの占めるスペースの割合を制御する方法を見てみましょう。 ローカルコピーの flexbox0.html を起動するか、新しい出発点として flexbox1.html のコピーを入手してください（ライブで見る）。

まず、CSS の一番下に次のルールを追加します。

```css
article {
  flex: 1;
}
```

これは、各フレックスアイテムが主軸に沿って使用可能なスペースのうちどれだけを占めるかを決定する、無単位の割合値です。 この場合、各 `<article>` 要素に 1 の値を与えています。 つまり、パディングやマージンなどを設定した後の残りの予備スペースのうちから、すべてが同じ量を占めます。 これは割合であり、各フレックスアイテムに 400000 の値を指定してもまったく同じ効果があることを意味します。

それでは、前のルールの下に次のルールを追加します。

```css
article:nth-of-type(3) {
  flex: 2;
}
```

リフレッシュすると、3 番目の `<article>` が他の 2 つの幅の 2 倍の幅を占めます。 合計で 4 割合単位が使用可能です。 最初の 2 つのフレックスアイテムはそれぞれ 1 単位ずつ持つため、それぞれ使用可能なスペースの 1/4 を占めます。 3 つ目は 2 単位を持っているので、それは使用可能なスペースの 2/4（または 1/2）を占めます。

`flex` の値内に最小サイズ値を指定することもできます。 既存の `article` のルールを次のように更新してみてください。

```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}
```

これは基本的に「各フレックスアイテムには最初に 200px の使用可能なスペースが与えられます。 その後、残りの使用可能なスペースは割合単位に従って共有されます。」と述べています。 リフレッシュしてみると、スペースの共有方法に違いが見られます。

![Sample flexbox の例のフレックスコンテナーには、3 つのフレックスアイテムが保有されています。すべてのフレックスアイテムの最小幅は 200 ピクセルであり、 'flex' を使用して設定されています。最初の 2 つのフレックスアイテムのフレックス値は 1、3 番目のアイテムのフレックス値は 2 です。これにより、フレックスコンテナー内の残りの空間が 4 つの割合の単位に分割されます。最初の 2 つのフレックスアイテムに 1 単位、 3 番目のフレックスアイテムに 2 単位が割り当てられ、 3 番目のフレックスアイテムの幅は、同じ幅の他の 2 つのアイテムよりも広くなります。](/ja/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example1.png)

フレックスボックスの真の価値は、その柔軟性/応答性に見ることができます。ブラウザーウィンドウのサイズを変更したり、別の `<article>` 要素を追加したりしても、レイアウトは問題なく機能します。

flex: 一括指定対個別指定
---------------

`flex` は、最大 3 つの異なる値を指定できる一括指定プロパティです。

* 上記で説明した無単位の割合値。 これは `flex-grow` 個別指定プロパティを使用して個別に指定できます。
* `flex-shrink` というフレックスアイテムがコンテナーをオーバーフローしているときに有効になる、2 番目の無単位の割合値。 これは、各フレックスアイテムのサイズからオーバーフローする量を取り除き、それらがコンテナーからオーバーフローするのを防ぐために指定します。 これはかなり高度なフレックスボックスの機能で、この記事ではこれ以上説明しません。
* 上記で説明した最小サイズ値。 これは、`flex-basis` の個別指定値を使用して個別に指定できます。

本当に必要な場合以外は、個別指定の flex プロパティを使用しないことをお勧めします（例えば、以前に設定したものを上書きする場合など）。 それらは多くの余分なコードが書かれることにつながり、多少混乱するかもしれません。

水平方向と垂直方向の配置
------------

フレックスボックスの機能を使用して、主軸または交差軸に沿ってフレックスアイテムを整列させることもできます。 新しい例である flex-align0.html を見て（ライブも見る）、これを調べてみましょう。 これは、きちんとした柔軟なボタン/ツールバーに変わります。 現時点では、いくつかのボタンが左上隅に詰まった水平のメニューバーが表示されます。

![](/ja/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example5.png)

まず、この例のローカルコピーを取ります。

それでは、例の CSS の最後に次のものを追加してください。

```css
div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
```

![Smile, Laugh, Wink, Shrug & Blush というラベルを持つ 5 つのボタンが、フレックスコンテナーの中に一列に並べられています。 align-items プロパティを center に設定することで、フレックスアイテムは交差軸の中心に配置されています。 justify-content プロパティを space-around に設定すると、フレックスアイテムは主軸に沿って等間隔に配置されます。](/ja/docs/Learn/CSS/CSS_layout/Flexbox/flexbox_center_space-around.png)

ページをリフレッシュすると、ボタンが横方向と縦方向に中央揃えになっていることがわかります。 これを 2 つの新しいプロパティを介して行いました。

`align-items` は、フレックスアイテムが交差軸上のどこに配置されるかを制御します。

* 既定では、この値は `stretch` です。 これは、すべてのフレックスアイテムを交差軸の方向に親を埋めるように引き伸ばします。 親が交差軸方向に固定幅を持っていない場合、すべてのフレックスアイテムは最長のフレックスアイテムと同じ長さになります。 これが最初の例が既定で同じ高さの列を得た方法です。
* 上記のコードで使用した `center` の値により、アイテムは固有の寸法を維持しますが、交差軸の中心に配置されます。 これが、この例のボタンが縦方向に中央揃えされている理由です。
* `flex-start` や `flex-end` のような値を持つこともできます。 これは、すべてのアイテムをそれぞれ交差軸の始点や終点に揃えます。 詳細については `align-items` を参照してください。

`align-self` プロパティを適用することで、個々のフレックスアイテムの `align-items` のふるまいを上書きできます。 例えば、CSS に次のコードを追加してみてください。

```css
button:first-child {
  align-self: flex-end;
}
```

![Smile, Laugh, Wink, Shrug, Blush というラベルを持つ 5 つのボタンが、フレックスコンテナの中に一列に並べられています。最初のものを除くすべてのフレックスアイテムは、 align-items プロパティを center に設定することで、交差軸の中心、つまり垂直方向の中心に配置されています。最初のアイテムは、 align-self プロパティを flex-end に設定して、フレックスコンテナーの底面、交差軸の端に面一に配置されています。フレックスコンテナーのアイテムは、コンテナーの主軸（幅）に沿って等間隔に配置されます。](/ja/docs/Learn/CSS/CSS_layout/Flexbox/flexbox_first-child_flex-end.png)

これがどのような影響を与えるのかを見て、終了したらもう一度削除します。

`justify-content` は、フレックスアイテムが主軸上のどこに配置されるかを制御します。

* 既定値は `flex-start` です。 これにより、すべてのアイテムが主軸の始点に配置されます。
* それらを終点に配置させるために `flex-end` を使うことができます。
* `center` は `justify-content` のための値でもあり、フレックスアイテムを主軸の中心に配置します。
* 上記で使用した値、`space-around` は便利です。 両端に少しのスペースを残して、すべてのアイテムを主軸に沿って均等に配置します。
* もう 1 つの値、`space-between` があります。 これは、両端にスペースを残さないという点を除けば、`space-around` にってもよく似ています。

`justify-items` プロパティはフレックスボックスレイアウトでは無視されます。

続ける前に、これらの値を使用してそれらがどのように機能するかを確認することをお勧めします。

フレックスアイテムの順序付け
--------------

フレックスボックスには、ソース順に影響を与えずにフレックスアイテムのレイアウトの順序を変更する機能もあります。 これも従来のレイアウト方法では不可能なことです。

このコードは簡単です。 ボタンバーのサンプルコードに次の CSS を追加してみてください。

```css
button:first-child {
  order: 1;
}
```

リフレッシュすると、 "Smile" ボタンが主軸の終点に移動したことがわかります。 これがどのように機能するかについてもう少し詳しく説明しましょう。

* 既定では、すべてのフレックスアイテムの `order` の値は 0 です。
* 大きな `order` の値が設定されているフレックスアイテムは、小さな `order` の値を持つアイテムよりも表示順序の後半に表示されます。
* 同じ `order` の値を持つフレックスアイテムは、ソース順で表示されます。 そのため、2、1、1、0 の `order` の値がそれぞれ設定された 4 つのアイテムがある場合、それらの表示順序は 4、2、3、1 となります。
* 3 番目のアイテムは 2 番目の後に表示されます。 これは、同じ `order` の値を持ち、ソース順でそれより後にあるためです。

負の `order` の値を設定して、0 が設定されているアイテムよりも早くアイテムを表示することができます。 例えば、次のルールを使用して、[Blush] ボタンを主軸の始点に表示させることができます。

```css
button:last-child {
  order: -1;
}
```

ネストしたフレックスボックス
--------------

フレックスボックスを使ってかなり複雑なレイアウトを作成することは可能です。 フレックスアイテムをフレックスコンテナーとしても設定して、その子も柔軟な箱のようにレイアウトできるようにしてもまったく問題ありません。 complex-flexbox.html を見てください（ライブも見る）。

![サンプルフレックスボックスの例では、 3 つのフレックスアイテムの子を並べて保有しています。最初の 2 人は同じ幅で、3 人目は少し広くなっています。 3 つ目のフレックスアイテムはフレックスコンテナーでもあります。これには、 2 列に並んだボタンのセットと、それに続くテキストがあります。最初の行には 4 つのボタンがあり、一列に並んでいます。ボタンは同じ幅で、コンテナの幅いっぱいに保有されています。 2 つ目の行には、単一のボタンがあり、それ自体で行の幅をすべて保有しています。このように、フレックスアイテムがいくつかある複雑なレイアウトは、フレックスコンテナーとして扱われます。](/ja/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example7.png)

このための HTML はかなり単純です。 3 つの `<article>` を含む `<section>` 要素があります。 3 番目の `<article>` には 3 つの `<div>` が含まれています。
```

section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button
```

レイアウトに使用したコードを見てみましょう。

まず、`<section>` の子を柔軟な箱として配置するように設定します。

```css
section {
  display: flex;
}
```

次に、`<article>` 自体にいくつかの `flex` の値を設定します。 ここで 2 番目のルールに特に注意してください — 3 番目の `<article>` は、その子もフレックスアイテムのようにレイアウトするように設定していますが、今回はそれらを `column` のようにレイアウトしています。

```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}
```

次に、最初の `<div>` を選択します。 最初に `flex: 1 100px;` を使用して効果的にそれの最小の高さを 100px にしてから、その子（`<button>` 要素）もフレックスアイテムのように配置されるように設定します。 ここでそれらをラッピングする行にレイアウトし、先ほど見た個々のボタンの例で行ったように、それらを使用可能なスペースの中央に配置します。

```css
article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}
```

最後に、ボタンにサイズを設定します。今回は、 flex 値として 1 auto を指定しました。これはとても興味深い効果があり、ブラウザーのウィンドウ幅を変更してみるとわかります。ボタンはできるだけ多くの空間を占有しようとします。できる限り同じ行に配置しようとしますが、それを超えると新しい行に移動します。

```css
button {
  flex: 1 auto;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}
```

ブラウザー間の互換性
----------

フレックスボックスは、Firefox、Chrome、Opera、Microsoft Edge、IE 11、Android / iOS の新しいバージョンなど、ほとんどの新しいブラウザーで利用できます。 ただし、フレックスボックスに対応していない古いブラウザー（または、対応しているものの、本当に古い、時代遅れのバージョンに対応しているもの）もあります。

学習や実験をしている間は、これはあまり重要ではありません。しかし、実際のウェブサイトでフレックスボックスを使用することを検討している場合は、テストを行い、できるだけ多くのブラウザーで使い勝手が許容範囲内になることを確認する必要があります。

フレックスボックスはいくつかの CSS 機能よりも少しトリッキーです。 例えば、ブラウザーに CSS ドロップシャドウがない場合でも、サイトを利用することはできます。しかし、フレックスボックス機能をサポートしていないと、レイアウトが完全に壊れて利用できなくなる可能性があります。

クロスブラウザーのテストのモジュールでは、ブラウザー間の対応の問題を解決するための戦略について説明します。

スキルテスト
------

この記事の最後まで達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — Test your skills: Flexbox: フレックスボックス (en-US) を見てください。

まとめ
---

これで、フレックスボックスの基本についてのツアーは終了です。 私たちはあなたが楽しみを持って、学習と共に前進するにつれてそれと一緒に良い遊びがあることを願っています。 次に、CSS レイアウトのもう 1 つの重要な側面、CSS グリッドについて見ていきます。

関連情報
----

* CSS-Tricks Guide to Flexbox — フレックスボックスのすべてを視覚的にわかりやすく説明した記事です。
* Flexbox Froggy — フレックスボックスの基本を学び、理解を深めるための教育ゲームです。
* 前のページ
* Overview: CSS layout
* 次のページ


基礎的なレイアウトの理解 - ウェブ開発を学ぶ

基礎的なレイアウトの理解
============

* 前のページ
* Overview: CSS layout

このモジュールを乗り越えてきたならば、今日 CSS レイアウトを行うために知っておくべきことや、より古い CSS を使って作業するために必要なことの基本についてはすでに説明しているはずです。 このタスクでは、さまざまなテクニックを使用して簡単なウェブページレイアウトを作成することによって、あなたの知識の一部をテストします。

| 前提知識: | この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。 |
| --- | --- |
| 学習目標: | このモジュールで説明してきた基本的なレイアウトスキルの理解をテストすること。 |

プロジェクトの概要
---------

生の HTML、基本的な CSS、そして画像が提供されています — これで、次の画像にそっくりなデザインのレイアウトを作成する必要があります。

![](/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension/layout-task-complete.png)

### 基本設定

HTML、CSS、および 6 枚の画像をここからダウンロードできます。

HTML ドキュメントとスタイルシートをコンピュータ上のディレクトリーに保存し、画像を `images` という名前のフォルダに追加します。 ブラウザーで `index.html` ファイルを開くと、次の画像のような基本的なスタイルは設定されているがレイアウトが設定されていないページが表示されます。

この出発点には、通常フローでブラウザーに表示されるレイアウトのすべての内容が含まれています。

![](/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension/layout-task-start.png)

### あなたのタスク

あなたは今レイアウトを実装する必要があります。 達成する必要があるタスクは次のとおりです。

1. ナビゲーション項目を、項目間に等間隔のスペースを置いて、1 行に並べて表示します。
2. ナビゲーションバーはコンテンツと一緒にスクロールし、ビューポートの上部に到達するとそこに固定されるべきです。
3. 記事の中にある画像は、それを囲むテキストを持つべきです。
4. `<article>` 要素と `<aside>` 要素は、2 列のレイアウトとして表示するべきです。 ブラウザーウィンドウが小さくなると列が狭くなるように、列は柔軟なサイズにするべきです。
5. 写真は、画像間に 1 ピクセルの間隔を空けて 2 列のグリッドとして表示するべきです。

このレイアウトを実現するために HTML を編集する必要はなく、使用するべきテクニックは次のとおりです。

* 位置指定
* フロート
* フレックスボックス
* CSS グリッドレイアウト

これらのタスクのいくつかを達成することができるいくつかの方法があり、物事を行うための唯一の正しい方法も間違った方法も、多くの場合ありません。 いくつかの異なる方法を試して、どれが最もうまくいくかを確かめてください。 実験しながらメモを取ってください。 この演習のディスカッションスレッドまたは #mdn IRC チャンネルで、自分のアプローチについて常に議論することができます。

評価
--

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

* 前のページ
* Overview: CSS layout


グリッド - ウェブ開発を学ぶ

グリッド
====

* 前のページ
* Overview: CSS layout
* 次のページ

CSS グリッドレイアウト（Grid Layout）は、ウェブ用の 2 次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。

| 前提知識: | HTML の基本（HTML 入門を学ぶ）、および CSS の機能の考え方（CSS 入門とボックスの装飾を学ぶ）。 |
| --- | --- |
| 学習目標: | グリッドレイアウトシステムの背後にある基本概念と、CSS グリッドを使用してグリッドレイアウトを実装する方法を理解すること。 |

グリッドレイアウトとは？
------------

グリッドとは、水平方向と垂直方向のラインを集めたもので、デザイン要素を並べて表示することができます。 ページ間を移動するときに要素が跳び回ったり幅が変わったりしないようなデザインを作成するのに役立ちます。 これにより、ウェブサイトの一貫性が向上します。

グリッドには通常、列（**column**）、行（**row**）、そしてそれぞれの行と列の間のギャップ（通常はガター（**gutter**）と呼ばれます）があります。

![](/ja/docs/Learn/CSS/CSS_layout/Grids/grid.png)

CSS でグリッドを作りましょう
----------------

デザインに必要なグリッドを決定したら、CSS グリッドレイアウトを使用して CSS でそのグリッドを作成し、その上に項目を配置できます。 最初にグリッドレイアウトの基本機能を見てから、プロジェクト用のシンプルなグリッドシステムを作成する方法を探ります。

The following video provides a nice visual explanation of using CSS Grid:

### グリッドを定義する

出発点として、テキストエディタとブラウザーで出発点ファイルをダウンロードして開きます（ここでライブを見ることもできます）。 いくつかの子項目を持つコンテナの例が表示されます。 デフォルトではこれらは通常フローで表示されるので、ボックスは上下に表示されます。 このレッスンの最初の部分でこのファイルを使用して、グリッドのふるまいを確認するための変更を加えます。

グリッドを定義するために、`display` プロパティに `grid` の値を使います。 フレックスボックスと同様に、これによりグリッドレイアウトがオンになり、コンテナの直接の子すべてがグリッド項目になります。 次のものをファイル内の CSS に追加してください。

```css
.container {
  display: grid;
}
```

フレックスボックスとは異なり、項目はすぐには違ったようには見えません。 `display: grid` を宣言すると 1 列のグリッドになるので、項目は通常フローで表示されるように上下に表示され続けます。

よりグリッドらしく見せるには、グリッドにいくつかの列を追加する必要があります。 ここに 200 ピクセルの列を 3 つ追加しましょう。 これらの列トラックを作成するために、任意の長さの単位やパーセントを使用できます。

```css
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
```

CSS 規則に 2 番目の宣言を追加してからページをリロードすると、作成したグリッドの各セルに項目が 1 つずつ再配置されていることがわかります。
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>
```

```
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
```

### fr 単位での柔軟なグリッド

長さとパーセントを使用してグリッドを作成するだけでなく、`fr` 単位を使用して柔軟にグリッドの行と列のサイズを変更できます。 この単位は、グリッドコンテナ内の使用可能スペースの割合を表します。

トラックのリストを次の定義に変更し、`1fr` のトラックを 3 つ作成します。

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
```

あなたは今、柔軟なトラックを持っているのを見るべきです。 `fr` 単位はスペースを比例して配分するので、トラックには異なる正の値を指定できます。 例えば次のように定義を変更したとします。

```css
.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}
```

最初のトラックの使用可能スペースは `2fr` になり、他の 2 つのトラックの使用可能スペースは `1fr` になり、最初のトラックのサイズが大きくなります。 `fr` 単位と固定長トラックを混在させることができます — そのような場合、固定長トラックに必要なスペースは、スペースが他のトラックに分配される前に取り除かれます。
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>
```

**メモ:** `fr` 単位は、*すべて*のスペースではなく、*使用可能*なスペースを分配します。 あなたのトラックの 1 つがその中に大きな何かを持っているならば、共有する空きスペースは少なくなります。

### トラック間のギャップ

トラック間のギャップを作成するには、列間のギャップには `grid-column-gap` プロパティ、行間のギャップには `grid-row-gap` プロパティ、両方を同時に設定するには `grid-gap` プロパティを使用します。

```css
.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
}
```

これらのギャップは、長さの単位またはパーセントのいずれでもかまいませんが、`fr` 単位ではありません。
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>
```

**メモ:** `*gap` プロパティは以前は `grid-` という接頭辞を付けていましたが、これは仕様変更されています。 その意図はそれらを複数のレイアウト方法で使えるようにすることです。 接頭辞の付いたバージョンはエイリアスとして保持されるため、しばらくの間は安全に使用できます。 安全のために、コードをより万全にするために、両方のプロパティを倍増して追加することができます。

```css
.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}
```

### トラックリストの繰り返し

反復記法を使用して、トラックリストの全部または一部を繰り返すことができます。 トラックリストを次のように変更します。

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
```

今までと同じ 3 つの `1fr` のトラックが手に入ります。 repeat 関数に渡す最初の値はリストを繰り返す回数で、2 番目の値はトラックリストで、1 つ以上のトラックを繰り返すことができます。

### 暗黙的グリッドと明示的グリッド

ここまでは列トラックのみを指定しましたが、コンテンツを保持するために行が作成されています。 これは明示的グリッド対暗黙的グリッドの例です。 明示的グリッドは、`grid-template-columns` または `grid-template-rows` を使用して作成したものです。 暗黙的グリッドは、コンテンツがそのグリッドの外側、例えば行に配置されたときに作成されます。 明示的グリッドと暗黙的グリッドは、フレックスボックスの主軸および交差軸と類似しています。

デフォルトでは、暗黙的グリッドに作成されたトラックは `auto` でサイズ調整されます。 これは一般に、コンテンツに合わせて十分に大きいことを意味します。 暗黙的グリッドのトラックにサイズを指定したい場合は、`grid-auto-rows` プロパティと `grid-auto-columns` プロパティを使用できます。 CSS に `100px` の値で `grid-auto-rows` を追加すると、作成された行の高さは 100 ピクセルになります。
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>
```

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}
```

### minmax() 関数

100 ピクセルより高いコンテンツを追加する場合、100 ピクセルの高さのトラックはあまり役に立ちません。 その場合、オーバーフローが発生します。 トラックの高さは*最低* 100 ピクセルで、さらに多くのコンテンツがトラックに入る場合は拡大できると良いでしょう。 ウェブについてのかなり基本的な事実は、あなたが実際に何かがどれほど高くなるかを本当に知らないということです。 追加のコンテンツや大きなフォントサイズは、あらゆる次元でピクセルパーフェクトになろうとするデザインに問題を引き起こす可能性があります。

`minmax()` 関数を使用すると、トラックの最小サイズと最大サイズ、例えば `minmax(100px, auto)` を設定できます。 最小サイズは 100 ピクセルですが、最大サイズは `auto` で、コンテンツに合わせて拡大されます。 次のように `minmax` の値を使用するように `grid-auto-rows` を変更してみてください。

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}
```

追加のコンテンツを追加すると、それが収まるようにトラックが拡大されます。 拡張は行に沿って行われることに注意してください。

### 収まる限り多くの列

トラックリスト、反復記法、`minmax()` について学んだことのいくつかを組み合わせて、便利なパターンを作成できます。 グリッドに、コンテナに収まるだけの数の列を作成するように依頼できると便利な場合があります。 これを行うには、`repeat()` 記法を使用して `grid-template-columns` の値を設定しますが、数値を渡す代わりにキーワード `auto-fill` を渡します。 関数の 2 番目のパラメータには、`minmax()` を使用し、最小値は、必要な最小トラックサイズに等しく、最大値は `1fr` です。

以下の CSS を使用して、今すぐあなたのファイルで次を試してください。
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
```

```
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>
```

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}
```

これは、グリッドがコンテナに収まるだけの数の 200 ピクセルの列を作成し、その後すべての列の間で残っているスペースを共有するためです — 最大は `1fr` で、すでにご存じのとおり、トラック間でスペースを均等に配分するためのものです。

ラインベースの配置
---------

グリッドの作成から、グリッド上に物を配置することに移ります。 グリッドは常にラインを持っていて、そのラインは 1 から始まり、文書の書字方向モード（Writing Mode）に関連しています。 したがって、英語では、列の 1 ライン目がグリッドの左側にあり、行の 1 ライン目が一番上にあります。 アラビア語では、アラビア語は右から左に書かれているので、列の 1 ライン目が右側になります。

開始ラインと終了ラインを指定することで、これらのラインに従って物を配置できます。 次のプロパティを使用してこれを行います。

* `grid-column-start`
* `grid-column-end`
* `grid-row-start`
* `grid-row-end`

これらのプロパティはすべて値としてライン番号を持つことができます。 次の一括指定プロパティを使用することもできます。

* `grid-column`
* `grid-row`

これにより、開始ラインと終了ラインを `/` （スラッシュ文字）で区切って一度に指定できます。

出発点としてこのファイルをダウンロードするか、ここにあるライブを見てください。 それはすでに定義されたグリッドを持ち、そして簡単な記事が概説されています。 自動配置により、作成したグリッドの各セルに項目を 1 つずつ配置していることがわかります。

代わりに、グリッドラインを使用して、サイトのすべての要素をグリッドに配置します。 CSS の最後に次の規則を追加してください。

```css
header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}
header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

aside {
  border-right: 1px solid #999;
}
```

```
<div class="container">
  <header>This is my lovely blog</header>
  <article>
    <h1>My article</h1>
    <p>
      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
    </p>

    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </article>
  <aside>
    <h2>Other things</h2>
    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est.
    </p>
  </aside>
  <footer>Contact me@mysite.com</footer>
</div>
```

**メモ:** 終点の列または行のラインをターゲットとして値 `-1` を使用し、負の値を使用して終点から内側に向かって数えることもできます。 しかしこれは明示的グリッドに対してのみ有効です。 値 `-1` は、暗黙的グリッドの終点のラインをターゲットにしません。

grid-template-areas での配置
------------------------

項目をグリッドに配置する別の方法は、`grid-template-areas` プロパティを使用して、デザインのさまざまな要素に名前を付けることです。

最後の例からラインベースの配置を削除して（またはファイルを再ダウンロードして新しい出発点にして）、次の CSS を追加します。

```css
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}
```

ページをリロードすると、ライン番号を使用しなくても項目が以前と同じように配置されたことがわかります！
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

aside {
  border-right: 1px solid #999;
}

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}
```

```
<div class="container">
  <header>This is my lovely blog</header>
  <article>
    <h1>My article</h1>
    <p>
      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
    </p>

    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </article>
  <aside>
    <h2>Other things</h2>
    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est.
    </p>
  </aside>
  <footer>Contact me@mysite.com</footer>
</div>
```

`grid-template-area` の規則は次のとおりです。

* グリッドのすべてのセルを塗りつぶす必要があります。
* 2 つのセルにまたがるようにするには、名前を繰り返します。
* セルを空のままにするには、`.` （ピリオド）を使用します。
* 領域は長方形である必要があります。 例えば、L 字型の領域を持つことはできません。
* 領域は異なる場所で繰り返すことはできません。

あなたは私たちのレイアウトで遊ぶことができます。 例えば、フッターをコンテンツの下にだけあるように変更し、サイドバーをずっと下に広げるように変更できます。 これは、何が起こっているのかが CSS から明らかなので、レイアウトを記述するためのとても良い方法です。

CSS グリッド、グリッドフレームワーク
--------------------

グリッドの「フレームワーク」は、12 列または 16 列のグリッドと CSS グリッドを基にし、そのようなフレームワークを提供するためにサードパーティ製ツールを必要としません — すでに仕様にあります。

出発点ファイルをダウンロードしてください。 これには、12 列のグリッドが定義されたコンテナと、前の 2 つの例で使用したのと同じマークアップが含まれています。 ラインベースの配置を使用して、次のようにコンテンツを 12 列のグリッドに配置できます。

```css
header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 20px;
}

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

aside {
  border-right: 1px solid #999;
}
```

```
<div class="container">
  <header>This is my lovely blog</header>
  <article>
    <h1>My article</h1>
    <p>
      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
    </p>

    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </article>
  <aside>
    <h2>Other things</h2>
    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est.
    </p>
  </aside>
  <footer>Contact me@mysite.com</footer>
</div>
```

Firefox のグリッドインスペクタを使用してデザイン上のグリッドラインをオーバーレイすると、12 列グリッドがどのように機能するかがわかります。

![私たちのデザインの上に重ねられた12列のグリッド。](/ja/docs/Learn/CSS/CSS_layout/Grids/learn-grids-inspector.png)

スキルテスト
------

この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。Test your skills: Grids (en-US) を見てください。

まとめ
---

この概要では、CSS グリッドレイアウトの主な機能について説明しました。 あなたのデザインでそれを使い始めることができるはずです。 仕様をさらに深く掘り下げるには、以下にあるグリッドレイアウトのガイドを読んでください。

関連情報
----

* CSS グリッドのガイド
* CSS グリッドインスペクター: グリッドレイアウトを調査する
* 前のページ
* Overview: CSS layout
* 次のページ


古いブラウザーのサポート - ウェブ開発を学ぶ

古いブラウザーのサポート
============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
* 前のページ
* Overview: CSS layout
* 次のページ

このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。

| 前提知識: | HTML の基本（HTML 入門を学ぶ）、および CSS の機能の考え方（CSS 入門とボックスの装飾を学ぶ）。 |
| --- | --- |
| 学習目標: | 使用したい機能をサポートしていない可能性がある、古いブラウザーでレイアウトのサポートを提供する方法を理解すること。 |

あなたのサイトのブラウザー利用状況はどうですか？
------------------------

すべてのウェブサイトは、対象視聴者という点で異なります。 取るべきアプローチを決める前に、古いブラウザーでサイトにやってくる訪問者の数を調べてください。 あなたが追加したり置き換えたりしている既存のウェブサイトを持っているなら、人々が使用している技術を伝えることができる分析機能（analytics）を利用できるので、これは簡単です。 分析機能を持っていないか、真新しいサイトであるならば、場所によってフィルターをかけた統計（statistics）を提供することができる Statcounter のようなサイトがあります。

また、デバイスの種類やサイトの利用方法についても検討する必要があります。 例えば、モバイルデバイスの平均数よりも多いと予想される場合があります。 アクセシビリティと支援技術を使用している人々は常に考慮されるべきですが、いくつかのサイトではさらに重要になるかもしれません。 私の経験では、開発者は多くの場合、古いバージョンの Internet Explorer でのユーザーの 1% の体験を非常に心配していますが、はるかに多い数のアクセシビリティが必要な人々は考慮していません。

使用したい機能に対するサポートはどうですか？
----------------------

サイトにやってくるブラウザーを知ったら、それがどのような技術をサポートしているかや、その技術を利用できない訪問者にどれだけ簡単に代替手段を提供できるかについて、使用したい技術を評価できます。 MDN では、CSS プロパティを詳述した各ページにブラウザーの互換性情報を提供することで、これを簡単にできるようにしています。 例えば、`grid-template-columns` のページを見てください。 このページの下部には、主要なブラウザーと、このプロパティのサポートを開始したバージョンの一覧をまとめた表があります。

![](/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers/browser-table.png)

機能がどの程度サポートされているかを調べるもう 1 つの一般的な方法は、Can I Use ウェブサイトです。 このサイトには、ウェブプラットフォームの機能の大部分と、それらのブラウザーのサポート状況に関する情報が記載されています。 あなたは場所によって使用統計を見ることができます — あなたが主に世界の特定の地域のためにユーザーを持っているサイトで働いているなら有用です。 Google Analytics アカウントをリンクして、あなたのユーザーデータに基づいて分析することもできます。

ユーザーが持っている技術、そしてあなたが使いたいと思うかもしれないことへのサポートを理解することは、すべての決断を下し、すべてのユーザーをサポートするための最善の方法を知るための良い場所にあなたを置きます。

サポートは「同じに見える」という意味ではありません
-------------------------

一部のユーザーはサイトを携帯電話で見たり、他のユーザーは大きなデスクトップ画面を見たりするため、ウェブサイトはすべてのブラウザーで同じように見えるとは限りません。 同様に、一部のユーザは古いブラウザーのバージョンを持ち、他のユーザは最新のブラウザーを持ちます。 一部のユーザーは、コンテンツがスクリーンリーダーによって読み上げられているのを聞いているかもしれないし、それを読むことができるようにページにズームインしているかもしれません。 全員をサポートするということは、防御的に設計されたバージョンのコンテンツを提供することを意味します。 その結果、最新のブラウザーでは見栄えがよくなりますが、それでも古いブラウザーのユーザにとっては基本レベルで使用できます。

基本レベルのサポートは、ページの通常フローが意味をなすように、コンテンツを適切に構成することによります。 非常に限られた機能の携帯電話を持っているユーザーは CSS の多くを得ないかもしれません、しかし内容は読みやすくする方法で流れます。 したがって、よく構造化された HTML 文書を常に出発点にする必要があります。 *スタイルシートを削除した場合、コンテンツは意味をなしますか？*

1 つの選択肢は、非常に古いブラウザーや限られたブラウザーを使用している人々のための代替手段として、サイトのこのプレーンなビューを残すことです。 これらのブラウザーでこのサイトにアクセスしている人の数が非常に少ない場合は、最新のブラウザーと同様の経験をそれらの人に与えようとして時間を注いでも意味がありません。 サイトをよりアクセスしやすくするために時間をかけて、はるかに多くのユーザーにサービスを提供することをお勧めします。 プレーンな HTML ページと何から何までいろいろなものとの間には妥協点があり、CSS は実際にこれらの代替手段の作成をかなり簡単にしました。

CSS で代替手段を作成する
--------------

CSS の仕様には、2 つのレイアウト方法が同じ項目に適用されたときにブラウザーが何をするのかを説明する情報が含まれています。 これは、例えばフロート項目が CSS グリッドレイアウトを使用しているグリッド項目でもある場合に何が起こるかの定義があることを意味します。 ブラウザーが理解できない CSS を無視するという知識とこの情報を組み合わせると、すでに説明した過去のテクニックを使用して単純なレイアウトを作成し、それをグリッドレイアウトを理解している最新のブラウザーではグリッドレイアウトで上書きする方法があります。

以下の例では、3 つの `<div>` をフロートさせて、それらが一行に表示されるようにしました。 CSS グリッドレイアウトをサポートしていないブラウザーでは、ボックスの行はフロートレイアウトとして表示されます。 グリッド項目になったフロート項目はフロートのふるまいを失います。 つまり、`wrapper` をグリッドコンテナに変えることによって、フロート項目はグリッド項目になります。 ブラウザーがグリッドレイアウトをサポートしていればグリッドビューを表示し、そうでなければ `display: grid` と関連のプロパティを無視してフロートレイアウトが使用されます。

```css
\* {
  box-sizing: border-box;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

```html
<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>
```

**メモ:** クリアされた項目がグリッド項目になると、`clear` プロパティも無効になります。 そのため、フッターがクリアされたレイアウトを作成し、それをグリッドレイアウトにすることができます。

### 代替手段の方法

このフロートの例と同様の方法で使用できるレイアウト方法はいくつかあります。 作成するレイアウトパターンに最も適したものを選択できます。

フロートと*クリア*

上記のように、フロート項目またはクリアされた項目がフレックス項目またはグリッド項目になると、`float` プロパティや `clear` プロパティはレイアウトに影響しなくなります。

display: inline-block

この方法を使用して列レイアウトを作成できます。 項目に `display: inline-block` が設定されていて、それからフレックス項目またはグリッド項目になる場合、`inline-block` のふるまいは無視されます。

display: table

CSS レイアウト入門で説明した CSS 表の作成方法は、代替手段として使用できます。 CSS 表レイアウトが設定されている項目は、それらがフレックス項目またはグリッド項目になると、このふるまいを失います。 重要なことに、表構造を修正するために作成された匿名ボックスは作成されません。

段組みレイアウト

特定のレイアウトでは、代替手段として段組みレイアウトを使用できます。 コンテナに定義された `column-*` プロパティのいずれかがあり、その後グリッドコンテナになると、段組みレイアウトのふるまいは起こりません。

グリッドの代替手段としてのフレックスボックス

フレックスボックスは、IE10 と IE11 でサポートされているため、グリッドよりもブラウザーのサポートが優れています。 ただし、このレッスンの後半で、古いブラウザーでのフレックスボックスのかなり曖昧でわかりにくいサポートについて説明します。 フレックスコンテナをグリッドコンテナにした場合、子に適用されている `flex` プロパティはすべて無視されます。

古いブラウザーでの多くのレイアウトの調整では、このように CSS を使用することでまともな体験を与えることができるかもしれません。 古くてよくサポートされているテクニックに基づいた、より単純なレイアウトを追加してから、新しい CSS を使用して、視聴者の 90% 以上が見るレイアウトを作成します。 ただし、代替手段のコードに新しいブラウザーでも解釈されるものを含める必要がある場合があります。 この良い例は、列をグリッド表示に近づけるためにフロート項目にパーセント幅を追加し、コンテナを埋めるように伸縮する場合です。

フロートレイアウトでは、パーセントはコンテナから計算されます — 33.333% はコンテナ幅の 3 分の 1 です。 ただしグリッドでは、 33.333% は項目が配置されているグリッド領域から計算されるため、グリッドレイアウトが導入されると、実際に必要なサイズのさらに 3 分の 1 になってしまいます。

```css
\* {
  box-sizing: border-box;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
  width: 33.333%;
}
```

```html
<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>
```

この問題に対処するには、グリッドがサポートされているかどうか、したがってグリッドが幅を上書きするかどうかを検出する方法が必要です。 CSS は下記の解決策を持っています。

機能クエリ
-----

機能クエリを使用すると、ブラウザーが特定の CSS 機能をサポートしているかどうかをテストできます。 つまり、特定の機能をサポートしていないブラウザー用の CSS を作成してから、そのブラウザーがサポートしているかどうかを確認し、サポートしている場合は素敵なレイアウトを追加することができます。

上記の例に機能クエリを追加すると、グリッドをサポートしている場合、項目の幅を `auto` に戻すことができます。

```css
\* {
  box-sizing: border-box;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
  width: 33.333%;
}

@supports (display: grid) {
  .item {
    width: auto;
  }
}
```

```html
<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>
```

機能クエリのサポートは最近のブラウザーでは非常に優れていますが、CSS グリッドをサポートしていないブラウザーでも機能クエリをサポートしていないことに注意してください。 これは、上で詳述されたアプローチがそれらのブラウザーで働くということを意味します。 していることは、すべての機能クエリの外側で、古い CSS を最初に書くことです。 グリッドをサポートせず、機能クエリもサポートしないブラウザーは、理解できるレイアウト情報を使用し、それ以外はすべて無視します。 機能クエリをサポートするブラウザーは CSS グリッドもサポートするため、グリッドのコードと機能クエリ内のコードを実行します。

機能クエリの仕様には、ブラウザーが機能をサポートしていないことをテストする機能も含まれています — これは、ブラウザーが機能クエリをサポートしている場合にのみ役立ちます。 将来的には、機能クエリをサポートしていないブラウザーはなくなるため、サポートの欠如を確認するアプローチが有効になります。 ただし現時点では、最善のサポートのために古い CSS を使用してから上書きするというアプローチを使用してください。

古いバージョンのフレックスボックス
-----------------

古いバージョンのブラウザーでは、以前のフレックスボックス仕様の繰り返しを見つけることができます。 これを書いている時点で、これはほとんどフレックスボックスのために `-ms-` 接頭辞を使う Internet Explorer 10 の問題です。 これはまた、いくつかの古い記事やチュートリアルが存在することを意味します。 この便利なガイド（英語）は何を見ているのかを確認するのに役立ちますし、非常に古いブラウザーでフレックスのサポートが必要な場合にも役立ちます。

IE10 と IE11 の接頭辞版のグリッド
----------------------

CSS グリッド仕様は、当初 Internet Explorer 10 で試作されました。 つまり、IE10 と IE11 は*最新*のグリッドをサポートしていませんが、このサイトに記載されている最新の仕様とは異なり、非常に使いやすいバージョンのグリッドレイアウトを使用しています。 IE10 および IE11 の実装は、前に `-ms-` が付いています。 つまり、これらのブラウザーに使用でき、マイクロソフト以外のブラウザーでは無視されます。 Edge はまだ古い構文を理解しているので、最新のグリッド CSS ではすべてが安全に上書きされるように注意してください。

CSS グリッドレイアウトとプログレッシブエンハンスメントのガイドはグリッドの IE バージョンを理解するのを助けることができ、このレッスンの最後にいくつかの追加の役に立つリンクを含めました。 ただし、以前のバージョンの IE に非常に多くの訪問者がいない限り、サポートされていないすべてのブラウザーで機能する代替手段の作成に集中することをお勧めします。

古いブラウザーをテストする
-------------

フレックスボックスとグリッドをサポートしているブラウザーの大多数では、古いブラウザーをテストするのはかなり難しいかもしれません。 1 つの方法は、クロスブラウザーテストのモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。

また、仮想マシンをダウンロードしてインストールし、自分のコンピュータ上の封じ込められた環境で古いバージョンのブラウザーを実行することもできます。 古いバージョンの Internet Explorer にアクセスできることは特に便利で、そのために、マイクロソフトはさまざまな仮想マシンを無料でダウンロード（英語）できるようにしました。 これらは、Mac、Windows、Linux の各オペレーティングシステムで利用可能で、Windows コンピュータを使用していなくても、古い Windows ブラウザーや最新の Windows ブラウザーでテストするのに最適な方法です。

まとめ
---

今やあなたは自信を持ってグリッドやフレックスボックスのようなテクニックを使い、古いブラウザーのための代替手段を作り、そして将来現れるであろう新しいテクニックを利用する知識を持っています。

関連情報
----

* CSS での機能クエリの使用（英語）
* フレックスボックスの後方互換性
* CSS グリッドレイアウトとプログレッシブエンハンスメント
* CSS グリッドを使用する: グリッドなしでブラウザーをサポートする（英語）
* IE10 および IE11 バージョンのグリッドを使用するチュートリアル（英語）
* IE10 のグリッドレイアウトの実装を使おうとするべきですか？（英語）
* 機能クエリによるカスケードウェブデザイン（英語）
* 機能クエリの使用（動画、英語）
* 前のページ
* Overview: CSS layout
* 次のページ


通常フロー - ウェブ開発を学ぶ

通常フロー
=====

* 前のページ
* Overview: CSS layout
* 次のページ

この記事では、通常フロー、つまりレイアウトを変更していない場合のウェブページの要素のレイアウト方法について説明します。

| 前提知識: | HTML の基礎 (HTML 入門を学ぶ)、および CSS の機能の考え方 (CSS 入門を学ぶ)。 |
| --- | --- |
| 学習目標: | 変更を加える前に、ブラウザーがデフォルトでウェブページをどのようにレイアウトするかを説明します。 |

レイアウトを紹介した前回のレッスンで詳しく説明したように、CSS を適用してふるまいを変更していない場合、ウェブページ上の要素は通常フローでレイアウトされます。そして、理解を深め始めるにつれ、その通常フローの中で要素の位置を調整したり、要素を完全に取り除くたりして、要素のふるまいを変更できます。通常フローで読み取り可能な、しっかりとよく構造化された文書から始めることは、どんなウェブページでも始めるための最良の方法です。それは、ユーザーが非常に制限されたブラウザーを使用している場合や、ページのコンテンツを読み上げるスクリーンリーダーなどのデバイスを使用している場合でも、コンテンツを読みやすくすることができます。さらに、通常フローは読み取り可能な文書を作成するように設計されているので、この方法で始めることで、レイアウトを変更するときに文書と戦うのではなく文書とともに作業します。

さまざまなレイアウト方法を深く掘り下げる前に、以前のモジュールで通常のドキュメントフローに関して検討したことのいくつかを再検討する価値があります。

要素はデフォルトでどのようにレイアウトされますか？
-------------------------

まず初めに、個々の要素ボックスは要素のコンテンツを取り、それからそれらの周りにパディング (padding、詰め物)、ボーダー (border、境界線) そしてマージン (margin、余白) を追加することによってレイアウトされます — これはまた以前に見たことがあるボックスモデルのことです。

デフォルトでは、ブロックレベル要素のコンテンツは、その親要素の幅の 100% で、そのコンテンツと同じ高さです インライン要素 (en-US)は、コンテンツと同じ高さで、コンテンツと同じ幅です。インライン要素に幅や高さを設定することはできません — それらはブロックレベル要素のコンテンツの中にあるだけです。この方法でインライン要素のサイズを制御したい場合は、`display: block;` を使用してブロックレベル要素のようにふるまうように設定する必要があります (あるいは、`display: inline-block;` で、両方の特性を混在させます)。

それは個々の要素を説明していますが、要素がどのように相互作用するかについてはどうでしょうか？ 通常のレイアウトフロー (レイアウト入門の記事に記載) は、ブラウザーのビューポート内に要素を配置するシステムです デフォルトでは、ブロックレベル要素は、親の書字方向モード (writing mode、*初期* は horizontal-tb) に基づいて*ブロックのフロー方向* にレイアウトされます — 各要素は、最後の要素の下の新しい行に表示され、それらに設定されたマージンで区切られます したがって英語やその他の横書きで、上から下へ改行する書字方向モードでは、ブロックレベル要素は垂直にレイアウトされます。

インライン要素は異なるふるまいをします — 新しい行に現れません。代わりに、親ブロックレベル要素の幅の内側にマージンがある限り、それらは互いに同じ行に配置され、隣接する (または折り返された) テキストコンテンツに配置されます。スペースがなければ、あふれているテキストや要素は新しい行に移動します。

隣接する 2 つの要素の両方にマージンが設定されていて、2 つのマージンが接触している場合、2 つのうち大きい方が残り、小さい方が消えます — これはマージンの相殺 (margin collapsing) と呼ばれます。

これらすべてを説明する簡単な例を見てみましょう。

```html
<h1>基本的なドキュメントフロー</h1>

<p>
  これは基本的なブロックレベル要素です。隣接するブロックレベル要素は下の新しい行に配置されています。
</p>

<p>
  デフォルトでは、親要素の幅の 100%
  にまたがり、子コンテンツと同じ高さになります。幅と高さの合計は、コンテンツ +
  パディング + ボーダーの幅/高さです。
</p>

<p>
  マージンによって分けられています。マージンの相殺のため、両方ではなく、1
  つのマージンの幅で区切られます。
</p>

<p>
  <span>これ</span
 >および<span>これのような</span>インライン要素は、同じ行に配置され、同じ行にスペースがある場合は隣接するテキストノードに配置されます。オーバーフローするインライン要素は<span
 >可能であれば新しいラインに折り返され (これのようにテキストを含む)</span
 >、そうでなければ次の画像のように単に新しい行に進むでしょう。<img
 src="long.jpg"
 alt="snippet of cloth" />
</p>
```

```css
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}
```

まとめ
---

通常フロー、およびブラウザーがデフォルトでどのようにレイアウトするかを理解したので、次にこのデフォルトの `display` を変更してデザインに必要なレイアウトを作成する方法を理解することに進みます。

* 前のページ
* Overview: CSS layout
* 次のページ


新しい知識を使う - ウェブ開発を学ぶ

新しい知識を使う
========

* 前のページ
* Overview: First steps

先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。

|  |  |
| --- | --- |
| 前提条件: | 基本的なコンピュータリテラシー、基本的なソフトウェアのインストール、基本的なファイル操作や HTML の基本（HTML の入門で学ぶ）、CSS の基礎（このモジュールの残り部分）。 |
| 目的: | いくつかの CSS を試し、知識レベルを確認します。 |

さあ始めよう
------

下の Live エディタで試すこともできますし、我々の Github リポジトリからサンプルファイルをダウンロードして試してみることもできます。ここで使うサンプルはシンプルな一ページの HTML で、頭にはとりあえずシンプルな CSS が埋め込まれています。もしローカルで動かすとき HTML と CSS が一緒になっているのが嫌だったら別々のファイルに分割しても構いません。あるいは、CodePen や jsFiddle、Glitch といったオンラインエディタを使うこともできます。

**メモ:** もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。

CSS を少し試してみよう
-------------

下のサンプルは、CSS でスタイルされたプロフィールページの例です。ここで使われているプロパティは次の通りです。これらについてはそれぞれリンクから MDN の記事に飛べますので、プロパティの詳細な説明についてはそちらをご参照ください。

* `font-family`
* `color`
* `border-bottom`
* `font-weight`
* `font-size`
* `text-decoration`

下のプロフィールページでは、いろんなセレクタを使ったり、h1 要素や h2 要素などの装飾要素を使ったりしただけでなく、職業を表す部分ではクラスを定義してデザインを設定しました。

プロパティの値をいろいろに変えて見た目がどう変わるか試してみましょう。

1. 見出し 1 の文字色をピンクに変えてみましょう。色の指定には `hotpink` を使うとよいでしょう。
2. 見出し 1 の下に太さ 10px の点線をつけてみましょう。そしてその色を `purple` にしてみましょう。
3. 見出し 2 の書体をイタリックに変えてみましょう。
4. 連絡先情報の部分で使われている `ul` 要素の `background-color` を `#eeeeee` にして、`border` を太さ 5px の紫の線に変えてみましょう。また、`padding` を指定してコンテンツと連絡先情報の部分にスペースが空くように設定しましょう。
5. リンクの部分にマウスが乗ったとき、リンクが `green` に変わるように設定しましょう。

完成したら次の画像のようになるはずです。

![](https://mdn.dev/archives/media/attachments/2019/12/31/17035/da8ff2a04da214e57e18a6ea3ac6832e/learn-css-basics-assessment.png)

それから、このページに書かれていない属性をみてみましょう。MDN の CSS リファレンス には冒険が待っています!

ここには間違った回答はないことを覚えていてください — ここではいろいろ試して楽しみながら学びましょう。

アセスメントとさらなるヘルプ
--------------

作ったものを見てほしいときや、作業に詰まってしまって質問をしたいとき：

1. あなたが作ったものを CodePen や jsFiddle、Glitch などのコード共有サービスに公開してください。
2. 添削の依頼あるいは訊きたいことを MDN Discourse forum Learning category に投稿してください。ここに投稿するときには次のことを忘れないようにしてください。
    * タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。
    * 添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。
    * どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。
次のステップ
------

最初のモジュールを修了しました。おめでとうございます。あなたはもう CSS の基本的な部分は理解できたはずです。そして、スタイルシートの挙動が分かるようになったはずです。次のモジュール、CSS ブロック構築ではいくつかの重要な部分を深く見ていきましょう。

* 前のページ
* Overview: First steps


CSS とは何か - ウェブ開発を学ぶ

CSS とは何か
========

* Overview: First steps
* 次のページ

**CSS** (Cascading Style Sheets；カスケーティングスタイルシート) は見栄えのよいページを作ることができますが、内部ではどう働くのでしょうか？この記事では簡単な構文の例とともに CSS とは何かについて説明し、この言語の重要な用語についても触れます。

|  |  |
| --- | --- |
| 前提条件: |
 基本的なコンピューターリテラシー、
 基本的なソフトウェアがインストールされていること、
 ファイルの操作方法についての基本的な知識、 HTML の基本
 （HTML 概論を学習のこと）
  |
| 目的: | CSS とは何かを学ぶ。 |

HTML 概論 では HTML について触れ、文書をどのようにマークアップするかを学びました。この文書はウェブブラウザーで読むことができます。見出しは普通のテキストより大きく見え、段落は新しい行に分けられ、それらの間には空白が入ります。リンクはほかのテキストと区別するために色付きで下線が引かれています。これらはブラウザーによる既定のスタイルです。ページの作者がスタイル付けしていなくても、読みやすくなるようにブラウザーが HTML に適用するとても基本的なスタイルです。

![ブラウザーが使用する既定のスタイル](/ja/docs/Learn/CSS/First_steps/What_is_CSS/html-example.png)

しかし、すべてのウェブサイトがそれだけでは、ウェブは退屈なものになってしまいます。 CSS を使用すると、 HTML の要素がブラウザー上でどのように見えるかを正確に制御することができ、マークアップを好きなデザインで表示することができます。

ブラウザーや既定値のスタイルについては、以下の動画をご覧ください。

CSS の目的
-------

前述のように、CSS は文書を（スタイルやレイアウトを）どのように表現するか指定する言語です。

**文書** は普通、マークアップ言語を使って構造化されたテキストファイルです。HTML がもっとも一般的な マークアップ言語ですが、SVG や XMLも出会うことがあります。

文書を **表現する** とは、それを使いやすいフォームに変換することを意味します。Firefox、Chrome、Edge といったブラウザー はコンピューター画面やプロジェクター、あるいはプリンタで印刷される文書が視覚的に表現されるよう設計されています。

**メモ:** ブラウザーは時にユーザーエージェントと呼ばれることがありますが、基本的に人に似せたコンピュータープログラムを意味します。CSS について語る時、ブラウザーは代表的なユーザーエージェントですが、それだけではありません。HTML と CSS 文書を印刷できる PDF に変換するようなユーザーエージェントもあります。

CSS は、例えば見出しやリンクの 色 や フォントサイズの変更といったごく基本的なテキストのスタイル付けにも使えます。例えば、1 段のテキストをレイアウトしてメインコンテンツ領域と関連情報のためのサイドバーに分けるといったレイアウト作成に使うこともできます。アニメーションのような効果も使えます。それぞれの例はこの段落のリンクをご覧ください。

CSS の構文
-------

CSS はルールベースの言語です。ウェブページの特定の要素や要素のグループに適用するスタイルのグループを指定することで、ルールを定義します。

例えば、ページの主な見出しを大きな赤い文字で表示するようにすることができます。次のコードは、上記の記述されているスタイル設定を実現する、とても単純な CSS ルールを示しています。

```css
h1 {
  color: red;
  font-size: 5em;
}
```

* 上の例では、CSS ルールはセレクターで始まるようになっています。これは、スタイルを設定する HTML 要素を選択するものです。この例では、レベル 1 の見出し (`<h1>`) にスタイルを設定しています。
* 次に、一組の中括弧 `{ }` があります。
* 中括弧の中には、1つ以上の **宣言** が入ります。これは、**プロパティ** と **値** の組という形を採ります。コロンの前にプロパティ（上の例では `color`）を指定し、コロンの後にプロパティの値（この例では `red`）を指定します。
* この例では、`color` と `font-size` の 2 つの宣言を保持しています。それぞれの組は、選択した要素（この例では `<h1>`）のプロパティを指定し、次にそのプロパティに与えたい値を指定しています。

CSS のプロパティは、指定されたプロパティによって様々な許容値を持ちます。例えば、`color` プロパティは様々な色の値を持っています。`font-size` プロパティもあります。このプロパティは値として様々な大きさの単位 を持っています。

CSS スタイルシートには、このようなルールがたくさん記述され、それらが次々と書かれていきます。

```css
h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}
```

値によってはすぐに覚えられますが、他にも見なければならない値があることに気がつくと思います。MDN で個々のプロパティのページを見れば、忘れたとき、あるいは値として使用できる他のものを知りたいときに、プロパティとその値をすばやく調べることができます。

**メモ:** CSS リファレンスにすべての CSS プロパティの一覧が（他の CSS 機能と共に）あります。CSS の機能についてもっとたくさんの情報を見つける必要があるときには、検索エンジンで "mdn *CSS-機能名*" と調べることに慣れても良いでしょう。 例えば、"mdn color" や "mdn font-size" を試してみてください。

CSS のモジュール
----------

CSS を使用してスタイル設定できることは非常に多いので、この言語は *モジュール* に分割されています。MDN を見ていると、これらのモジュールが参照されているのがわかるでしょう。私たちのドキュメントページの多くは、特定のモジュールを中心に構成されています。例えば、背景と境界モジュールを MDN で参照すると、その目的や含まれているプロパティと機能を探すことができます。そのモジュールの中には、その技術を定義している *仕様書* へのリンクもあります（下記の節も参照してください）。

この段階では、CSS がどのような構造になっているかはあまり気にする必要はありません。しかし、例えば、あるプロパティが他の似たようなものの中に得られる可能性が高く、したがって、おそらく同じ仕様の中にあると認識していれば、情報を見つけやすくなることがあります。

たとえば、背景と境界モジュールに戻ってみましょう。`background-color` と `border-color` プロパティがこのモジュール内で定義されているのは理にかなっていると思うかもしれませんし、実際そうなっています。

### CSS の仕様

（HTML、CSS、JavaScript といった）ウェブの標準技術はすべて、仕様書（または単に「仕様」）と呼ばれる文書で定義されており、（W3C、WHATWG、ECMA、Khronos といった）標準化団体によって発行され、技術がどう働くよう期待されているかを定義しています。

CSS も例外ではありません。CSS は W3C 内の CSS 作業グループと呼ばれるグループにより開発されました。このグループは、CSS に関心のあるブラウザーベンダーやその他の企業の代表者で構成されています。またメンバー組織とつながらず、独立した声として行動する *invited experts* もいます。

新しい CSS の機能は、CSS 作業グループにより開発され、仕様化されています。 特定のブラウザーが実験的に機能を実装させることもありますし、ウェブデザイナーや開発者が要望することもありますし、作業グループ自体が要件を固めることもあります。CSS は絶えず開発されており、新しい機能が利用可能になります。しかし重要なのは、古いウェブサイトが決して壊れてしまわないように、全員が努力していることです。2000 年に作られたウェブサイトは限られた CSS 機能しか使えませんが、最新のブラウザーでも見えるようになっているべきなのです。

CSS の初心者としては、CSS 仕様書が圧倒的であることに気付くでしょう。これらは、ウェブ開発者が CSS を理解するために読むのではなく、エンジニアがユーザーエージェント機能の対応を実装するために使用することを想定しています。経験豊富な開発者の多くは、MDN ドキュメントや他のチュートリアルを参照します。ただし、それらが存在することを知り、使っている CSS やブラウザーによる対応（以下を参照）、および仕様間の関係を理解することは価値があります。

ブラウザー対応情報
---------

CSS の機能が制定された後、1 つ以上のブラウザーがその機能を実装して初めて、ウェブページを開発する上で有益なものとなります。これは、CSS ファイルに記述された命令を画面に出力するためのコードが書かれていることを意味します。この作業については、CSS はどう働くか のレッスンで詳しく見ていきます。すべてのブラウザーが同時に機能を実装することは珍しいので、 CSS のある部分はあるブラウザーで使用でき、他のブラウザーでは使用できないというギャップがあるのが普通です。このため、実装状況を調べることができるのは有益なことです。

ブラウザーの対応状況は、MDN の各 CSS プロパティページにある「ブラウザーの互換性」という表に記載されています。その表の情報を参考に、あなたのウェブサイトでそのプロパティが使用できるかどうか調べてください。例として、CSS の `font-family` プロパティのブラウザー互換性一覧表を参照してください。

必要に応じて、ブラウザー互換性表を使って、このプロパティが様々なブラウザーでどのように対応しているかを調べたり、特定のブラウザーとそのバージョンがこのプロパティに対応しているか、あるいは、使用しているブラウザーとバージョンについて注意すべき点があるかどうかを調べたりすることができます。

まとめ
---

この記事の最後までたどり着きました。これで CSS とは何かということがある程度理解できたと思いますので、次は自分で CSS を書き始めるための CSS 入門に移動しましょう。

* Overview: First steps
* 次のページ


CSS の構造 - ウェブ開発を学ぶ

CSS の構造
=======

* 前のページ
* Overview: First steps
* 次のページ

CSS の概要と基本的な使い方について理解できたので、今度は CSS の構造をもう少し詳しく見てみましょう。

|  |  |
| --- | --- |
| 前提条件: |
 基本的なコンピュータリテラシー、基本的なソフトウェアのインストール、基本的なファイル操作や HTML の基本（HTML 入門で学習）に関する基本的な知識、
 CSS の動作に関する理解。
  |
| 目的: | CSS の基本的な構文の構造を詳細に学ぶ。 |

CSS を HTML に適用する
----------------

まず、文書に CSS を適用する方法として、外部スタイルシートを使う方法、内部スタイルシートを使う方法、インラインスタイルを使う方法の 3 つの方法を見てみましょう。

### 外部スタイルシート

外部スタイルシートには `.css` という拡張子を持つ別のファイルに CSS が含まれています。これは、文書に CSS を持ち込む最も一般的で便利な方法です。1 つの CSS ファイルを複数のウェブページにリンクして、すべてのウェブページを同じ CSS スタイルシートでスタイル付けすることができます。 CSS 入門では、外部のスタイルシートをウェブページにリンクしました。

HTML の `<link>` 要素から外部 CSS スタイルシートを参照しています。

```html
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>
```

CSS ファイルはこのようになります。

```css
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
```

`<link>` 要素の `href` 属性は、ファイルシステム上のファイルを参照する必要があります。上の例では、 CSS ファイルは HTML 文書と同じフォルダーにありますが、どこか別の場所に配置してパスを調整することもできます。以下に 3 つの例を示します。

```html
<!-- 現在のディレクトリーの中の styles というサブディレクトリーの中 -->
<link rel="stylesheet" href="styles/style.css" />

<!-- カレントディレクトリーの中にある styles というサブディレクトリーの中にある、 general というサブディレクトリーの中 -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- ひとつ上のレベルのディレクトリーに行き、その下にある styles というサブディレクトリーの中 -->
<link rel="stylesheet" href="../styles/style.css" />
```

### 内部スタイルシート

内部スタイルシートは、 HTML 文書の中に配置します。内部スタイルシートを作成するには、 CSS を HTML 文書の `<head>` の中にある `<style>` 要素の中に入れてください。

例えば、 HTML はこのようになります。

```html
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <style>
 h1 {
 color: blue;
 background-color: yellow;
 border: 1px solid black;
 }

 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>
```

状況によっては、内部スタイルシートが便利な場合もあります。たとえば、コンテンツ管理システムを使用している場合、外部の CSS ファイルを変更することがブロックされているかもしれません。

しかし、複数のページを持つサイトでは、内部スタイルシートは効率の悪い作業方法になります。内部スタイルシートを使用して、複数のページに統一された CSS スタイルを適用するには、そのスタイルを使用するすべてのウェブページに内部スタイルシートをコピーしなければなりません。効率性の低下はサイトの保守にも影響します。内部スタイルシートの CSS では、1 つの簡単なスタイル変更でも、複数のウェブページの編集が必要になるリスクがあります。

### インラインスタイル

インラインスタイルは、単一の HTML 要素のみに影響を与える CSS 宣言で、 `style` 属性の中に記述します。 HTML 文書におけるインラインスタイルの実装は次のようになります。

```html
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      Hello World!
    </h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>
```

**この方法での CSS の使用は、可能な限り避けてください。** まず、 CSS の実装の中では最も保守の効率が悪いものです。一つのスタイルを変更するために、一つのウェブページ内で複数の編集が必要になるかもしれません。第二に、インライン CSS はプレゼンテーション用のコードを HTML やコンテンツに混ぜてしまうため、すべてが読んだり理解したりしにくいものになってしまいます。コードとコンテンツを分離すれば、ウェブサイトで働くすべての人にとって保守が容易になります。

インラインスタイルが一般的な状況はいくつかあります。作業環境が非常に制限されている場合は、インラインスタイルの使用に頼らざるを得ないかもしれません。例えば、 CMS では HTML の本文しか編集できない場合があります。また、できるだけ多くのメールクライアントとの互換性を実現するために、 HTML メールでインラインスタイルが多用されているのを見ることもあるでしょう。

CSS を試してみる
----------

次の演習では、コンピューターにフォルダーを作成してください。フォルダーには好きな名前をつけてください。以下のテキストをコピーして、フォルダーの中に 2 つのファイルを作成してください。

**index.html:**

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My CSS experiments</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Create your test HTML here</p>
  </body>
</html>
```

**styles.css:**

```css
/\* Create your test CSS here \*/

p {
  color: red;
}
```

試してみたい CSS を見つけたら、 HTML の `<body>` の内容をスタイル付けする HTML に置き換え、テスト用の CSS コードを CSS ファイルに追加してください。

別の方法として、以下のインタラクティブなエディターを使用することもできます。

楽しみながら、先に進んでいきましょう。

セレクター
-----

セレクターは CSS に欠かせない構成要素です。CSS 入門のチュートリアルでは、すでにさまざまな種類のセレクターを見てきました。セレクターは、 HTML 文書のなかでスタイルを適用する対象を指定するものです。もし CSS が期待通りにコンテンツに適用されなかったら、セレクターが一致すると思っていた方法で一致していないのかもしれません。

それぞれの CSS ルールの先頭には、セレクターまたはセレクターのリストを書きます。これによって、ブラウザーにどの要素に CSS ルールを適用するかを指示します。次のコード例は、いずれも有効なセレクター、またはセレクターのリストです。

```css
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro
```

上記のセレクターを使った CSS ルールを作ってみてください。セレクターによってスタイル付けされる HTML を追加します。上記の構文に馴染みのないものがあれば、 MDN を検索してみてください。

**メモ:** 次のモジュールの記事 CSS セレクター で、セレクターについてより詳しく学ぶことができます。

### 詳細度

2 つのセレクターが同じ HTML 要素を選択するシナリオに遭遇するかもしれません。以下のスタイルシートを考えてみましょう。 `p` セレクターで段落のテキストを青に設定します。しかし、選択された要素のテキストを赤に設定するクラスもあります。

```css
.special {
  color: red;
}

p {
  color: blue;
}
```

HTML 文書の中に `special` のクラスを持つ段落があるとします。両方のルールが適用されます。どちらのセレクターが優先されるでしょうか？段落のテキストが青と赤のどちらになると思いますか？

```html
<p class="special">What color am I?</p>
```

CSS 言語には、競合が発生した場合にどちらのセレクターが強いかを制御するためのルールがあります。これらのルールは**カスケード** (cascade) と**詳細度** (specificity) と呼ばれています。以下のコードブロックでは、 `p` セレクターに対して 2 つのルールが定義されていますが、段落テキストは青くなります。これは、段落テキストを青に設定する宣言がスタイルシートの後に現れているからです。後のスタイルは、それより前のスタイルシートに現れた競合するスタイルを置き換えます。これが**カスケード**ルールです。

```css
p {
  color: red;
}

p {
  color: blue;
}
```

しかし、クラスセレクターと要素セレクターの間に競合がある前の例では、クラスが優先され、赤い段落テキストがレンダリングされます。スタイルシートの後方に競合するスタイルが表示されているにもかかわらず、どうしてこのようなことが起こるのでしょうか？クラスは、要素セレクターよりも**詳細度**が高いことになっており、より具体的であると評価されるので、他の競合するスタイル宣言をキャンセルしたのです。

この実験を自分でやってみましょう。 HTML を追加して、2 つの `p { }` ルールをスタイルシートに追加します。次に、最初の `p` セレクターを `.special` に変更して、それがスタイルをどのように変えるかを見てみましょう。

詳細度とカスケードのルールは、最初は複雑に見えるかもしれません。これらのルールは、 CSS に慣れてくると理解しやすくなります。次のモジュールの カスケードと継承 の章では、詳細度の計算方法を含めて詳しく説明しています。

今のところ、詳細度が存在することを覚えておいてください。スタイルシートの他の何かがより高い詳細度を持っているために、 CSS が期待通りに適用されないことがあります。 1 つの要素に複数のルールが適用される可能性があることを認識することは、この種の問題を解決するための最初のステップです。

プロパティと値
-------

もっとも基本的なレベルでは、 CSS は 2 つの部品でできています。

* **プロパティ**: スタイルに関して変更できる何らかの特徴をあらわす、人間が理解できる識別子です。例えば、 `font-size`, `width`, `background-color` などです。
* **値**: 各プロパティには値が割り当てられています。この値は、プロパティをどのようにスタイル付けするかを示します。

次の例では、一組のプロパティと値を強調表示しています。プロパティ名は `color` で、値は `blue` です。

![CSS で強調された宣言](/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured/declaration.png)

プロパティが値と組み合わせられているとき、この組み合わせを *CSS 宣言* (CSS declaration) と呼びます。 CSS 宣言は *CSS 宣言ブロック* (CSS Declaration Blocks) の中に入っています。次のコード例では CSS の宣言ブロックを強調しています。

![強調表示された宣言ブロック](/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured/declaration-block.png)

そして、 CSS 宣言ブロックは*セレクター*と組になって *CSS ルールセット* (または *CSS ルール*) になります。1 つは `h1` セレクター用、もう 1 つは `p` セレクター用です。色付きのハイライトは `h1` ルールを識別します。

![h1 のルールを強調](/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured/rules.png)

CSS プロパティを特定の値に設定することが、文書のレイアウトとスタイルを定義する主な方法です。CSS エンジンは、どの宣言がページの各要素に適用されるかを計算します。

CSS のプロパティと値は大文字と小文字を区別しません。それぞれの組にあるプロパティと値はコロン (`:`) で区切られます。

**以下に挙げたプロパティの様々な値を調べてみてください。それぞれの HTML 要素にスタイルを適用する CSS ルールを書いてみてください。**

* **`font-size`**
* **`width`**
* **`background-color`**
* **`color`**
* **`border`**

**警告:** プロパティが不明だった場合、または指定されたプロパティの値が妥当ではなかった場合は、宣言が*無効*なものとして扱われます。ブラウザーの CSS エンジンはこれを完全に無視します。

**警告:** CSS（および他のウェブ標準）では、言語ごとに綴りに揺れがあったり確実でない場合には、アメリカ綴りを標準とすることが合意されています。例えば、 `color` は `color` と綴るべきであり、 `colour` では動作しません。

### 関数

多くの値は比較的単純なキーワードや数値ですが、中には関数の形式をとる値もあります。

#### calc() 関数

例として、CSS 内で単純な計算を行うことができる `calc()` 関数が挙げられます。

```html
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
```

```css
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}
```

これは次のように表示されます。

関数は、関数名と、関数に渡す値を囲む括弧で構成されています。上記の `calc()` の例では、値は、このボックスの幅を含むブロックの幅の 90% から 30 ピクセルを引いた値と定義しています。計算の結果は、事前に計算して静的な値として入力できるものではありません。

#### 座標変換関数

他の例としては、 `transform` のさまざまな値、たとえば `rotate()` などがあります。

```html
<div class="box"></div>
```

```css
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}
```

上記のコードの出力は次のようになります。

**以下に挙げたプロパティのそれぞれの値を調べてみましょう。ぞれぞれの HTML 要素にスタイルを適用する CSS ルールを記述してみましょう。**

* **`transform`**
* **`background-image`、特に gradient の値**
* **`color`、特に rgb や hsl の値**
アットルール
------

CSS のアットルール は、 CSS が実行すること、またはそれがどのように動作するべきかの指示を提供します。いくつかのアットルールは、キーワードと値だけのシンプルなものです。例えば、 `@import` はスタイルシートを別の CSS スタイルシートにインポートします。

```css
@import "styles2.css";
```

よく目にするであろうアットルールが `@media` があり、メディアクエリを作成するために使用されます。メディアクエリは CSS スタイルを提供する条件を使用します。

以下の例では、スタイルシートは `<body>` 要素に既定でピンクの背景を定義しています。しかし、ブラウザーのビューポートが 30em よりも広い場合は、青い背景を定義するメディアクエリが続いています。

```css
body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}
```

これ以外のアットルールにも、これからのチュートリアルで遭遇するでしょう。

**ビューポートの幅に基づいてスタイルを変更するメディアクエリを追加できるかどうかを確認してください。ブラウザーウィンドウの幅を変更して結果を確認してみてください。**

一括指定
----

`font`, `background`, `padding`, `border`, `margin` のようなプロパティは**一括指定プロパティ** (shorthand properties) と呼ばれています。これは一括指定プロパティが複数の値を 1 行で設定するからです。

例えば、コードのこの 1 行を見てください。

```css
/\* 4 つの値による一括定義、例えば padding や margin
 では、値が適用される順序は top, right, bottom, left の順 (top から時計回り) です。
 他の種類の一括指定もあり、例えば 2 つの値による一括指定を padding/margin に設定すると、
 top/bottom と left/right になります。\*/
padding: 10px 15px 15px 5px;
```

これは以下の 4 行のコードと同等です。

```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
```

次の 1 行を見てください。

```css
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
```

以下の 5 行と同等です。

```css
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
```

コースの後半では、他にも多くの一括指定プロパティの例に遭遇します。 MDN の CSS リファレンスは、あらゆる一括指定プロパティについてのより詳しい情報を得るための良いリソースです。

**これはどのように動作するのかに慣れるために、自分自身で CSS の練習で宣言（上記）を使用してみてください。異なる値で実験してみるのもよいでしょう。**

**警告:** CSS の一括指定を使用する際に、省略した値がどのようにリセットされるかはあまり目立たない側面です。 CSS 一括指定で指定されていない値は初期値に戻ります。これは、 CSS 一括指定で省略された値は、**以前に設定された値を上書きしてしまう**可能性があることを意味します。

コメント
----

どんなコーディング作業でもそうですが、 CSS と一緒にコメントを書くのがベストプラクティスです。これは、後で修正や強化のために戻ってきたときに、コードがどのように動作するかを思い出すのに役立ちます。また、他の人がコードを理解するのにも役立ちます。

CSS のコメントは `/*` で始まり `*/` で終わります。以下の例では、コメントはコードのそれぞれの区間のの先頭をマークしています。これは、コードベースが大きくなるにつれて、コードベースを移動するのに役立ちます。このようなコメントの付け方をすると、コードエディターでコメントを検索することで、コードの区間を効率的に見つけることができます。

```css
/\* 基本的な要素のスタイル付けを扱う \*/
/\* -------------------------------------------------------------------------------------------- \*/
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  /\* 大きな画面やウィンドウで読みやすいように、グローバルフォントの大きさを
 大きくします。 \*/
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

/\* DOM で入れ子になっている特定の要素を処理します。 \*/
div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}
```

コードを「コメントアウト」すると、試験的にコードの区間を一時的に無効にするのにも便利です。以下の例では、 `.special` のルールはコードを「コメントアウト」することで無効化されています。

```css
/\*.special {
 color: red;
}\*/

p {
  color: blue;
}
```

**CSS にコメントを追加してみましょう。**

ホワイトスペース
--------

ホワイトスペースとは、半角スペース、タブ、改行を意味します。ブラウザーが HTML のホワイトスペースを無視するように、ブラウザーは CSS の中のホワイトスペースを無視します。ホワイトスペースの価値は、読みやすさを向上させるためにあります。

下の例では、それぞれの宣言 (とルールの先頭/末尾) が個別の行で行われています。これは間違いなく、CSS を書くのに良い方法です。これにより、CSS の保守や理解が容易になります。

```css
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}
```

次の例は、同等の CSS をより圧縮したものです。2 つの例は同じように動作しますが、下の例の方が読みにくいでしょう。

```css
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body { font-size: 130%;}}

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}
```

自分のプロジェクトでは、個人的な好みに応じてコードを書式化します。チームプロジェクトでは、チームやプロジェクトに独自のスタイルガイドがあるかもしれません。

**警告:** CSS 宣言ではホワイトスペースが値を区切っていますが、**プロパティ名にホワイトスペースが含まれることはありません。**

例えば、以下の宣言は正しい CSS です。

```css
margin: 0 auto;
padding-left: 10px;
```

以下の宣言は誤っています。

```css
margin: 0auto;
padding- left: 10px;
```

空白の間違いがあるのがわかりますか？まず、`0auto`は `margin` プロパティの有効な値として認識されていません。項目 `0auto` は、2 つの別個の値であることを意味しています。`0` と `auto` です。2 つ目は、ブラウザーが `padding-` を有効なプロパティとして認識していないことです。正しいプロパティ名 (`padding-left`) が、誤って空白で区切られています。

常に、別個の値を少なくとも 1 つの空白で区切るようにする必要があります。プロパティ名とプロパティ値は、1 つの切れ目のない文字列としてまとめてください。

**空白がどのように CSS を壊すのかを調べるために、テスト CSS の中で空白をいじってみてください。**

まとめ
---

この時点で、CSS がどのように構成されているのかについて、理解が深まっているはずです。また、ブラウザーがどのように HTML と CSS を使用してウェブページを表示するのかを理解しておくことも有益です。次の記事「CSS はどう働くか」で解説しています。

* 前のページ
* Overview: First steps
* 次のページ


CSS 入門 - ウェブ開発を学ぶ

CSS 入門
======

* 前のページ
* Overview: First steps
* 次のページ

この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。

| 前提条件: | 基本的なコンピューターリテラシー、ソフトウェアのインストール、ファイルの働き方についての基本的な知識、HTML の基本 (HTML 序論を学んでいること。) |
| --- | --- |
| 目的: | CSS 文書と HTML ファイルのリンクのさせかたを理解し、簡単なテキストをスタイリングできるようになる。 |

HTML からはじめよう
------------

HTML 文書から始めましょう。あなたのコンピューターのフォルダーに `index.html` として以下のコードを保存してください。

```html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSS 入門</title>
  </head>

  <body>
    <h1>見出し１です</h1>

    <p>
      これは第一段落の文です。この文には <span>span 要素</span> と<a
 href="http://example.com"
 >リンク</a
 >が含まれます。
    </p>

    <p>これは第二段落の文です。この文には <em>em 要素</em>が含まれます。</p>

    <ul>
      <li>一つ目の項目</li>
      <li>二つ目の項目</li>
      <li><em>三つ目</em>の項目</li>
    </ul>
  </body>
</html>
```

**メモ:** もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。このページにあるコードを書くためにライブコードエディターが用意されています。

CSS を加える
--------

まず必要なのは、使いたい CSS ルールを HTML 文書に適用させることです。これには一般的に３つの方法がありますが、いまは最も一般的で便利な方法— CSS を `<head>` 要素の中にリンクする方法を見てみましょう。

HTML ドキュメントとおなじフォルダーにファイルをつくり、`styles.css` として保存してください。拡張子 `.css` となっているのが CSS ファイルです。

`styles.css` を `index.html` にリンクさせるには、HTML 文書にある `<head>` 要素の中につぎのコードを追記してください:

```html
<link rel="stylesheet" href="styles.css" />
```

`<link>` 要素はブラウザーに、スタイルシートがあること、`rel` 属性を使うこと、`href` 属性の値でスタイルシートのある場所を伝えます。`styles.css` に以下のルールを記述すれば、CSS が働くかテストできます。使っているコードエディターでつぎのコードを CSS ファイルに追記してください:

```css
h1 {
  color: red;
}
```

HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。CSS の HTML への適用に成功しました！ もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。

あなたのコンピューターに保存した `styles.css` を使い続けても良いですし、このチュートリアルの下の方にあるインタラクティブエディターを使い続けることもできます。もし最初のパネルにある CSS が 上にある HTML 文書とリンクされているなら、インタラクティブエディターは動作します。

HTML 要素をスタイリングする
----------------

見出しを赤くすることで、HTML 要素に焦点をあてたスタイリングを試しました。**要素セレクタ**（HTML の要素名を直接あてはめるセレクタ）に焦点をあてたのです。文書内のすべての段落に焦点をあてるなら、セレクタとして `p` を使うことができます。すべての段落を緑色にするために次を使います:

```css
p {
  color: green;
}
```

セレクタをカンマで区切ることによって、同時に複数のセレクタへ焦点をあてることができます。もしすべての段落とリストすべてを緑にしたければ、CSS のルールセットは次のようになります:

```css
p,
li {
  color: green;
}
```

下にあるインタラクティブエディターのコードボックスを編集するか、コンピューターに保存された CSS ファイルを編集してこのルールセットを試してみてください。

要素の基本的なふるまいを変える
---------------

よくマークアップされた HTML 文書をみると、かんたんな例でさえ、基本的なスタイリングを加えることでブラウザーが HTML を読みやすくしているかがわかります。見出しは大きく太線になっているし、リストは箇条書きになっています。これはブラウザーがすべてのページにデフォルトで適用されるスタイルシートを含んでいるために起きます。それらがなければ、すべてのテキストがまとまって一緒に実行され、すべてを一からスタイリングしなければなりません。最新のブラウザーはすべて、ほぼ同じ方法をもちいて、デフォルトで HTML コンテンツを表示します。

ブラウザーが選んだのとは別のスタイリングにしたい事もあるでしょう。これには単純に変更したい HTML 要素をえらび、CSS ルールを変更したい外観に変えるだけで可能です。よい例が `<ul>` 要素、つまり順番なしリストです。箇条書きの点がついていますが、もしこれが要らないと思ったら次のようにして削除することができます:

```css
li {
  list-style-type: none;
}
```

これをあなたの CSS に加えて試してみてください。

`list-style-type` プロパティはどんな値がサポートされているか MDN 上で調べるのに適したプロパティです。`list-style-type` のページをみるとページの上部に違うプロパティ値を試せる対話型の例があります。そしてページの下部には使えるプロパティ値が詳細に説明されています。

このページをみると、どのようなものに変えられるか見つけられます。プロパティ値 `square` に変えてみてください。

クラスを加える
-------

これまで、HTML 要素名をもとにしたスタイリングをしてきました。これは、文書内にあるその要素すべてをおなじ見ばえにしたいときには有効です。しかしそんな場合はほとんどないので、ほかを変えずに一部の要素だけを選ぶ方法を知っておく必要があります。もっとも一般的なのが、HTML 要素にクラスを追加し、それに焦点をあてる方法です。

HTML 文書の 2 番目のリストアイテムへ、こんな風に class 属性を加えてください:

```html
<ul>
  <li>Item one</li>
  <li class="special">二つ目の項目</li>
  <li><em>三つ目</em>の項目</li>
</ul>
```

ピリオドから始まるセレクタを作ることで、`special` クラス に焦点を当てることができます。以下を CSS に加えてください:

```css
.special {
  color: orange;
  font-weight: bold;
}
```

保存してからブラウザーを更新し結果を見てみましょう。

ページ上でおなじ見た目にしたいリストアイテムに対して `special` クラスを適用できます。たとえば、段落内にある`<span>` 要素にも同じく、オレンジの太字にしたいかもしれません。これにも `class` 属性の値として `special` を加えてみてください。上書き保存後にページを再読み込みして結果を確認してみましょう。

HTML 要素セレクタに続けてクラスセレクタが記述されているのを時々見るかもしれません:

```css
li.special {
  color: orange;
  font-weight: bold;
}
```

この構文は、「`special` クラスをもっている `li` 要素へ焦点をあてろ」という意味です。もしそうなっていたらもう、`<span>` 要素やほかに `special` クラスにした要素には適用できません。セレクタのリストに次を付け加える必要があります:

```css
li.special,
span.special {
  color: orange;
  font-weight: bold;
}
```

いくつかのクラスがたくさんの要素に適用され、スタイリングが必要になる度に CSS を編集し続けることを望まないかもしれません。したがって、ある要素だけに特別なルールを作成し、他の要素に適用されないようにする場合を除き、要素をバイパスしてクラスを参照することが最善の場合があります。

文書内の場所に基づいてスタイリングする
-------------------

文書のどこにあるかで見栄えを変えたい時があります。それを助けるセレクタはいくつかありますが、いまは 2 種類だけ見てみましょう。HTML 文書には 2 つの `<em>` 要素があります — ひとつは段落の中に、もうひとつはリストアイテムの中に、です。`<li>` 要素の中にある `<em>` だけを選びたいとき、**ディセンダント・コンビネーター** と呼ばれるセレクタを使うことができます。これは２つの異なるセレクタのあいだにスペースを設けることで設置できます。

CSS につぎのルールセットを追加してください。

```css
li em {
  color: rebeccapurple;
}
```

このセレクタは `<li>` 要素の中にある `<em>` 要素を選択します。よって HTML 文書の中で、3 番目のリストアイテム内にある `<em>` 要素はパープルに変わっていますが、段落内にある `<em>` 要素は変更されていません。

HTML ドキュメント内で、見出しの直後に来る段落を見出しとおなじ階層レベルにしたいと思うことがあるかもしれません。このときはセレクタ同士の間に `+` を入れます（**adjacent sibling combinator**：アジェイセント・シブリング・コンビネーター）。

いま扱っている CSS につぎのルールセットを追加してみてください:

```css
h1 + p {
  font-size: 200%;
}
```

下のライブ例では、上に挙げた２つのルールセットが含まれています。ここに、段落内にある `span` 要素を赤くするルールセットを追加してください。正しくできれば第一段落の `span` 要素は赤くなり、最初のリストアイテムは色が変わらないはずです。

**メモ:** ごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。ここに挙げたのと、もっとたくさんのセレクタをこのコースの後にあるセレクタの記事で見ていきます。

状態に基づいてスタイリングする
---------------

最後にこのチュートリアルで取り上げるのは、状態に基づいてスタイルを設定する方法です。かんたんな例はリンクのスタイリングです。リンクをスタイリングするとき、`<a>` (anchor) 要素に焦点をあてる必要があります。リンクされたページを開いていなかったり、開いた後だったり、マウスの矢印を置いたり（ホバー）、キーボードで選択したり、クリックしたりといったように状態が変わります。こうしたさまざまな状態を CSS で選ぶことができます。— 以下だと、リンクされたページを開く前はピンクに、開いた後は緑になります。

```css
a:link {
  color: pink;
}

a:visited {
  color: green;
}
```

ユーザーがリンクの上にマウスの矢印を持っていく（ホバー）とリンクの見た目を変えるようにできます。たとえばつぎのルールセットだと、リンクの下線が消えます:

```css
a:hover {
  text-decoration: none;
}
```

下のライブ例では、プロパティ値をいろいろ変えることでさまざまなリンクの状態を試せます。すでに加えられているルールセットをみると、ピンクがとても明るくて読みづらいことがわかります。もっといい色に変えてみましょう。太字に変えられますか？

リンクをホバーすると下線が消えるようにしていますが、どんな状態でも下線が消えているようにできます。ただし実際のサイトでは、ページを見ている人に、リンクはリンクであることを知らせるのを忘れないようにしてください。下線を残すのは、ユーザーが慣れているように、テキスト内にリンクがあることを伝える重要な手掛かりになります。CSS にふくまれるあらゆるものには、変更によって文章を使いづらくするおそれがあることを強調しておきます。

**メモ:** MDN の記事で、アクセシビリティ についての注意をたびたび目にするでしょう。これについて語る時は、ウェブページがどんな人にも理解でき、使えるものである必要性に言及しています。

訪問者はマウス付きコンピューター やタッチスクリーン付き電話で見ているかもしれません。あるいはスクリーンリーダーで文章を読んでいることや、大きな文字をつかう必要があることや、キーボードだけを使っていることもあるでしょう。

プレーンな HTML ドキュメントは一般的にあらゆる人に対してアクセシブルですので、スタイリングするときはアクセシビリティを下げないようにするのが大切です。

セレクタとコンビネーターを組み合わせる
-------------------

複数のセレクタとコンビネーターを組み合わせることができます:

```css
/\* <article> 要素の内側にある <p> 要素の <span> 要素に焦点を当てるとき \*/
article p span { ... }

/\* <h1> 要素の直後に来る <ul> 要素の、そのまた直後に来る <p> 要素に焦点を当てるとき \*/
h1 + ul + p { ... }
```

複数の形のセレクタも組み合わせられます。以下のコードを CSS に追加してみてください:

```css
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}
```

これは `<body>` 要素の中にある `<h1>` 要素の直後に来た `<p>` 要素の中にある `special` クラスの要素をスタイリングします。

HTML のうち、スタイルが適用されるのは `<span class="special">` のみです。

現時点では複雑に思えても心配しなくて大丈夫です。CSS を書いていくうちにすぐに理解できるようになります。

まとめ
---

このチュートリアルでは、CSS によるドキュメントのスタイル設定の仕方をいくつか見てきました。残りのレッスンでさらに深堀りしていきます。あたなはもうすでに、テキストのスタイリングや要素のさまざまな指定の仕方、さらには MDN ドキュメント内でのプロパティと値の調べ方といったことも理解したはずです。

次のレッスンでは、CSS の構造を見ていきます。

* 前のページ
* Overview: First steps
* 次のページ


CSS はどう働くか？ - ウェブ開発を学ぶ

CSS はどう働くか？
===========

* 前のページ
* Overview: First steps
* 次のページ

CSS の基本と目的、簡単なスタイルシートの書き方を学んできました。このレッスンでは、ブラウザーが CSS と HTML を実際にウェブページとして表示していくさまを見ていきます。

|  |  |
| --- | --- |
| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、基本的なファイルの操作方法に関する知識、 HTML の基本（HTML 概論を学習のこと）。 |
| 目的: | ブラウザーが CSS と HTML を解析する方法、およびブラウザーが解釈できない CSS に遭遇したときに何が起こるかを理解する。 |

CSS は実際にはどう機能するのか？
------------------

ブラウザーがドキュメントを表示するとき、ブラウザーはそのコンテンツをスタイル情報と結合する必要があります。以下にリストしたいくつかの段階でドキュメントが処理されます。これはブラウザーがウェブページを読み込むときに起こることを単純化したものであり、各ブラウザーで処理は異なるものの、おおよそ何が起こるかを示しています。

1. ブラウザーが HTML をロードします（ネットワークから受信するなど）。
2. HTML が DOM (*Document Object Model*) に変換されます。DOM はコンピューターのメモリー内のドキュメントです。次のセクションで詳述します。
3. その後ブラウザーは埋め込まれた画像やビデオなどの HTML ドキュメントにリンクされているリソースと CSS を取得します。JavaScript はもう少し後に処理されるため、ここでは簡略化のため説明しません。
4. ブラウザーは取得した CSS を解析し、要素、クラス、ID などセレクタの種類ごとに分類します。見つけたセレクターに基づいて、DOM のどのノードにどのルールを適用するかを決定し、スタイルを適用します（この中間ステップはレンダーツリーと呼ばれます）。
5. レンダーツリーは、ルール適用後の構造にレイアウトされます。
6. ページが画面に表示されます（この段階はペイントと呼ばれます）。

簡単に図に表すと次のとおりです。

![](/ja/docs/Learn/CSS/First_steps/How_CSS_works/rendering.svg)

DOM について
--------

DOM にはツリーのような構造があります。マークアップの各要素、属性、およびテキストは、ツリー構造の DOM ノード になります。ノードは他の DOM ノードとの関係によって定義されます。要素は子ノードの親であり、子ノードには兄弟があります。

DOM は CSS とドキュメントのコンテンツが出会う場所であるため、DOM を理解すると CSS の設計、デバッグ、および保守に役立ちます。ブラウザーの開発者ツールによって、どのルールが適用されるかを確認するために、アイテムを選択することで DOM にナビゲートされます。

DOM の実際
-------

長く退屈な説明ではなく、例を用いて実際の HTML が DOM に変換される様子を見てみましょう。

以下のような HTML があります。

```html
<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
```

この場合 DOM では `<p>` 要素が親ノードです。子には、テキストノードと 3 つの `<span>` 要素をノードとして持ちます。一方で `SPAN` ノードは親でもあり、テキストノードを子に持ちます。
```

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"
```

ブラウザーは上述の HTML をこのように解釈し、DOM ツリーを以下のようにレンダリングし出力します。
```

p {
  margin: 0;
}
```

DOM への CSS 適用
-------------

ドキュメントに CSS を追加して、スタイルを設定したとします。先ほどと同じ以下の HTML を使います。

```html
<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
```

CSS は以下のものを適用します。

```css
span {
  border: 1px solid black;
  background-color: lime;
}
```

 ブラウザーは HTML 解析によって DOM を作成したのちに、CSS を解析します。CSS には唯一 `span` セレクターしかないため、ブラウザーは CSS を非常に迅速にソートできます。
 3 つ の `<span>` にそのルールを適用し、最終的な視覚的表現を画面にペイントします。

結果、次のとおり出力されます。

次のモジュールの CSS のデバッグ ではブラウザーの開発者ツールを使用した CSS のデバッグと、ブラウザーが CSS を解釈する方法について詳しく学習します。

ブラウザーが解釈できない CSS に遭遇したらどうなるのか？
------------------------------

以前のレッスンでは、ブラウザーがすべての新しい CSS を実装するわけではないことを述べました。また多くの人が最新バージョンのブラウザーを使用しているわけでもありません。CSS は常に開発されており、ブラウザーがまだ認識できないような CSS セレクターや宣言に遭遇するとどうなるか疑問に思われるかもしれません。

その答えは何もせず、CSS の次の部分に移動するということです。

ブラウザーがルールを解析しているときに、理解できないプロパティまたは値に遭遇した場合、ブラウザーはそれを無視して次の宣言に進みます。こういうことは、プロパティまたは値のスペルが間違っている場合や、プロパティまたは値が新しすぎてブラウザーがまだサポートしていない場合に起こりえます。

同様に、ブラウザーが理解できないセレクターを検出した場合もそのルール全体を無視し、次のルールに進みます。

次の例では、色にイギリス英語のスペルを使用しているため、プロパティが正しくありません（訳注: color を誤って colour としてしまっている）。よって段落は青くなっていません。ただし、他の CSS はすべて適用されています。無効な行のみが無視されます。

```html
<p>I want this text to be large, bold and blue.</p>
```

```css
p {
  font-weight: bold;
  colour: blue; /\* colorプロパティのスペルが正しくありません \*/
  font-size: 200%;
}
```

この動作は非常に有用です。ブラウザーが新しい CSS を理解しないとしてもエラーは発生しないということを理解した上で、新しい CSS を拡張機能として使用できるということを意味します。ブラウザーは新しい機能を取得するかしないかのどちらかになります。カスケードが機能する方法と、同じ特定性を持つ 2 つのルールがある場合、ブラウザーはスタイルシートの中で出会った最後の CSS を使うという事実と相まって、新しい CSS をサポートしていないブラウザーにも代替案を提供することができます。

とりわけ新しいゆえに必ずしもサポートされているというわけではない、という値を使用する場合に有用です。例えば、一部の古いブラウザーは `calc()` をサポートしていません。ボックスに対して予防的にピクセル単位の幅を指定しておき、その後 `calc()` で `100% - 50px` の幅を指定した場合、古いブラウザーは前者（ピクセル指定）を使用し、理解できない `calc()` を無視します。かたや新しいブラウザーはピクセル指定を理解はできるものの、あとに記述された `calc()` の方を採用します。

```css
.box {
  width: 500px;
  width: calc(100% - 50px);
}
```

以降のレッスンで、さまざまなブラウザーをサポートするための多くの方法を検討していきます。

最後に
---

このモジュールはほぼ完了です。ただしもうひとつだけやっておいてほしいことがあります。次の記事の新しい知識を使うにて実際のスタイリングをとおして CSS の腕試しをおこないます。

* 前のページ
* Overview: First steps
* 次のページ