カード - CSS: カスケーディングスタイルシート

カード
===

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
このパターンは、オプションでフッターが付く「カード」部品のリストです。

![1 行に 3 つのカード部品](/ja/docs/Web/CSS/Layout_cookbook/Card/cards.png)

要件
--

カード部品には、見出し、画像、コンテンツ、フッターなど、さまざまなコンテンツを含めることができます。

各カードは同じ高さでなければならず、フッターはカードの一番下に固定する必要があります。

カードのコレクションに追加すると、カードを 2 次元に並べる必要があります。

レシピ
---

この例をダウンロード

行った選択
-----

このカードは、 1 次元レイアウトであるにもかかわらず CSS グリッドレイアウトを使用してレイアウトされています。 これは、グリッドトラックに対してコンテンツのサイズ変更の使用が可能になるためです。 単一列グリッドを設定するときは、次のようにします。

```css
.card {
  display: grid;
  grid-template-rows: max-content 200px 1fr;
}
```

見出しトラックは `max-content` に設定されているため、伸縮は行われません。 画像は 200 ピクセルの高さのトラック内に収めることにしました。 それから、その次のトラック（コンテンツが存在する場所）を `1fr` に設定します。 これは、残りの空間を占有することを意味します。

暗黙的にグリッドに作成された行は、既定で自動的にサイズ変更されるため、トラックにフッターがある場合は自動的にサイズ変更されます。 したがって、これは追加されたコンテンツに合わせられます。

**メモ:** 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 Grid Level 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。

有用な代替策またはその他の方法
---------------

フレックスボックスを使ってカードをレイアウトすることもできます。その場合は、コンテンツ領域を大きくし、他のアイテムは大きくしないようにする必要があります。これは合理的なカードのレイアウト方法ですが、私は、アイテムにルールを追加するよりも、コンテナーからトラックを制御できる方がやや好きです。

全体的なレイアウトのためにフレックスボックスを使うことができますが、この場合は最終的なフレックス業の上でカードが伸縮するでしょう。あるいは、CSS 段組みを使用することもできます。これにより、カードが段の上にレイアウトされることになりますが、これは問題になる場合もあれば、そうでない場合もあります。

これらの各レイアウト方法のデモについては、欄のレシピを参照してください。

アクセシビリティの考慮
-----------

カードの内容によっては、アクセシビリティを高めるためにできること、あるいはすべきことがあるかもしれません。 これらの問題のとても詳細な説明については、 Heydon Pickering による包括的な部品: カード（英語）を参照してください。

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

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

#### grid-template-columns

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### grid-template-rows

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `grid-template-columns`, `grid-template-rows`, `gap`
* 包括的な部品: カード（英語）


バッジ付きリストグループ - CSS: カスケーディングスタイルシート

バッジ付きリストグループ
============

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

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

* Learn more
* See full compatibility
* Report feedback
このレシピでは、カウントを示すバッジ付きのリストグループのパターンを作成します。

![テキストの右側に表示されるカウントを示すバッジ付きの項目のリスト。](/ja/docs/Web/CSS/Layout_cookbook/List_group_with_badges/list-group-badges.png)

要件
--

項目のコンテンツ量に関係なく、リスト項目の右側にバッジを並べて表示する必要があります。 1　行のコンテンツでも、複数行のコンテンツでも、バッジは常に垂直方向の中央に配置する必要があります。

レシピ
---

この例をダウンロード

行った選択
-----

フレックスボックスは、この特定のパターンを簡単にし、またレイアウトの変更を容易にします。

テキストとバッジが正しく並ぶようにするために、`justify-content` プロパティに `space-between` の値を使用します。 これにより、項目間に余分な空白が入ります。 実際の例では、このプロパティを削除すると、テキストが 1 行より短い項目のバッジがテキストの末尾に移動します。

コンテンツを垂直方向に揃えるには、`align-items` プロパティを使用してテキストとバッジを交差軸上で揃えます。 代わりに、バッジをコンテンツの上部に揃える場合は、これを `align-items: flex-start` に変更します。

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

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

#### justify-content

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### align-items

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* フレックスボックスでのボックス配置
* フレックスコンテナー内のアイテムの配置


張りつくフッター - CSS: カスケーディングスタイルシート

張りつくフッター
========

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
張りつくフッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「張りつく」パターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。

![ボックスの底に押し込まれた張りつくフッター](/ja/docs/Web/CSS/Layout_cookbook/Sticky_footers/cookbook-footer.png)

要件
--

張りつくフッターのパターンは、次の要件を満たす必要があります。

* コンテンツが短い場合、フッターはビューポートの下部に張りつきます。
* ページのコンテンツがビューポートの下部を超えて広がっている場合、フッターは通常どおりコンテンツの下に配置されます。
レシピ
---

この例をダウンロード

**メモ:** この例と以下の例では、ライブ例がうまくいくように、 wrapper に `min-height: 100%` に設定して使用しています。 また、`<body>` の `min-height` を `100vh` に設定し、それをグリッドコンテナーとして使用することで、ページ全体でこれを実現することもできます。

行った選択
-----

上記の例では、CSS グリッドレイアウトを使用して張りつくフッターを実現しています。 `.wrapper` の最小の高さは `100%` です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。

グリッドの自動配置では、アイテムがソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは `1fr` トラックに、フッターは最後の自動サイズ調整トラックに入ります。`1fr` トラックは使用可能な空間をすべて占有するため、隙間を埋めるように大きくなります。

代替策
---

グリッドレイアウトに対応していないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して張りつくフッターを作成することもできます。

フレックスボックスの例は同じように始まりますが、`.wrapper` では `display: grid` ではなく `display: flex` を使用し、`flex-direction` を `column` に設定します。次に、メインコンテンツを `flex-grow: 1` に設定し、他の 2 つの要素を `flex-shrink: 0` に設定します。これにより、コンテンツがメイン領域いっぱいになったときに、それらが縮小されるのを防ぎます。

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

#### grid-template-rows

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### flex-direction

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### flex-grow

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### flex-shrink

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

MDN の関連資料
---------

* グリッドレイアウトの基本概念


ページ付け - CSS: カスケーディングスタイルシート

ページ付け
=====

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

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

* Learn more
* See full compatibility
* Report feedback
この料理帳のパターンは、ページ付け（pagination）を表示するために使用されるナビゲーションのパターンを示し、ユーザーは検索結果などのコンテンツのページ間を移動できます。

![ページ付きリスト内のページのセットへのリンク](/ja/docs/Web/CSS/Layout_cookbook/Pagination/pagination.png)

要件
--

スクリーンリーダーを使用している人がページ付けであることを理解できるようにするために、項目を `<nav>` 要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に 1 行で表示します。

通常、ページ付けのコンポーネントはコンテンツの下側にあり、水平方向の中央に配置されます。

レシピ
---

この例をダウンロード

行った選択
-----

このパターンは、フレックスボックスを使用してレイアウトされています — 一方のフレックスコンテナーは別のフレックスコンテナーの中にネストされています。 `<nav>` 要素は、`justify-content` プロパティを使用してリストを中央に配置できるように、フレックスコンテナーとして指定されています。

リスト自体も、項目を行としてレイアウトするためのフレックスコンテナーになります。 項目を配置するために、フレックスアイテムには `margin` を使用します。

代替策
---

`column-gap` プロパティがブラウザーに実装されると、項目の間隔を空けるためにマージンの代わりにこれを使用できます。

```css
.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  column-gap: 2px;
}
```

アクセシビリティの考慮
-----------

スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。 これを手助けするために、 `aria-label="pagination"` (en-US) を `<nav>` 要素に追加しました。

スクリーンリーダーによって読み取られるが視覚的に隠されている追加のコンテンツを追加し、ページング矢印に `aria-hidden` (en-US) 属性を設定しました。

このドキュメントの最後にある「関連情報」の節には、関連するアクセシビリティのトピックへのリンクがあります。

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

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

*align-items を含む以下の例のように、使用したキー・プロパティのコンパチデータを含めます。*

#### justify-content

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### フレックスレイアウトにおける column-gap

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `justify-content`、`column-gap`
* ARIA を知る: 'Hidden' 対 'None'（英語）
* スクリーンリーダーのユーザーには見えないコンテンツ（英語）
* アクセシビリティを意識した CSS の書き方（英語）（日本語訳）
* アクセシビリティ（a11y）スタイルガイド: ページ付け（英語）


欄レイアウト - CSS: カスケーディングスタイルシート

欄レイアウト
======

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

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

* Learn more
* See full compatibility
* Report feedback
いくつかの欄を含むレイアウトを作成する必要があることがよくあります。 CSS にはこれを行うためのいくつかの方法があります。 グリッド、フレックスボックス、段組みのレイアウトのどれを使用するかは、達成しようとしている内容によって異なります。 このレシピでは、これらの選択肢について説明します。

![コンテナー内に 2 つの欄を持つ 3 種類のレイアウトスタイル。](/ja/docs/Web/CSS/Layout_cookbook/Column_layouts/cookbook-multiple-columns.png)

要件
--

欄 (columns) で達成したいと思うかもしれないデザインパターンがいくつかあります。

* 新聞のような段に分割されたコンテンツの連続したスレッド。
* すべての高さが等しい、欄（列）として配置された一並びの項目。
* 行と列で並べられた複数行の列。
レシピ
---

要件を満たすためには、さまざまなレイアウト方法を選択する必要があります。

### コンテンツの連続したスレッド — 段組みレイアウト

段組みレイアウト (multi-column layout, multicol) を使用して段を作成した場合、テキストは連続した流れのまま、それぞれの段を順番に埋めます。 段はすべて同じサイズである必要があり、個々の段または個々の段のコンテンツをターゲットにすることはできません。

`column-gap` プロパティを使用して段間の幅を制御したり、`column-rule` を使用して段間に線を追加したりすることができます。

この例をダウンロード

次のような場合には、段組みを使用してください。

* テキストを新聞のような段に表示したい。
* 段に分割したい一連の小さな項目がある。
* 個々の段ボックスを装飾のターゲットにする必要がない。
### 同じ高さの単一行の項目 — フレックスボックス

フレックスボックス (flexbox) は、`flex-direction` を `row` に設定することでコンテンツを列に分割するために使用できますが、フレックスボックスはフレックスコンテナー内の要素を対象として、それぞれの直接の子を新しい列に配置します。 これは段組みとは動作が異なります。

フレックスアイテム間に段間線を追加する方法は今のところありません。 また、`column-gap` および `row-gap` プロパティはブラウザーの対応が限られています。したがって、アイテム間に空間を作成するには、マージンを使用します。

この例をダウンロード

コンテナーの `flex-wrap` プロパティを `wrap` に設定すると、フレックスボックスを使用して、フレックスアイテムが新しい行に折り返されるレイアウトを作成することもできます。新しい行は行内のみで空間を配分します。 — 以下の例に示すように、新しい行の項目は上の行の項目と整列しません。これがフレックスボックスが一次元と呼ばれている理由です。 これは、行または列としてレイアウトを制御するために設計されていますが、両方を同時に制御するようには設計されていません。

この例をダウンロード

次のような場合には、フレックスボックスを使用してください。

* 1 行または 1 列のアイテム。
* アイテムをレイアウトした後に交差軸 (cross axis) 方向に配置を行いたい場合。
* 折り返された行のアイテムが、その行内のみで空間を共有し、他の行のアイテムとは並ばなくてもよい場合。
### 項目を行と列に並べる — グリッドレイアウト

欲しいものが項目が行と列に並ぶレイアウトであるならば、CSS グリッドレイアウトを選ぶべきです。 グリッドレイアウトは、フレックスボックスがフレックスコンテナの直接の子に作用するのと同様の方法で、グリッドコンテナの直接の子に作用しますが、CSS グリッドでは、項目を行と列に並べることができます — これは2次元として記述されています。

この例をダウンロード

次のような場合には、グリッドを使用してください。

* 複数行または複数列のアイテムのため。
* ブロック軸とインライン軸のアイテムを揃えることができるようにする場合。
* アイテムを行と列に整列させたい場合。
ブラウザーの互換性
---------

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

#### column-width

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### column-rule

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### flex-wrap

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### grid-template-columns

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

MDN の関連資料
---------

* 段組みレイアウトのガイド
* フレックスボックスのガイド
* CSS グリッドレイアウトのガイド


グリッドラッパー - CSS: カスケーディングスタイルシート

グリッドラッパー
========

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
このパターンは、中央のラッパー内でグリッドのコンテンツを整列させるのに便利ですが、必要に応じて項目を脱出させて親要素やページの端に整列させることもできます。

要件
--

グリッド上に配置された項目は、水平方向の中央に配置された最大幅のラッパーやグリッドの外側の端に揃えることができます。

レシピ
---

この例をダウンロードする

行った選択
-----

このレシピでは、CSS グリッドの `minmax()` 関数を使用して、`grid-template-columns` プロパティでグリッドトラックのサイズを定義しています。 最大幅を持つ中央の（グリッドレイアウトに使う 6 つの）列には、0 以上の最小値と、列トラックが大きくなれる最大サイズを指定する最大値を設定できます。 数値の単位（ピクセル、em、rem）を使用すると、中央のラッパーの固定最大サイズが作成されますが、パーセント値またはビューポート単位を使用すると、このラッパーはそのコンテキストに応じて拡大または縮小します。

外側の2つの列の最大サイズは `1fr` です。 つまり、グリッドコンテナー内の残りの使用可能スペースを埋めるようにそれぞれが拡大されます。

有用な代替策または代替方法
-------------

このレシピをページレベルで使用するときは、コンテンツを水平方向に中央揃えするために、次のように左右の `auto` の `margin` とともに `max-width` を設定すると便利です。

```css
.grid {
  max-width: 1200px;
  margin: 0 auto; // コンテナーを水平方向に中央揃え
}

/\* ブラウザーがグリッドに対応している場合は、max-width と margin を取り除く \*/
@supports (display: grid) {
  .grid {
    display: grid;
    /\* 他のグリッドのコードはここへ \*/
    max-width: none;
    margin: 0;
  }
}
```

`full-width` 項目をビューポートの端まで「脱出」させるには、次のトリックを使用できます（Una Kravets の好意による）。

```css
.item {
  width: 100vw;
  margin-left: 50%;
  transform: translate3d(-50%, 0, 0);
}
```

これは、正確なグリッド上で項目を簡単に整列させることができるという利点が必要ない場合に限り、レイアウトの適切な近似値を提供します。

アクセシビリティの考慮
-----------

グリッドを使用すると（理由の範囲内で）項目を適切な場所に配置できますが、CSS グリッドを使用して項目を配置する場合は、基になるマークアップが論理的な順序に従うことが重要です（詳細については、CSS グリッドのレイアウトとアクセシビリティを参照）。

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

#### grid-template-columns

関連情報
----

* `grid-template-columns`
* MDN の CSS グリッドレイアウト
* 記事: CSS グリッド: minmax() によるさらなる柔軟性（英語）
* 記事: CSS グリッドを使った脱出（英語）


レシピを投稿する - CSS: カスケーディングスタイルシート

レシピを投稿する
========

レイアウト料理帳の例を提供したい場合、このページでは、例を公開するための手順について説明します。

何が良いレシピになるのか
------------

**あらゆる便利なウェブデザインのパターンの最も単純なバージョンです**。 含まれている CSS の各行は、パターンを示すのを助けるためにそこにあるべきですので、例をきれいに見せるためだけのものは省略してください。アイデアは、誰かがパターンを手に取り、自分のスタイルでサイトでそれを使用できるということです。

レシピを公開する手順
----------

レシピは以下で構成されています。

1. ライブサンプル（live example）は、CSS Examples GitHub リポジトリーに保存します。
2. その例のダウンロード可能なバージョンも、CSS Examples リポジトリーに保存します。
3. CSS レイアウト料理帳内のページの詳細は次のとおりです。
    1. 要件 (Requirements)
    2. レシピ (Recipe)
    3. 行った選択 (Choices made)
    4. 有用な代替策または代替方法 (Useful fallbacks or alternative methods)
    5. アクセシビリティの考慮 (Accessibility concerns)
    6. ブラウザーの互換性 (Browser compatibility)
    7. 関連資料 (Additional resources)
### 1. パターンの作成

例をレシピに変える前に、まずパターンを単純な HTML ページとして作成します。 何を示そうとしているのかを考え、できるだけ単純にします。 BEM のような特殊な CSS 規約の使用は避けてください。誰もが知っているわけではありませんし、必要以上に複雑に見える可能性があります。

HTML と CSS が有効であることを確認し、複数のブラウザーでテストしてください。すべてが対応しているわけではない CSS プロパティを使用していても、それは問題ありません。ページを作成するときにブラウザーの対応情報を含めることができます。 場合によっては、代替の対応を含む、例の 2 番目のバージョンを作成すると便利な場合があります。

### 2. ライブサンプルの作成

料理帳のページや MDN の他の場所で見ることができるライブサンプルは、訪問者が必要なすべてのコードに圧倒されることなく、コードで遊び、関連する部分を変更することを可能にします。レシピは 1 つ以上の例として示します。

CSS Examples リポジトリーをフォークして（右上の Fork ボタンを押すと自分のアカウントにコピーが作られます）、`css-cookbook` フォルダーを調べてください。 出発点としてコピーできる cookbook-template.html ファイルがあります。 これを `css-cookbook` ディレクトリーにパターンにとって意味のある名前で保存してください。 テンプレート (template) は、さまざまなパーツを適切な場所に追加するのに役立つようにコメントされています。

このための重要な部分は次のとおりです。

エディターパネルのスタイル用のスタイルシート、基本的な body のスタイル、およびエディター機能用の JavaScript ファイルがあります。 これらのファイルはそのままにしておきます。

