recursal/MDN huggingface dataset:
カード
===

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`
* 包括的な部品: カード（英語）
バッジ付きリストグループ
============

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.

関連情報
----

* フレックスボックスでのボックス配置
* フレックスコンテナー内のアイテムの配置
張りつくフッター
========

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 の関連資料
---------

* グリッドレイアウトの基本概念
ページ付け
=====

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）スタイルガイド: ページ付け（英語）
欄レイアウト
======

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 グリッドレイアウトのガイド
グリッドラッパー
========

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 グリッドを使った脱出（英語）
レシピ: メディアオブジェクト
===============

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.
料理帳テンプレート
=========

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

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

要件
--

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

レシピ
---

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

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

この例をダウンロード

行った選択
-----

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

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

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

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

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

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

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

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

### align-items

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

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

このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。 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 を使用した背景スタイルの変更
* 色とそのコントラスト
フロー内とフローの外
==========

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

以下の例では、見出し、段落、リスト、そして `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 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 の 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
===============

解説
--

これはとても簡単な例ですが、*重ね合わせコンテキスト*の概念を理解するカギになります。前の例には同じ 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`