head の中には 2 つのスタイルのブロックがあります。 1 つ目は、ページの訪問者がこの例で遊ぶために変更する必要がないものです。 2 つ目は、ライブサンプルで遊びたい項目のどれかです。 通常、 1 つ目のブロックにライブサンプルの CSS をすべて追加してから、 2 番目のブロックに移動する必要があるルールのセットを選択します。 2 番目のブロックのルールは、パターンの基本となるルール、おそらくユーザーが CSS の値を変更してパターンの更新を確認できるようなルールにする必要があります。

コンポーネント用の HTML を 2 回追加する必要があります。 最初に `preview` クラスの `section` の中に、次に `playable-html` クラスの `textarea` の中にです。

head の中の 2 番目のブロックからの `editable` クラスの CSS も、`playable-css` クラスの `textarea` にコピーする必要があります。

単純な例は center.html で、これは要素を中央に配置のページに埋め込まれています。これを使用して、さまざまな細部を正しく追加する方法を確認できます。

リポジトリーをフォークした場合、私たちの CSS と JavaScript ファイルを例と一緒に持っているのであれば、ブラウザーでライブサンプルを開くと、ページに含まれている時と全く同じように動くのが分かるでしょう。

#### 役に立つヒント

1. `textarea` 内で CSS と HTML をインデントしないでください。代わりに行の先頭にぶつけてください。 レンダリングすると見栄えがよくなります。
2. 必要な画像がある場合は、例と共にディレクトリーに入れます。または、すでにそこにあるものを使用することを歓迎します。
3. インラインスタイルで高さを変更して、`textarea` の高さを調整できます。
### 3. ダウンロード版の作成

ライブサンプルにはすべてのライブサンプルコードが含まれているので、そのすべてを含まない簡単な例を訪問者に提供したいと思います。 ライブサンプルを --download を付けてコピーしてください。 例えば、`center.html` には `center--download.html` という名前のダウンロードバージョンがあります。 このファイルはあなたの最初の例と似ています。 これは単一の HTML ページとしてのパターンの基本バージョンです。 含まれたスタイルシートにある body の CSS ルールを含めると便利かもしれません。 cookbook-template--download.html を見てみると、これらが出発点として含まれています。

### 4. 例をプルリクエストをする

CSS Examples リポジトリーでプルリクエスト (Pull Request, PR) を作成してください。 このようにして、ページを作成する前に必要になる可能性のある例の変更を手助けすることができます。 さらに、この例は実際のものである必要があり、最初に作成するのが理にかなっています。 プルリクエストにパターンの説明とあなたが何を示しているかを含めてください。

### 5. ページを作成する

例がマージされたら、ページを作成することができます。 そのためにはページ作成権限付き MDN アカウントが必要です。その後、そのページを CSS 料理帳のページのサブページとして作成できます。ここに料理帳のページ用のテンプレートがあります。

テンプレートは各セクションの一部になるべきものを説明し、より多くの助けを得るために他の料理帳の例を参照することができます。 これらのページのいずれかの編集ボタンをクリックすると、互換性データを埋め込むために使用されるマクロやライブサンプルなどが表示されます。

MDN Wiki の使用に関する一般的なガイダンスが必要な場合は、こちらのヘルプページを参照してください。

質問をする必要がある場合、または誰かにあなたのページを見てもらいたい場合は、Discourse の MDN フォーラムを利用するか、Matrix でチャットしてください。

関連情報
----

* 料理帳ページのテンプレート
* CSS Examples リポジトリー


レシピ: メディアオブジェクト - CSS: カスケーディングスタイルシート

レシピ: メディアオブジェクト
===============

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
*メディアオブジェクト*は、ウェブ上のいたるところで見られるパターンです。 Nicole Sullivan によって命名され、一方の側に画像を、そして他方の側に説明的なテキストを有する Facebook の投稿やツイートのような 2 列のボックスを指します。

![](/ja/docs/Web/CSS/Layout_cookbook/Media_objects/media-object.png)

要件
--

メディアオブジェクトのパターンには、次の特性の一部または全部が必要です。

* モバイルでは積み重ね、デスクトップでは 2 列です。
* 画像は左右どちらでもかまいません。
* 画像は小さい場合も大きい場合もあります。
* メディアオブジェクトはネストできます。
* メディアオブジェクトは、どちら側が高いかに関係なく、コンテンツをクリアする（区切る）必要があります。
レシピ
---

この例をダウンロードする

行った選択
-----

必要に応じて 2 次元でレイアウトを制御できるようにするため、メディアオブジェクトにグリッドレイアウトを使用することを選択しました。 つまり、フッターがあり、その上に短いコンテンツがある場合、そのフッターはそのメディアオブジェクトの下部にまで押し下げられます。

グリッドレイアウトを使用するもう 1 つの理由は、画像のトラックのサイズ変更に `fit-content` を使用できるようにするためです。 最大サイズが 200 ピクセルの `fit-content` を使用すると、アイコンのような小さい画像がある場合、トラックはその画像のサイズ、つまり `max-content` のサイズと同じサイズになります。 画像が大きい場合、トラックは 200 ピクセルで拡大しなくなり、画像には 100% の `max-width` が適用されるため、列の内側に収まるように縮小されます。

レイアウトを実現するために `grid-template-areas` を使用することで、CSS でこのパターンを見ることができます。 max-width が 500 ピクセルになった時点でグリッドを定義しているので、小さな端末ではメディアオブジェクトが積み重なります。

パターンのオプションに、反転して反対側に切り替えるというものがあります。 — これはレイアウトを反映させる反転グリッドテンプレートを定義する `media-flip` クラスを追加することによって行われます。

あるメディアオブジェクトを別のメディアオブジェクトの中に入れ子にするときは、通常のレイアウトでは 2 番目のトラックに、反転したときは最初のトラックに配置する必要があります。

代替策
---

このパターンには、対応するブラウザーによって、いくつかの代替策が考えられます。良い万能策としては、画像を左に浮動させ、ボックスに clearfix を追加して、浮動が確実に収まるようにすることです。

この例をダウンロード

浮動要素がグリッドアイテムになると、その float が適用されなくなるため、浮動要素を除去するために特別なことをする必要はありません。

やらなければならないことは、アイテムに適用されているすべてのマージンと、グリッドのコンテキストで必要としていないすべての幅を取り除くことです（グリッドでそれを制御するための `gap` プロパティがあり、トラックがサイズを制御します）。

MDN の関連資料
---------

* CSS グリッドレイアウト
* CSS グリッドレイアウトとプログレッシブエンハンスメント
* グリッドテンプレート領域
* fit-content
* grid-template-areas
ブラウザーの互換性
---------

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

#### grid-template-areas

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### float

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


料理帳テンプレート - CSS: カスケーディングスタイルシート

料理帳テンプレート
=========

**訳注:** レシピはまず英語版で投稿し、承認を受けてから日本語に翻訳してください。日本語版単独のレシピの投稿はできません。このテンプレートは、レシピの翻訳の参考のために翻訳しているものです。
 *斜体のコメントは、このテンプレートの使い方についての情報です。*

*このレシピが解決する問題または、例示しているパターンの説明。*

要件
--

*このパターンには含める必要があるもの、または解決する必要がある問題を、ここに列挙してください。*

レシピ
---

*下の例のパスを変更して、マージされた例を指すようにしてください。 最後の引数はサンプルの実際の高さで、必要に応じて変更して構いません。*

*マージされたダウンロード版を指すようにリンクを変更してください。*

この例をダウンロード

行った選択
-----

*パターンを作成したときの決定を説明してください。 なぜその方法を選んだのですか？ここに追加の例 — 例えば代替策を使用した版 — を追加したい場合は、ぜひ追加してください。パターンは非常に単純なものからより複雑なものまで多岐にわたるので、このセクションは意図的に緩めています。*

有用な代替策または他の方法
-------------

*レシピを構築するための有用な他の方法、または対応していないブラウザーに対応する必要がある場合に使用する代替レシピがある場合は、ここに節を分けて掲載してください。*

アクセシビリティの考慮
-----------

*アクセシビリティに関して注意すべき点がある場合に、ここに掲載してください。このパターンに関係がなければ、省略することができます。*

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

レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。

*以下の例で align-items に触れているのと同様に、使用した重要なプロパティの互換データ (compat data) を掲載してください。*

### align-items

{{Compat}}関連情報
----

* *関連プロパティのリンク: `example-property`*
* *プロパティの使用方法を示す記事へのリンク: "～の使用の記事"*
* *非常に良い外部リンク。 外部リンクを恐れてはいけませんが、それらは傑出したものであるべきであり、細かい点を述べるだけのものではありません。*


CSS を使った HTML の要素への色の適用 - CSS: カスケーディングスタイルシート

CSS を使った HTML の要素への色の適用
=======================

この記事は、HTML での CSS の色を使用するそれぞれの方法を紹介する入門編です。

色使いは人間の表現の基本形です。子どもは絵がうまくなる前から色に触れています。恐らくこれこそが、人がウェブサイト開発を学ぶときにまず色を触る理由でしょう。CSS では、HTML 要素に色を追加し好みの見た目にする方法が多岐に渡ります。

ここでは、色を使用する際に必要なことのほとんどに触れていきます。色をつけることができるものと、それに関係する CSS プロパティの一覧、色の記述方法、実際にスタイルシートとスクリプトの両方で色を使用する方法などです。また、ユーザーに色を選んでもらう方法についても見ていきます。

それから、賢い色の使い方について短い論述をします。これは、様々な視覚の人がいることを意識した、適切な色の選択方法です。

色を付けることができるもの
-------------

要素レベルでは、HTML のすべてのものに色を適用することができます。それよりも、テキストや境界線など、要素の中に描かれているものの種類で見てみましょう。それぞれについて、色を適用する CSS プロパティの一覧を見てみましょう。

基礎的なレベルでならば、`color` プロパティは HTML 要素の内容物の色を定義し、`background-color` は HTML 要素の背景色を定義すると言えます。これらのプロパティはほぼすべての要素で使用できます。

### テキスト

要素がレンダリングされるたびに、テキスト、その背景、およびテキストの装飾の色を決定するために以下のプロパティが使用されます。

`color`

テキストとテキスト装飾 (下線や上線、打ち消し線などを付加するもの) に使用する色です。

`background-color`

テキストの背景色です。

`text-shadow`

テキストに適用する影の効果を設定します。影の設定には、影のベース色 (他のパラメータに基づいて背景をぼかして混色する色) があります。より詳しくは基本的なテキストとフォントの装飾のテキストのドロップシャドウを参照してください。

`text-decoration-color`

既定では、テキストの装飾 (下線、打ち消し線など) の色には `color` プロパティを使用します。しかし、`text-decoration-color` プロパティを用いると、この挙動を上書きして異なる色を使用できます。

`text-emphasis-color`

テキストの各文字に隣接した圏点の描画に使用する色です。主に東アジア言語の文字描画で使用します。

`caret-color`

要素の キャレット (テキスト入力カーソルとも表現されるもの) の描画に使用する色です。これは編集可能な要素でのみ有用であり、`<input>` や `<textarea>` または HTML の `contenteditable` 属性が設定された要素に使用されます。

### ボックス

すべての要素は中身があるボックスであり、そのボックスの内容に加えて、背景と境界線もあります。

境界線

ボックスの境界線の色を設定できる CSS プロパティ一覧は、境界線の節を参照してください。

`background-color`

要素の内容がない領域で使用される背景色です。

`column-rule-color`

テキストの列を区切る線に使う色です。

`outline-color`

要素の外側に輪郭線を描くときに使う色です。この輪郭線は境界線とは異なり、文書内でその空間を確保しません (そのため他のコンテンツと重なる可能性があります)。一般的には、入力イベントを受け取る要素を示すフォーカスインジケーターに使用されます。

### 境界線

 あらゆる要素で、周囲に境界線を描画することができます。基本的な要素の境界線は、要素の内容物の辺を囲むように描かれた線です。
 基本的な要素の境界は、要素の内容の端に描かれている線です。要素とその境界線の関係性については、ボックスモデルのボックスのプロパティを、より詳しい境界線へのスタイルの適用については CSS での境界線のスタイル付け を参照してください。

`border` 一括指定プロパティを使用することもできます。これは、境界線に関する (色以外の線幅、線種 (実線、破線など) などの特性も含んだ) すべての設定をこれ一つで行えます。

`border-color`

要素の境界線の各辺に使用する単一の色を指定します。

`border-left-color`, `border-right-color`, `border-top-color`, `border-bottom-color`

要素の境界線の各辺に対応する色を指定できます。

`border-block-start-color`, `border-block-end-color`

これらは、境界線が囲むブロックの先頭と末尾に最も近い境界線の描画色を設定することができます。左から右への書き方 (英語の書き方など) では、ブロック先頭の境界線は上端、ブロック末尾の境界線は下端になります。これは、インラインの先頭とインラインの末尾である左右の (ボックス内の各行のテキストの先頭と末尾の位置に対応する) 端とは異なります。

`border-inline-start-color`, `border-inline-end-color`

これらは、ボックス内のテキスト行の先頭と末尾に最も近い境界線の縁に色を付けられます。これは `writing-mode`、`direction`、`text-orientation` プロパティに依存しますが、どちら側になるかは `writing-mode`、`direction`、`text-orientation` プロパティによって異なります。例えば、ボックスのテキストが右から左に描画される場合、`border-inline-start-color` は境界線の右側に適用されます。

### 色をつける他の方法

CSS が唯一の色を付けるためのウェブ技術ではありません。色に対応している、ウェブで使用可能なグラフィック技術があります。

HTML Canvas API

Canvas API では、2D のビットマップ画像を `<canvas>` 要素の中に描画できます。より詳しくは Canvas チュートリアルを参照してください。

SVG (Scalable Vector Graphics)

SVG ならば、特定の形状、パターン、線を描くコマンドで画像を描画できます。 SVG のコマンドは XML の形式となっており、直接ウェブページに埋め込めます。また、img 要素を使うと他の画像と同じような配置もできます。

WebGL

Web Graphics Library は Open GL ES を基にした API で、ウェブ上に 2D や 3D のハイパフォーマンスなグラフィックを描画できます。より詳しくは WebGL チュートリアルを参照してください。

色の記述方法
------

CSS で色を表現するには、アナログの概念である「色」の概念を、コンピュータが解釈できるようなデジタル形式に翻訳する方法が必要です。これは通常、原色の集合それぞれをどのくらい混ぜるか、どのくらいの明るさにするかなど、色を構成要素に分解することで行います。ここでは、CSS で色を表現するいくつかの方法を示します。

色の値型の詳細は、CSS の `<color>` 単位のリファレンスを参照してください。

### キーワード

標準的な色名が定義されており、使用したい色を表すキーワードがあれば、色の数値表現の代わりにこれらのキーワードを使用することができます。色キーワードには原色と副色 (`red`、`blue`、`orange` など)、灰色 (`black` から `white` までの `darkgray` や `lightgrey` といった色を含む)、これらを混ぜた色である `lightseagreen`、`cornflowerblue`、`rebeccapurple` が含まれます。

利用可能な全ての色キーワードの一覧は、`<color>` の色キーワードを参照してください。

### RGB 値

CSS での RGB の色表現は 3 通りあります。

#### 16 進数文字列表記

16 進数文字列表記は、色の各要素 (赤、緑、青) を表すために 16 進数の数字で色を表します。また、4 つ目の要素のアルファチャネル (または不透明度) を含められます。各色要素は、0 〜 255 (0x00 と 0xFF) の間の数値、または任意で 0 ～ 15 (0x0 と 0xF) の間の数値として表せます。全要素は同じ桁数で指定する必要があります。1 桁の表記を使用した場合、描画時の最終的な色は `"#D"` が `"#DD"` になるように各構成要素の桁を 2 回繰り返して計算します。

16 進数文字列表記の色は、常に文字 `"#"` で始まります。その後にカラーコードの 16 進数が来ます。文字列の大文字小文字は区別されません。

`"#rrggbb"`

16 進数の完全不透明色を指定します。赤色成分が `0xrr`、緑色成分が `0xgg`、青色成分が `0xbb` です。

`"#rrggbbaa"`

16 進数の色を指定します。赤色成分が `0xrr`、緑色成分が `0xgg`、青色成分が `0xbb` です。アルファチャンネルは `0xaa` で指定します。この値が小さいほど透明に近づきます。

`"#rgb"`

16 進数の完全不透明色を指定します。赤色成分が `0xrr`、緑色成分が `0xgg`、青色成分が `0xbb` です。

`"#rgba"`

16 進数の色を指定します。赤色成分が `0xrr`、緑色成分が `0xgg`、青色成分が `0xbb` です。アルファチャンネルは `0xaa` で指定します。この値が小さいほど透明に近づきます。

例として、明るい青の不透明色は `"#0000ff"` や `"#00f"` で表現できます。25% 不透明にするには、`"#0000ff44"` や `"#00f4"` のようにします。

#### RGB 関数表記

RGB (赤/緑/青) 関数表記法は、16 進文字列表記法と同様に赤、緑、青の各成分 (任意では不透明度のアルファチャンネル成分) を用いて色を表現しますが、文字列ではなく CSS 関数 `rgb()` で色を定義します。この関数は、入力引数として赤、緑、青の各成分の値と、任意の第 4 引数のアルファチャンネル値を受け取ります。

これらの引数の正常値は以下の通りです。

`red`、`green`、`blue`

0 以上 255 以下の `<integer>` 型の値か、0% から 100% の `<percentage>` 型の値です。

`alpha`

アルファチャンネルは、0.0 (完全透過) から 1.0 (完全不透明) の間の数値です。また、 パーセントも指定でき、これは 0% が 0.0 と同じで 100% が 1.0 と同じです。

例えば、不透明度 50% の明るい赤は `rgb(255, 0, 0, 0.5)` や `rgb(100%, 0, 0, 50%)` のように表現できます。

### HSL 関数表記

デザイナーやアーティストは HSL (Hue/Saturation/Luminosity) で作業しようとすることがあります。ウェブにおける HSL 色は、HSL 関数表記で表現します。CSS の `hsl()` 関数の表現方法は、`rgb()` 関数とよく似ています。

以下の図は HSL 色円筒を表しています。色相 (Hue) は、可視スペクトルの色を表す円形の色相環に沿った位置に基づいて実際の色を定義します。彩度 (Saturation) は、灰色の強さ、もしくはその色相で取りうる最も濃い色に対する割合です。輝度 (または明度) の値が高くなると、色は最も暗い色から最も明るい色 (黒から白) へと変化します。画像の提供元は、Wikipedia の SharkD さんより、CC BY-SA 3.0 ライセンスで配布されているものです。

![HSL 色円筒](/ja/docs/Web/CSS/CSS_colors/Applying_color/640px-hsl_color_solid_cylinder.png)

HSL カラーの色相 (H) 成分の値は、赤から黄、緑、水、青、マゼンタ (そして 360° で再び赤に戻る) までの角度で、ベースの色を特定します。度 (`deg`)、ラジアン (`rad`)、グラジアン (`grad`)、回転 (`turn`) など、CSS がサポートする任意の `<angle>` 単位で値を指定できます。しかしこれでは、鮮やかさや濁り、色の明るさや暗さを制御できません。

色の彩度 (S) 成分は、最終的な色を指定の色相が構成する割合を指定します。残りの輝度 (L) 成分は、灰色の強さを定義します。

以下のように、完璧な絵の具の色を作るかのように考えてみましょう。

1. ユーザーの画面で表現できる最も強い青など、その色で最も強いベースの絵の具から始めます。これが**色相** (H) 要素で、ベースとして使用したい鮮やかな色相環の周りの角度を表す値です。
2. 次に、欲しい色の明るさに対応するグレースケールの絵の具を選びます。非常に明るくて白に近い色にしたいのか、それとも非常に暗くて黒に近い色にしたいのか、それともその中間のどこかにしたいのか。これはパーセンテージで指定し、0% が完全な黒、100% が完全な白となります。(彩度や色相に関係なく)。この値の間には文字通り灰色の領域があります。
3. 灰色の絵の具と完全に鮮やかな色が手に入ったので、これらを混ぜ合わせる必要があります。色の彩度 (S) 成分は、最終的な色のうち完全に鮮やかな色が構成するパーセントを示します。残りは、彩度を表すグレーの絵の具となります。

任意でアルファチャンネルを追加して、色を 100% 以下の不透明度にすることもできます。

こちらは、HSL 表記のサンプル色です。
```

table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
  text-align: left;
}

th {
  background-color: hsl(0, 0%, 75%);
}
```

```html
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notation</th>
      <th scope="col">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)</code></td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)</code></td>
      <td style="background-color: hsl(90, 100%, 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)</code></td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> </td>
    </tr>
  </tbody>
</table>
```

**メモ:** 色相の単位を省略した場合は度 (`deg`) と見なされます。

色の活用
----

要素に色を適用する CSS プロパティの存在と、色の記述に使用可能な形式が分かったので、これをまとめて色を活用し始めてみましょう。着色できる物のリストを見て把握できたと思いますが、CSS で色を付けられる物はたくさんあります。ここでは、スタイルシート内で色を使う場合と、JavaScript コードで要素のスタイルを変更するために色を追加したり変更したりする場合の、2 つの側面から見ていきます。

### スタイルシートでの色指定

要素に色を適用する最も簡単な方法は、要素の描画に使用する CSS で色を指定することです。前述のプロパティをすべて使用するわけではありませんが、いくつかの例を見てみましょう。色を使う場所によらず、考え方は同じです。

先にこれからやることの結果を見てから、サンプルを見ていきます。

#### HTML

上記の例を作成するための HTML は、この通りです。

```html
<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="box boxRight">
    <p>This is the second box.</p>
  </div>
</div>
```

これはとてもシンプルで、`<div>` をコンテンツのラッパーとして使用し、さらに 2 つの `<div>` で構成しています。

魔法はいつも、CSS で起こります。上記の HTML で定義したレイアウトに、色を適用していきます。

#### CSS

上記の結果を作り出す CSS を一つずつ見ていけば、面白い部分も一つずつ見られるでしょう。

```css
.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}
```

`.wrapper` クラスは、他のすべてのコンテンツを囲む `<div>` にスタイルを割り当てるために使っています。これは `width` と `height` を使ってコンテナのサイズを決定し、さらに `margin` と `padding` を使っています。

ここでの論述でさらに興味深いのは、`border` プロパティで要素の縁に境界線を設定していることです。この境界線は幅 6 ピクセルの実線で、色は `mediumturquoise` です。

2 つの色付きボックスには共通のプロパティがいくつかありますので、そのプロパティを定義するクラス `.box` を作成します。

```css
.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

簡単に言えば、`.box` は各ボックスのサイズとその中で使用するフォントの構成を確立しています。また、CSS フレックスボックスも利用して簡単に各ボックスのコンテンツを中央揃えしています。`display: flex` で `flex` モードを有効にし、`justify-content` と `align-items` を `center` に設定しています。あとは、2 つのボックスそれぞれに異なるプロパティを定義するクラスを作るだけです。

```css
.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}
```

`.boxLeft` クラスは、左側のボックスのスタイルとして巧みに使われ、以下のようにボックスを左側に浮かせて色を設定しています。

* CSS `background-color` プロパティを `rgb(245, 130, 130)` の値に変更することで、ボックスの背景色を設定しています。
* ボックスに輪郭線を定義しています。一般的によく使われる `border` とは異なり、`outline` はレイアウトに全く影響しません。この輪郭線は、2 ピクセルの太さの、濃い赤色の実線です。色の指定に `darkred` キーワードを使用していることにご注意ください。
* 注意として、テキストの色は明示的に設定していません。この場合 `color` の値はそれを含んだ最も近い要素から継承されます。すなわち、既定である黒色です。

```css
.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}
```

**メモ:** こちらを Safari で表示しようとしても、正常に表示されません。なぜなら、Safari は `text-decoration: underline wavy #88ff88` をサポートしていないからです。

最後に、`.boxRight` クラスで右に描画されるボックス固有のプロパティを記述します。これは、先のボックスの隣に表示されるように、ボックスを右に浮かす設定をしています。そして、以下のように色を設定しています。

* `background-color` は `hsl(270deg, 50%, 75%)` で指定した HSL 値を設定しています。この色は中くらいの紫色です。
* ボックスの `outline` は、 ボックスを太さ 4 ピクセルの破線で囲み、色はやや濃い紫色 (`rgb(110, 20, 120)`) となるように指定しています。
* 前景 (テキスト) の色は、`color` プロパティを `hsl(0deg, 100%, 100%)` にすることで指定してあります。これは白色を指定する方法のうちの一つです。
* `text-decoration` でテキストの下に緑の波線を引いています。
* 最後に、`text-shadow` を使用してテキストに少しだけ影をつけています。この `color` 引数は `black` にしています。
ユーザーに色を選択させる
------------

ウェブサイト上では、ユーザーに色を選択させる必要がある場合があります。カスタマイズ可能なユーザーインターフェースがある場合や、お絵かきアプリを実装している場合などが考えられるでしょう。編集可能なテキストがあってユーザーにテキストの色を選択させる、あるいはアプリでフォルダーやアイテムに色を割り当てることができる場合があるかもしれません。古くは、独自のカラーピッカーを実装する必要がありましたが、HTML では `<input>` 要素を通じて `type` 属性の値を `"color"` にすれば、ブラウザーがカラーピッカーを提供できるようになりました。

`<input>` 要素は、先で取り上げた 16 進数文字列表記でのみ色を表します。

### 例: 色の選択

ユーザーが色を選択できる簡単な例を見てみましょう。ユーザーが色を調整すると、サンプルの周囲の境界線が新しい色を反映するように変化します。色を選び終えると、カラーピッカーの値が表示されます。

**メモ:** macOS では、カラーピッカーウインドウを閉じると色の選択が完了したことになります。

#### HTML

この HTML は、(`<label>` 要素で作成したラベル付きの) カラーピッカーコントロールと、空の段落要素 (`<p>`) を含むボックスを作成します。この段落要素に JavaScript コードからテキストを出力する予定です。

```html
<div id="box">
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output"></p>
</div>
```

#### CSS

この CSS では、ボックスのサイズと見た目の基本的なスタイルを設定しています。境界線には 2 ピクセルの幅を設定していますが、色は下記の JavaScript のおかげで変化します。

```css
#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    "sans-serif";
}
```

#### JavaScript

このスクリプトは、境界線の開始色をカラーピッカーの値と同じに更新するタスクを処理します。`<input type="color">` 要素からの入力を処理するために、2 つのイベントハンドラーを追加しています。

```js
let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener(
  "input",
  function (event) {
    box.style.borderColor = event.target.value;
  },
  false,
);

colorPicker.addEventListener(
  "change",
  function (event) {
    output.innerText = "Color set to " + colorPicker.value + ".";
  },
  false,
);
```

この `input` イベントは要素の値が変更されるたびに送信されます。このイベントが来るたびに、ボックスの境界線の色をカラーピッカーの現在値に合わせます。

カラーピッカーの値が確定したときに、`change` イベントを受信します。ID が `"output"` である `<p>` 要素の内容を、最後に選択した色を表す文字列に設定することで応答します。

賢く色を使う
------

ウェブサイトのデザインで正しい色選びをする際には、芸術、デザイン、少なくとも基本的な色理論に精通していないと、格段に複雑な工程となるでしょう。間違った色の選択は、サイトが醜くなったり、さらに悪いことにコントラストや相反する色の問題でコンテンツが読めなくなってしまうことがあります。また、間違った色を使用してしまうことで、特定の視覚的問題、特に色覚異常を持つ人々がコンテンツを全く利用できなくなる恐れがあります。

### 適切な色を見つける

何らかの芸術やデザインを触れずに、丁度よく正しい色を思い付くことは難しいでしょう。幸いなことに、あなたの手助けになりえる便利なツールがあります。これらは意思決定を助ける良きデザイナーを持つことには代わりませんが、火付け役にはなるでしょう。

#### ベースカラー

最初のステップは、**ベースカラー**を選ぶことです。これは、何らかの形であなたのウェブサイトやサイトの主題を定義する色です。緑がお茶を連想させるように、また青は空や海と関係があるように考えるところから、サイトを表すのに適切なベースカラー選びを始めると良いでしょう。ベースカラーを選ぶ方法はたくさんありますが、以下のようないくつかのアイデアがあります。

* 商品やアイデアで識別される既存の色や、伝えたい感情を代表する色など、コンテンツのトピックに自然に関連する色。
* コンテンツが表す物に関連付いたイメージから来る色。特定の項目や製品に関するウェブサイトを作成する場合は、それらに物理的に存在する色を選びます。
* ウェブサイトを探して既存のカラーパレットや画像をたくさん見ることで、インスピレーションを得ます。

ベースカラーを決める際には、ウェブコンテンツから色を選択できるブラウザー拡張機能が特に便利です。拡張機能の中には、こういった作業を支援するために特別に設計されたものもあります。例えば、ウェブサイトの ColorZilla はウェブから色を選ぶためのスポイトツールの拡張機能 (Chrome / Firefox) を提供しています。また、様々なサイズの領域やページの選択すた領域のピクセルの色の平均を取ることもできます。

**メモ:** 色の平均を取る利点は、一見同じ色に見えるものが、実際には驚くほど多様な数の関連色が協調して使用され、目的の効果を生み出すために混色されていることが多いためです。これらのピクセル内から 1 つだけ選んでしまうと、それだけでは非常に場違いな色になることがあります。

#### パレットを豊かにする

ベースカラーが決まれば、ベースカラーに色理論を適用して、ベースカラーと一緒に使用する適切なカラーパレットを構築します。さらなる適切な色の決定に役立つオンラインツールもたくさんあります。これらの多くはフィルターをかけた色表示もサポートしているので、さまざまな色盲の人がどう見えるかを確認できます。これがなぜ重要なのかについては、色とアクセシビリティで簡単に説明しています。

以下はいくつかの例 (このリストが最終改訂された時点では、すべて無料で使用できるもの) です。

* MDN のカラーピッカーツール
* Paletton
* Adobe Color CC オンライン色相環

パレットをデザインする際には、これらのツールが典型的に生成する色に加えて、白 (またはほぼ白)、黒 (またはほぼ黒)、グレーの濃淡などの中核となる中性的な色を加える必要があることも念頭に置いてください。

**メモ:** 通常は、可能な限り色の数を少なくした方がはるかに良くなります。ページ上の全てに色を加えるのではなく色をアクセントに使うと、内容が読みやすくなり使った色のインパクトが増します。

### 色理論に関する参考文献

色理論の全面的な履修はこの記事の範囲を超えていますが、色理論に関する記事も豊富に用意されており、最寄りの学校や大学にも講座があるでしょうから、ぜひ参考にしてみてください。色理論に関する有用なリソースをいくつかご紹介します。

Color Science (カーンアカデミー と ピクサー の共著)

色とは何か、色の認識のされ方、色を使ったアイデアの表現方法などの概念を紹介するオンライン講座です。ピクサーのアーティストやデザイナーが講師を務めています。

Wikipedia の Color theory

ウィキペディアの色理論に関する記事で、技術的観点の素晴らしい情報がたくさんあります。色選びの参考にはなりませんが、有用な情報が満載です。

### 色とアクセシビリティ

色がアクセシビリティの問題となることがあります。色の不適切および不注意な使用は、利用者の何割かが適切に使用できないウェブサイトやアプリになり、トラフィックの損失、ビジネスの損失、さらには広報の問題につながる可能性があります。そのため、色の使い方を慎重に検討することは重要です。

少なくとも色覚異常についての基礎的な調査はしておいた方が良いでしょう。いくつかの種類がありますが、最も一般的なのは赤緑色覚異常で、赤と緑の色を区別しづらいものです。他にも、特定の色の違いを見分けることができないものから、全く色が見えないものまであります。

**メモ:** 最も重要なルール: 色だけで情報を知る手段を使ってはいけません。例えば、ある操作の成功や失敗を示すために、図形の色を白から緑、失敗を示すために赤に変えた場合、赤緑の色盲のユーザーはサイトを適切に利用できません。代わりにテキストと色を併用すれば、誰もが起こったことを理解できるようになるでしょう。

色覚異常については、以下の記事をご覧ください。

* Medline Plus: Color Blindness (アメリカ国立衛生研究所)
* American Academy of Ophthamology: What Is Color Blindness?
* Color Blindness & Web Design (Usability.gov: アメリカ保健福祉省)
### パレットデザインの例

サイトの適切なカラーパレットを選ぶにあたって、簡単な例を考えてみましょう。火星で開かれる新しいゲームのウェブサイトを構築すると想像してみてください。そこで、火星の写真を Google 検索してみましょう。火星のカラーリングの良い例がたくさんあるはずです。私たちは慎重にモックアップや映画の写真を避け、火星で撮影された写真を使うことにしました。そして、このゲームは惑星の表面で行われるため、人類が過去数十年にわたって表面に滞在させている火星着陸機の一つが撮影した写真を使用することにしました。カラーピッカーツールを使って、この選んだ色のサンプルを採ります。

スポイトツールを使って好みの色を特定し、件の色は `#D79C7A` であることを確認しました。これは火星表面のステレオタイプな錆びたオレンジレッドの色です。

ベースカラーを選択したら、パレットを構築する必要があります。そこで、Paletton を使って他の色を考えてみることにしました。Paletton を開くと、以下のような画面が出てきます。

![Paletton を読み込んだ直後。](/ja/docs/Web/CSS/CSS_colors/Applying_color/paletton1.png)

次に、ツールの左下隅にある "Base RGB" の欄に色の 16 進数コード (`D79C7A`) を入力します。

![ベースカラーの入力後](/ja/docs/Web/CSS/CSS_colors/Applying_color/paletton2.png)

火星の写真から選んだ色をベースにした単色パレットが出てきました。何らかの理由で関連色がたくさん必要な場合は、そういった色も良い色になる可能性はあります。しかし、私たちが本当に欲しいのはアクセントカラー、ベースカラーに添えて目立つ色です。これを見つけるには、パレットの種類の選択メニューにある "add complementary" のトグル (現在は "Monochromatic") をクリックします。右下のアクセントカラーをクリックすると、補色が `#508D7C` であることが計算されます。

![補色も含まれるようになりました。](/ja/docs/Web/CSS/CSS_colors/Applying_color/paletton3.png)

提案された色が気に入らない場合は、配色を変更して、もっと良さそうな色を確かめることができます。例えば、提案の緑青色が気に入らない場合、トライアド配色のアイコンをクリックすれば以下のように表示されます。

![トライアド配色を選択](/ja/docs/Web/CSS/CSS_colors/Applying_color/paletton4.png)

右上のあの灰色っぽい青はなかなか良さそうですね。クリックすると、`#556E8D` でした。これをアクセントカラーとして、見出しやタブの強調表示のようにものを目立たせる目的で控えめに使用します。

![トライアド配色を選択](/ja/docs/Web/CSS/CSS_colors/Applying_color/paletton-color-detail.png)

これで、ベースカラーとアクセントカラーができました。さらに、グラデーションなどが必要な場合に備えて、それぞれの色の補色をいくつか用意します。これらの色を後から利用できるように、何らかの形式で出力しておきます。

これらの色を決めてなお、適切な中間的な色も選択する必要があります。一般的なデザインでは、テキストが鮮明で読みやすい十分なコントラストがありつつ、目に厳しいほどのコントラストではないというスイートスポットを見つけようとします。どちらかの方に行き過ぎてしまいがちなので、色を選んで使用例に着手したら、必ずフィードバックをもらうようにしましょう。コントラストが低すぎるとテキストが背景に洗い流されて読めなくなりがちです。またコントラストが高すぎると、ユーザーはサイトを見ているだけで、見栄えが悪く不愉快に感じるでしょう。

### 色、背景、コントラスト、印刷

画面上では良いように見えるものが、紙の上では全く違って見えるかもしれません。さらに、往々にしてインクは高価なものです。ユーザーがページを印刷している場合、重要なのはテキストであるにも関わらず、背景すべてが貴重なインクを使い切るわけにはいきません。ほとんどのブラウザーは既定で、文書印刷時に背景画像を除きます。

背景色や画像が慎重に選択されている場合や、背景がコンテンツの有用性に決定的な影響を与える場合、CSS `color-adjust` プロパティを使用して、コンテンツの外観を調整しないようにブラウザーに指示できます。

`color-adjust`、`economy` の既定値は、ブラウザーが必要に応じて外観を変更することができるかどうかを示します。ブラウザーは文書を描画する出力機器の種類に応じて、コンテンツの読みやすさや印刷の経済効率を最適化しようとします。

`color-adjust` を `exact` にすると、色や画像があった場合でも、それを使用することで適した動作の要素になる特別なデザインであることを、ブラウザーに伝えられます。これを設定すると、ブラウザーは要素の外観に手を加えることなく、CSS で指定された通りに要素を描画します。

**メモ:** `color-adjust: exact` を与えても CSS がその通りに使用されるとは限りません。ブラウザー出力を変更するユーザー設定 (印刷ダイアログボックスの「背景を印刷しない」チェックボックスなど) が提供されている場合、`color-adjust` の値はそれによって上書きされます。

関連情報
----

* グラフィックの描画
* ウェブのグラフィック
* MDN のカラーピッカーツール


色選択ツール - CSS: カスケーディングスタイルシート

色選択ツール
======

このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。 HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 CSS で対応している様々な色形式に変換することもできます。アルファチャネルの制御も、 RGB (rgba) および HSL (hsla) 形式で対応しています。

色を定義するパラメーターを調整すると、3 つの標準ウェブ CSS 形式すべてが表示されます。さらに、現在選択されている色に基づいて、 HSL および HSV のパレット、およびアルファが生成されます。「スポイト」スタイルのカラーピッカーボックスは、 HSL または HSV 形式の間で切り替えることができます。また、ツールの下部にあるボックスに色をドラッグし、色を重ね合わせることで、色とその重なり具合をテストすることもできます。 相対 Z インデックス値を調整して、前後に移動させることができます。

このツールは HTML に適用する完全な CSS 色を識別するのに役立ちます。

上記で作成した色は、特に注意書きがない限り、 CSS や HTML のどこの色でも使用することができます。

関連情報
----

色の使用について詳しくは、以下を参照してください。

* CSS を使った HTML の要素への色の適用
* 基本的なテキストとフォントの装飾
* CSS を使用した境界のスタイル付け
* CSS を使用した背景スタイルの変更
* 色とそのコントラスト


view() - CSS: カスケーディングスタイルシート

view()
======

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`view()`** は CSS 関数で、アニメーションタイムラインと共に使用して、アニメーションする無名ビュー進行タイムラインを提供する主体要素を示すことができます。ビュー進行タイムラインは、最も近い先祖スクロール内の主体要素の可視性の変化によって進行します。既定では、タイムラインは、主体がスクローラーの一方の端に最初に表示された時に 0% になり、反対側の端に達した時に 100% になります。

関数の引数には、タイムラインの進行が追跡されるスクロールバーの軸と、主体が表示されているとみなされるボックスの位置を調整するインセットを指定します。

**メモ:** 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。

**メモ:** `view()` を使用するたびに、ウェブアニメーション API に `ViewTimeline` (en-US) の固有のインスタンスが対応付けられます。

構文
--

```css
/\* 引数を設定しない関数 \*/
animation-timeline: view();

/\* 軸を選択する値 \*/
animation-timeline: view(block); /\* 既定 \*/
animation-timeline: view(inline);
animation-timeline: view(y);
animation-timeline: view(x);

/\* インセットの値 \*/
animation-timeline: view(auto); /\* 既定 \*/
animation-timeline: view(20%);
animation-timeline: view(200px);
animation-timeline: view(20% 40%);
animation-timeline: view(20% 200px);
animation-timeline: view(100px 200px);
animation-timeline: view(auto 200px);

/\* 軸とインセットを指定する例 \*/
animation-timeline: view(block auto); /\* 既定 \*/
animation-timeline: view(inline 20%);
animation-timeline: view(x 200px auto);
```

### 引数

軸

スクロールバー軸の値は以下のいずれかになります。

`block`

 スクロールコンテナーのブロック軸にあるスクロールバーで、行内のテキストの流れに垂直な方向の軸です。
 標準的な英語のような横書きモードでは `y` と同じになり、縦書きモードでは `x` と同じになります。これが既定値です。

`inline`

 スクロールコンテナーのインライン軸にあるスクロールバーで、行のテキストの流れと平行な方向の軸です。
 横書きモードでは `x` と同じになり、縦書きモードでは `y` と同じになります。

`y`

スクロールコンテナーの縦軸にあるスクロールバー。

`x`

スクロールコンテナーの横軸にあるスクロールバー。

インセット

この値は `auto` または `<length-percentage>` のいずれかです。スクロールポートのインセット（正の値）またはアウトセット（負の値）の調整を指定します。インセットは、アニメーションタイムラインの長さを決定する要素が表示されているかどうかを決定するために使用します。言い換えれば、アニメーションは要素がインセット調整されたビューにある限り続きます。

start

スクロールポートの先頭からの内方オフセット。

end

スクロールポートの末尾からの内方オフセット。

**メモ:** 軸とインセットの値は、任意の順序で指定することができます。

### 形式文法
```

<view()> =
  view( [ <axis> || <'view-timeline-inset'> ]? )

<axis> =
  block   |
  inline  |
  x       |
  y

```

例
-

### 無名ビュー進行タイムラインの設定

無名ビュー進行タイムラインは `animation-timeline: view()` を使用して `subject` クラスを持つ要素に設定します。その結果、 `subject` 要素は文書のスクロールに合わせてアニメーションします。

#### HTML

例の HTML は下記の通りです。

```html
<div class="content">
  <h1>Content</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject-container">
    <div class="subject animation"></div>
  </div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
<div class="overlay top">inset start 50%</div>
<div class="overlay bottom">inset end 10%</div>
```

#### CSS

`subject` 要素と `content` 要素は最小限のスタイル設定にし、テキストコンテンツには基本的なフォント設定をしました。

```css
.subject {
  width: 300px;
  height: 200px;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p {
  font-size: 1.5rem;
  line-height: 1.8;
}
```

結果の理解を助けるために、`subject-container`、`top`、`bottom` という追加要素を使用しています。 `subject-container` はアニメーションの範囲を示します。また、半透過の `top` と `bottom` のオーバーレイは、オフセットされたスクロールポートを示します。

```css
.subject-container {
  border: 2px dashed black;
  width: 300px;
  margin: 0 auto;
}

.overlay {
  position: fixed;
  width: 100%;
  background-color: #f5deb3aa;
  display: flex;
  font-size: 1.2rem;
  font-weight: bold;
  color: red;
  justify-content: flex-end;
}

.top {
  top: 0;
  height: 244px;
  align-items: end;
}

.bottom {
  top: 432px;
  height: 48px;
}
```

以下のコードでは、 `subject` クラスを持つ `<div>` に `animation` クラスが指定されています。アニメーション `grow` は `subject` 要素を大きくしたり小さくしたりします。 `animation-timeline: view(block 55% 10%)` を設定することで、スクロールする祖先（この場合は文書内のルート要素）が指定された進行タイムラインに沿ってアニメーションすることを宣言します。

下にスクロールしている間、`50% 10%` のインセット値によってアニメーションが下から 10% で始まり、上から 50% で完了することに注意してください。アニメーションがタイムラインに沿って移動するにつれて、 `subject` は成長していきます。逆に、上にスクロールされるとアニメーションは逆方向へ進み、上から 50% で始まり、アニメーションを逆方向へ移動し、下から 10% で終わります。つまり、アニメーションが逆方向に進むにつれて、 `subject` は縮小していきます。

覚えておくべき重要な点は、アニメーションは `subject` 要素が `50% 10%` インセット値を使用してオフセットされるように設定されたビューにある限り続くということです。

```css
.animation {
  animation-timeline: view(block 50% 10%);

  animation-name: grow;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
  animation-timing-function: linear;
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}
```

#### 結果

主体要素のアニメーションはスクロールしてご覧ください。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # view-notation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS スクロール駆動アニメーション (en-US)
* CSS アニメーションの使用
* `animation-timeline`


scroll() - CSS: カスケーディングスタイルシート

scroll()
========

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`scroll()`** は CSS 関数で、 `animation-timeline` と共に使用することができます。 `animation-timeline` はスクロール可能な要素 (*scroller*) とスクロールバーの軸を示し、現在の要素をアニメーションさせるための無名スクロール進行タイムラインを提供します。スクロール進行タイムラインは、スクローラーを上下（または左右）にスクロールすることで進行します。スクロール範囲内の位置は進行のパーセント値に変換されます。先頭は 0% で、末尾は 100% です。

**メモ:** 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。

**メモ:** `scroll()` を使用するたびに、ウェブアニメーション API に `ScrollTimeline` (en-US) の固有のインスタンスが対応付けられます。

構文
--

```css
/\* 引数を設定しない関数 \*/
animation-timeline: scroll();

/\* スクローラー要素を選択する値 \*/
animation-timeline: scroll(nearest); /\* 既定 \*/
animation-timeline: scroll(root);
animation-timeline: scroll(self);

/\* 軸を選択する値 \*/
animation-timeline: scroll(block); /\* 既定 \*/
animation-timeline: scroll(inline);
animation-timeline: scroll(y);
animation-timeline: scroll(x);

/\* スクローラーと軸を指定する例 \*/
animation-timeline: scroll(block nearest); /\* 既定 \*/
animation-timeline: scroll(inline root);
animation-timeline: scroll(x self);
```

### 引数

スクローラー

スクロール進行タイムラインを提供するスクローラー要素を示す値には、以下のいずれかを指定します。

`nearest`

どちらかの軸にスクロールバーを持つ、現在の要素の最も近い祖先。これが既定値です。

`root`

文書のルート要素です。

`self`

現在の要素自身です。

軸

スクロールバー軸の値は以下のいずれかになります。

`block`

スクロールコンテナーのブロック軸にあるスクロールバーで、行内のテキストの流れに垂直な方向の軸です。標準的な英語のような横書きモードでは `y` と同じになり、縦書きモードでは `x` と同じになります。これが既定値です。

`inline`

スクロールコンテナーのインライン軸にあるスクロールバーで、行のテキストの流れと平行な方向の軸です。横書きモードでは `x` と同じになり、縦書きモードでは `y` と同じになります。

`y`

スクロールコンテナーの縦軸にあるスクロールバー。

`x`

スクロールコンテナーの横軸にあるスクロールバー。

**メモ:** スクローラーと軸の値は、任意の順序で指定することができます。

### 形式文法
```

<scroll()> =
  scroll( [ <scroller> || <axis> ]? )

<scroller> =
  root     |
  nearest  |
  self

<axis> =
  block   |
  inline  |
  x       |
  y

```

例
-

### 無名スクロール進行タイムラインの設定

 この例では、 `#square` 要素は `scroll()` 関数を使用してアニメーションされる要素に適用される無名スクロール進行タイムラインを使ってアニメーションされます。
 この具体的な例でのタイムラインは、ブロック方向のスクロールバーから、（任意の）スクロールバーを持つ最も近い親要素によって指定されたものです。

#### HTML

例の HTML は下記の通りです。

```html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>
```

#### CSS

 下記の CSS では、`animation-timeline`プロパティで指定されたタイムラインに従って、交互に回転する正方形を定義しています。
 この場合、タイムラインは `scroll(block nearest)` によって指定されます。これはスクロールバーを保有する最も近い祖先要素のブロック方向のスクロールバーを選択することを意味しています。

**メモ:** 実は `block` と `nearest` は既定値なので、`scroll()` だけを使用することができました。

```css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

 コンテナー用の CSS では、コンテナーの高さを 300px に設定し、コンテナーがはみ出した場合に垂直スクロールバーを作成するようにも設定しています。
 "stretcher" の CSS では、ブロックの高さを 600px に設定し、コンテナー要素を強制的にオーバーフローさせます。
 この 2 つを組み合わせることで、コンテナーに垂直スクロールバーを確実に設置し、無名スクロール進行タイムラインのソースとして使用することができます。

```css
#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}
```

#### 結果

スクロールすると、正方形の要素がアニメーションします。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # scroll-notation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS スクロール駆動アニメーション (en-US)
* CSS アニメーションの使用
* `animation-timeline`


CSS 構文エラー - CSS: カスケーディングスタイルシート

CSS 構文エラー
=========

CSS において、値が不正であったりセミコロンが欠落したりといったエラーが存在した場合、ブラウザー（または他のユーザーエージェント）は JavaScript のようにエラーを投げるのではなく、適切に修復します。ブラウザーは CSS 関連のアラートを表示したり、スタイル設定でエラーが発生したことを示したりはしません。ただ、不正な部分を破棄し、その後の有効なスタイルを構文解析します。これは CSS の機能であり、バグではありません。

このガイドでは、 CSS パーサーが不正な CSS を破棄する方法について説明します。

CSS パーサーのエラー
------------

CSS にエラーを見つけると、ブラウザーのパーサーはエラーを含む行を無視し、最小限の CSS コードを破棄してから通常通りの CSS の構文解析処理に戻ります。「エラーの回復」とは、不正な部分を無視したりスキップしたりするだけのことです。

ブラウザーが不正なコードを無視するため、新しい CSS 機能を使用するときに、古いブラウザーにおいて何らかのコードが壊れることを心配することはありません。ブラウザーは新しい機能を認識しないかもしれませんが、それは問題ありません。エラーを発生させずに不正な部分を破棄することで、古い構文と新しい構文を同じルールセットで共存させることができます。例えば、以下の例を見てください。

```css
div {
  display: inline-flex;
  display: inline flex;
}
```

`display` プロパティは、古い 1 つの値と複数キーワードの構文の両方を受け入れます。ブラウザーは新しい構文が有効と認識するまで古い構文でレンダリングし、この時点で新しい構文が古い構文を上書きします。ユーザーが古いブラウザーを使っている場合、有効な代替構文は新しい CSS を無効なものとみなすため、上書きされません。

エラーによってブラウザーが無視する CSS の種類や量は、エラーの種類によって異なります。一般的なエラーの状況を紹介します。

* アットルールのエラーの場合、単一の行を無視するか、アットルール全体を無視するか（失敗するか）は、アットルールとエラーのタイプに依存します。
* 不正なセレクターによるエラーの場合、宣言ブロック全体が無視されます。
* プロパティ宣言の間にセミコロンの欠落によるエラーがあると不正な値が発生し、この場合、複数のプロパティ値の宣言は無視されます。
* プロパティ名または値のエラーの場合、例えばプロパティ名が認識できない、またはデータ型が不正な場合、そのプロパティ値宣言が無視されます。
* 閉じ中括弧がないことによるエラーの場合、無視される範囲はブラウザーがエラーをネストされた CSS として解釈できるかどうかによって変わります。

宣言、スタイル設定、アットルールなどを構文解析した後、ブラウザーは構文解析された部分を、その構文に対して期待される文法に照らして検査します。部分がその構文に対して期待される文法と一致しない場合、ブラウザーはそれを不正なものとみなし、無視します。

### アットルールのエラー

`@` 記号は、 CSS 仕様書では `<at-keyword-token>` として知られていますが、 CSS の `at-rule` の始まりを示します。アットルールが `@` 記号で始まったら、パーサーから見て不正なものは何もないとみなされます。最初のセミコロン (`;`) または中括弧 (`{`) まではすべてアットルールの前置きの一部です。各アットルールの内容は、具体的なアットルールの文法規則に従って解釈されます。

文アットルール、例えば `@import` や `@namespace` 宣言では、前置き部分だけからなります。通常アットルールの場合、セミコロンでアットルールがすぐに終わります。前置き部分がそのアットルールの文法と照らして不正であった場合、そのアットルールは無視され、ブラウザーは次のセミコロンが出現した後から CSS の構文解析を続けます。例えば、 `@import` 文以外の CSS 宣言（ `@charset` や `@layer` など）の後に `@import` アットルールがあった場合、その `@import` 宣言は無視されます。

```css
@import "assets/fonts.css" layer(fonts);
@namespace svg url(http://www.w3.org/2000/svg);
```

パーサーがセミコロンの前に中括弧 (`{`) を見つけた場合、そのアットルールはブロックアットルールとして構文解析されます。ブロックアットルールは `@font-face` や `@keyframes` のように入れ子アットルールとも呼ばれ、中括弧 (`{}`) で囲まれた宣言のブロックを持ちます。開始中括弧により、アットルールの前置きがどこで終わり、アットルールの本体がどこで始まるかをブラウザーが判断します。パーサーは対応するブロック（`()`、`{}`、`[]` で囲まれたコンテンツ）を探しながら、他に対応する中括弧がない閉じ中括弧 (`}`) を探していきます。

アットルールが異なれば、それぞれ文法規則も異なり、記述子も異なり（ない場合もある）、アットルール全体が不正になる条件も異なります。各アットルールに期待される文法と、エラーがどのように処理されるかは、それぞれのアットルールのページで文書化されています。内容が不正だった場合の扱いは、エラーによって異なります。

例えば `@font-face` ルールは、 `font-family` と `src` の両方の記述子が必要です。これらのどちらかが省略されたり無効であったりすると、 `@font-face` ルール全体が不正なものとなります。関係のない記述子がある場合、他に不正な値を持った有効なフォント記述子がある場合、 `@font-face` 入れ子ブロック内にプロパティスタイル宣言があった場合であっても、フォント宣言が無効になることはありません。フォント名とフォントのソースが含まれていて有効である限り、アットルール内の不正な CSS は無視されますが、 `@font-face` ブロックは構文解析されます。

`@keyframe` アットルールの文法は、 `@font-face` ルールの文法とは極めて異なり、エラーの種類が無視される対象に影響します。キーフレームルールでは、重要宣言（`important` フラグで示されるもの）とアニメーションできないプロパティは無視されますが、同じキーフレームセレクターブロックで宣言された他のスタイルには影響しません。不正なキーフレームセレクター（パーセント値が `0%` 未満または `100%` を超えるものや、 `<number>` で `%` を省略したものなど）を記述している場合は、キーフレームセレクターリストが無効となるため、そのスタイルブロックは無視されます。キーフレームセレクターが不正な場合、不正なセレクターのスタイルブロックだけが無効になります。また、 2 種類のキーフレームセレクターブロックの間にスタイルを記述すると、 `@keyframe` のアットルール全体が無効になります。

アットルールによっては、常に有効なものもあります。 `@layer` アットルールには通常形と入れ子形があります。 `@layer` 文は前置き部分だけで、セミコロンで終わります。一方、入れ子構文では、レイヤースタイルは中括弧の間で入れ子になっており、中括弧は前置きの後に来ます。閉じ中括弧を省略すると論理エラーになることはありますが、構文エラーにはなりません。 `@layer` の閉じ中括弧がない場合、閉じ中括弧があるべき場所にスタイルが来ると、アットルールの前置きで定義されたカスケードレイヤーにあるものとして解釈されます。構文エラーがないため、この CSS は有効です。構文エラーが発生すると、名前付きまたは無名のレイヤーが空になる可能性がありますが、レイヤーは作成されます。

### セレクターリストのエラー

セレクターの書き間違いの形はたくさんありますが、セレクターリストが不正になるのは不正なセレクターだけです（無効なセレクターリストを参照してください）。

`クラス`、`id`、`要素型`セレクターで、存在しないクラス、id、要素（またはカスタム要素）を記述した場合、それは論理エラーかもしれませんが、構文エラーではありません。しかし、擬似クラスや擬似要素にスペルミスがあった場合は、不正なセレクターが作成された可能性があり、パーサーが対処すべきエラーとなります。

セレクターリストに不正なセレクターが含まれていた場合、そのスタイルブロック全体が無視されます。例外もあります。不正なセレクターが `:is` または `:where` 擬似クラス（寛容なセレクターリストを受け入れる）の中にあった場合、または未知のセレクターが `-webkit-` 接頭辞付き擬似要素であった場合、未知のセレクターだけがどのセレクターにも一致しないものとして無視されます。セレクターリストは不正なものにはなりません。

これらの例外以外では、セレクターリストで単一の無効な、あるいは対応していないセレクターがあると、ルール全体が不正なものとなり、セレクターブロック全体が無視されます。ブラウザーは閉じ中括弧を探し、その点から構文解析を続けます。

#### `-webkit-` の例外

セレクターやプロパティ名（および値）にブラウザー固有の接頭辞を多用することによる互換性問題のため、ブラウザーは、擬似要素のうち大文字と小文字を区別しない `-webkit-` 接頭辞で始まり `()` で終わらないものをすべて有効なものとして扱うことで、セレクターリストが不正と扱われすぎることを避けています。

これは、 `::-webkit-works-only-in-samsung` のような擬似要素が、コードがどのブラウザーで実行されているかにかかわらず、セレクターリストを不正なものにしないという意味です。このような場合、擬似要素はブラウザーに認識されなかったり対応していなかったりしても、セレクターリスト全体とそれに関連するスタイルブロックが無視されることにはなりません。一方、 `::-webkit-imaginary-function()` という関数記法を伴う未知の接頭辞つきセレクターがあると、セレクターリスト全体が不正なものとなり、ブラウザーはそのセレクターブロック全体を無視します。

### CSS 宣言ブロック内のエラー

宣言ブロック内の CSS プロパティと値に関しては、プロパティか値のどちらかが不正な場合、そのプロパティと値のペアは無視され、破棄されます。ユーザーエージェントが宣言のリストを構文解析するとき、未知の構文がどこかにあると、ブラウザーは現在の宣言だけを破棄します。そして、次のセミコロンか閉じ中括弧のどちらかが現れた後、 CSS の構文解析を続けます。

この例にはエラーが含まれています。パーサーはエラー（とコメント）を無視し、セミコロンに出会うまで進み、それから構文解析を再開します。

```css
p {
/\* セミコロンがないため不正な構文 \*/
  border-color: red
  background-color: green;

/\* 有効な構文だが、おそらく論理エラー \*/
  border-width: 100vh;
}
```

このセレクターブロックの最初の宣言が不正なのは、セミコロンが欠落しており、かつその宣言がセレクターブロックの最後の宣言ではないからです。セミコロンが抜けているプロパティは無視され、それに続くプロパティと値のペアも同様に無視されます。なぜなら、ブラウザーはセミコロンまたは閉じ括弧に遭遇した後からのみ構文解析を続けるからです。具体的には、 `border-color` 値は `red background-color: green;` として解釈されますが、これは有効な `<color>` 値ではありません。

`border-width` の `100vh`という値はおそらく間違いでしょうが、エラーではありません。構文的には有効なので、構文解析され、セレクターに一致する要素に適用されます。

#### ベンダー接頭辞

ベンダー接頭辞のついたプロパティ名やプロパティ値は、ブラウザーが理解できない場合、不正なものとして扱われ、無視されます。不正なプロパティや値を持つ個々のルールだけが無視されます。パーサーは、次のセミコロンまたは閉じ中括弧を探して、そこから構文解析を続けます。

以下のような古い CSS を見かけることがあるかもしれません。

```css
/\* 接頭辞付きの値 \*/
.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  display: block flex;
}
/\* 接頭辞付きのプロパティ \*/
.rounded {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
```

この例では、各ブロックの最後の宣言 — `display: flex;` と `border-radius: 50%;` — は、すべてのブラウザーで有効です。カスケードには出現順ルールがあるため、ブラウザーは理解できる接頭辞の宣言を適用し、それらの値を標準の接頭辞なしバージョンで上書きします。

**メモ:** 接頭辞の付いたプロパティやプロパティ値を含めることは、可能な限り避けてください。どうしても使用する必要がある場合は、接頭辞付きバージョンを接頭辞なしバージョンの前に宣言してください。

### 末尾の自動終了におけるエラー

ルール、宣言、関数、文字列、コメントが終了せずにスタイルシートが終了すると、パーサーは閉じていないものを自動的にすべて閉じます。

**メモ:** これは、外部スタイルシート、 HTML の `<style>` 要素内のセレクターブロック、`style` 属性内のインラインルールに当てはまります。

最後のセミコロンからスタイルシートの終わりまでの内容が有効であれば、たとえ不完全であっても、 CSS は正常に構文解析されます。例えば、 `<style>` を閉じる前に `@keyframe` 宣言を閉じなかった場合でも、アニメーションは有効になります。

```html
<style>
@keyframes move {
 100% {
 transform: translatex(100vw)
</style>
```

ここでは `move` アニメーションは有効になります。 CSS の記述が適切に閉じられなくても、その記述が不正なものになるとは限りません。だからと言って、 CSS の寛容な性質を利用してはいけません。文とスタイルブロックは常にすべて閉じましょう。そうすることで、 CSS が読みやすくなり、維持しやすくなります。また、ブラウザーが意図通りに CSS を構文解析できるようになります。

#### 閉じていないコメント

閉じていないコメントは論理エラーであり、構文エラーではありません。コメントが `/*` で始まっているが閉じていない場合、それに続くコメントの区切り文字 (`*/`)、またはスタイルシートの終わりのどちらかが先に来るまで、すべての CSS コードがコメントの一部になります。コメントが閉じられていなくても CSS が不正なものになるわけではありませんが、区切り文字 (`/*`) に続く CSS は無視されます。

```html
<style>
 /\* このコメントは閉じていない
 @keyframes move {
 0% {transform: translatex(0);}
 100% {transform: translatex(100vw);}
 }
</style>
<p style="/\* これも閉じていないコメント">HTML として構文解析される</p>
```

この例では、 2 つの CSS コメントは閉じていませんが、 `</style>` 閉じタグが 1 つ目のコメントを閉じ、 `style` 属性の閉じ引用符が 2 つ目のコメントを閉じています。

文法チェック
------

それぞれの宣言、スタイルルール、アットルールなどを構文解析した後、ユーザーエージェントは文法がその宣言のルールに従っているかどうかを調べます。例えば、プロパティ値が間違ったデータ型であったり、記述子が記述されているアットルールに対して有効でない場合など、期待される文法に一致しないコンテンツは不正なものとみなされ、無視されます。

それぞれの CSS プロパティは特定のデータ型を受け入れます。例えば、 `background-color` プロパティは、有効な `<color>` か CSS グローバルキーワードのどちらかを受け入れます。プロパティに代入された値が `background-color: 45deg` のように不正な型である場合、その宣言は不正であるため無視されます。

### 不正なカスタムプロパティ

カスタムプロパティは一般的に、宣言されたときは有効ですが、アクセスしたときに不正な CSS になる可能性があります。つまり、その値の型を受け入れないプロパティの値として（`var()` 関数を介して）使用される可能性があります。ブラウザーは、プロパティが消費される場所に関係なく、遭遇したときに各カスタムプロパティを構文解析します。

通常、プロパティ値が不正であった場合、その宣言は無視され、プロパティは最後に有効であった値に戻ります。しかし、計算されたカスタムプロパティの値が不正な場合は、少し異なる形で動作します。

`var()` による代入が無効な場合、宣言は無視されず、プロパティの初期値または継承値が代わりに使用されます。プロパティには新しい値が設定されますが、期待した値ではない可能性があります。

この動作を示す例を見ていきましょう。

```css
:root {
  --theme-color: 45deg;
}
body {
  background-color: var(--theme-color);
}
```

上記のコードでは、カスタムプロパティの宣言は有効です。また、 `background-color` の宣言も計算時点では有効です。しかし、ブラウザーが `var(--theme-color)` のカスタムプロパティの値である `45deg` を `background-color` プロパティの値として代入すると、文法は不正なものになります。 `<angle>` は有効な `background-color` 値ではありません。この場合、宣言は不正なものとして無視されるわけではありません。カスタムプロパティの型が誤っている場合、プロパティが継承可能であれば、値はその親から継承されます。プロパティが継承可能でない場合、初期値が使用されます。 `background-color` の場合、プロパティの値は継承される値ではないので、初期値の `transparent` が使用されます。

カスタムプロパティが代替する方法をうまく制御するには、 `@property` アットルールを使用してプロパティの初期値を定義してください。

```css
@property --theme-color {
  syntax: "<color>";
  inherits: false;
  initial-value: rebeccapurple;
}
```

関連情報
----

* CSS 構文モジュール
* 構文ガイド
* 値の定義構文


通常フローでのブロック及びインラインレイアウト - CSS: カスケーディングスタイルシート

通常フローでのブロック及びインラインレイアウト
=======================

このガイドでは、通常フローの中でブロック及びインライン要素がどのように動作するかの基本を見てみます。

通常フローは CSS 2.1 仕様書で定義されており、通常フロー内のあらゆるボックスが*整形コンテキスト*の一部になることを説明しています。ブロックかインラインのどちらかになることができますが、同時に両方になることはできません。*ブロック整形コンテキスト*に参加するものをブロックレベルボックス、*インライン整形コンテキスト*に参加するものをインラインレベルボックスと呼んでいます。

ブロックまたはインライン整形コンテキストを持つ要素の動作は、この仕様書でも定義されています。ブロック整形コンテキストを持つ要素については、仕様書では以下にように言っています。

>
> "ブロック整形コンテキストでは、ボックスは次々と垂直に、包含ブロックの上からレイアウトされます。二つの兄弟ボックスの間の垂直距離は、 'margin' プロパティで指定されます。ブロック整形コンテキストにおいて、隣り合うブロックレベルボックスの間の垂直マージンは相殺されます。
>
>
> ブロック整形コンテキストの中では、それぞれのボックスの左外側の端は、包含ブロックの左端に接します (右書きの整形では、右端が接します)。" - 9.4.1
>
>
>

インライン整形コンテキストを持つ要素については以下の通りです。

>
> "インライン整形コンテキストでは、ボックスは包含ブロックの上から次々と水平に、レイアウトされます。これらのボックスの間では、水平マージン、境界、パディングが尊重されます。ボックスは垂直方向には様々な方法で配置されます。下や上に配置されたり、テキストのベースラインに配置されたりします。1 行を形成するボックスを含む矩形の領域は行ボックスと呼ばれます。" - 9.4.2
>
>
>

なお、 CSS 2.1 仕様書では、横書きで上から下へ向かう書字方向の文書を説明しています。例えば、ブロックボックス間を垂直距離によって説明しています。ブロックおよびインライン要素の動作は、縦書きの書字方向でも同様に動作するものであり、今後のフローレイアウトと書字方向のガイドで明らかにする予定です。

ブロック整形コンテキストに参加する要素
-------------------

英語のように書字方向が横書きのブロック要素は、垂直方向に、1 つずつ下方向にレイアウトされます。

![](/ja/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow/mdn-horizontal.png)

書字方向が縦書きである場合は、水平方向にレイアウトされるでしょう。

![](/ja/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow/mdn-vertical.png)

このガイドでは、英語、すなわち横書きモードでの作業となります。しかし、文書が縦書きの場合でも、説明したことはすべて同じように動作するはずです。

仕様書で定義されているように、2 つのブロックボックスの間のマージンは、要素間に区切りを作るものです。2 つの段落から成るとても単純なレイアウトで、境界を追加したところに見ることができます。既定ののブラウザースタイルシートでは、上下にマージンを追加することで、段落間の間隔が追加されています。

段落要素のマージンを `0` にすると、境界線が接触します。

既定では、ブロック要素はインライン方向の空間をすべて消費するので、段落は広がり、包含ブロックの中で可能な限り大きくなります。ブロック要素に幅を設定した場合、段落が横に並ぶ空間があったとしても、段落は下へ下へと配置されます。それぞれは包含ブロックの先頭側の反対側から始まりますので、その書字方向で文章が始まる場所になります。

### マージンの相殺

仕様書では、ブロック要素間のマージンは*相殺される*と説明されています。つまり、上マージンを持つ要素がに下マージンを持つ要素の直後に来た場合、空間の合計はこれら 2 つのマージンの合計になるのではなく、マージンが相殺され、本質的には 2 つのマージンのうち大きい方のマージンと同じくらいの大きさになるということです。

下記の例では、段落の上マージンが `20px`、下マージンが `40px` となっています。段落間のマージンの大きさは、2 段落目の小さい上マージンが 1 段目の大きい下マージンで相殺されるため、 `40px` になります。

マージンの相殺については、マージンの相殺の記事で詳しく解説しています。

**メモ:** マージンが相殺されているかどうか分からない場合は、ブラウザーのの DevTools でボックスモデルの値を確認してください。これにより、マージンの実際のサイズが表示されるので、何が起こっているかを特定するのに役立ちます。

![](/ja/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow/box-model.png)

インライン整形コンテキストに参加する要素
--------------------

インライン要素は、その特定の書字方向で文章が進む方向に次々と表示されます。インライン要素がボックスを持っていると考えることはあまりありませんが、 CSS のすべての要素と同様にボックスを持っています。これらのインラインボックスは、次から次へと配置されています。すべてのボックスを含むブロックに十分な空間がない場合、ボックスは新しい行に分割されます。生成された行は行ボックスと呼ばれています。

以下の例では、段落の内部に `<strong>` 要素があることで生成された 3 つのインラインボックスがあります。

`<strong>` 要素の前と `<strong>` 要素の後の言葉の周りのボックスは無名ボックスと呼ばれ、すべてがボックスに含まれていることを保証するために導入されていますが、私たちが直接ターゲットにすることはできません。

行ボックスのブロック方向の寸法 (すなわち英語で作業しているときは高さ) は、その中の最も高さが高いボックスによって定義されます。次の例では、 `<strong>` 要素に 300% に設定しました。その内容がその行の行ボックスの高さを定義するようになります。

ブロックボックスとインラインボックスの動作についての詳細は、視覚整形モデルのガイドを参照してください。

display プロパティとフローレイアウト
----------------------

CSS 2.1 に存在する規則に加えて、新しい水準の CSS では、ブロックボックスとインラインボックスの動作がさらに記述されています。 `display` プロパティは、ボックスとその中のボックスの動作を定義します。 CSS Display Model Level 3 では、 `display` プロパティがどのようにボックスや生成されるボックスの動作を変えるのかを知ることができます。

要素の表示種別は、外部表示型として、ボックスが同じ整形コンテキスト内の他の要素とどのように並んで表示されるかを定義します。また、内部表示型として、この要素内のボックスがどのように動作するかを決定します。フレックスボックスレイアウトを考えると、このことがよくわかります。下の例には `<div>` があり、それに `display: flex` を指定しています。フレックスコンテナーはブロック要素のように動作しており、新しい行に表示されてインライン方向に取ることができるすべての空間を取っています。これは外部表示型が `block` であるということです。

フレックスアイテムはフレックス整形コンテキストに参加しています。これは、その親は `display: flex` を持つ要素であり、これは `flex` の内部表示型を持っているため、直接の子にフレックス整形コンテキストを確立しているためです。

したがって、 CSS のすべてのボックスはこのように動作していると考えることができます。ボックス自体は外部表示型を持っているので、どのように他のボックスと並ぶよう動作するかを知っています。次に、ボックスは内部表示型を持ち、子ボックスの動作を変更します。これらの子も、外部と内部の表示型を持っています。前の例でフレックスアイテムはフレックスレベルのボックスになるので、フレックス整形コンテキストの一部として外部表示型が指定されます。しかし、これらのアイテムの内部表示型は*フロー*であり、子アイテムは通常フローに参加します。フレックスアイテムの内部に含まれているアイテムは、何か表示型が変更されない限り、ブロックおよびインライン要素として配置されます。

外部と内部の表示型というこの概念は、フレックスボックス (`display: flex`) やグリッドレイアウト (`display: grid`) などのレイアウト方法を使用しているコンテナーも、外部表示型が `block` であるために、ブロックとインラインのレイアウトに参加しているということを教えてくれるので重要です。

### 要素が参加する整形コンテキストの変更

ブラウザーはアイテムを、その要素が通常ブロックやインラインの整形コンテキストの一部としての意味を持つものとして表示します。例えば、 `<strong>` 要素は単語を強調するために使用され、ブラウザーでは太字で表示されます。一般には、 `<strong>` 要素がブロックレベルの要素として表示され、改行して表示されるという意味は持ちません。すべての `<strong>` 要素をブロック要素として表示したい場合は、 `<strong>` に `display: block` を設定することで実現できます。これは、コンテンツのマークアップにほとんど意味に応じて HTML 要素を使用し、表示方法を変更するのに CSS を使用することができることを意味します。

まとめ
---

このガイドでは、通常のフローで要素がブロック要素やインライン要素として、どのように表示されるかを見てきました。これらの要素の既定の動作により、 CSS のスタイリングが全くない HTML 文書は、読みやすい形で表示されます。通常のフローがどのように機能するかを理解することで、要素の表示方法を変更するための出発点を理解し、レイアウトを容易にすることができるようになります。

関連情報
----

* CSS 基本ボックスモデル
* *通常フロー* - レイアウトの学習
* インライン要素 (en-US)
* ブロックレベル要素


フロー内とフローの外 - CSS: カスケーディングスタイルシート

フロー内とフローの外
==========

前のガイドでは、通常フロー内でのブロック及びインラインレイアウトを説明しました。フロー内のすべての要素は、この方法を使用して配置されます。

以下の例では、見出し、段落、リスト、そして `strong` 要素を含む最後の段落があります。見出しと段落はブロックレベルで、 `strong` 要素はインラインです。リストはフレックスボックスを使用してアイテムを 1 行に配置していますが、ブロックレイアウトとインラインレイアウトの両方に対応しています。 - コンテナーは外側で `display` が `block` になっています。

すべての要素がフローの中にあるといえます。ページ上にはソース内にある順序で出現しています。

項目のフローの外への持ち出し
--------------

以下のものを除いて、すべての要素がフロー内にあります。

* 浮動アイテム
* `position: absolute` のアイテム (同様に機能する `position: fixed` を含む)
* ルート要素 (`html`)

フローの外のアイテムは、新しいブロック整形コンテキスト (BFC) を作成するので、その中のものはページの残りから独立して、小さなレイアウトのように見えます。したがってルート要素はフローの外で、文書内のすべてのコンテナーとして、文書のブロック整形コンテキストを確立します。

### 浮動アイテム

この例では 1 つの `div` と、それから 2 つの段落があります。段落には背景色を塗っており、 `div` を左側に浮動させました。 `div` はフローの外になりました。

浮動アイテムとして、最初は通常のフローであるようにレイアウトされますが、そのあとでフローから取り出され、左側のできるだけ遠くに移動されました。

次の段落の背景色が下層に表示されているのが見えます。その段落の行ボックスだけが短縮され、浮動アイテムの周りでコンテンツを折り返す効果があります。段落のボックスは、通常のフローの規則に従って表示されます。このため、行ボックスから距離を置くために浮動アイテムの周りに間隔を作るには、アイテムにマージンを追加する必要があります。このために以下のフロー内のコンテンツに追加することができるものはありません。

### 絶対位置指定

アイテムに `position: absolute` または `position: fixed` を与えると、アイテムをフローから外し、アイテムが占めるはずだった空間も除去されます。次の例では、3 つの段落要素を用い、2 番目の要素は `position` を `absolute` にし、オフセット値を `top: 30px` および `right: 30px` としています。アイテムは文書フローから除去されています。

`position: fixed` を使用しても、アイテムをフローから除去しますが、オフセットは包含ブロックではなくビューポートからのものになります。

位置指定してアイテムをフローの外に持ち出す場合、コンテンツが重複する可能性を管理する必要があります。フローの外ということは、基本的にページ内の他の要素が、その要素が存在することを知ることがなく、従って影響を与えないことを意味します。

### 相対位置指定とフロー

アイテムに `position: relative` によって相対位置を与えた場合、フロー内には残りますが、周囲を押し広げるためにオフセット値を使用することができます。しかし、以下の例のように、通常フローで配置するはずだった空間は予約されます。

アイテムを除去するために何かをしたり、アイテムを通常フローで配置される場所からずらしたりした場合は、重ならないようにコンテンツやコンテンツの周囲を管理する必要が出てくる可能性があります。浮動をクリアしたり、要素に `position: absolute` を設定して他のコンテンツの上に来ないようにします。このため、フロー内の要素を除去する方法は、このような影響を理解したうえで使用する必要があります。

まとめ
---

このガイドでは、特定の種類の位置指定を実現するために、要素をフローの外に持ち出す方法を紹介しました。次のガイドでは、 Formatting Contexts Explained の中で、ブロック整形コンテキストを作成する上での関連する問題を見てみます。

関連情報
----

* レイアウトの学習: *位置指定*


フローレイアウトと書字方向 - CSS: カスケーディングスタイルシート

フローレイアウトと書字方向
=============

通常フローの動きについて詳細を説明している CSS 2.1 仕様書は、横書きを想定しています。レイアウトプロパティは縦書きモードでも同様に動作するべきです。このガイドでは、異なる文書の書字方向が使われた場合のフローレイアウトの動作を見てみましょう。

これは CSS での書字方向の使用に関する包括的なガイドではなく、ここでの目的は、フローレイアウトと書字方向の起こりうる相互作用が予想できないような領域を文書化することです。この文書の外部リソースや関連情報の節で、書字方向に関するより多くのリソースを紹介します。

書字方向の仕様書
--------

CSS Writing Modes Level 3 仕様書では、フローレイアウトで文書の書字方向が変更された時の影響を定義しています。仕様書の書字方向の導入部では、以下のように書かれています。

>
> "CSS の書字方向は `writing-mode`, `direction`, `text-orientation` プロパティによって決められます。これは主にインラインベース方向とブロックフロー方向から決まります。"
>
>
>

仕様書では*インラインベース方向*を、行内でコンテンツが並べられる方向として定義しています。ここでは、インライン方向の始点と終点を定義しています。始点は文が始まるところであり、終点はテキストの行が終わり、新しい行への折り返しが始まる前です。

*ブロックフロー方向*は、段落などのボックスが、その書字方向で積み重なる方向です。 CSS の writing-mode プロパティは、ブロックフロー方向を制御します。ページまたはページの一部を `vertical-lr` に変更したい場合、要素に `writing-mode: vertical-lr` と設定し、これがブロックの方向を変更して、従ってインライン方向も同様に変更します。

特定の言語では書字方向やテキストの方向が使用されますが、これらの方向を創造的な効果として、例えば見出しを縦書きにするために使用することができます。

`writing-mode` プロパティとブロックフロー
----------------------------

`writing-mode` プロパティは `horizontal-tb`, `vertical-rl`, `vertical-lr` の値を受け入れます。これらの値はページのブロックフローの方向を制御します。初期値は `horizontal-tb` で、ブロックフロー方向は上から下で、インライン方向は横書きとなります。英語のような左書きの言語、アラビア語のような右書きの言語は、すべて `horizontal-tb` です。

以下の例は `horizontal-tb` を使用したブロックを示しています。

vertical-rl の値は、次の例に見られるように、ブロックフロー方向は右から左で、インライン方向は縦書きになります。

最後の例では `writing-mode` の第三の値である `vertical-lr` を紹介します。ブロックフロー方向は左から右で、インライン方向は縦書きになります。

書字方向が親と異なるボックス
--------------

親とは書字方向が異なる内部のボックスを作成した場合、インラインレベルボックスは `display: inline-block` であるかのように表示されます。

ブロックレベルボックスは新しいブロック整形コンテキストを生成し、つまり内部の display 種別が `flow` であれば、 display 種別の計算値は `flow-root` になります。次の例では、親が新しいブロック整形コンテキストを確立するため、 `horizontal-tb` で表示される浮動要素を含むボックスがどこに表示されるかを確認できます。

置換要素
----

画像などの置換要素は、 `writing-mode` プロパティによって方向が変更されません。しかし、テキストを含むフォームコントロールのような置換要素は、使用中の書字方向に一致するでしょう。

論理的プロパティと値
----------

書字方向を `horizontal-tb` 以外にして作業をすると、画面の物理的な寸法に合わせられた多くのプロパティと値はおかしく見えます。例えば、 `horizontal-tb` の中でボックスの幅を 100px に設定すると、インライン方向の寸法を制御することになります。 `vertical-lr` では、ブロック方向の寸法を制御することになり、テキストに合わせて回転するわけではありません。

従って、新しいプロパティ `block-size` および `inline-size` ができました。ブロックの `inline-size` を 100px に設定すると、書字方向が横書きか縦書きかに関わらず、 `inline-size` は常にインライン方向の寸法を意味します。

CSS 論理的プロパティと値の仕様書は、マージン、パディング、境界の制御や、その他の通常は物理的な方向を使用して指定するものの論理バージョンのプロパティを含んでいます。

まとめ
---

多くの場合、フローレイアウトは文書や文書の一部の書字方向を変更したときに、期待通りに動作するでしょう。これはふつう、縦書きの言語や創造的な理由で使用することができます。 CSS は論理的プロパティと値を導入することで、縦書き時にインラインやブロック方向に基づいて寸法を決めやすくしています。これはどの書字方向でも動作するコンポーネントを作成するのに便利です。

関連情報
----

* 書字方向
外部リソース
------

* *CSS Writing Modes*, Jen Simmons on 24 Ways


整形コンテキストの紹介 - CSS: カスケーディングスタイルシート

整形コンテキストの紹介
===========

この記事では整形コンテキストの概念を紹介します。ブロック整形コンテキスト、インライン整形コンテキスト、フレックス整形コンテキストなど、いくつかの種類があります。どのように動作するのか、これらの動作をどのように利用できるのかについても紹介します。

ページ上のすべてのものが**整形コンテキスト**、またはコンテンツを特定の方法でレイアウトする際に定義されている領域の一部です。**ブロック整形コンテキスト** (BFC) は、子要素をブロックレイアウトの規則に則って配置し、**フレックス整形コンテキスト**は、子要素をフレックスアイテムとして配置するなどです。それぞれの整形コンテキストは、そのコンテキストにあるときにどのようにレイアウトを行うかの特定の規則を持っています。

ブロック整形コンテキスト
------------

ブロックレイアウト規則を使用する文書の中で一番外側の要素は、最初の、あるいは**初期ブロック整形コンテキスト**を確立します。これは、 `<html>` 要素のブロック内のすべての要素が、ブロックおよびインラインレイアウトの規則に従って、通常のフローに従ってレイアウトされることを意味します。ブロック整形コンテキスト (BFC) に参加する要素は、 CSS ボックスモデルによって概説された規則を使用します。これは、要素のマージン、境界、パディングが同じコンテキスト内の他のブロックとどのように相互作用するかを定義します。

### 新しいブロック整形コンテキストの生成

`<html>` 要素がブロック整形コンテキストを生成できる唯一の要素ではありません。どのブロックレベルの要素でも、特定の CSS プロパティを適用することで BFC を生成することができます。

新しい BFC は以下のような場面で生成されます。

* `float` を使用して浮動状態になった要素
* 絶対位置指定の要素 (`position: fixed` または `position: sticky` を含む)
* `display: inline-block` の要素
* 表のセル、または `display: table-cell` が指定された要素で、 `display: table-*` プロパティを使用して生成された無名の表のセルを含む
* テーブルのキャプション、または `display: table-caption` が付いた要素
* `overflow` が `visible` 以外の値であるブロック要素
* `display: flow-root` または `display: flow-root list-item` の要素
* `contain: layout`, `content`, `strict` のいずれかの要素
* フレックスアイテム
* グリッドアイテム
* 段組みコンテナー
* `column-span` が `all` に設定された要素

これは、新しい BFC がメインレイアウトの中でミニレイアウトとなり、一番外側の文書のように動作するので便利です。 BFC はその中にすべてを含み、 `float` と `clear` は同じ整形コンテキスト内の項目にのみ適用され、マージンは同じ書式設定コンテキスト内の要素間でのみ相殺されます。

### BFC が生成される例

新しい BFC を生成する効果を見るために、いくつかの例を見てみましょう。

下の例では、境界が適用された `<div>` の中に浮動要素があります。その `<div>` の内容は、その浮動要素の横に並んでいます。その浮動要素の内容は、その横にある内容よりも高さが高いため、 `<div>` の境界線がその浮動要素を通過するようになりました。フロー内とフローの外のガイドで説明されているように、浮動要素はフローから外れているので、 `<div>` の背景と境界には内容だけが含まれ、浮動要素は含まれません。

新しい BFC を生成すると浮動要素が収まります。これまでよく使われてきた方法は、 `overflow: auto` または初期値である `overflow: visible` 以外の値を設定することでした。

`overflow: auto` を設定することで、浮動要素を含む新しい BFC を生成しました。 `<div>` はレイアウト内のミニレイアウトになりました。すべての子要素はその中に収まります。

`overflow` を使って新しい BFC を生成する場合の問題点は、 `overflow` プロパティは、あふれた内容をどのように処理したいかをブラウザーに伝えるためのものだということです。このプロパティを純粋に BFC を作成するために使用した場合、意図せずにスクロールバーが現れたり、影がクリッピングされたりすることに気づくこともあるでしょう。さらに、 `overflow` を使用した理由が明らかにならないこともあるかもしれないので、将来の開発者からは理解しやすくない可能性があります。このような場合は、コードにコメントをつけて説明するのが良いでしょう。

### display: flow-root を使用した明示的な BFC の生成

包含ブロックに `display: flow-root` (または `display: flow-root list-item`) を使用すると、問題を起こす副作用が発生することなく新しい BFC を生成することができます。

`display: flow-root` を `<div>` に指定すると、コンテナー内のすべてのものがそのコンテナーのブロック整形コンテキストに参加し、浮動要素が要素の底から飛び出すことはなくなります。

`flow-root` キーワードの名前は、新しいコンテキストがどのように作成され、そのフローレイアウト機能がどのように機能するかを考えると、本質的には (`<html>` にように) 新しいルート要素のような役割を果たすものを生成しているという事実を示しています。

インライン整形コンテキスト
-------------

インライン整形コンテキストは、他の整形コンテキストの中に存在する、段落のコンテキストと考えることができます。段落は、テキスト上で `<strong>`, `<a>`, `<span>` などの要素が使われた場合のようなインライン整形コンテキストを作成します。

ボックスモデルは、インライン整形コンテキストに参加している項目には完全には適用されません。横書きモードの行では、水平方向のパディング、境界、マージンが要素に適用され、テキストを左右に押しのけます。ただし、要素の上下のマージンは適用されません。水平のパディングや境界は適用されますが、インライン整形コンテキストでは、ラインボックスがパディングや境界によって押し広げられることはないため、上下の内容が重なる可能性があります。

その他の整形コンテキスト
------------

このガイドはフローレイアウトを対象としているため、他のありうる整形コンテキストについては言及していません。そのため、どのような種類の整形コンテキストを作成しても、その整形コンテキスト内の要素の動作が変わることを理解しておくと便利です。この動作は常に仕様書に記述されており、ここ、 MDN にも記述されています。

まとめ
---

このガイドでは、ブロックおよびインライン整形コンテキストにおける詳細と、ブロック整形コンテキスト (BFC) を生成することの重要な目的を見てきました。次のガイドでは、通常フローがどのように様々な所持方向に対応するかを見ていきます。

関連情報
----

* ブロック整形コンテキスト (BFC)
* 視覚整形モデル
* CSS ボックスモデル


フローレイアウトとオーバーフロー - CSS: カスケーディングスタイルシート

フローレイアウトとオーバーフロー
================

コンテナーに収まらない量のコンテンツがある場合、オーバーフローが発生します。どのようにオーバーフローが動作するかを理解することは、 CSS で制約された寸法で要素を扱うのに重要です。このガイドでは、通常フローで作業中にオーバーフローがどのように起こるかを説明します。

オーバーフローとは
---------

Giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example:

The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the `overflow` property which has an initial value of `visible`. This is why we can see the overflow content.

オーバーフローの制御
----------

There are other values that control how overflow content behaves. To hide overflowing content use a value of `hidden`. This may cause some of your content to not be visible.

Using a value of `scroll` contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.

Using a value of `auto` will display the content with no scrollbars if the content fits inside the box. If it doesn't fit then scrollbars will be added. Comparing the next example with the example for `overflow: scroll` you should see `overflow scroll` has horizontal and vertical scrollbars when it only needs vertical scrolling. The `auto` example below only adds the scrollbar in the direct we need to scroll.

As we have already learned, using any of these values, other than the default of `visible,` will create a new Block Formatting Context.

Note: In the Working Draft of Overflow Level 3, there is an additional value `overflow: clip`. This will act like `overflow: hidden` however it does not allow for programmatic scrolling, the box becomes non-scrollable. In addition it does not create a Block Formatting Context.

The overflow property is in reality a shorthand for the `overflow-x` and `overflow-y` properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for `overflow-x` and therefore the horizontal direction, and the second for `overflow-y` and the vertical direction. In the below example, I have only specified `overflow-y: scroll` so we do not get the unwanted horizontal scrollbar.

フロー関係のプロパティ
-----------

In the guide to Writing Modes and Flow Layout, we looked at the newer properties of `block-size` and `inline-size` which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The Level 3 Overflow Module also includes flow relative properties for overflow - `overflow-block` and `overflow-inline`. These correspond to `overflow-x` and `overflow-y` but the mapping depends on the writing mode of the document.

These properties currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing mode.

オーバーフローの指示
----------

In the Level 3 Overflow specification we have some properties which can help improve the way content looks in an overflow situation.

### インライン軸のオーバーフロー

The `text-overflow` property deals with text overflowing in the inline direction. It takes one of two values `clip`, in which case content is clipped when it overflows, this is the initial value and therefore the default behaviour. We also have `ellipsis` which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.

### ブロック軸のオーバーフロー

There is also a proposal for a `block-overflow` property, although at the time of writing the name is still up for discussion. This proposal would enable the adding of an ellipsis when text overflows in the block dimension.

This is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text. It may not be obvious to the reader that there is more content to click through to when clicking the box or the title. An ellipsis indicates clearly the fact there is more content. The specification would allow a string of content or a regular ellipsis to be inserted.

まとめ
---

Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.


CSS の z-index を理解する - CSS: カスケーディングスタイルシート

CSS の z-index を理解する
===================

最も基本的な場合では、 HTML のページは二次元であると考えることができ、テキスト、画像、その他の要素が重なることなくページに並べられます。この場合、単一のレンダリングの流れがあり、すべての要素で他の要素との間で取る間隔が分かっています。 `z-index` 属性で、コンテンツの描画時にオブジェクトの重なり合いの順番を調整することができます。

>
> *CSS 2.1 では、各ボックスは三次元空間の座標を持ちます。ボックスは、水平方向と垂直方向に加えて、垂直方向の "z 軸" に沿って配置され、その中で一番上の1つが整形されます。 Z 軸の位置は、特にボックス同士が視覚的に重なる場合に関係します。*
>
>
>

(CSS 2.1 Section 9.9.1 - Layered presentation より)

これは、 CSS のスタイルルールによって、ボックスを通常の描画レイヤー (レイヤー 0) 以外のレイヤーに配置できるということです。各レイヤーの Z 位置は、描画処理の重ね合わせ順を示す整数値で表現されます。数値が大きいほど、見ている人に近いことになります。 Z 位置は CSS の `z-index` プロパティで制御できます。

`z-index` を使うのは非常に簡単に見えます。単一のプロパティに、単一の整数値を割り当て、分かりやすい振る舞いをします。しかし、 `z-index` を HTML 要素の複雑な階層に適用するとき、その振る舞いは理解や予測がしづらくなることがあります。これは重ね合わせの規則が複雑であるためです。これは、複雑な重ね合わせ規則によるものです。実際、CSS 仕様書ではこれらの規則をより詳しく説明するための専用のとして CSS-2.1 Appendix E が設けられています。

この記事では、いくつかの例を挙げながら、それらのルールを簡単に説明してみます。

記事
--

1. `z-index` なしの重ね合わせ: 既定の重ね合わせ規則
2. 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
3. z-index の使用: `z-index` を使って既定の重ね合わせ変更する方法
4. 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
例
-

1. 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
2. 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
3. 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`


重ね合わせコンテキストの例 2 - CSS: カスケーディングスタイルシート

重ね合わせコンテキストの例 2
===============

解説
--

これはとても簡単な例ですが、*重ね合わせコンテキスト*の概念を理解するカギになります。前の例には同じ 4 つの DIV 要素がありましたが、今度は両方の階層構造で `z-index` プロパティが設定されています。

DIV #2 (`z-index`: 2) が DIV #3 (`z-index`: 1) よりも上にあることがわかります。これは、どちらも同じ重ね合わせコンテキスト（ルートのもの）に属していて、z-index 値が要素の重なり方を決めているからです。

変に思えるかもしれないのは、`z-index` の値に関わらず、DIV #2 (`z-index`: 2) が DIV #4 (`z-index`: 10) よりも上にあることです。この理由は、これらの要素が同一の重ね合わせコンテキストに属していないためです。DIV #4 は DIV #3 によって作られた重ね合わせコンテキストに所属していて、以前の説明にあるように DIV #3 (とその内部にあるものすべて) は DIV #2 よりも下にあります。

状況をもっとよく理解するために、重ね合わせコンテキストの階層構造を示します。

* ルートの重ね合わせコンテキスト
    + DIV #2 (`z-index`: 2)
    + DIV #3 (`z-index`: 1)
        - DIV #4 (`z-index`: 10)

**メモ:** 一般に、 HTML の階層構造と重ね合わせコンテキストの階層構造は異なるということを覚えておくと良いでしょう。重ね合わせコンテキストの階層構造では、重ね合わせコンテキストを作らない要素はその親要素に吸収されます。

例
-

### HTML

```html
<div id="div1">
  <br />
  <span class="bold">DIV #1</span><br />
  position: relative;
  <div id="div2">
    <br />
    <span class="bold">DIV #2</span><br />
    position: absolute;<br />
    z-index: 2;
  </div>
</div>

<br />

<div id="div3">
  <br />
  <span class="bold">DIV #3</span><br />
  position: relative;<br />
  z-index: 1;
  <div id="div4">
    <br />
    <span class="bold">DIV #4</span><br />
    position: absolute;<br />
    z-index: 10;
  </div>
</div>
```

### CSS

```css
div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

#div2 {
  z-index: 2;
}
#div3 {
  z-index: 1;
}
#div4 {
  z-index: 10;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  position: absolute;
  width: 200px;
  height: 70px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}
```

結果
--

関連情報
----

* z-index なしの重ね合わせ: `z-index` が使用されなかった場合に適用される既定の重ね合わせ規則
* 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
* z-index の使用: `z-index` を使って既定の重ね合わせ変更する方法
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`


z-index なしの重ね合わせ - CSS: カスケーディングスタイルシート

z-index なしの重ね合わせ
================

どの要素にも `z-index` プロパティが指定されていない場合、要素は以下の順序で（下から上に）重ね合わせられます。

1. ルート要素の背景と境界
2. 位置指定なしの子孫ブロック、 HTML 内での出現順
3. 位置指定ありの子孫要素、 HTML 内での出現順

位置指定要素、位置指定なしの要素についての説明は、位置の種類を参照してください。

`order` プロパティによってフレックスコンテナー (`flex`) の中の描画を「HTML の中での出現順」から変更したとき、重ね合わせコンテキストの順も同様に影響することを意識しておいて下さい。

例
-

以下の例では、 #1 から #4 までの要素が位置指定要素です。 #5 の要素は static であり、 HTML マークアップの中で後に来ていたとしても、他の 4 つの要素の下に描かれます。

### HTML

```html
<div id="abs1" class="absolute">
  <strong>DIV #1</strong><br />position: absolute;
</div>
<div id="rel1" class="relative">
  <strong>DIV #2</strong><br />position: relative;
</div>
<div id="rel2" class="relative">
  <strong>DIV #3</strong><br />position: relative;
</div>
<div id="abs2" class="absolute">
  <strong>DIV #4</strong><br />position: absolute;
</div>
<div id="sta1" class="static">
  <strong>DIV #5</strong><br />position: static;
</div>
```

### CSS

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

div {
  padding: 10px;
  border: 1px dashed;
  text-align: center;
}

.static {
  position: static;
  height: 80px;
  background-color: #ffc;
  border-color: #996;
}

.absolute {
  position: absolute;
  width: 150px;
  height: 350px;
  background-color: #fdd;
  border-color: #900;
  opacity: 0.7;
}

.relative {
  position: relative;
  height: 80px;
  background-color: #cfc;
  border-color: #696;
  opacity: 0.7;
}

#abs1 {
  top: 10px;
  left: 10px;
}

#rel1 {
  top: 30px;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  top: 15px;
  left: 20px;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  top: 10px;
  right: 10px;
}

#sta1 {
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

結果
--

関連情報
----

* 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
* z-index の追加: `z-index` を使って既定の重ね合わせ変更する方法
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`


浮動要素の重ね合わせ - CSS: カスケーディングスタイルシート

浮動要素の重ね合わせ
==========

浮動 (floating) 要素については、重ね合わせ順序が少し異なります。浮動要素は位置指定なしの要素と位置指定要素の間に配置されます。

1. ルート要素の背景と境界
2. 位置指定なしの子孫要素、 HTML 内での出現順
3. *浮動要素*
4. 位置指定ありの子孫要素、 HTML 内での出現順

位置指定要素、位置指定なしの要素についての説明は、位置指定の種類を参照してください。

**メモ:** 位置指定なしの要素（下記の例の DIV #4）の `opacity` の値を変更すると、その要素の背景と境界が、浮動要素や位置指定要素の上に飛び出し、おかしな結果になります。これは、仕様書の中で、 `opacity` の値を適用すると新しい重ね合わせコンテキストを作成するという、奇妙な部分によるものです（What No One Told You About Z-Index を参照してください）。

例
-

以下の例に見られるように、位置指定なしの要素 (DIV #4) の背景と境界は、完全に浮動要素の影響を受けませんが、内容は影響を受けます。この挙動は、上記のリストに規則を追加することで示すことができます。

1. ルート要素の背景と境界
2. 位置指定なしの子孫要素、 HTML 内での出現順
3. 浮動要素
4. *位置指定なしの子孫のインライン要素*
5. 位置指定ありの子孫要素、 HTML 内での出現順
### HTML

```html
<div id="abs1"><strong>DIV #1</strong><br />position: absolute;</div>

<div id="flo1"><strong>DIV #2</strong><br />float: left;</div>

<div id="flo2"><strong>DIV #3</strong><br />float: right;</div>

<br />

<div id="sta1"><strong>DIV #4</strong><br />no positioning</div>

<div id="abs2"><strong>DIV #5</strong><br />position: absolute;</div>

<div id="rel1"><strong>DIV #6</strong><br />position: relative;</div>
```

### CSS

```css
div {
  padding: 10px;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  position: absolute;
  width: 150px;
  height: 200px;
  top: 10px;
  right: 140px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  height: 100px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 10px 0px 10px;
  text-align: left;
}

#flo1 {
  margin: 0px 10px 0px 20px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#flo2 {
  margin: 0px 20px 0px 10px;
  float: right;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#abs2 {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 80px;
  left: 100px;
  border: 1px dashed #990;
  background-color: #fdd;
}

#rel1 {
  position: relative;
  border: 1px dashed #996;
  background-color: #cff;
  margin: 0px 10px 0px 10px;
  text-align: left;
}
```

結果
--

関連情報
----

* z-index なしの重ね合わせ: 既定の重ね合わせ規則
* z-index の追加: `z-index` を使って既定の重ね合わせ変更する方法
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`


重ね合わせコンテキストの例 3 - CSS: カスケーディングスタイルシート

重ね合わせコンテキストの例 3
===============

解説
--

この最後の例では、複数の階層を持つ HTML 構造内で、位置指定された要素を組み合わせたときと、 `z-index` がクラスセレクターを使って設定されたとき、発生する問題を示します。

位置指定された DIV 要素で作られた、3 階層の階層メニューを一例として見てみましょう。第 2 階層と第 3 階層の DIV 要素は、マウスが親要素をホバーしたり、クリックしたりすると現れます。通常この種類のメニューはクライアントサイドかサーバーサイドのどちらかでスクリプトにより生成されます。このためスタイルルールは id セレクターではなく、クラスセレクターで割り当てられます。

もし 3 つのメニュー階層が部分的に重なると、重なりの管理が問題になるかもしれません。

第 1 階層のメニューは relative で位置指定されているだけなので、重ね合わせコンテキストは作られません。

第 2 階層のメニューは、親要素内で絶対位置指定されています。これを第 1 階層のすべてのメニューより上に置くために、`z-index` が使われています。問題は第 2 階層のメニューそれぞれに重ね合わせコンテキストが作られることと、第 3 階層のメニューが自分の親要素に属していることです。

したがって第 3 階層のメニューは後ろにある第 2 階層のメニューより下に重なりますが、これは第 2 階層のメニューがすべて同一の `z-index` 値を持っていて、既定の重ね合わせ規則が適用されるからです。

状況をもっとよく理解できるよう、重ね合わせコンテキストの階層図を用意しました（3 つの点 "…" は、前の行の複数の繰り返しを表します）。

* ルートの重ね合わせコンテキスト
    + LEVEL #1
        - LEVEL #2 (`z-index`: 1)
            * LEVEL #3
            * …
            * LEVEL #3
        - LEVEL #2 (`z-index`: 1)
        - …
        - LEVEL #2 (`z-index`: 1)
    + LEVEL #1
    + …
    + LEVEL #1

この問題を回避するには、異なるレベル間のメニューの重なりを取り除くか、独自 (で異なった) `z-index` 値を クラスセレクターではなく ID セレクターを通じて設定するか、 HTML の階層構造をなくすかしてください。

**メモ:** ソースコードを見ると、絶対位置指定されたコンテナーとなる要素内に、第 2 階層と第 3 階層のメニューを作る DIV があることがわかります。この方法は、一度にすべてをグループ化し、位置づけするのに便利です。

例
-

### HTML

```html
<div class="lev1">
  <span class="bold">LEVEL #1</span>

  <div id="container1">
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;

      <div id="container2">
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
      </div>
    </div>

    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
  </div>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>
```

### CSS

```css
div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

div.lev1 {
  width: 250px;
  height: 70px;
  position: relative;
  border: 2px outset #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#container1 {
  z-index: 1;
  position: absolute;
  top: 30px;
  left: 75px;
}

div.lev2 {
  opacity: 0.9;
  width: 200px;
  height: 60px;
  position: relative;
  border: 2px outset #990000;
  background-color: #ffdddd;
  padding-left: 5px;
}

#container2 {
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 110px;
}

div.lev3 {
  z-index: 10;
  width: 100px;
  position: relative;
  border: 2px outset #000099;
  background-color: #ddddff;
  padding-left: 5px;
}
```

結果
--

関連情報
----

* z-index なしの重ね合わせ: `z-index` が使用されなかった場合に適用される既定の重ね合わせ規則
* 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
* z-index の使用: `z-index` を使って既定の重ね合わせ変更する方法
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`

**メモ:** 実は、サンプル画像は間違っているようです。第 2 階層の 2 つ目が第 3 階層に重複しているのは、第 2 階層が半透明であるため、新しい重ね合わせコンテキストが作成されるからです。基本的に、このサンプルページ全体が誤っており、誤解を招きます。


重ね合わせコンテキストの例 1 - CSS: カスケーディングスタイルシート

重ね合わせコンテキストの例 1
===============

解説
--

基礎的な例から始めましょう。ルートの重ね合わせコンテキストに、2 つの DIV (DIV #1 と DIV #3) があって、どちらも relative の位置指定がされていますが、 z-index プロパティの指定はありません。 DIV #1 の中に absolute の位置指定がされた DIV #2 があり、一方 DIV #3 の中には absolute の位置指定がされた DIV #4 があります。どちらも z-index プロパティの指定はありません。

唯一の重ね合わせコンテキストはルート要素にあります。 z-indexe がなければ要素は出現した順に重なります。

![重ね合わせコンテキストの例 1](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05a.png)

DIV #2 に正の (ゼロでなく auto でもない) z-index 値が代入されれば、他のどの DIV よりも上に描画されます。

![重ね合わせコンテキストの例 1](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05b.png)

さらにまた、DIV #4 に DIV #2 のものより大きな正の z-index が代入されれば、DIV #4 は、DIV #2を含む他のどの要素よりも上に描画されます。

![重ね合わせコンテキストの例 1](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05c.png)

最後に見た例では、 DIV #2 と DIV #4 が兄弟要素ではないことがわかります。これは、HTML 要素の階層構造においては、それぞれ別の親要素を持っているからです。そうだとしても、DIV #4 と DIV #2 間の重なり順は、z-index を使って制御できます。たまたま、DIV #1 と DIV #3 には z-index 値が代入されていなかったため、重ね合わせコンテキストを作らなかったのです。これは、DIV #2 と DIV #4 を含むそれら要素の中身がどれも、同一のルートの重ね合わせコンテキストに含まれるということです。

重ね合わせコンテキストの見地からは、DIV #1 と DIV #3 は単にルート要素に吸収され、結果の階層構造は次のようになっています:

* ルートの重ね合わせコンテキスト
    + DIV #2 (`z-index`: 1)
    + DIV #4 (`z-index`: 2)

**メモ:** DIV #1 と DIV #3 は半透明ではありません。位置指定された要素に1未満の不透明度を与えると、ちょうど z-index 値を追加したのと同じように、暗黙的に重ね合わせコンテキストが作られることを忘れないのは大切です。また、この例は、親要素が重ね合わせコンテキストを作らないときに、何が起こるのかを示しています。

例
-

### HTML

```html
<div id="div1">
  <br /><span class="bold">DIV #1</span> <br />position: relative;
  <div id="div2">
    <br /><span class="bold">DIV #2</span> <br />position: absolute;
    <br />z-index: 1;
  </div>
</div>

<br />

<div id="div3">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
  <div id="div4">
    <br /><span class="bold">DIV #4</span> <br />position: absolute;
    <br />z-index: 2;
  </div>
</div>
```

### CSS

```css
.bold {
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  z-index: 2;
  position: absolute;
  width: 200px;
  height: 80px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}
```

### 結果

関連情報
----

* z-index なしの重ね合わせ: `z-index` が使用されなかった場合に適用される既定の重ね合わせ規則
* 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
* z-index の使用: `z-index` を使って既定の重ね合わせ変更する方法
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`


z-index の使用 - CSS: カスケーディングスタイルシート

z-index の使用
===========

この記事の最初の部分、 z-index なしの重ね合わせは、既定でどのように重ね合わせが行われるのかを説明します。独自の重ね合わせ順を定義したい場合は、位置指定要素に `z-index` プロパティを使用して行うことができます。

`z-index` プロパティは整数値（正の数、ゼロ、負の数）で指定することができ、 Z 軸方向の要素の位置を表します。もし Z 軸になじみがないのであれば、重ね合わされたレイヤーがあって、それぞれに番号が付いていることを想像してください。レイヤーは番号順に、大きな番号は小さな番号の上に描画されます。

| レイヤー | 説明 |
| --- | --- |
| 最下位レイヤー | 観ている人から最も遠い |
| レイヤー -X | `z-index` が負の値のレイヤー |
| レイヤー 0 | 既定のレンダリングレイヤー |
| レイヤー X | `z-index` が正の値のレイヤー |
| 最上位レイヤー | 観ている人に最も近い |

**メモ:**

* `z-index` プロパティが定義されていなければ、要素は既定の描画レイヤー 0 (ゼロ) に描画されます。
* 同じ `z-index` 値を持つ要素が複数あれば (＝同じレイヤー上にある場合)、 z-index なしの重ね合わせで説明した重ね合わせ規則が当てはまります。

例
-

この例では、レイヤーの重ね合わせ順が `z-index` を使って決め直されています。#5 の `z-index` は 、位置指定要素でないため効果を持ちません。

### HTML

```html
<div id="abs1">
  <strong>DIV #1</strong>
  <br />position: absolute; <br />z-index: 5;
</div>

<div id="rel1">
  <strong>DIV #2</strong>
  <br />position: relative; <br />z-index: 3;
</div>

<div id="rel2">
  <strong>DIV #3</strong>
  <br />position: relative; <br />z-index: 2;
</div>

<div id="abs2">
  <strong>DIV #4</strong>
  <br />position: absolute; <br />z-index: 1;
</div>

<div id="sta1">
  <strong>DIV #5</strong>
  <br />no positioning <br />z-index: 8;
</div>
```

### CSS

```css
div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#rel1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  z-index: 8;
  height: 70px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

結果
--

関連情報
----

* z-index なしの重ね合わせ : 既定の重ね合わせ規則
* 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`


重ね合わせコンテキスト - CSS: カスケーディングスタイルシート

重ね合わせコンテキスト
===========

**重ね合わせコンテキスト** (Stacking context) は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。 HTML 要素は、要素の属性に基づいてこの空間を優先度つきの順序で占有します。

解説
--

この記事の前の部分である z-index の使用では、ある要素の描画順はそれらの `z-index` の値に影響を受けていました。これは、要素が*重ね合わせコンテキスト*を生じさせる特別なプロパティを持っていたからです。

重ね合わせコンテキストは以下のような場面で、文書の随所に様々な要素によって構成されます。

* 文書のルート要素 (`<html>`)
* `position` の値が `absolute` または `relative` であり、かつ `z-index` の値が `auto` 以外の要素
* `position` の値が `fixed` または `sticky` の要素（sticky はすべてのモバイルブラウザーにありますが、古いデスクトップブラウザーにはありません）。
* `container-type` の値がコンテナークエリーのために `size` または `inline-size` に設定されているもの。
* フレックスコンテナーの子であり、 `z-index` の値が `auto` 以外の要素。
* グリッド (`grid`) コンテナーの子であり、 `z-index` の値が `auto` 以外の要素。
* `opacity` の値が `1` 未満である要素（不透明度の仕様をご覧ください）。
* `mix-blend-mode` の値が `normal` 以外の要素。
* 以下のプロパティのいずれかが `none` 以外の値を持つ要素。
    + `transform`
    + `filter`
    + `backdrop-filter`
    + `perspective`
    + `clip-path`
    + `mask` / `mask-image` / `mask-border`
* `isolation` の値が `isolate` である要素。
* `will-change` の値が、初期値以外で重ね合わせコンテキストを作成する任意のプロパティを指定している要素（この記事を参照）。
* `contain` の値が `layout` または `paint` であるか、これらのどちらかを含む複合値（すなわち `contain: strict`, `contain: content`）を持つ要素。
* 最上位レイヤー (en-US)に配置され、対応する `::backdrop` がある要素。例えば全画面やポップオーバーの要素を含みます。

重ね合わせコンテキストの内部で、子要素は前に説明した規則に従って重ね合わせられます。重要なのは、子要素の `z-index` 値は、その親要素に対してのみ意味を持つということです。重ね合わせコンテキストは、その親の重ね合わせコンテキストでは不可分な一つの固まりとして扱われます。

まとめると、

* 重ね合わせコンテキストは他の重ね合わせコンテキストに含めることができ、その結果重ね合わせコンテキストの階層構造ができます。
* 重ね合わせコンテキストはすべて、その兄弟要素と完全に独立しています。重ね合わせ処理では、子孫要素だけが考慮されます。
* 重ね合わせコンテキストははめ込み式です。要素の中身が重ねられた後、その要素がまるごと、今度は親の重ね合わせコンテキストの重ね合わせ順の中にあるとみなされます。

**メモ:** 重ね合わせコンテキストを作れるのは一部の要素に限定されるため、重ね合わせコンテキストは HTML 要素の階層構造の部分集合です。それ自身の重ね合わせコンテキストを作らない要素は、その親の重ね合わせコンテキストに*同化される*、と言えます。

例
-

![z-index を用いた重ね合わせ規則の変更例](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context/understanding_zindex_04.png)

この例では、配置要素はすべて、位置と `z-index` の値によって、それ自身の重ね合わせコンテキストを作ります。重ね合わせコンテキストの階層構造が、次のように構成されます。

* ルート要素
    + DIV #1
    + DIV #2
    + DIV #3
        - DIV #4
        - DIV #5
        - DIV #6

重要なのは、 DIV #4, DIV #5, DIV #6 は DIV #3 の子要素なので、DIV #3 の内側で重なり方が完全に決まることです。いったん DIV #3 内部の重ね合わせと描画が終われば、DIV #3 はルート要素に丸ごと渡され、兄弟要素との重ね合わせ処理が行われます。

DIV #4 は DIV #1 の下に描画されます。これは、DIV #1 の z-index (5) はルート要素の重ね合わせコンテキストでだけ有効な値で、DIV #4 の z-index (6) は DIV #3 の重ね合わせコンテキストでだけ有効な値だからです。DIV #4 は DIV #3 の内部にあり、DIV #3 は DIV #1 よりも小さな z-index 値を持っているので、DIV #4 は DIV #1 の下になります。

同じ理由で DIV #2 (z-index 2) は DIV #5 (z-index 1) の下に描画されます。これは DIV #5 が DIV #3 に含まれていて、DIV #3は DIV #2 より高い z-index 値を持っているからです。

DIV #3 の z-index は 4 ですが、この値は DIV #4、DIV #5、DIV #6 の z-index とは独立しています。異なる重ね合わせコンテキストに含まれるためです。

Z 軸方向に重なった要素の描画順序の簡単な計算方法は、それがバージョン番号のようなものを持っていると考えることです。親要素のメジャーバージョン番号の下に、子要素のマイナーバージョン番号があるものとします。この方法で、 z-index 1 を持つ要素 (DIV #5) がどうやって z-index 2 を持つ要素 (DIV #2) の上になるのか、そして、 z-index 6 を持つ要素 (DIV #4) がどうやって z-index 5 を持つ要素 (DIV #1) の下になるのか、簡単にわかります。

用意した例では次のようになります（以下は最終的な描画順に並べています）。

* ルート要素
    + DIV #2 - z-index は 2
    + DIV #3 - z-index は 4
        - DIV #5 - z-index は 1、描画順は 4.1 なので、 z-index が 4 である要素の下に重なる
        - DIV #6 - z-index は 3、描画順は 4.3 なので、 z-index が 4 である要素の下に重なる
        - DIV #4 - z-index は 6、描画順は 4.6 なので、 z-index が 4 である要素の下に重なる
    + DIV #1: (`z-index`: 5)
### HTML

```html
<div id="div1">
  <h1>Division Element #1</h1>
  <code>
    position: relative;<br />
    z-index: 5;
  </code>
</div>

<div id="div2">
  <h1>Division Element #2</h1>
  <code>
    position: relative;<br />
    z-index: 2;
  </code>
</div>

<div id="div3">
  <div id="div4">
    <h1>Division Element #4</h1>
    <code>
      position: relative;<br />
      z-index: 6;
    </code>
  </div>

  <h1>Division Element #3</h1>
  <code>
    position: absolute;<br />
    z-index: 4;
  </code>

  <div id="div5">
    <h1>Division Element #5</h1>
    <code>
      position: relative;<br />
      z-index: 1;
    </code>
  </div>

  <div id="div6">
    <h1>Division Element #6</h1>
    <code>
      position: absolute;<br />
      z-index: 3;
    </code>
  </div>
</div>
```

### CSS

```css
\* {
  margin: 0;
}
html {
  padding: 20px;
  font:
    12px/20px Arial,
    sans-serif;
}
div {
  opacity: 0.7;
  position: relative;
}
h1 {
  font: inherit;
  font-weight: bold;
}
#div1,
#div2 {
  border: 1px dashed #696;
  padding: 10px;
  background-color: #cfc;
}
#div1 {
  z-index: 5;
  margin-bottom: 190px;
}
#div2 {
  z-index: 2;
}
#div3 {
  z-index: 4;
  opacity: 1;
  position: absolute;
  top: 40px;
  left: 180px;
  width: 330px;
  border: 1px dashed #900;
  background-color: #fdd;
  padding: 40px 20px 20px;
}
#div4,
#div5 {
  border: 1px dashed #996;
  background-color: #ffc;
}
#div4 {
  z-index: 6;
  margin-bottom: 15px;
  padding: 25px 10px 5px;
}
#div5 {
  z-index: 1;
  margin-top: 15px;
  padding: 5px 10px;
}
#div6 {
  z-index: 3;
  position: absolute;
  top: 20px;
  left: 180px;
  width: 150px;
  height: 125px;
  border: 1px dashed #009;
  padding-top: 125px;
  background-color: #ddf;
  text-align: center;
}
```

### 結果

関連情報
----

* z-index なしの重ね合わせ: `z-index` が使用されなかった場合に適用される既定の重ね合わせ規則
* 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
* z-index の使用: `z-index` を使って既定の重ね合わせ変更する方法
* 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`
* 最上位レイヤー (en-US)


背景画像の拡大縮小 - CSS: カスケーディングスタイルシート

背景画像の拡大縮小
=========

**`background-size`** は CSS のプロパティで、要素の背景画像の大きさを変更し、画像の幅や高さから見た完全な大きさの画像をタイル表示するという既定の動作を変更することができます。こうすることで、画像を必要に応じて拡大したり縮小したりすることができます。

巨大な画像を並べて表示
-----------

巨大な画像、2982 x 2808 の Firefox のロゴ画像を想像してください。この画像を 300 x 300 ピクセルの要素の中に 4 枚並べて表示したいとします (いくつかの理由で恐ろしく悪いサイトデザインですが)。 `background-size` に固定値の 150 ピクセルの値を使用すると、このようにすることができます。

### HTML

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

### CSS

```css
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}
```

### 結果

画像の拡大縮小
-------

以下のように、画像の水平と垂直の両方の寸法を指定することもできます。

```css
background-size: 300px 150px;
```

結果は以下のようになります。

![引き伸ばされた新しい Firefox のロゴ](/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png)

画像の拡大
-----

一方で、背景の画像を拡大することができます。ここでは 32 x 32 ピクセルのファビコンを 300 x 300 ピクセルに拡大します。

![拡大された MDN ロゴ](/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/favicon57.de33179910ae.1.1.png)

```css
.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}
```

見てのとおり、 CSS は画像ファイルの名前を除けば、実際には基本的に同一です。

特殊な値: "contain" と "cover"
-------------------------

`<length>` の値以外に、 CSS の `background-size` プロパティは `contain` と `cover` という二つの特殊な寸法の値を提供しています。これらを見てみましょう。

### contain

`contain` の値は、包含ボックスの寸法にかかわらず、背景画像をそれぞれの方向にできるだけ大きくなるように、ただしコンテナーの対応する辺の長さを超えないように拡大します。以下の例の大きさを変えて試してみてください。

#### HTML

```html
<div class="bgSizeContain">
  <p>この要素の寸法を変更してみてください！</p>
</div>
```

#### CSS

```css
.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}
```

#### 結果

### cover

`cover` の値は、背景画像が対応する方向のコンテナーの寸法より大きいか同じであることを保証しつつ、できるだけ画像が小さくなるように拡大縮小することを指定します。以下の例の大きさを変えて試してみてください。

#### HTML

```html
<div class="bgSizeCover">
  <p>この要素の寸法を変更してみてください！</p>
</div>
```

#### CSS

```css
.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}
```

#### 結果

関連情報
----

* `background-size`
* `background`
* SVG の背景画像の拡大縮小


複数の背景画像の利用 - CSS: カスケーディングスタイルシート

複数の背景画像の利用
==========

**複数の背景画像**を要素に適用できます。これらは、最初に記述した背景が一番上になり、後に記述した背景がその下になるように重ね合わされます。最後の背景にだけ、背景色が指定できます。

複数の背景の指定は、下記のように簡単です。

```css
.myclass {
  background: background1, background2, ..., backgroundN;
}
```

`background-color` を除いて、一括指定プロパティの `background` と個々のプロパティの両方で指定できます。つまり、`background`, `background-attachment`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size` のプロパティは背景ひとつずつに対して指定することができます。

例
-

この例では、3 つの背景が重なっています。Firefox のロゴ、泡の画像、そして linear-gradient です。

### HTML

```html
<div class="multi-bg-example"></div>
```

### CSS

```css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}
```

### 結果

(CodePen で画像が表示されない場合、CSS 部分の「Tidy CSS」をクリックしてください)

ご覧のように、Firefox のロゴ (`background-image` で最初に記載) が一番上になり、泡の画像がそれに続き、グラデーション (最後に記述) が前述の全ての画像の下に配置されています。後に続くプロパティ (`background-repeat` と `background-position`) はそれぞれの背景に対応して適用されています。つまり、`background-repeat` の最初の値は最初(最前面)の画像に適用され、後に続くものも順番に適用されます。

関連情報
----

* CSS グラデーションの利用


境界角丸作成ツール - CSS: カスケーディングスタイルシート

境界角丸作成ツール
=========

このツールを使用して、 CSS3 の `border-radius` の効果を生成することができます。


ボックスの影作成ツール - CSS: カスケーディングスタイルシート

ボックスの影作成ツール
===========

このツールで CSS の `box-shadow` 効果を組み立てて、 CSS オブジェクトにボックスの影の効果を追加することができます。

ボックスの影作成ツールは、 1 つまたは複数のボックスの影を要素に追加することができます。

ツールを開くと、右上の部分に四角形があります。これがシャドウを適用する対象となる要素です。この要素が選択されている状態 (ページを最初に読み込んだときの状態) では、基本的なスタイルを適用することができます。

* カラーピッカーツールを使って、要素の `color` を設定しましょう。
* "border" チェックボックスを使って、要素の `border` をつけましょう。
* スライダーを使って、要素の `top`, `left`, `width`, `height` の各プロパティを設定しましょう。

ボックスの影を追加するには、左上の「+」ボタンをクリックしてください。これで影を追加し、左側の列に並べます。それで新しい影の値を設定することができるようになります。

* カラーピッカーツールを使って、影の `color` を設定しましょう。
* "inset" チェックボックスを使って、影が内側になるようにしましょう。
* スライダーを使って、影の位置、ぼかし、広がりを設定しましょう。

他の影を追加するには、「+」をまたクリックしてください。ここで設定した値は、この新しい影にも適用されます。左上の↑と↓のボタンで、 2 つの影の適用順を変更します。左側の列で最初の影をクリックして再度選択してください。要素のスタイルを更新するには、要素を選択し、上部にある「element」というボタンをクリックします。

要素に `::before` と `::after` の擬似要素を追加して、ボックスの影を付けることもできます。要素とその擬似要素を切り替えるには、上部にある「element」「:before」「:after」と書かれたボタンを使います。

右下のボックスには、要素と `before::` または `::after` 擬似要素の CSS が表示されます。


境界画像作成ツール - CSS: カスケーディングスタイルシート

境界画像作成ツール
=========

このツールを使用して、 CSS3 の `border-image` の値を作成できます。