CSS の整理 - ウェブ開発を学ぶ

CSS の整理
=======

* 前のページ
* Overview: Building blocks
* 次のページ

大きなスタイルシートや巨大なプロジェクトで作業をはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、CSS を書いていくのと保守していくのをやりやすくするためのベストプラクティスと、保守性を向上させるための解決策の一部を紹介します。

|  |  |
| --- | --- |
| 前提条件: |
 基本的なコンピューターリテラシー、
 基本的なソフトウェアがインストールされていること、
 ファイルの扱い、
 HTML の基本（HTML 入門）および CSS に関するアイデア（CSS の第一歩）に関する基本的な知識を得ていること。
  |
| 目的: | スタイルシートを整理するためのヒントとベストプラクティスを学び、 CSS の整理およびチーム作業を手助けするいくつかの命名規則とツールについて調べる。 |

CSS を整理するためのヒント
---------------

スタイルシートを整理して整頓するための一般的な提案を示します。

### プロジェクトのコーディング規約があるか？

既存のプロジェクトでチームと作業している場合、最初に確認することは、プロジェクトに CSS の既存のコーディング規約があるかどうかです。チームコーディング規約は常に自分の個人的な好みより優先する必要があります。多くの場合、何かを行うのに何が正しくて何が間違っているということはありませんが、一貫性が重要です。

例えば、MDN コードの例の CSS ガイドラインを見てみましょう。

### 一貫性を保つ

プロジェクトのルールを設定したり、単独で作業している場合、最も重要なことは、一貫性を保つことです。一貫性は、クラスに同じ命名規則を使用する、色を説明する1つの方法を選択する、一貫したフォーマットを維持するなど、あらゆる方法で適用できます（例えば、タブまたはスペースのどちらを使用してコードをインデントしますか。スペースの場合、いくつのスペース？）

常に従う一連のルールがあると、CSS を作成するときに必要な精神的なオーバーヘッドの量が減ります。

### CSS を読みやすくする

CSS をフォーマットする方法には、いくつかの方法を見かけるでしょう。開発者によっては、次のようにすべてのルールを 1 行に配置しています。

```css
.box {
  background-color: #567895;
}
h2 {
  background-color: black;
  color: white;
}
```

また、すべてを新しい行に分割したがる開発者もいます。

```css
.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
```

CSS ではどちらを使用してもかまいません。個人的には、各プロパティと値の組を新しい行に置く方が読みやすいと思います。

### CSS にコメントを書いておく

CSS にコメントを追加することは、将来の開発者がその CSS ファイルを使って作業する際に役立つだけでなく、休暇の後にプロジェクトに戻ってきたときに自分でも役立ちます。

```css
/\* これは CSS のコメントです。
複数行に分割できます。 \*/
```

ヒントとしては、スタイルシートの論理的な部分にコメントブロックを追加して、ざっと見たときにさまざまな部分をすばやく見つけられるようにしたり、 CSS のその部分にジャンプするために検索するものを提供したりすることもできます。コードに表示されない文字列を使用すると、検索することで部分から部分へジャンプすることができます。以下の例では `||` を使用しています。

```css
/\* || 全般的なスタイル \*/

/\* … \*/

/\* || 書体 \*/

/\* … \*/

/\* || ヘッダーとメインナビゲーション \*/

/\* … \*/
```

CSS に書かれていることの多くは自明なことなので、いちいちコメントする必要はありません。コメントすべきなのは、理由があって特定の判断をした部分です。

古いブラウザーとの互換性のために、特定の方法で CSS プロパティを使用する場合などがあります。

```css
.box {
  background-color: red; /\* グラデーションに対応していない古いブラウザーでの代替手段 \*/
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
```

何かを達成するためにチュートリアルに従ったのでしょうが、その CSS があまり自明でなく、認識しやすいものではない場合もあると思います。その場合は、チュートリアルの URL をコメントに追加しましょう。 1 年後くらいにこのプロジェクトに戻ってきたときに、「そういえば、あのことについての素晴らしいチュートリアルがあったな」とぼんやりと思い出すことができるのですが、それがどこのものかは思い出せないものです。

### スタイルシートを合理的に分割する

スタイルシートで最初で、すべての一般的なスタイルを設定することをお勧めします。これは、その要素で特別なことをしない限り、通常適用されるすべてのスタイルを意味します。通常、次のルールを設定します。

* `body`
* `p`
* `h1`, `h2`, `h3`, `h4`, `h5`
* `ul` と `ol`
* `table` 関係のプロパティ
* リンク

スタイルシートのこの部分では、サイト上の型に対する既定のスタイルを提供したり、データ表やリストに対する既定のスタイルを設定したりしています。

```css
/\* || 一般的なスタイル \*/

body {
  /\* … \*/
}

h1,
h2,
h3,
h4 {
  /\* … \*/
}

ul {
  /\* … \*/
}

blockquote {
  /\* … \*/
}
```

この部分の後で、いくつかのユーティリティクラスを定義することができます。例えば、フレックスアイテムとして表示するリストや他の方法で表示するリストの既定リストスタイルを削除するクラスなどです。多くの異なる要素に適用することが分かっているいくつかのスタイル指定がある場合、この部分に記述することができます。

```css
/\* || ユーティリティ \*/

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

/\* … \*/
```

次に、サイト全体で使用されるものをすべて追加します。例えば、基本的なページレイアウト、ヘッダー、ナビゲーションのスタイリングなどです。

```css
/\* || サイト全体 \*/

.main-nav {
  /\* … \*/
}

.logo {
  /\* … \*/
}
```

最後に、特定のものを使用するための CSS を、それらが使用されるコンテキスト、ページ、あるいはコンポーネントごとに分けて記載します。

```css
/\* || 店のページ \*/

.product-listing {
  /\* … \*/
}

.product-box {
  /\* … \*/
}
```

このように物事を順番に並べることで、少なくともスタイルシートのどの部分に変更したいものがあるのかを知ることができます。

### 過剰なセレクターを避ける

とても特殊なセレクターを作成した場合、別の要素に同じルールを適用するために CSS の塊を複製する必要があることに気づくことがよくあります。例えば、以下のようなセレクターがあったとします。これは、 `<p>` のうちクラスが `box` であるものを、 `<article>` のうちクラスが `main` であるものの中にあるルールに適用するものです。

```css
article.main p.box {
  border: 1px solid #ccc;
}
```

同じルールを `main` 以外の要素、あるいは `<p>` 以外の要素に適用したい場合は、これらのルールに別のセレクターを追加するか、まったく新しいルールセットを作成しなければなりません。その代わりに、 `.box` セレクターを使用すると、 `box` クラスを持つすべての要素にルールを適用することができます。

```css
.box {
  border: 1px solid #ccc;
}
```

より具体的にすることが理にかなっている場合もありますが、これは通常の習慣ではなく、一般的に例外です。

### スタイルシートが大きくなってきたら分割する

サイト内のある部分のスタイルがとても異なったものである場合、すべてのグローバルなルールを含む一つのスタイルシートと、その部分に必要なとても特殊なルールを含むいくつかの小さなスタイルシートに分割すると良いかもしれません。一つのページから複数のスタイルシートにリンクすることができますし、先にリンクされたスタイルシートのルールの後に、後にリンクされたスタイルシートのルールが来るという、通常のカスケードルールが適用されます。

例えば、サイトの一部にオンラインストアがあり、そのストアに必要な商品リストや フォームにのみ多数の CSS が使用されることがあります。そのようなものは別のスタイルシートで持ち、ストアのページからのみリンクさせるのが理にかなっています。

これにより、 CSS を整理しやすくなります。また、複数の人が CSS を扱う場合、 2 人が同時に同じスタイルシートで作業する必要があり、ソース管理上の競合が発生するという事態を少なくすることができます。

その他の役立つツール
----------

CSS は、それ自身に組み込まれた組織化の方法が充実していないため、 CSS の一貫性のレベルは、書き手に大きく依存することになります。ウェブコミュニティは、大規模な CSS プロジェクトを管理するのに役立つさまざまなツールやアプローチを開発してきました。他の人と一緒に作業するときには、このような補助ツールに出会う可能性が高く、また一般的に役立つことが多いので、その一部を簡単にご紹介しています。

### CSS の方法論

CSS を記述するための独自のルールを考え出す代わりに、コミュニティによってすでに設計され、多くのプロジェクトでテストされているアプローチのいずれかを採用するほうが得策かもしれません。これらの方法論は、基本的に CSS コーディングガイドであり、 CSS の記述や構成についてとても体系的なアプローチを取っています。一般に、これらの方法論は、プロジェクト独自のルールに従ってすべてのセレクターを記述し、最適化した場合よりも、 CSS をより冗長に表現する傾向があります。

しかし、このようなシステムを採用することで、多くの構造を手に入れることができます。これらのシステムの多くは広く使用されているため、他の開発者はゼロからあなた自身の個人的な手法を見つけ出すのではなく、使用しているアプローチを理解し、同じ方法で自分自身の CSS を記述できるようになる可能性が高くなります。

#### OOCSS

あなたが遭遇するであろうアプローチのほとんどは、 Nicole Sullivan の業績によって人気を博した Object Oriented CSS (OOCSS) の概念に起因しています。 OOCSS の基本的な考え方は、 CSS を再利用可能なオブジェクトに分割し、サイト上の必要な場所で使用できるようにすることです。 OOCSS の例として代表的なものに、メディアオブジェクトとして記述されているパターンがあります。これは、片面に固定サイズの画像や動画などの要素を配置し、もう片面には柔軟なコンテンツを配置したパターンです。コメントやリスティングなどのウェブサイトでよく見かけるパターンです。

もし、 OOCSS のアプローチを取らないのであれば、このパターンが使用される様々な場所に対してカスタム CSS を作成することになります。例えば、 2 つのクラスを作成し、 1 つは `comment` という名前で構成要素に対して多くのルールを設定し、もう 1 つは `list-item` という名前でいくつかの小さな違いを除いて `comment` クラスとほとんど同じルールを設定します。この 2 つのコンポーネントの違いは、 list-item には下の境界線があることと、 comment 内の画像に境界線があるのに対し、 list-item の画像にはないことです。

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

.comment img {
  border: 1px solid grey;
}

.comment .content {
  font-size: 0.8rem;
}

.list-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
  border-bottom: 1px solid grey;
}

.list-item .content {
  font-size: 0.8rem;
}
```

OOCSS では、`media` と呼ばれる 1 つのパターンを作成して、両方のパターンに共通の CSSをすべて持つようにします。一般的には media オブジェクトの形状を表す基底クラスです。そして、それらの小さな違いに対応するために追加のクラスを追加して、特定の方法でスタイリングを拡張します。

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

.media .content {
  font-size: 0.8rem;
}

.comment img {
  border: 1px solid grey;
}

.list-item {
  border-bottom: 1px solid grey;
}
```

HTMLでは、コメントに `media` と `comment` クラスの両方を適用する必要があります。

```html
<div class="media comment">
  <img />
  <div class="content"></div>
</div>
```

リストアイテムは次のように `media` と `list-item` が適用されます。

```html
<ul>
  <li class="media list-item">
    <img />
    <div class="content"></div>
  </li>
</ul>
```

Nicole Sullivan がこのアプローチを記述し、普及させたことで、今日、厳密に OOCSS のアプローチに従っていない人でも、一般的にこの方法で CSS を再利用していることになります - 一般的に物事をアプローチする良い方法として私たちの理解に入ってきています。

#### BEM

BEM とは、 Block Element Modifier の略です。 BEM では、ブロックは、ボタン、メニュー、ロゴなどの独立した実体として扱われます。要素は、リスト項目やタイトルのようなもので、それが含まれているブロックと結びついています。修飾子は、ブロックや要素に付けられたフラグで、スタイルや動作を変更するものです。 BEM を使用したコードは、 CSS のクラスにダッシュとアンダースコアが多用されているため、見分けがつくと思います。例えば、BEMの命名規則についてのページから、この HTML に適用されたクラスを見てみましょう。

```html
<form class="form form--theme-xmas form--simple">
  <input class="form\_\_input" type="text" />
  <input class="form\_\_submit form\_\_submit--disabled" type="submit" />
</form>
```

追加のクラスは、 OOCSS の例で使用されているクラスに似ていますが、 BEM の厳密な命名規則を使用しています。

BEM は大規模なウェブプロジェクトで広く使用されており、多くの人がこの方法で CSS を作成しています。チュートリアルでさえ、CSS がこのように構造化されている理由について触れずに、BEM 構文を使用する例に出くわす可能性があります。

システムの詳細については、CSS トリックの BEM 101 を参照してください。

#### その他の一般的なシステム

これらのシステムは多数使用されています。その他の一般的なアプローチには、 Jonathan Snook によって作成された CSS のスケーラブルでモジュール式のアーキテクチャ (SMACSS)、 Harry Roberts の ITCSS、および Yahoo! によって最初に作成された Atomic CSS (ACSS) があります。これらのアプローチのいずれかを使用するプロジェクトに遭遇した場合の利点は、同じスタイルでコーディングする方法を理解するのに役立つ多くの記事とガイドを検索して見つけることができることです。

このようなシステムを使用することの欠点は、特に小規模なプロジェクトの場合、過度に複雑に見える可能性があることです。

### CSS のビルドシステム

CSS を整理するもう 1 つの方法は、フロントエンド開発者が利用できるツールをいくつか利用することです。これにより、 CSS を書くために、よりプログラム的なアプローチを取ることができます。*プリプロセッサー*や*ポストプロセッサー*と呼ばれるツールが多数あります。プリプロセッサーは未加工のファイルに対して実行してそれらをスタイルシートに変換し、ポストプロセッサーは完成したスタイルシートに何かを実行します。おそらく、読み込みを高速化するために最適化します。

これらのツールを使用するには、開発環境で前処理と後処理を行うスクリプトを実行できる必要があります。多くのコードエディターで実行することができます。または、コマンドラインツールをインストールして支援することもできます。

最も人気のあるプリプロセッサーは Sass です。これは Sass のチュートリアルではありませんので、　Sass でできることを簡単に説明します。これは Sass の他の機能を使っていなくても、整理する上で非常に便利です。 Sass についてもっと知りたいのであれば、Sass の基礎知識の記事から始めて、他のドキュメントに進んでください。

#### 変数の定義

CSS にネイティブカスタムプロパティが追加されたため、この機能の重要性は低下していますが、 Sass を使用する理由の 1 つは、プロジェクトで使用されるすべての色とフォントを設定として定義し、その変数をプロジェクトで使用できるようにすることです。これは、間違った青の色合いを使用したことがわかった場合、 1 つの場所で変更するだけでよいということです。

`$base-color` 以下の最初の行のように呼び出される変数を作成した場合、その色が必要な場所であればどこでも、スタイルシートを介してその変数を使用できます。

```css
$base-color: #c6538c;

.alert {
  border: 1px solid $base-color;
}
```

CSS にコンパイルすると、最終的なスタイルシートには次の CSS が含まれます。

```css
.alert {
  border: 1px solid #c6538c;
}
```

#### コンポーネントスタイルシートのコンパイル

CSS を整理する 1 つの方法は、スタイルシートを小さなスタイルシートに分解することであると上記で述べました。Sass を使用すると、これを別のレベルに引き上げ、非常に小さなスタイルシートをたくさん持つことができます。コンポーネントごとに個別のスタイルシートを用意することもできます。Sass のインクルード機能を使用することで、これらすべてを 1 つまたは少数のスタイルシートにまとめて、実際にウェブサイトにリンクすることができます。

例えば、パーシャルを使って、ディレクトリー内にいくつかのスタイルファイル、例えば `foundation/_code.scss`、`foundation/_lists.scss`、`foundation/_footer.scss`、`foundation/_links.scss` などを作成し、Sass の `@use` ロールを使って他のスタイルシートに読み込むことができます。

```css
// foundation/_index.sass
@use 'code'
@use 'lists'
@use 'footer'
@use 'links'
```

上記のように、パーシャルがすべてインデックスファイルに読み込まれている場合、ディレクトリー全体を一度に別のスタイルシートに読み込むことができます。

```css
// style.sass
@use 'foundation'
```

**メモ:** Sass を試す簡単な方法は、CodePen を使用することです。これを有効にすると、 CodePen が Sass パーサーを実行してくれるので、通常の CSS を適用したウェブページを見ることができます。CSS チュートリアルでは、CodePen のデモでプレーンな CSS ではなく Sass を使用しているのを見つけることがありますので、少しでも知っておくと便利です。

#### ポストプロセッサー

もし、コメントや空白を大量に追加することでスタイルシートのサイズが大きくなることを気にしているのであれば、本番バージョンでは不要なものを取り除くことで CSS を最適化することが後処理のステップになります。これを実現するポストプロセッサーの例としては、cssnano があります。

まとめ
---

これは CSS 学習ガイドの最後の部分で、ここから CSS の探求を続けるための様々な方法があることがお分かりいただけると思います。

CSS のレイアウトの詳細については、「CSS レイアウトの学習」部分を参照してください。

また、これで MDN の CSS の資料の残りの部分を探索するためのスキルを身につけることができます。プロパティや値を調べたり、CSS 料理帳で使用するパターンを調べたり、CSS グリッドレイアウトなどの特定のガイドを読んだりすることができます。

* 前のページ
* Overview: Building blocks
* 次のページ


カスケード、詳細度、継承 - ウェブ開発を学ぶ

カスケード、詳細度、継承
============

* 前のページ
* Overview: Building blocks
* 次のページ

このレッスンの目的は、CSS の最も基本的な概念であるカスケード、詳細度、継承について理解を深めることです。これらの概念は、CSS を HTML に適用する方法とスタイル宣言の間の競合を解決する方法を制御するものです。

このレッスンは、他の記事よりもすぐに役立つことが少なく、少し学問的に見えるかもしれませんが、これらの概念を理解することは、後で多くの困難から救ってくれることでしょう。この章を注意深く作業し、概念を理解していることを確認してから、次に進むことをお勧めします。

|  |  |
| --- | --- |
| 前提条件: |
 基本的なコンピューターリテラシー、
 基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本（HTML 入門の学習）、CSS がどのように動作するかの考え（CSS の第一歩で学習）の基本的な知識を得ていること。
  |
| 目的: | カスケードと詳細度、および CSS の継承の仕組みについて学ぶ。 |

競合するルール
-------

CSS は **Cascading Style Sheets** の略で、最初の単語であるカスケード (*cascading*) を理解することは非常に重要です。カスケードのふるまいは、CSS を理解するための鍵となりえます。

プロジェクトに取り組んでいるとき、要素に適用されているはずの CSS が機能していないと感じることがあります。大抵の場合、この問題は同じ要素に適用される可能性のある 2 つ のルールを作ってしまったことが原因です。**カスケード**および、それと密接に関連する**詳細度**の概念は、そのような競合が存在する際にどちらのルールを適用するかを制御するメカニズムです。実際に要素にスタイルを設定しているルールがどれなのかは期待と異なる場合があるため、このような仕組みがどのように動作するのかを理解しておく必要があります。

このほかに重要なのは**継承**という概念です。CSS プロパティによって、親要素の値を既定で継承するものもあれば、継承しないものもあります。これにより、予期しない動作が発生する可能性もあります。

まず重要なものを簡単に見てみましょう。それぞれ順に追っていって CSS でどのように相互作用するかを見ていきます。これらはトリッキーな概念のように見えるかもしれませんが、CSS を書く練習を積んでいくと、その動作が明らかになってくるでしょう。

### カスケード

スタイルシートの**カスケード**は、とてもシンプルに考えるなら、これは発生元と、カスケードレイヤーと、CSS ルールの順序によるということです。同じカスケードレイヤーからの 2 つのルールが適用されており、どちらも詳細度が同じである場合、スタイルシートで最後に定義されたものが使用されます。

下記の例では、`<h1>` 要素に適用できる 2 つのルールがあります。`<h1>` のコンテンツは結果的に青く色づけされています。これは、どちらのルールも同じソースにあり、同じ要素セレクターを持ち、したがって詳細度が同じですが、ソース上の順番が最後のものが勝者となるからです。

### 詳細度

**詳細度**とは、ある要素にどのプロパティの値を使用するかを決めるために、ブラウザーが使用するアルゴリズムです。複数のスタイルブロックに、同じプロパティを異なる値で設定する異なるセレクターがあり、同じ要素を対象としている場合、その要素に適用されるプロパティの値は、詳細度によって決定されます。詳細度とは、基本的にセレクターの選択がどの程度具体的であるかを示す指標です。

* 要素セレクターは詳細度が低く、ページ上に現れるその種類のすべての要素を選択するので、あまり重みがありません。擬似要素セレクターは、通常の要素セレクターと同じ詳細度を持ちます。
* クラスセレクターはより詳細度が高く、ページ上にある特定の `class` 属性値を保有する要素のみを選択するので、より高い重みを持っています。属性セレクターと擬似クラスは、クラスと同じ重みを持ちます。

下記の例では、再び `<h1>` 要素に適用できる 2 つのルールがあります。下記の `<h1>` のコンテンツは、クラスセレクター `main-heading` によりそのルールが高い詳細度を持つため、結果として赤で表示されています。たとえ、`<h1>` 要素のセレクターを使用したルールがソースの順序でより下に現れても、クラスセレクターを使用して定義された、より高い詳細度を持つルールが使用されることになります。

詳細度のアルゴリズムについては、後ほど説明します。

### 継承

ここでは継承についても理解する必要があります。親要素に設定された CSS プロパティ値には、子要素に継承されるものとそうでないものがあります。

例えば、ある要素に `color` と `font-family` を設定すると、異なる色やフォントの値を直接適用しない限り、その中にあるすべての要素もその色やフォントでスタイル設定されます。

いくつかのプロパティは継承されません。例えば、要素に `width` 50% と設定した場合、すべての子孫要素は親の幅の 50% の幅を取得しません。もしそんなことになるのら CSS を使うととてもイライラするでしょう。

**メモ:** MDN の CSS プロパティリファレンスページには、「公式定義」という技術情報ボックスがあり、そのプロパティに関するいくつかのデータポイント（継承されるかどうかなど）が記載されています。例として、color プロパティの公式定義の節を参照してください。

これらの概念がどう連携するか理解する
------------------

これら3つの概念（カスケード、詳細度、継承）は、どの CSS がどの要素に適用されるかを制御するものです。以下の節では、これらがどのように連携して動作するのかを見ていきます。少し複雑に感じることもあるかもしれませんが、CSS を取得するにつれて覚え始めるでしょうし、忘れたときには常に詳細を調べておくことができます 経験豊富な開発者でも、すべての詳細を覚えているわけではありません。

以下の動画は、Firefox の開発ツールを使用して、ページのカスケードや詳細度などを検査する方法を示しています。

継承を理解する
-------

継承から始めましょう。次の例では `<ul>` 要素があり、内部にさらに 2 つ のレベルの順序なしリストがネストされています。外側の `<ul>` に境界線、パディング、文字色が指定されています。

`color` プロパティは継承されるプロパティです。よって、`color` プロパティの値は直接の子だけでなく、間接的な子にも適用されています。つまり直接の子である `<li>` 、それに最初のネストされたリスト内のものにも適用されています。そして 2 番目 にネストされたリストに `special` クラスを追加し、別の色が適用されています。これは子に継承します。

（前述のように）`width` や `margin` 、 `padding` 、 `border` といったプロパティは継承されるプロパティではありません。もし、このリストの例で境界線が子プロパティに掲載されていたら、すべてのリストとリスト項目に境界線が追加されることになります。

CSS のプロパティのページには、そのプロパティが継承されるかどうかが掲載されていますが、プロパティの値がどのようなスタイルを設定するのかを知っていれば、直観的に同じことを推測できることが多いでしょう。

### 継承の制御

CSS は、継承を制御するための 5 つ の特別なユニバーサルプロパティ値 *(universal property values)* を提供します。すべての CSS プロパティはこれらの値を受け入れます。

`inherit`

選択した要素に適用されるプロパティ値を、その親要素と同じものに設定します。これは「継承を有効にする」ことを意味します。

`initial`

選択した要素に適用されるプロパティ値を、そのプロパティの初期値に設定します。

`revert`

選択した要素に適用されるプロパティ値を、そのプロパティに適用されている既定値ではなく、ブラウザーの既定スタイル設定にリセットします。この値は、多くの場合 `unset` のように動作します。

`revert-layer`

選択した要素に適用されるプロパティ値を、前回のカスケードレイヤーで設定された値にリセットします。

`unset`

プロパティを自然な値にリセットします。つまり、プロパティが自然に継承される場合は `inherit` のように動作し、そうでない場合は `initial` のように動作します。

**メモ:** それぞれについて、またこれらがどのように動作するのかについては、オリジンの種類を参照してください。

リンクのリストを見ると、ユニバーサル値 (universal values) がどのように機能するかを調べることができます。以下のライブサンプルでは、CSS に変更を加えて何が起こるかを確認できます。HTML と CSS を理解するには、実際にコードを試すのが最善の方法です。

例えば次のようになります。

1. 2 番目 のリストアイテムには、`my-class-1` が適用されています。これは、内部にネストされた `<a>` 要素に色を継承 (`inherit`) します。ルールを削除すると、リンクの色はどのように変わるでしょうか？
2. 3 つ目と 4 つ目のリンクがなぜそのような色になっているのか、お分かりでしょうか？ 3 つ目のリンクは `initial` に設定されています。これはプロパティの初期値（この場合は黒）を使用し、ブラウザーのリンクの既定値である青は使用しない、という意味です。4 番目のリンクは `unset` に設定されており、これはリンクテキストが親要素の色である緑を使用することを意味しています。
3. `<a>` 要素に新しい色を定義した場合、どのリンクの色が変わるでしょうか。例えば、`a { color: red; }` のようにした場合です。
4. 次の節の「すべてのプロパティ値のリセット」を読んだ後、また戻ってきて `color` プロパティを `all` に変更してみてください。2 つ目のリンクが新しい行になり、箇条書きがあることに注目してください。どのようなプロパティが継承されていると思いますか？

### すべてのプロパティ値のリセット

CSS の一括指定プロパティ `all` を使用して、これらの継承値の 1 つ を（ほぼ）すべてのプロパティに一度に適用できます。その値として、いずれかの継承値（`inherit`、`initial`、`revert`、`revert-layer`、`unset` のいずれか）を指定することができます。新しく変更を開始する際、既知の開始点に戻ることができるように、変更されたスタイルを元に戻す便利な方法です。

以下の例では 2 つ のブロック引用 (blockquote) 要素があります。最初のスタイルは blockquote 要素自体に適用されます。2 つ目には `all` に `unset` を設定するように blockquote に適用されるクラスがあります。

`all` の値を他の有効な値に設定してみて、違いを観察してみてください。

カスケードを理解する
----------

これで、HTML の構造の奥深くにある段落が、本体に適用されている CSS と同じ色になるのは、継承のためだということが理解できたと思います。入門編で、文書内の任意の場所で何かに適用される CSS を変更する方法について理解しました。 CSS を要素に割り当てるか、クラスを作成するかです。これで、複数のスタイルブロックが同じ要素に異なる形で同じプロパティを適用する場合、どの CSS ルールが適用されるかをカスケードで定義する方法を見て取ることができます。

考慮すべき 3 つ の要因がありますが、ここでは重要度の高い順にリストしています。前にあるものは、後のものを無効にします。

1. **ソース順** (Source order)
2. **詳細度** (Specificity)
3. **重要度** (Importance)

これらを下から順に、ブラウザーがどうやって CSS を適用しているのかを見ていきましょう。

### ソース順

ソース順がカスケードにとって重要であることは、既に見たとおりです。複数のルールを保有し、それらのルールがすべてまったく同じ重みを持っている場合、CSS の最後に来るルールが優先されます。これは、要素自体に近いルールが、最後のルールが勝利して要素のスタイルを取得するまで、前のルールを上書きすると考えることができます。

ソース順が問題になるのは、ルールの詳細度に対する重みが同じである場合だけなので、詳細度について考えてみましょう。

### 詳細度

あるルールがスタイルシートの後半に来ることは分かっていても、より前の、競合するルールが適用される状況がよくあります。これは、前のルールが **高い詳細度** を有しているため、つまり、より詳細であるため、ブラウザーが要素をスタイル設定すべきものとして選択した場合に起こります。

このレッスンで以前に見たように、クラスセレクターは要素セレクターよりも重みがあるため、クラスのスタイルブロックで定義されたプロパティは、要素のスタイルブロックで定義されたものを上書きすることになります。

ここで注意したいのは、セレクターとそれが選択するテキストや成分に適用されるルールに注目していますが、上書きされるのはルール全体ではなく、複数の場所で宣言されているプロパティだけだということです。

この動作は、CSS の繰り返しを避けるのに役立ちます。一般的な方法としては、基本的な要素には一般的なスタイルを定義し、異なる形の要素にはクラスを作成することです。例えば、下記のスタイルシートでは、レベル 2 の見出しに対して一般的なスタイルを定義し、その後、一部のプロパティと値のみを変更するクラスをいくつか作成しています。最初に定義された値はすべての見出しに適用され、その後、より詳細度の高い値がクラスを持つ見出しに適用されます。

ブラウザーが詳細度を計算する方法を見てみましょう。要素セレクターの詳細度は低く、クラスで上書きできることはすでにわかったはずです。基本的に、セレクターの重みはポイント単位の値で与えられ、これらを合計して特定セレクターの重みが与えられて、他の一致するものと相対して評価することができます。

セレクターが持つ詳細度の量は、3 つ の異なる値（またはコンポーネント）を使用して測定されます。これは、ID、クラス、要素の列を、それぞれ百の位、十の位、一の位として考えることができます。

* **ID**: この列は、全体のセレクターの中に含まれるそれぞれの ID セレクターに対して 1 点ずつ評価します。
* **クラス**: この列は、クラスセレクター、属性セレクター、擬似クラスが全体のセレクターの中に含まれている場合に 1 点ずつ評価します。
* **要素**: この列は、要素セレクターまたは擬似要素が全体のセレクターの中に含まれている場合に 1 点ずつ評価します。

**メモ:** 全称セレクター (`*`)、結合子 (`+`、`>`、`~`、' ')、詳細度調整セレクター`:where()`とその引数は、詳細度に影響しません。

否定 (`:not()`)、関係セレクター (`:has()`)、match-any (`:is()`) 擬似クラス自身は、詳細度に影響を与えませんが、それらの引数は影響を及ぼします。それぞれが詳細度アルゴリズムに寄与する詳細度は、最も大きな重みを持っている引数のセレクターの詳細度です。

次の表でわかりやすいいくつかの例を示します。これらを試してみて、なぜ詳細度が与えられるのかをしっかり理解してください。セレクターについてはまだ詳しく説明していませんが、MDN の CSS セレクターで詳細を参照することができます。

| セレクター | ID | クラス | 要素 | 詳細度の合計 |
| --- | --- | --- | --- | --- |
| `h1` | 0 | 0 | 1 | 0-0-1 |
| `h1 + p::first-letter` | 0 | 0 | 3 | 0-0-3 |
| `li > a[href*="en-US"] > .inline-warning` | 0 | 2 | 2 | 0-2-2 |
| `#identifier` | 1 | 0 | 0 | 1-0-0 |
| `button:not(#mainBtn, .cta`) | 1 | 0 | 1 | 1-0-1 |

先に進む前に、実例を見てみましょう。

何が起こっているのでしょうか？まず、この例の最初の 7 つ のルールにのみ関心があり、お気づきのように、各ルールの前に詳細度の値をコメントしてあります。

* 最初の 2 つ のセレクターはリンクの背景色について競合しています。2 番目 のセレクターには ID セレクター があるのでそれが優先され、青になります。この詳細度は 2-0-1 であり、もう一方は 1-0-1 です。
* セレクター 3 と 4 は、リンクの文字色のスタイル設定をめぐって競合しています。2 つ目のセレクターが勝って、テキストを白にします。これは、要素セレクターが 1 つ少ないものの、足りないセレクターをクラスセレクターに入れ替えたためで、これはいくつの要素セレクターよりも比重が大きいからです。勝者の詳細度は、1-1-3 対 1-0-4 です。
* セレクター 5 ～ 7 は、マウスを当てたときのリンクの境界線のスタイル設定をめぐって競合しています。セレクター 6 は、0-2-3 対 0-2-4 の詳細度でセレクター 5 に明らかに負けています。セレクター 6 には、連鎖する要素のセレクターが 1 つ少ないからです。しかし、セレクター 7 はセレクター 5 と同じ数のサブセレクターを持ちますが、要素がクラスセレクターに置き換えられているため、セレクター 5 と 6 の両方に勝っています。つまり、0-3-3 の詳細度が 0-2-3、0-2-4 に対して勝利します。

**メモ:** セレクターの種類ごとにはそれぞれレベルの詳細度があり、より低い詳細度レベルのセレクターによって上書きすることはできません。例えば *100 万 の***クラス**セレクターを組み合わせても、*1 つ の* **ID** セレクターのルールを上書きすることはできません。

詳細度を評価する最良の方法は、詳細度の高いものから始めて、必要に応じて低いものへ移動しながら、個別に点数をつけることです。ある列のセレクターのスコアが同点である場合のみ、次の列を評価する必要があります。そうでない場合は、詳細度の低いセレクターは詳細度の高いセレクターを上書きすることができないため、無視することができます。

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

インラインスタイル、つまり `style` 属性内のスタイル宣言は、その詳細度に関わらず、すべての通常のスタイルよりも優先されます。このような宣言はセレクターがありませんが、その固有性は 1-0-0-0 と解釈され、セレクターにいくつの ID があっても、常に他のどの詳細度よりも高い重みを持ちます。

### !important

インラインスタイルであっても、上記のすべての計算を覆すために使用できる特別なCSSがあります - `!important`フラグです。しかし、使用する際にはとても注意が必要です。このフラグは、個々のプロパティと値のペアを最も詳細なルールとするために使用され、それによって通常のインラインスタイルを含むカスケードのルールが上書きされます。

**メモ:** `!important`フラグの存在を知っておくと、他の人のコードでこのフラグに出会ったときに、それが何であるかを知ることができるので便利です。**しかし、絶対に必要でない限り使用しないことを強くお勧めします。** `!important` フラグはカスケードの通常の動作方法を変更するので、特に大きなスタイルシートでは、CSS の問題をデバッグするのが実に作業しづらくなる可能性があります。

例を見てみましょう。2 つの段落があり、そのうちの 1 つ には ID がついています。

何が起きているのかを見てみましょう。理解しにくい場合は、いくつかのプロパティを削除しながら、どうなるか見てみてください。

1. 3 番目のルールでは `color` と `padding` が適用されていますが、`background-color` は適用されていないことようです。なぜでしょうか？ソースオーダーの後の方は、普通は前の方のルールをオーバーライドするため、その観点では 3 つ すべてが適用されるはずです。
2. とはいえ、クラスセレクターは要素セレクターよりも詳細度が高いため前者のルールが優先されます。
3. 両方の要素には `better` という `class` がありますが、2 番目 の要素には `winning` という `id` もあります。ID はクラスよりも**より高い詳細度**があるため（ページ上では ID を持つ要素は一意に 1 つ しか置けないのに対し、同じクラスを持つ多くの要素がありえるため、ID セレクターの方が**非常に限定的**になります）、2 番目の要素には赤い背景色と 1 ピクセルの黒い境界線が適用され、最初の要素についてはクラスで指定されたように灰色の背景色となり、境界線は消えます。
4. 2 番目 の要素は赤い背景が適用されていますが、あるはずの境界線はありません。なぜでしょうか？ 2 つ目のルールに `!important` フラグがあるためです。`border: none` の後に `!important` フラグを追加すると、ID セレクターの方がより高い詳細度であっても、この宣言が前のルールの `border` 値に勝利するということです。

**メモ:** important 宣言を上書きする唯一の方法は、同じ詳細度を持つ別の important 宣言をソースの順番で後に記載するか、より高い詳細度を持つものを記載するか、前のカスケードレイヤーに important 宣言を記載することです（まだ、カスケードレイヤーについて触れていません）。

`!important` フラグを使用しなければならない状況の 1 つ としては、コアにある CSS モジュールを編集できない CMS で作業している等で、他の方法では難しい場合にスタイルを実際にオーバーライドしたい場合等があります。でも本当に、回避できる場合は使用しないでください。

CSS の位置の効果
----------

最後に、CSS 宣言の優先順位は、それがどのスタイルシートとカスケードレイヤーで指定されるかに依存することに注意することが重要です。

ユーザーがカスタムスタイルシートを設定して、開発者のスタイルを上書きすることは可能です。例えば、視覚的な障碍を持つユーザーが、アクセスするすべてのウェブページのフォントサイズを通常の 2 倍に設定して、読みやすくすることができます。

カスケードレイヤーで開発者のスタイルを宣言することも可能です。レイヤーで宣言されたスタイルをレイヤー以外のスタイルで上書きしたり、先に宣言されたレイヤーのスタイルを後のレイヤーで宣言されたスタイルで上書きしたりすることが可能です。例えば、開発者としてサードパーティのスタイルシートを編集することはできないかもしれませんが、外部スタイルシートをカスケードレイヤーにインポートすることで、サードパーティのセレクターの詳細度を気にせず、インポートしたスタイルをすべて簡単に上書きすることができます。

### 宣言の上書きの順

競合する宣言は、以下の順序で適用され、後に適用されたものが先に適用されたものを上書きします。

1. ユーザーエージェントのスタイルシートにおける宣言（例えば、他にスタイルが設定されていない場合に使用される、ブラウザーの既定スタイル）。
2. ユーザースタイルシート（ユーザーが設定したカスタムスタイル）内の通常の宣言。
3. 作成者スタイルシートでの通常の宣言（これはウェブ開発者である私たちが設定したスタイルです）。
4. 作成者スタイルシートにおける important 宣言。
5. ユーザースタイルシートにおける important 宣言。
6. ユーザーエージェントスタイルシートにおける important 宣言。

**メモ:** 優先順位は `!important` でフラグづけされたスタイルでは逆転します。ウェブ開発者のスタイルシートがユーザーのスタイルシートを上書きするのは理にかなっているので、デザインは意図したとおりに保たれます。しかし、上記のように、ユーザーがウェブ開発者のスタイルを上書きするのに有益な理由がある場合もあり、その場合はルールに `!important` を使用して実現することができます。

### カスケードレイヤーの順序

カスケードレイヤーは高度なトピックで、すぐにこの機能を使用することはないでしょうが、レイヤーがどのようにカスケードされるかを理解することは重要です。

CSS をカスケードレイヤーで宣言する場合、優先順位はレイヤーを宣言した順番で決まります。どのレイヤーの外でも宣言された CSS スタイルは、それらのスタイルが宣言された順に、あたかも最後に宣言されたレイヤーであるかのように、無名のレイヤーに結合されます。競合する通常の（重要でない）スタイルでは、後から定義されたレイヤーが先に定義されたレイヤーより優先されます。しかし、`!important` が付けられたスタイルでは、順序が逆転し、より早いレイヤーの重要なスタイルが、後続のレイヤーまたは任意のレイヤーの外側で宣言された重要なスタイルより優先されます。インラインスタイルは、レイヤーに関係なく、すべての作成者スタイルよりも優先されます。

別々の形で複数のスタイルブロックを持っており、単一の要素のプロパティに競合する値を提供している場合、スタイルが宣言されているレイヤーで優先順位が決定されます。レイヤー間の詳細度は重要ではありませんが、単一のレイヤー内での詳細度は依然として重要です。

何が起こっているのかを理解するために、上の例からいくつかのことを説明してみましょう。`firstLayer` と `secondLayer` の 2 つのレイヤーが順に宣言されました。たとえ `secondLayer` の詳細度が最も高いとしても、その宣言のプロパティは使用されません。なぜか？レイヤー化されていない通常のスタイルは、詳細度に関係なく、レイヤー化された通常のスタイルよりも優先され、重要なレイヤーのスタイルは、これまた詳細度に関係なく、後のレイヤーで宣言された重要なスタイルより優先されるからです。

この例の CSS の最初の行を `@layer secondLayer, firstLayer;` と変更すると、レイヤーの宣言順序が変わり、`firstLayer` の重要なスタイルはすべて `secondLayer` でそれぞれの値に変更されることになります。

スキルをテストしよう!
-----------

この記事で多くを網羅しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているかを検証するテストがあります — Test your skills: the Cascade (en-US)を見てください。

まとめ
---

この記事の内容をほぼ理解できたなら、よくやったと言えます。CSS の基本的な仕組みに慣れることには、着手できたのではないでしょうか。次は、カスケードレイヤーについて深く考えてみましょう。

カスケード、詳細度、継承を完全に理解していなくても心配する必要はありません。このコースでこれまで取り上げてきたなかで、間違いなく最も複雑なことであり、プロのウェブ開発者でさえもたまに扱いにくく感じるものです。このコースを続行していくなかで、この記事にときどき戻り、それについて考え続けることをお勧めします。

スタイルが期待どおりに適用されないという奇妙な問題に出くわした場合は、この記事を参照してください。詳細度の問題である可能性があります。

* 前のページ
* Overview: Building blocks
* 次のページ


装飾的なレターヘッド付きの便箋の作成 - ウェブ開発を学ぶ

装飾的なレターヘッド付きの便箋の作成
==================

* 前のページ
* Overview: Styling boxes
* 次のページ

好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。

| 前提知識: | この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。 |
| --- | --- |
| 学習目標: | CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストします。 |

出発点
---

この評価を開始するには、次のことが必要です。

* HTML と CSS のローカルコピーを作成します — それらを `index.html` と `style.css` として新しいディレクトリーに保存します。
* 上部（top）、下部（bottom）、ロゴ（logo）の画像のローカルコピーを、コードファイルと同じディレクトリーに保存します。

**メモ:** あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の `<style>` 要素に自由に配置してください。

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

レターヘッド付きの便箋のテンプレートを作成するのに必要なファイルを与えられました。 ファイルをまとめるだけでいいのです。 目的を達するには、次のことが必要です。

### メインの手紙

* CSS を HTML に適用します。
* `background` 宣言を手紙に追加します。
    + 上部の画像を手紙の上部に固定します。
    + 下部の画像を手紙の下部に固定します。
    + 前記の両方の背景の上に半透明のグラデーションを追加して、手紙に少し質感を与えます。 上部と下部のすぐ近くで少し暗くしますが、中央の大部分は完全に透明にします。
* 前記の宣言をサポートしていないブラウザーのための代替として、単に top の画像を手紙の上部に追加する別の `background` 宣言を追加します。
* 手紙に白い背景色を追加します。
* 配色の他の部分と調和している色で、手紙に 1mm の上下の実線の境界線を追加します。
### ロゴ

* `<h1>` にロゴを背景画像として追加します。
* ロゴにフィルタを追加して、微妙なドロップシャドウを付けます。
* 今度はフィルタをコメントアウトし、丸い画像の形に沿った（ややクロスブラウザー互換の）別の方法でドロップシャドウを実装します。
ヒントとコツ
------

* 代替バージョンの宣言を最初に配置し、その後に新しいブラウザーでのみ機能するバージョンを配置することによって、古いブラウザーのための代替を作成できることを忘れないでください。 古いブラウザーは最初の宣言を適用して 2 番目の宣言を無視しますが、新しいブラウザーは最初の宣言を適用してから 2 番目の宣言で上書きします。
* ご希望の場合は、評価用に独自のグラフィックを自由に作成してください。
例
-

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

![](/ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper/letterhead.png)

評価
--

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

* 前のページ
* Overview: Styling boxes
* 次のページ


カスケードレイヤー - ウェブ開発を学ぶ

カスケードレイヤー
=========

* 前のページ
* Overview: Building blocks
* 次のページ

このレッスンはより高度な機能であるカスケードレイヤー を、CSS カスケードと CSS 詳細度の基本概念を基に紹介することが目標です。

CSS が初めての方は、このレッスンを学ぶことは、このコースの他の部分よりも関連性が低く、少し学術的に見えるかもしれません。しかし、カスケードレイヤーとは何かという基本的なことを知っておくことで、自分のプロジェクトでカスケードレイヤーに遭遇したときに役立ちます。CSS で作業すればするほど、カスケードレイヤーを理解し、その力を活用する方法を知っていれば、異なる関係者、プラグイン、開発チームからの CSS でコードベースを管理する苦痛から解放されるでしょう。

カスケードレイヤーは、複数のソースからの CSS で作業する場合、CSS セレクターや詳細度が競合する場合に、`!important` の使用を検討している場合に最も適しています。

|  |  |
| --- | --- |
| 前提知識: | カスケードと詳細度を含む、CSS はどう動くかに関する知識（CSS の第一歩およびカスケード、詳細度、継承を学習してください）。 |
| 目標: | カスケードレイヤーの動作を知ること。 |

要素に適用される CSS の各プロパティには、1 つの値しかありません。ある要素に適用されるすべてのプロパティ値は、ブラウザー開発者ツールでその要素を検査することで確認できます。ツールの「スタイル」パネルには、検査対象の要素に適用されているすべてのプロパティ値と、一致するセレクター、CSS のソースファイルが表示されます。元からあるセレクターが優先され、その値が一致する要素に適用されます。

スタイルパネルには、適用されたスタイルに加えて、選択した要素に一致するが、カスケード、詳細度、ソース順のために適用されなかった値が、取り消し線で表示されます。取り消し線が引かれたスタイルは、優先順位は同じだが詳細度が低いオリジン間、またはオリジンと詳細度が一致するがコードベース内でより早く見つかったものである場合があります。適用されたプロパティ値には、多くの異なるソースから消し込まれた宣言がある可能性があります。もし、より詳細度の高いセレクターを持つスタイル設定が消された場合、その値はオリジンや重要度に欠けることを意味しています。

サイトの複雑さが増すと、スタイルシートの数も増え、スタイルシートのソース順序がより重要になると同時に、より複雑になることがよくあります。カスケードレイヤーは、このようなコードベースのスタイルシートの維持を簡素化します。カスケードレイヤーは明示的な詳細度格納器であり、最終的に適用される CSS 宣言をよりシンプルに制御することができます。

カスケードレイヤーを理解するためには、CSS のカスケードをよく理解する必要があります。下記の節では、カスケードの重要な概念を簡単にまとめています。

カスケードの概念のおさらい
-------------

CSS の C は "Cascading" （カスケード）の略です。スタイルが連鎖していく方式です。ユーザーエージェントは、すべての要素のすべてのプロパティに割り当てる値を決定するために、いくつかの、非常に明確に定義された手順を実行します。ここでは、これらの手順を簡単に説明し、ステップ4「カスケードレイヤー」を深く掘り下げていきますが、これがここで学ぶことです。

1. **関連性:** 各要素のセレクターが一致する宣言ブロックをすべて見つける。
2. **重要度:** ルールが通常か重要かに基づいて並べ替えます。重要スタイルとは、`!important` フラグを設定したものを指します。
3. **オリジン:** 2 つの重要度バケットのそれぞれで、作成者、ユーザー、またはユーザーエージェントのオリジンでルールを並べ替えます。
4. **レイヤー:** 6 つのオリジンの重要度バケット内で、カスケードレイヤーで並べ替えます。通常の宣言のレイヤーの順序は、最初に作成されたレイヤーから最後に、レイヤー化されていない通常のスタイル設定が続きます。この順序は重要スタイルでは逆になり、レイヤー化されていない重要スタイルが最も低い優先順位となります。
5. **詳細度:** オリジン層で優先的にスタイルを競わせるため、詳細度で宣言を並べ替えます。
6. **近接性:** 優先順位を持つ元レイヤーの 2 つのセレクターが同じ詳細度を持つ場合、最も高い詳細度を持つ最後に宣言されたセレクターからのプロパティ値が勝ちます。

それぞれの手順で、「現在実行中」の宣言だけが次の手順で「競争」するために移動します。実行する宣言が 1 つだけなら、その宣言が「勝ち」となり、その後の手順は無意味となります。

### オリジンとカスケード

カスケードオリジンの種類は、ユーザーエージェントスタイルシート、ユーザースタイルシート、オーサースタイルシートの3種類です。ブラウザーは、各宣言をオリジンと重要度によって 6 つのオリジンバケットに分類します。優先順位は 8 段階あります。6つのオリジンバケット、トランジション中のプロパティ、そしてアニメーション中のプロパティです。優先順位は、最も低い優先順位を持つ通常のユーザーエージェントスタイルから、現在適用されているアニメーション中のスタイル、重要なユーザーエージェントスタイル、そして最も高い優先順位を持つトランジション中のスタイルへと進みます。

1. ユーザーエージェントの通常スタイル
2. ユーザーの通常スタイル
3. 作成者の通常スタイル
4. アニメーション中のスタイル
5. 作成者の重要スタイル
6. ユーザーの重要スタイル
7. ユーザーエージェントの重要スタイル
8. トランジション中のスタイル

「ユーザーエージェント」とはブラウザーのことです。「ユーザー」とは、サイトの訪問者のことです。「作成者」は、開発者であるあなたです。要素に `<style>` 要素で直接宣言されたスタイルは、作成者スタイルです。アニメーションやトランジションスタイルを含めない場合、ユーザーエージェントの通常スタイルの優先順位は最も低く、ユーザーエージェントの重要スタイルの優先順位は最も高くなります。

### オリジンと詳細度

それぞれのプロパティについて、「勝つ」宣言は、重さ（普通か重要か）に応じて、オリジンから優先されるものです。レイヤーを無視して、最も高い優先順位を持つオリジンからの値が取得されます。勝利したオリジンが要素に対して複数のプロパティ宣言を保有する場合、それらの競合するプロパティ値のセレクターの詳細度が比較されます。異なるオリジンからのセレクターの間で詳細度が比較されることはありません。

下記の例には、2 つのリンクがあります。最初のリンクは作成者スタイルが適用されていないため、ユーザーエージェントスタイルのみが適用されます（ユーザースタイルがある場合は、そのスタイルも）。2 つ目は、作成者スタイルシート内のセレクターの詳細度が `0-0-0` であるにもかかわらず、作成者スタイルによって `text-decoration` と `color` が設定されています。作成者スタイルが「勝つ」理由は、異なるオリジンからの競合スタイルがある場合、優先順位のないオリジンの詳細度に関係なく、優先順位のあるオリジンからのルールが適用されるからです。

このスタイルシートが書かれた時点で、ユーザーエージェントのスタイルシートにおける「競合する」セレクターは `a:any-link` であり、これは `0-1-1` という詳細度の重みを持ちます。これは作成者スタイルシートの `0-0-0` セレクターよりも大きいですが、現在のユーザーエージェントのセレクターが異なっていても、それは問題ではありません。作成者とユーザーエージェント由来の詳細度の重みは、決して比較されることはありません。詳細度の重みの計算方法について、もっと詳しく学んでください。

オリジンの優先順位は、常にセレクターの詳細度よりも優先されます。要素プロパティが複数のオリジンで通常のスタイル宣言でスタイル設定されている場合、作成者スタイルシートは、ユーザーまたはユーサーエージェントスタイルシートで宣言された冗長な通常プロパティが常に優先されます。スタイルが重要な場合、 ユーザーエージェントスタイルシートは、常に作成者スタイルやユーザースタイルよりも優先されます。カスケードオリジンの優先順位は、オリジン間の詳細度競合が決して起こらないことを確実にします。

移動する前にもう一つメモしておくと、現れる順番、つまり近接性は、優先されるオリジンで競合する宣言が同じ詳細度を持つ場合にのみ関係するようになります。

カスケードレイヤーの概要
------------

これで「カスケードオリジンの優先順位」は理解できましたが、「カスケードレイヤーの優先順位」とは何でしょうか？カスケードレイヤーとは何か、どのように順序付けられるか、カスケードレイヤーにどのようにスタイルが割り当てるかについて説明することで、その疑問にお答えします。通常のレイヤー、入れ子のレイヤー、無名レイヤーを扱います。まず、カスケードレイヤーとは何か、どのような課題を解決するのかについて説明します。

### カスケードレイヤーの優先順位

オリジンと重要性に基づいて6段階の優先順位があるのと同様に、カスケードレイヤーによって、これらのオリジンの中にサブオリジンレベルの優先順位を作成することができます。

6 つのオリジンバケット内には、複数の カスケードレイヤーが存在することができます。レイヤーの作成順序は、多数の重要な意味を持ちます。作成順によって、オリジン内のレイヤー間の優先順位が設定されるからです。

通常のオリジンバケットでは、レイヤーは各レイヤーの作成順でソートされます。優先順位は、最初に作成したレイヤーから最後に作成したレイヤー、そしてレイヤーのない通常のスタイルが続きます。

この順序は、重要スタイルでは逆転します。レイヤー化されていない重要スタイルはすべて一斉に暗黙のレイヤーにカスケードされ、移行していない通常のスタイルよりも優先される。レイヤー化されていない重要スタイルは、重要なレイヤースタイルよりも低い優先順位がある。先に宣言されたレイヤーの重要スタイルは、同じオリジンで後続の宣言されたレイヤーの重要スタイルより優先される。

このチュートリアルの残りの部分では、作成者スタイルに限定して説明しますが、レイヤーはユーザーとユーザーエージェントのスタイルシートにも存在できることに留意してください。

### カスケードレイヤーが解決できる課題

大規模なコードベースでは、複数のチーム、コンポーネントライブラリー、フレームワーク、サードパーティからスタイルがもたらされることがあります。どんなに多くのスタイルシートが記載されていても、これらのスタイルはすべて単一のオリジンである作成者スタイルシートでカスケードされます。

多くのソースから提供されたスタイルが一緒にカスケードされること、特に一緒に作業していないチームから提供されたスタイルが一緒にカスケードされることは、問題を引き起こす可能性があります。チームごとに異なる手法を持っているかもしれません。あるチームは詳細度を縮小することをベストプラクティスとし、別のチームは各セレクターに `id` を含めることを標準仕様としているかもしれません。

詳細度の競合は、すばやくエスカレートする可能性があります。ウェブ開発者は、`!important`フラグを追加することで、「すばやく修正する」かもしれません。これは簡単な解決策のように感じられるかもしれませんが、多くの場合、詳細度の争いを通常の宣言から重要な宣言に移されるだけです。

カスケードオリジンがユーザー、ユーザーエージェント、作成者スタイル間のパワーバランスを提供するのと同じように、カスケードレイヤーは、あたかもオリジンの各レイヤーがサブオリジンのように、単一のオリジン内の懸念を整理しバランスをとるための構造的な方法を提供します。レイヤーは、チーム、成分、サードパーティごとに作成することができ、レイヤーの順序に基づいてスタイルが優先されます。

レイヤー内のルールは、レイヤー外のスタイルルールと競合することなく、互いにカスケードさ れます。カスケードレイヤーは、スタイルシート全体を他のスタイルシートよりも優先させることができ、これらのサブオリジン間の詳細を気にする必要がありません。

レイヤーの優先順位は、常にセレクターの詳細度よりも優先されます。優先順位のあるレイヤーのスタイル設定は、優先順位の低いレイヤーに「勝ち」ます。負けたレイヤーにあるセレクターの詳細度は関係ありません。レイヤーの中で競合するプロパティ値に対しては、依然として詳細度が重要ですが、各プロパティに対して最も優先度の高いレイヤーだけが考慮されるため、レイヤー間の詳細度の懸念はありません。

### カスケードレイヤーの入れ子で解決できる課題

カスケードレイヤーは、入れ子のレイヤーを作成することができます。各カスケードレイヤーは、入れ子のレイヤーを格納することができます。

例えば、コンポーネントライブラリーを `components` レイヤーにインポートすることができます。通常のカスケードレイヤーでは、コンポーネントライブラリーが作成者のオリジンに追加され、他の作成者スタイルとの詳細度の競合が取り除かれます。`components` レイヤーの中で、開発者は様々なテーマを定義することができ、それぞれが別個の入れ子のレイヤーとして定義されます。この入れ子になったテーマレイヤーの順序は、ビューポートサイズや方向などのメディアクエリーに基づいて定義することができます（下記のレイヤー作成とメディアクエリーの節を参照してください）。このように入れ子になっているレイヤーは、詳細度によって競合しないテーマを作成する方法を提供するものです。

レイヤーを入れ子にする機能は、コンポーネントライブラリーやフレームワーク、サードパーティーのウィジェット、テーマなどを開発する作業をしている人にとって、とても有益な機能です。

レイヤーを入れ子にして作成することで、レイヤー名が競合する心配もなくなります。この節では、入れ子のレイヤーに応じた説明をします。

>
> 「既定値、第三者のライブラリー、テーマ、コンポーネント、オーバーライド、他にもスタイル設定を表すレイヤーを作成することができ、各レイヤー内のセレクターや詳細度を変更したり、レイヤー間の競合を解決するために外観の順序に頼ったりすることなく、明示的な方法でレイヤーをカスケードレイヤーで並び替えることができます。」
>
>
> —Cascading and Inheritance specification.
>
>
>

カスケードレイヤーの作成
------------

レイヤーは、以下のいずれかのメソッドで作成することができます。

* `@layer` 文のアットルールで、`@layer` の後に 1 つまたは複数のレイヤーの名前を続けて使用し、レイヤーを宣言します。これにより、スタイルを割り当てることなく、名前付きのレイヤーを作成することができます。
* ブロック内のすべてのスタイル設定を名前または無名のレイヤーに追加する `@layer` ブロックのアットルールです。
* `@import`ルールに `layer` キーワードまたは `layer()` 関数を指定すると、取り込んだファイルのコンテンツがそのレイヤーに割り当てられます。

3 つのメソッドはすべて、その名前を持つレイヤーがまだ初期化されていない場合に、レイヤーを作成します。レイヤー名が `@layer` のアットルールまたは `layer()` による `@import` で指定されなかった場合、新しい無名 (unnamed) のレイヤーが作成されます。

**メモ:** レイヤーの優先順位は、作成された順番です。レイヤーに含まれないスタイル、すなわち「非レイヤースタイル」は、最終的な暗黙のラベルに一緒にカスケードされます。

レイヤーの入れ子について説明する前に、レイヤーを作成する 3 つの方法についてもう少し詳しく説明しましょう。

### 名前付きレイヤーのための @layer 文のアットルール

レイヤーの順序は、CSS に現れる順序によって設定されます。スタイルを割り当てることなく、`@layer` に続いて 1 つまたは複数のレイヤー名を使用してレイヤーを宣言することは、レイヤーの順序を定義する 1 つの方法です。

`@layer` は CSS のアットルールで、カスケードレイヤーを宣言し、複数のカスケードレイヤーがある場合に優先順位を定義するために使用します。以下、アットルールは掲載されている順番で 3 つのレイヤーを宣言します。

```css
@layer theme, layout, utilities;
```

多くの場合、レイヤーの順序を完全に制御するために、CSSの最初の行をこの `@layer` 宣言（もちろん、サイトにとって意味のあるレイヤー名）にすることをお勧めします。

上記の文がサイトの CSS の最初の行である場合、レイヤーの順序は `theme`、`layout`、`utilities` となります。上記の記述の前にいくつかのレイヤーが作成された場合、これらの名前を持つレイヤーがまだ存在しない限り、これら 3 つのレイヤーが作成され、既存のレイヤーリストの最後に追加されます。しかし、同じ名前のレイヤーがすでに存在する場合、上記のステートメントは2つの新しいレイヤーだけを作成します。例えば、`layout` が既に存在していた場合、`theme` と `utilities` だけが作成されますが、この場合のレイヤーの順番は、`layout`、`theme`、`utilities` となります。

### 名前付きまたは無名レイヤーのための @layer ブロックのアットルール

レイヤーは、ブロック `@layer` アットルールを使用して作成することができます。アットルール `@layer` の後に識別子とスタイルブロックが続くと、識別子がレイヤーの名前に使用され、このアットルールのスタイルがレイヤーのスタイルに追加されます。指定した名前のレイヤーがまだ存在しない場合、新しいレイヤーが作成されます。指定した名前のレイヤーがすでに存在する場合、スタイルは前回存在したレイヤーに追加さ れます。スタイルのブロックを `@layer` を使用して作成する際に名前が指定されなかった場合、アットルール内のスタイルは新しい無名のレイヤーに追加されます。

下記の例では、4 つのブロックと 1 つのインラインの `@layer` アットルールを使用しています。この CSS では、掲載されている順に以下のことを行っています。

1. 名前付き `layout` レイヤーを作成します。
2. 無名のレイヤーを作成します。
3. 3 つのレイヤーのリストを宣言しています。`layout` はすでに存在しているので、`theme` と `utilities` の 2 つのレイヤーのみを新しく作成します。
4. 既に存在する `layout` レイヤーにスタイルを追加します。
5. 2つ目の無名レイヤーを作成します。

```css
/\* file: layers1.css \*/

/\* unlayered styles \*/
body {
  color: #333;
}

/\* creates the first layer: `layout` \*/
@layer layout {
  main {
    display: grid;
  }
}

/\* creates the second layer: an unnamed, anonymous layer \*/
@layer {
  body {
    margin: 0;
  }
}

/\* creates the third and fourth layers: `theme` and `utilities` \*/
@layer theme, layout, utilities;

/\* adds styles to the already existing `layout` layer \*/
@layer layout {
  main {
    color: #000;
  }
}

/\* creates the fifth layer: an unnamed, anonymous layer \*/
@layer {
  body {
    margin: 1vw;
  }
}
```

上記のCSSでは、`layout`, `<anonymous(01)>`, `theme`, `utilities`, `<anonymous(02)>` の5つのレイヤーをこの順番で作成し、6番目の暗黙のレイヤーとして `body` スタイルブロックに格納したスタイルを作成しました。レイヤーの順序は、レイヤーが作成される順序であり、レイヤーのないスタイルの暗黙のレイヤーは常に最後になります。一度作成したレイヤーの順序を変更する方法はありません。

ここでは、`layout` という名前のレイヤーにいくつかのスタイルを割り当ててみました。もし名前付きのレイヤーがまだ存在しない場合、レイヤーにスタイルを割り当てるかどうかにかかわらず、`@layer` アットルールで名前を指定すると、レイヤーが作成されます。これは、既存のレイヤー名のシリーズの終わりにレイヤーを追加します。指定したレイヤーがすでに存在する場合、指定したブロック内のすべてのスタイルは、以前に存在したレイヤーのスタイルに追加されます - 既存のレイヤー名を再利用してブロック内でスタイルを指定しても、新しいレイヤーは作成されません。

無名レイヤーは、レイヤーに名前を付けずにスタイルを割り当てることで作成されます。無名レイヤーにスタイルを追加することができるのは、その作成時のみです。

**メモ:** レイヤー名を指定せずに `@layer` を使用すると、さらに無名レイヤーが作成されます。これは、前回存在した無名レイヤーにスタイルを追加することはありません。

アットルール `@layer` は、名前があってもなくてもレイヤーを作成し、名前があるレイヤーがすでに存在する場合はレイヤーにスタイルを追加します。最初の無名レイヤーを `<anonymous(01)>` と呼び、2つ目を `<anonymous(02)>` と呼びましたが、これは説明するためだけのものです。これらは実際には無名レイヤーです。これらを参照したり、追加のスタイルを設定したりする方法はありません。

レイヤーの外で宣言されたスタイルはすべて、暗黙のレイヤーで一斉に結合されます。上の例のコードでは、最初の宣言で `color: #333` プロパティを `body` に設定しています。これは、どのレイヤーの外側でも宣言されたものです。通常のレイヤー外宣言は、たとえレイヤー外スタイルの方が詳細度が低く、現れる順番が先であっても、通常のレイヤー宣言より優先されます。たとえコードブロックでレイヤー化されなかった CSS が最初に宣言されたとしても、これらのレイヤー化されなかったスタイルを格納した暗黙のレイヤーが、あたかも最後に宣言されたレイヤーであるかのように優先されるのは、このためです。

一連のレイヤーを宣言した `@layer theme, layout, utilities;` という行では、`theme` と `utilities` というレイヤーだけが作成され、`layout` は最初の行で既に作成されています。この宣言は、すでに作成されたレイヤーの順序を変更しないことに注意してください。現在のところ、一度宣言したレイヤーの順序を変更する方法はありません。

次の例では、2 つのレイヤーにスタイル設定を割り当てることで、レイヤーを作成し、その過程で名前を説明しています。これらは最初の使用時に作成され、すでに存在しているため、最後の行で宣言しても何の意味もありません。

最後の行、`@layer site, page;` を最初の行に移動してみてください。どうなるでしょうか？

#### レイヤーの作成とメディアクエリー

メディアクエリーまたは機能クエリーを使用してレイヤーを定義した場合、メディアが一致しないか 機能に対応していなければレイヤーは作成しません。下記の例では、機器やブラウザーなどのサイズを変更すると、レイヤーの順序が変わる可能性があることを示しています。この例では、幅の広いブラウザーでのみ `site` レイヤーを作成しています。そして、`page` レイヤーと `site` レイヤーの順にスタイル設定を割り当てています。

幅の広い画面では、`site` レイヤーは最初の行で宣言され、`site` は `page` より優先順位が低いことになります。そうでない場合は、`site` は狭い画面に後から宣言されるため、`page` より優先されます。もしうまく行かない場合は、メディアクエリーの `50em` を `10em` や `100em` に変更してみてください。

### @import でスタイルシートを名前付きまたは無名のレイヤーにインポート

`@import` ルールは、ユーザーが他のスタイルシートのスタイルルールを CSS ファイルに直接、または `<style>` 要素にインポートできるようにします。

スタイルシートをインポートする場合、`@import` 文はスタイルシートまたは `<style>` ブロック内の任意の CSS スタイルの前に定義しなければなりません。`import` 文はスタイルの前に最初に記述しなければなりませんが、その前に `@layer` アットルールを記述することで、レイヤーにスタイルを割り当てることなく、1つ以上のレイヤーを作成することができます。（`@import` の前には、`@charset` ルールを置くこともできます。）

このスタイルシートは、名前付きレイヤー、入れ子の名前付きレイヤー、または無名レイヤーのいずれかにインポートすることができます。以下では、スタイルシートをそれぞれ `components` レイヤー、`components` レイヤー内の入れ子の `dialog` レイヤー、無名レイヤーにインポートしています。

```css
@import url("components-lib.css") layer(components);
@import url("dialog.css") layer(components.dialog);
@import url("marketing.css") layer();
```

複数の CSS ファイルを単一のレイヤーにインポートすることができます。以下の宣言は、2 つの別個のファイルを単一の `social` レイヤーにインポートしています。

```css
@import url(comments.css) layer(social);
@import url(sm-icons.css) layer(social);
```

メディアクエリーと機能クエリーにより、特定の条件に基づいてスタイルを読み込んでレイヤーを作成することが出来ます。次の例は、ブラウザーが `display: ruby` に対応していて、インポートするファイルが画面の内側へ依存する場合のみ、スタイルシートを `international` レイヤーにインポートします。

```css
@import url("ruby-narrow.css") layer(international) supports(display: ruby) and
 (width < 32rem);
@import url("ruby-wide.css") layer(international) supports(display: ruby) and
 (width >= 32rem);
```

**メモ:** スタイルシートをリンクする `<link>` の方法に相当するものはありません。スタイルシート内で `@layer` を使用できない場合、スタイルシートをレイヤーにインポートするために `@import` を使用します。

入れ子のカスケードレイヤーの概要
----------------

入れ子のレイヤーは、名前付きまたは無名レイヤーの中にあるレイヤーです。それぞれのカスケードレイヤーは、無名レイヤーであっても、入れ子のレイヤーを格納することができます。他のレイヤーにインポートされたレイヤーは、そのレイヤー内の入れ子のレイヤーとなります。

### 入れ子のレイヤーの利点

レイヤーを入れ子にすることで、他のチームがレイヤーに取り込むかどうかを気にすることなく、カスケードレイヤーを作成することができます。同様に、入れ子によって、スタイルシート自体にレイヤーがあるかどうかを気にすることなく、サードパーティーのスタイルシートをレイヤーにインポートすることができるようになります。レイヤーを入れ子にできるため、外部スタイルシートと内部スタイルシートでレイヤー名が競合する心配がありません。

### 入れ子のカスケードレイヤーの作成

入れ子のレイヤーは、通常のレイヤーで記述されているのと同じ方法で作成することができます。例を説明すると、`@layer` というアットルールの後に、ドット表記で1つ以上のレイヤー名を記述することで作成することができます。複数のドットとレイヤー名に よって、複数の入れ子を表します。

ブロック `@layer` アットルールの中に別のブロック `@layer` アットルールを名前の有無にかかわらず入れ子にすると、入れ子にしたブロックは入れ子にしたレイヤーとなります。同様に、スタイルシートが `layer` キーワードまたは `layer()` 関数を含む `@import` 宣言でインポートされると、スタイルはその名前付きまたは無名のレイヤーに割り当てられます。もし `@import` 文にレイヤーが格納されていれば、それらのレイヤーはその名前付きまたは無名のレイヤーの中に入れ子になったレイヤーとなります。

以下、例を見ていきましょう。
```

@import url("components-lib.css") layer(components);
@import url("narrowtheme.css") layer(components.narrow);
```

最初の行では、`components-lib.css` を `components` レイヤーにインポートしています。このファイルにレイヤーが格納されている場合、ファイル名の有無にかかわらず、そのレイヤーは `components` レイヤーの入れ子となります。

2 つ目の行は、`narrowtheme.css` を `components` のサブレイヤーである `narrow` レイヤーにインポートしています。入れ子になった `components.narrow` は、`components` レイヤーの最後のレイヤーとして作成されます。ただし、`components-lib.css` がすでに `narrow` レイヤーを格納している場合は、 `narrowtheme.css` の成分が `components.narrow` 入れ子のレイヤーに付加されることになります。入れ子の名前付きレイヤーは、`components.<layerName>`というパターンを使用して、`components` レイヤーに追加することができる。前述したように、名前のないレイヤーを作成することはできますが、その後にアクセスすることはできません。

別の例を見てみましょう。`layers1.css` を以下の文を使用して名前付きレイヤーにインポートしています。

```css
@import url(layers1.css) layer(example);
```

This will create a single layer named `example` containing some declarations and five nested layers - `example.layout`, `example.<anonymous(01)>`, `example.theme`, `example.utilities`, and `example.<anonymous(02)>`.

To add styles to a named nested layer, use the dot notation:

```css
@layer example.layout {
  main {
    width: 50vw;
  }
}
```

レイヤーの順番に応じた優先順位の決定
------------------

レイヤーの順序は、その優先順位を決定します。したがって、レイヤーの順序はとても重要です。カスケードがオリジンと重要度でソートするのと同じように、カスケードでは各 CSS 宣言をオリジンのレイヤーと重要度でソートします。

### 通常のカスケードレイヤーの優先順位

```css
@import url(A.css) layer(firstLayer);
@import url(B.css) layer(secondLayer);
@import url(C.css);
```

上記のコードでは、2 つの名前付きレイヤーと1つの名前なしレイヤーが作成されます。3 つのファイル (`A.css`, `B.css`, `C.css`) は、その中に追加のレイヤーを格納しないことを想定しています。以下は、これらのファイルの内側と外側で宣言されたスタイルが、最も優先順位の低い (1) から最も高い (10) まで並べ替えられる場所を示すリストです。

1. 第 1 レイヤーの通常スタイル (`A.css`)
2. 第 2 レイヤーの通常スタイル (`B.css`)
3. 非レイヤーの通常スタイル (`C.css`)
4. インライン通常スタイル
5. アニメーション中のスタイル
6. 非レイヤーの重要スタイル (`C.css`)
7. 第 2 レイヤーの重要スタイル (`B.css`)
8. 第 1 レイヤーの重要スタイル (`A.css`)
9. インラインの重要スタイル
10. トランジション中のスタイル

レイヤー内部で宣言された通常スタイルは最も優先度が低く、レイヤーが作成された順番で並べ替えられます。最初に作成されたレイヤーの通常スタイルは最も低い優先順位を持ち、最後に作成されたレイヤーの通常スタイルはレイヤーの中で最も高い優先順位を持つ。言い換えれば、`firstLayer` 内で宣言された通常のスタイルは、競合が存在する場合、リスト上の後続のスタイル設定によって上書きされます。

次に、レイヤーの外側で宣言されたスタイルがあります。`C.css` のスタイルはレイヤーにインポートされていないので、`firstLayer` と `secondLayer` で競合するスタイルがあれば、それを上書きすることになります。レイヤーで宣言されていない通常のスタイルは、常に重要度の高いレイヤーのスタイルよりも優先順位が高くなります。

インラインスタイルは `style` 属性 を使用して宣言されます。この方法で宣言された通常のスタイルは、非レイヤーおよびレイヤー化されたスタイルシート (`firstLayer - A.css`, `secondLayer - B.css`, `C.css`) で得られる通常のスタイルよりも優先されます。

トランジション中のスタイルは、インラインの通常スタイルを含めるために、すべての通常スタイルよりも高い優先順位を持ちます。

重要スタイル設定、すなわち `!important` フラグを含むプロパティ値は、前回リストで紹介したどのスタイルよりも優先されます。これらは通常のスタイルと逆の順序で並べられます。レイヤーの外で宣言された重要スタイルは、レイヤー内で宣言されたスタイルよりも優先順位が低くなります。レイヤー内で得られる重要スタイルは、レイヤー作成順に並べられます。重要スタイルの場合、最後に作成されたレイヤーは最も低い優先順位を持ち、最初に作成されたレイヤーは宣言されたレイヤーの中で最も高い優先順位を持ちます。

インラインの重要スタイルは、他の場所で宣言された重要スタイルよりも高い優先順位を持ちます。

トランジション中のスタイルは、最も高い優先順位を持ちます。通常のプロパティ値が遷移する場合、他のすべてのプロパティ値の宣言に優先し、インラインの重要スタイルにも優先します（ただし、トランジションの間のみ）。

この例では、スタイル設定のないインラインレイヤー `A` と `B` の 2 つのレイヤー、レイヤー設定のないスタイルのブロック、レイヤー `A` と `B` の名前を付けたスタイルの 2 つのブロックがあります。

`h1` 要素に追加されたインラインスタイルは、`style` 属性を使用して、通常の `color` と重要な `background-color` を設定しています。通常のインラインスタイルは、レイヤーおよび非レイヤーのすべての通常スタイルを上書きします。重要なインラインスタイルは、すべてのレイヤー、レイヤー外の通常スタイルと重要な作成者スタイルを上書きします。作成者スタイルが重要なインラインスタイルを上書きする方法はありません。

通常の `text-decoration` と重要な `box-shadow` は `style` インラインスタイルに属しませんので、オーバーライドすることができます。通常の非インラインスタイルでは、レイヤーがないスタイルが優先されます。重要スタイルでは、レイヤーの順序も重要です。通常のレイヤーなしのスタイルは、レイヤーに設定されたすべての通常のスタイルを上書きしますが、重要スタイルでは、優先順位が逆転します。レイヤーなしの重要スタイルは、レイヤーのスタイルより優先順位が低くなります。

レイヤーの中でだけ宣言される 2 つのスタイル設定は、通常の重要度を持つ `font-style` と、 `!important` フラグを持つ `font-weight` です。通常のスタイル設定の場合、最後に宣言された `B` レイヤーは、先に宣言された `A` レイヤーのスタイルを上書きします。通常のスタイル設定の場合、後のレイヤーが前のレイヤーより優先されます。重要スタイルでは、優先順位は逆転する。重要な `font-weight` の宣言では、最初に宣言したレイヤー `A` が、最後に宣言したレイヤー `B` よりも優先されます。

最初の行を `@layer A, B;` から `@layer B, A;` に変更することで、レイヤーの順序を逆にすることができます。試してみてください。これによってどのスタイルが取得され、どのスタイルが変わらないか？なぜでしょう？

レイヤーの順序は、CSS に現れるレイヤーの順序によって設定されます。最初の行では、スタイルを割り当てることなく、`@layer` の後にレイヤー名を使用し、セミコロンで終わり、レイヤーを宣言しています。この行を除外しても、結果は同じだったでしょう。なぜか？最初の行で 2 つのレイヤーを作成したため、@layer ブロックに A、B の順でスタイルルールを割り当てています。もしそうでなかったら、これらのルールブロックがこの順番で作成したはずです。

この 2 つの行を含めることができるのは、最初の行を編集して順序を簡単に入れ替えることができるようにするためと、2 つ目は、順序レイヤーを前もって宣言することが、レイヤー順序管理の最良の方法であることを見つけることが多いからです。

まとめると、次のようになります。

* レイヤーの順序は、レイヤーを作成するときの順序です。
* 一度作成すると、レイヤーの順序を変更する方法はありません。
* レイヤーの優先順位または通常のスタイル設定は、レイヤーが作成される順序です。
* レイヤーのない通常のスタイルは、通常のレイヤーのスタイルより優先されます。
* 重要スタイルの優先順位は逆で、先に作成したレイヤーが優先されます。
* レイヤーの重要スタイルはすべて、レイヤーのない重要な（および通常の）スタイルに優先します。
* 通常のインラインスタイルは、レイヤーの有無にかかわらず、すべての通常スタイルに優先します。
* 重要なインラインスタイルは、トランジション中のスタイルを除いて、他のすべてのスタイルに優先します。
* 作成者スタイルが重要なインラインスタイルを上書きする方法はありません（トランジション時の一時的なものを除いて）。
### 入れ子になったカスケードレイヤーの優先順位

入れ子のレイヤーのカスケード優先順位は、通常のレイヤーと同様ですが、レイヤーの中に格納されます。優先順位は、入れ子のレイヤーの作成順序に基づきます。レイヤー内の入れ子でないスタイルは、入れ子の通常のスタイルよりも優先され、重要スタイルでは優先順位が逆転します。入れ子間の詳細度の重みは重要ではありませんが、入れ子内のスタイルが競合する場合は重要です。

以下は、`components` レイヤーと `components.narrow` 入れ子のレイヤーにスタイルを作成・追加し、新しい `components.wide` レイヤーにスタイルを作成・追加しています。

```css
@import url("components-lib.css") layer(components);
@import url("narrowtheme.css") layer(components.narrow);

@layer components {
  :root {
    --theme: red;
    font-family: serif !important;
  }
}
@layer components.narrow {
  :root {
    --theme: blue;
    font-family: sans-serif !important;
  }
}
@layer components.wide {
  :root {
    --theme: purple;
    font-family: cursive !important;
  }
}
```

レイヤーのない通常スタイルは、レイヤーのある通常スタイルに優先し、レイヤー内では、入れ子のないスタイルは、入れ子のある通常スタイルに優先するので、`赤`は、他の`テーマ`色に優先します。

重要スタイルでは、レイヤースタイルは非レイヤースタイルより優先され、先に宣言されたレイヤーの重要スタイルが後に宣言されたレイヤーより優先されます。この例では、入れ子のレイヤーの作成順序は `components.narrow` の次に `components.wide` で、`components.narrow` の重要スタイルが `components.wide` の重要スタイルに優先し、つまり `sans-serif` が勝ちます。

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

この記事の終わりまで来ましたが、最も重要な情報を覚えていますか？次に進む前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります。Test your skills: The Cascade, Task 2 (en-US) を見てください。

まとめ
---

この記事の内容をほぼ理解できたなら、上出来です。これで、CSS カスケードレイヤーの基本的な仕組みに慣れたことでしょう。次は、ボックスモデルについて詳しく見ていきます。

* 前のページ
* Overview: Building blocks
* 次のページ


要素のはみ出し（オーバーフロー） - ウェブ開発を学ぶ

要素のはみ出し（オーバーフロー）
================

* 前のページ
* Overview: Building blocks
* 次のページ

このレッスンでは、CSS のもう 1 つの重要な概念である オーバーフロー（overflow）を見ていきます。オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。

| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本（HTML 入門）および CSS に関するアイデア（CSS の第一歩）に関する基本的な知識を得ている。 |
| --- | --- |
| 目的: | オーバーフローとその管理方法を理解する。 |

オーバーフロー (overflow) とは？
----------------------

CSS のすべてがボックスであり、 `width` と `height`（または `inline-size` や `block-size`) の値を与えることにより、これらのボックスのサイズを制御できることを見てきました。オーバーフローはボックス内のコンテンツが多すぎる場合に発生し、快適に収まらないという状態です。CSS はこのオーバーフローを管理するためのさまざまなツールを提供しますが、早めに理解しておくと役立つ概念でもあります。CSS を書いていると、とりわけ CSS によるレイアウトを深く理解していくにつれ、オーバーフローによく出くわします。

CSS のデータ損失の回避
-------------

オーバーフローが発生した場合の CSS の既定の動作を示す 2 つの例を見てみましょう。

1 つめの例です。まずブロックに `height` でボックスの高さを制限します。そしてそのスペースよりも多くのコンテンツを追加します。コンテンツはボックスからはみ出し、下の段落にかぶさってしまいます。

2 つめに、インラインとして制限されているボックス内の単語の例です。ボックスは単語が収まらないほど小さいため、ボックスからはみ出てしまいます。

CSS のこの既定のアプローチは、コンテンツをかなり乱雑にオーバーフローさせているように感じられるかもしれません。追加のコンテンツを非表示にしたり、ボックスを大きくさせたりしないのはなぜなのでしょう。

CSS は可能な限りコンテンツを隠しません。これをやってしまうと、通常は問題となりうるデータ損失が発生するためです。CSS はこのようにコンテンツが消えることを懸念します。コンテンツが消失したことに気付かない可能性があるのは問題だからです。見ている人は消えたことに気付かないかもしれません。フォーム上の送信ボタンが消えてしまい、フォームが完了できない場合それは大きな問題です。代わりに CSS は目に見える方法でオーバーフローしようとします。あなたもしくは訪問者がコンテンツが重なっているという状況に気づき、修正が必要であることを知ることができます。

ボックスを `width` または `height` で制御している場合、CSS はオーバーフローの可能性が管理されていると想定します。一般にボックスにテキストがある場合、ブロックのサイズを制御することは問題になりがちです。例えば、想定していたよりも多くのテキストになってしまったか、フォントサイズを大きくした場合などです。

次のいくつかのレッスンでは、オーバーフローを起こしにくいサイジング方法を見ていきます。固定サイズが必要な場合は、オーバーフローの動作を制御することもできます。読み進めましょう。

overflow プロパティ
--------------

`overflow` プロパティは要素のオーバーフローを制御し、ブラウザーにどのように動作させるかを伝えます。既定値は `visible` のため、オーバーフロー時にコンテンツは表示されます。

オーバーフロー時にコンテンツをトリミングしたい場合、`overflow: hidden` をボックスに指定します。これは文字通り、はみ出たものを見えなくします。これにより内容が隠れてしまうことが起こりうるため、コンテンツが非表示になっても問題にならない場合にのみに限定した方がいいでしょう。

コンテンツのオーバーフロー時にスクロールバーを表示したいこともあるでしょう。 `overflow: scroll` を指定すればコンテンツがオーバーフローしない場合でも、ブラウザーはスクロールバーを表示します。コンテンツに応じてスクロールバーが表示されたり消えたりするのを防ぐため、これが必要な場合があります。

**下のボックスからコンテンツの一部を削除すると、スクロールするものがなくてもスクロールバー（または少なくともトラック部品）が残っていることがわかります。**

上記の例では `y` 軸のスクロールバーだけがあればいいのですが、横スクロールバーも表示されてしまいます。`overflow-y` プロパティを使えば、`y` 軸のみのスクロールバーを指定できます。

`overflow-x` を使用して、x 軸のみのスクロールバーを表示できますが、文字が見切れてしまうことの回避策としては推奨されません。小さなボックスで長い文字列を処理する場合は、`word-break` や `overflow-wrap` を検討してください。CSS によるサイズ設定 で説明した方法のいくつかは、さまざまな量のコンテンツに適切に対応するボックスを作成するのに役立つ場合があります。

`scroll` にしておけばコンテンツが少ないとしても、それとは関係なくスクロールバーは常に表示されます。

**メモ:** `overflow` プロパティでは x と y の 2 つの値を渡すことができることに注意してください。2 つのキーワードが指定されている場合、ひとつめは `overflow-x`、2 つめは `overflow-y` として適用されます。それ以外の場合は `overflow-x` と `overflow-y` の両方に同じ値が設定されます。例えば、`overflow: scroll hidden` とした場合は、`overflow-x` は `scroll`、`overflow-y` は `hidden` となります。

コンテンツがボックスに収まらない場合にのみ、スクロールバーを表示する場合は `overflow: auto` を使用します。この場合、スクロールバーを表示するかどうかはブラウザーによります。通常、デスクトップブラウザーはコンテンツがオーバーフローする場合にのみそうします。

**以下の例では、ボックスに収まるまでコンテンツを削除していくとスクロールバーが消えます。**

オーバーフローとブロック整形コンテキスト
--------------------

CSS には **ブロック整形コンテキスト** (BFC = Block Formatting Context) の概念があります。これは今のところあまり気にする必要はありませんが、`scroll` や `auto` などのオーバーフローの設定で BFC が作成されることを知っておくと便利です。結果として `overflow` の値を変更したボックスのコンテンツは、独自のミニレイアウトになります。コンテナの外側の物は中に突っ込むことができず、ボックスから周囲のレイアウトに突き出すこともできません。これによってボックスにはすべてのコンテンツが含まれており、かつ、ページ上の他のアイテムと重ならないという、一貫したスクロール体験を生み出します。

オーバーフローの望ましくないウェブデザイン
---------------------

モダンなレイアウト手法（CSS レイアウト モジュールで説明）では、オーバーフローを管理します。これらの方法は、ウェブページ上にどれだけのコンテンツが存在するかについての仮定や依存関係なしに大きく機能します。

しかし過去には開発者は多くの場合、固定された高さを使用して、実際には互いに関係のないボックスの底を揃えようとしました。それは脆く、レガシーなアプリケーションでは、コンテンツが他のコンテンツに重なってしまっているのを見かけることがあります。それによってオーバーフローが起きていることがわかります。理想としては、ボックスサイズの固定に依存しないようにレイアウトを調整します。

サイトを開発するときは、常にオーバーフローの問題に留意する必要があります。大量のコンテンツと少量のコンテンツを含むデザインをテストし、テキストのフォントサイズを大きくし、CSS が堅牢に対処できていると確認する必要があります。オーバーフローの値を変更してコンテンツを非表示にしたりスクロールバーを追加したりするのは、特別な場合（例えばスクロールが本当に必要な場合など）にのみ使うべきです。

あなたのスキルをテストしてみてください!
--------------------

このレッスンで吸収すべきことはたくさんあります！ あなたは最も重要な情報を覚えていますか？ あなたの理解度を確認するには、Test your skills: overflow (en-US) を参照してください。

まとめ
---

この短いレッスンではオーバーフローの概念を紹介しました。CSS はオーバーフローしたコンテンツが見えなくなることによる、データ損失の回避を試みることを理解しました。潜在的なオーバーフローを管理できること、また、問題のあるオーバーフローを引き起こしてしまわないかを確認する必要があることもわかりました。

* 前のページ
* Overview: Building blocks
* 次のページ


かっこいいボックス - ウェブ開発を学ぶ

かっこいいボックス
=========

* 前のページ
* Overview: Styling boxes

この評価では、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成する方法をさらに習得できます。

| 前提知識: | この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。 |
| --- | --- |
| 学習目標: | CSS ボックスモデルと、境界線や背景などの他のボックス関連機能の理解をテストすること。 |

出発点
---

この評価を開始するには、次のことが必要です。

* HTML と CSS のローカルコピーを作成します — それらを `index.html` と `style.css` として新しいディレクトリーに保存します。

**メモ:** あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の `<style>` 要素に自由に配置してください。

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

あなたの仕事は、かっこよくて装飾的な箱を作り、私たちが CSS で持つことができる楽しみを探ることです。

### 一般的なタスク

* CSS を HTML に適用します。
### ボックスの装飾

提供された `<p>` に次のように装飾を設定してください。

* およそ 200 ピクセルくらいの、大きなボタンに適した幅。
* 過程でテキストを垂直方向に中央揃えする、大きなボタンに適した高さ。
* 中央揃えのテキスト。
* フォントサイズがわずかに増加し、計算したスタイルはおおよそ 17 から 18 ピクセルになりました。 rem を使用してください。 どのように値を導いたかについてのコメントを書いてください。
* デザインの基本色。 この色を背景色としてボックスに付けます。
* テキストの色は同じで、黒いテキストの影を使って読みやすくします。
* かなり微妙な境界線の半径。
* 基本色に似た色で、やや暗い色合いの 1 ピクセルの実線の境界線。
* 右下隅に向かう半透明の黒の線形グラデーション。 最初は完全に透明にし、それに沿って 30% ずつ不透明度を約 0.2 に段階的に調整し、最後まで同じ色のままにします。
* 複数のボックスの影。 ボックスがページから少し浮き上がって見えるようにするには、標準のボックスの影を 1 つ指定します。 他の 2 つは、ボックスの内側の影であるべきです — 左上近くの半透明の白い影と右下近くの半透明の黒い影 — ボックスの素敵な浮いた 3D の外観に追加する。
例
-

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

![](/ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box/fancy-box.png)

評価
--

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

* 前のページ
* Overview: Styling boxes


基本的な CSS の理解 - ウェブ開発を学ぶ

基本的な CSS の理解
============

* 前のページ
* Overview: Introduction to CSS

このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう！ 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。

| 前提条件: | この評価を実施する前に、すでにこのモジュールのすべての記事を通して作業しているはずです。 |
| --- | --- |
| 目的: | 基本的な CSS 理論、構文、およびメカニズムの理解をテストする。 |

出発点
---

この評価を開始するには、次のことが必要です。

* 練習用の HTML ファイルとそれに関連付けられた画像ファイルを探して、ローカルコンピュータの新しいディレクトリーに保存します。自身の画像ファイルを使い、自身の名前を記入したいのなら、それも大歓迎です — ちょうど画像が正方形であることを確認してください。
* CSS リソースのテキストファイルを入手してください。これには、評価の一部に答えるために検討して組み合わせる必要がある一連の未加工のセレクタとルールセットが含まれています。

**メモ:** 代わりとして、JSBin や Thimble のようなサイトを使って評価することもできます。HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、この URL を使用して `<img>` 要素を画像ファイルに向けることができます。使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の `<style>` 要素に自由に配置してください。

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

生の HTML と画像が提供されているので、これにスタイルを設定するのに必要な CSS を気の利いた小さなオンライン名刺に書く必要があります。これは、おそらくゲーマーカードやソーシャルメディアのプロファイルを兼ねるでしょう。次のセクションではする必要があることについて説明します。

基本設定:

* まず最初に、HTML と画像ファイルと同じディレクトリーに新しいファイルを作成してください。それを `style.css` のような本当に想像力豊かなものと呼びます。
* `<link>` 要素を介して CSS を HTML ファイルにリンクします。
* CSS リソースファイルの最初の 2 つのルールセットは無料です。幸運を祈って楽しんだら、コピーして新しい CSS ファイルの先頭に貼り付けます。これらをテストとして使用して、CSS が HTML に正しく適用されていることを確認してください。
* 2 つの規則の上に、CSS コメントをその中にテキストを追加して、これがページ全体の一般的なスタイルのセットであることを示します。「一般的なページスタイル」でも構いません。また、CSS ファイルの下部にさらに 3 つのコメントを追加して、カードコンテナの設定に固有のスタイル、ヘッダーとフッターに固有のスタイル、およびメインの名刺の内容に固有のスタイルを示します。 今後、スタイルシートに追加された後続のスタイルは適切な場所に編成される必要があります。

CSS リソースファイルで提供されているセレクタとルールセットに注意してください。

* 次に、4 つのセレクタを見て、それぞれの詳細度を計算してください。CSS の上部にあるコメントなど、後で見つけられる場所にこれらを書き留めてください。
* では、正しいセレクタを正しいルールセットに配置しましょう。CSS リソースには、4 組のセレクタとルールセットがあります。今すぐこれを行い、それらを CSS ファイルに追加してください。必要があるのは：
    + メインカードコンテナの幅と高さ、背景色、ボーダー、ボーダー半径 (角丸) などを固定します。
    + ヘッダーに、濃い色から明るい色への背景グラデーションと、メインカードコンテナに設定された丸みのある角に合う丸みのある角を付けます。
    + フッターには、明るいものから暗いものまでの背景のグラデーションと、メインカードコンテナに設定された丸みのある角に合う丸みのある角を付けます。
    + 画像をメインの名刺の内容の右側に貼り付け、最大の高さを 100％にします (どの高さになるかにかかわらず、親コンテナと同じ高さを維持するために拡大/縮小することを保証する巧妙なトリック) 。
* 注意してください。提供されているルールセットには 2 つのエラーがあります。知っている任意のテクニックを使用して、これらを見つけ出して進む前に修正してください。

書く必要がある新しいルールセット：

* カードヘッダーとカードフッターの両方を対象としたルールセットを作成し、計算された合計の高さは 50 ピクセル (コンテンツの高さ 30 ピクセル、パディングは全側面で 10 ピクセル) を両方に指定します。
* ブラウザーが `<h2>` 要素と `<p>` 要素に適用するデフォルトのマージンは、私たちのデザインを妨げるので、これらすべての要素をターゲットにしてそれらのマージンを 0 に設定するルールを書きましょう。
* 画像がメインの名刺の内容 (`<article>` 要素) からはみ出ないようにするには、特定の高さを指定する必要があります。`<article>` の高さを 120 px に設定します。ただし、`em`s で表します。また、背景色を半透明の黒にすると、やや濃い色になり、背景の赤い色も少し明るくなります。
* `<h2>` に 20 px の有効フォントサイズ (ただし `em`s で表示) とそれをヘッダーのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。
* フッターの内側の `<p>` を 15 px の有効フォントサイズ (ただし `em`s で表示) とフッターのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。
* 最後のちょっとしたタッチとして、`<article>` の内側の段落に適切なパディング値を指定して、その左端が `<h2>` とフッターの段落に揃うようにし、読みやすくなるように色をかなり明るい色に設定します。

**メモ:** 2 番目のルールセットは `<html>` 要素に `font-size: 10px;` を設定することに注意してください。これは `<html>` のすべての子孫について、em はデフォルトの 16 px ではなく 10 px になることを意味します (これはもちろん、階層内で問題の子孫と `<html>` の間に別の `font-size` が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。

その他の考慮事項

* 読みやすくするために CSS を作成すると、各行に個別の宣言を使用してボーナスマークが付けられます。
* 他のコンテンツを大量に含む名刺をページに配置する場合にこれらのルールが他の要素のスタイル設定を妨げないように、すべてのルールのセレクタチェーンの先頭に `.card` を含める必要があります。
ヒントとコツ
------

* CSS を HTML に適用する以外は、HTML を編集する必要はありません。
* 特定のピクセル長を表現するために必要な `em` 値を計算する際には、ルート (`<html>`) 要素の基本フォントサイズと、必要な値を得るために乗算する必要があるサイズについて考えてください。少なくともこのような単純なケースでは、em の価値があるでしょう。
例
-

次のスクリーンショットは、完成したデザインの外観の例を示しています。

![A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.](/ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension/business-card.png)

評価
--

組織的な研修の一部としてこの評価に従っているなら、あなたは採点のためにあなたの教師/メンターに作業結果を提出できるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単に採点ガイドを入手できます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！

* 前のページ
* Overview: Introduction to CSS


テキスト方向の操作 - ウェブ開発を学ぶ

テキスト方向の操作
=========

* 前のページ
* Overview: Building blocks
* 次のページ

CSS の学習でこれまでに遭遇したプロパティと値の多くは、画面の物理的な大きさに関係しています。たとえば、ボックスの上下左右に border を作成します。これらの物理的大きさは、水平に表示されるコンテンツに非常にきちんとマッピングされ、デフォルトでは、ウェブは右から左への言語（アラビア語など）よりも左から右への言語（英語やフランス語など）をサポートする傾向があります。

しかし近年、CSS は、右から左へのコンテンツや上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな方向性をより適切にサポートするために進化しました。これらのさまざまな方向性は**書き込みモード**と呼ばれます。学習を進めてレイアウトの操作を開始すると、書き込みモードを理解することが非常に役立ちます。そのため、これらのモードを紹介します。

| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本（HTML 入門）および CSS に関するアイデア（CSS の第一歩）に関する基本的な知識を得ている。 |
| --- | --- |
| 目的: | 最新の CSS の "writing modes" の重要性を理解する。 |

書き込みモードとは？
----------

CSS の書き込みモードは、テキストが水平方向または垂直方向のどちらで実行されているかを示します。`writing-mode` プロパティにより、ある書き込みモードから別の書き込みモードに切り替えることができます。これを行うために縦書きモードを使用する言語で作業する必要はありません。また、創造的な目的のためにレイアウトの一部の書き込みモードを変更することもできます。

次の例では、`writing-mode: vertical-rl`を使用して見出しを表示しています。これで、テキストが垂直方向に実行されます。縦書きテキストはグラフィックデザインでは一般的であり、Web デザインにより興味深い外観を追加する方法になります。

`writing-mode` プロパティの 3 つの可能な値は次のとおりです:

* `horizontal-tb`: 上から下へのブロックの流れの方向。文は水平に実行されます。
* `vertical-rl`: 右から左へのブロックの流れの方向。文は垂直に実行されます。
* `vertical-lr`: 左から右へのブロックの流れの方向。文は垂直に実行されます。

したがって、`writing-mode`プロパティは、実際には、ページにブロックレベルの要素が表示される方向（上から下、右から左、または左から右）を設定します。これにより、文章内のテキストの流れが決まります。

"writing modes" と ブロックレイアウトとインラインレイアウト
--------------------------------------

ブロックとインラインのレイアウト、およびいくつかの要素がブロック要素として表示され、他の要素がインライン要素として表示されるという事実についてはすでに説明しました。上で説明したように、ブロックとインラインは、物理的な画面ではなく、ドキュメントの書き込みモードに関連付けられています。英語などのテキストを水平方向に表示する書き込みモードを使用している場合、ブロックはページの上から下にのみ表示されます。

例を見れば、これはより明確になります。この次の例では、見出しと段落を含む 2 つのボックスがあります。 1 つ目は、`writing-mode: horizontal-tb`を使用します。これは、水平にページの上部から下部に向かって書き込まれる書き込みモードです。 2 番目は`writing-mode: vertical-rl`を使用します;これは、垂直に右から左に書き込まれる書き込みモードです。

書き込みモードを切り替えると、ブロックの方向とインラインの方向が変更されます。 `horizontal-tb`書き込みモードでは、ブロックの方向は上から下に向かっています。 `vertical-rl`書き込みモードでは、ブロックの方向は右から左に水平に実行されます。したがって、**block dimension** は常に、使用中の書き込みモードでページにブロックが表示される方向です。 **inline dimension**は、常に文が流れる方向です。

この図は、横書きモードでの 2 つの dimensions を示しています。
 ![Showing the block and inline axis for a horizontal writing mode.](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions/horizontal-tb.png)

この図は、縦書きモードの 2 つの dimensions を示しています。

![Showing the block and inline axis for a vertical writing mode.](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions/vertical.png)

CSS レイアウト、特に新しいレイアウトメソッドを検討し始めると、このブロックとインラインの考え方が非常に重要になります。後で再検討します。

### 方向

書き込みモードに加えて、テキストの方向もあります。上記のように、アラビア語などの一部の言語は水平に書かれていますが、右から左に書かれています。これは、創造的な意味で使用する可能性のあるものではありません。単に右側に何かを並べたい場合は、他の方法もありますが、CSS の性質の一部としてこれを理解することが重要です。 Web は、左から右に表示される言語専用ではありません！

書き込みモードとテキストの方向が変更される可能性があるため、新しい CSS レイアウトメソッドは、左右、上下を参照しません。代わりに、インラインとブロックのこのアイデアとともに、開始と終了について話します。心配する必要はありませんが、レイアウトを見始めるときにはこれらのアイデアに留意してください。 CSS を理解する上で非常に役立ちます。

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

ただし、学習のこの時点で書き込みモードと方向を記述することについて説明する理由は、私たちはすでに、画面の物理的な大きさに関連付けられた多くのプロパティを見ており、横書きモードのときに最も意味があるという事実のためです

2 つのボックスをもう一度見てみましょう。1 つは `horizontal-tb` の書き込みモード、もう 1 つは `vertical-rl`です。これらの両方のボックスに `width` を指定しました。ボックスが縦書きモードでも width があるため、テキストがオーバーフローすることがわかります。

このシナリオで本当に必要なのは、書き込みモードに合わせて基本的に height と width を入れ替えることです。縦書きモードのときは、横書きモードの場合と同じように、ボックスをブロックのディメンションで拡大したいです。

これを簡単にするために、CSS は最近マッピングされたプロパティのセットを開発しました。これらは本質的に、物理的なプロパティ（`width` や `height` など）を**論理的な**、または**フローに関連する**バージョンに置き換えます。

横書きモードで`width`にマップされるプロパティは`inline-size` と呼ばれます。これはインラインディメンションのサイズを参照します。`height`のプロパティの名前は`block-size` で、ブロックディメンションのサイズです。`width`を`inline-size`に置き換えた以下の例で、これがどのように機能するかを見ることができます。

### 論理マージン、ボーダー、パディングのプロパティ

最後の 2 つのレッスンでは、CSS のボックスモデルと CSS のボーダーについて学びました。マージン、ボーダー、およびパディングのプロパティには`margin-top`, `padding-left`, および `border-bottom` があります。width と height のマッピングと同じ方法で、これらのプロパティのマッピングがあります。

`margin-top`プロパティは`margin-block-start`にマップされます—これは常にブロックディメンションの先頭のマージンを参照します。

`padding-left`プロパティは、インライン方向の開始に適用されるパディングである`padding-inline-start`にマップされます。これは、その書き込みモードで文章が始まる場所です。 `border-bottom` プロパティは、`border-block-end`にマップされます。これは、ブロックディメンションの最後のボーダーです。

以下の物理的特性と論理的特性の比較を見ることができます。

`.box`の`writing-mode`プロパティを`vertical-rl`に切り替えてボックスの書き込みモードを変更すると、物理プロパティが物理方向にどのように関連付けられているかがわかりますが、論理的プロパティは書き込みモードで切り替わります。

また、 `<h2>` には黒い `border-bottom`があることがわかります。両方のライティングモードで、下の境界線が常にテキストの下に来るようにする方法を見つけられますか？

個々のボーダーロングハンドをすべて考慮すると、膨大な数のプロパティがあり、論理的プロパティと値の MDN ページですべてのマッピングプロパティを確認できます。

### 論理値

これまで、論理的プロパティ名について見てきました。また、`top`, `right`, `bottom`, および `left`の物理値をとるプロパティもあります。これらの値には、論理値（`block-start`, `inline-end`, `block-end`, および `inline-start`）へのマッピングもあります。

たとえば、画像を左にフロートさせて、画像の周りにテキストを折り返すことができます。以下の例に示すように、`left`を`inline-start`に置き換えることができます。

**この例の書き込みモードを`vertical-rl`に変更して、画像がどうなるかを確認します。 `inline-start`を`inline-end`に変更して、フロートを変更します。**

ここでは、書き込みモードが何であってもマージンが正しい場所にあることを保証するために、論理マージン値も使用しています。

### 物理的または論理的なプロパティを使うべきか？

論理的なプロパティと値は、物理的に同等のものよりも新しいため、ブラウザーにはごく最近実装されました。 MDN の任意のプロパティページをチェックして、ブラウザーサポートがどの程度前にサポートしているかを確認できます。複数の書き込みモードを使用していない場合は、現時点では物理バージョンを使用することをお勧めします。ただし、フレックスボックスやグリッドなどのレイアウトメソッドの処理を開始すると、多くの人が理にかなっているため、最終的にはほとんどの場合、人々は論理バージョンに移行することを期待しています。

まとめ
---

このレッスンで説明する概念は、CSS でますます重要になっています。ブロックとインラインの方向、および書き込みモードの変更に伴うテキストフローの変化を理解することは、今後非常に役立ちます。水平モード以外の書き込みモードを使用しない場合でも、CSS を理解するのに役立ちます。

次のモジュールでは、CSS のオーバーフローについて詳しく見ていきます。

* 前のページ
* Overview: Building blocks
* 次のページ


CSS のデバッグ - ウェブ開発を学ぶ

CSS のデバッグ
=========

* 前のページ
* Overview: Building blocks
* 次のページ

CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。セレクターは合っているはずなのに何も起こらなかったり、ボックスのサイズが期待したどおりにならなかったりなどです。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに各モダンブラウザーのデベロッパーツールはどう役立つかを示します。

| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本（HTML 入門）および CSS に関するアイデア（CSS の第一歩）に関する基本的な知識を得ている。 |
| --- | --- |
| 目的: | ブラウザーの開発ツールの基本と、 CSS の簡単な検査と編集の方法を学ぶ。 |

ブラウザーの開発ツールの使い方
---------------

「ブラウザー開発者ツールとは」という記事は、さまざまなブラウザーやプラットフォームでツールにアクセスする方法を説明する最新のガイドです。ほとんどの場合、特定のブラウザーで開発することを選択し、そのブラウザーに含まれるツールに最も慣れ親しむことになるかもしれませんが、他のブラウザーでのアクセス方法を知っておく価値はあります。これは、複数のブラウザー間で異なるレンダリングが表示されている場合に役立ちます。

また、DevTools を作成するときに、ブラウザーがさまざまな領域に焦点を合わせていることもわかります。例えば、Firefox には、CSS レイアウトを視覚的に操作するための優れたツールがいくつかあり、グリッドレイアウト、フレックスボックス、およびシェイプを検査および編集できます。ただし、ページ上の要素に適用されているプロパティや値を検査したり、エディタから変更を加えたりするためのツールなど、基本的なツールはすべての異なるブラウザーに共通しています。

このレッスンでは、CSS を操作するための Firefox DevTools の便利な機能をいくつか見ていきます。そのために、サンプルファイルを使用します。続けたい場合は、新しいタブでこれを読み込み、上のリンク先の記事で説明したように DevTools を開きます。

DOM とソース表示の違い
-------------

DevTools を初めて使用する人が困るのは、Web ページのソースを表示したとき、またはサーバーに配置した HTML ファイルを見たときに表示されるものと、DevTools の HTML ペインに表示されるものが異なることです。「ソースの表示」で表示されるものとほぼ同じように見えますが、いくつかの違いがあります。

レンダリングされた DOM では、ブラウザーはあなたのために書き方の悪い HTML を修正しているかもしれません。例えば `<h2>` を開いて `<h3>` で閉じるといったように、要素を誤って閉じてしまった場合、ブラウザーはあなたが何をしようとしていたのかを理解し、DOM の HTML は開いていた `<h2>` を正しく `<h2>` で閉じるようになります。ブラウザーはすべての HTML を正規化し、DOM は JavaScript によって行われた変更も表示します。

これと比較して、ソースの表示は、サーバーに保存されている HTML ソース コードにすぎません。DevTools の HTML ツリーには、ブラウザーが任意の時点でレンダリングしている内容が正確に表示されるため、実際に何が起こっているのかを知ることができます。

適用された CSS の調査
-------------

ページ上の要素を選択するには、右クリックまたは Ctrl キーを押しながらクリックして [検査] を選択するか、または DevTools ディスプレイの左側にある HTML ツリーから選択します。`box1` のクラスを持つ要素を選択してみてください。これは、ページ上の最初の要素で、周囲に枠線で囲まれたボックスが描かれています。

![DevToolsを開いたこのチュートリアルのサンプルページ。](/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting1.png)

HTML の右側にあるルールビューを見ると、その要素に適用されている CSS のプロパティと値を見ることができるはずです。box1 クラスに直接適用されているルールと、box の先祖から継承されている CSS、この場合は <body> に適用されている CSS が表示されています。これは、予想していなかった CSS が適用されている場合に便利です。おそらくそれは親要素から継承されているもので、この要素のコンテキストでそれを上書きするルールを追加する必要があるでしょう。

また、速記プロパティを展開する機能も便利です。この例では、`margin` の短縮形を使用しています。

**小さな矢印をクリックしてビューを展開すると、さまざまなロングハンドプロパティとその値が表示されます。**

**パネルがアクティブになっているときは、ルールビューの値のオンオフを切り替えることができます。マウスをかざすとチェックボックスが表示されます。`border-radius` などのルールのチェックボックスのチェックを外すと、CSS は適用されなくなります。**

これを使って A / B 比較を行い、ルールを適用した方が良く見えるかどうかを判断したり、デバッグの手助けをしたりすることができます。例えば、レイアウトがおかしくなり、どのプロパティが問題の原因になっているのかを調べたい場合などです。

値の変更
----

プロパティのオン/オフに加えて、それらの値を編集できます。おそらく、別の色の方が見栄えが良いかどうかを確認したい、または何かのサイズを微調整したいですか。 DevTools を使用すると、スタイルシートを編集してページを再ロードする時間を大幅に節約できます。

**`box1` を選択した状態で、境界線に適用された色を示すスウォッチ (小さな色付きの円) をクリックします。カラーピッカーが開き、いくつかの異なる色を試すことができます。同様の方法で、ボーダーの幅やスタイルを変更することができます。**

![カラーピッカーを開いたDevToolsスタイルパネル。](/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting2-color-picker.png)

新しいプロパティの追加
-----------

DevTools を使ってプロパティを追加することができます。おそらく、`<body>` 要素のフォント サイズを継承せず、ボックスに独自のサイズを設定したいことに気がついたのではないでしょうか？これは、CSS ファイルに追加する前に DevTools で試すことができます。

**ルールの閉じ中括弧をクリックすると、ルールへの新しい宣言の入力が開始され、その時点で新しいプロパティの入力を開始することができます。`font-size` を選択したら、試したい値を入力します。また、[+] ボタンをクリックして同じセレクタで追加ルールを追加し、そこに新しいルールを追加することもできます。**

![DevToolsパネル、新しいプロパティをルールに追加し、フォントのオートコンプリートを開く](/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting3-font-size.png)

**メモ:** ルールビューには他にも便利な機能があります。**たとえば**、無効な値の宣言には**取り消し線が引か**れています。詳しくは、CSS の確認と編集をご覧ください。

ボックスモデルについて
-----------

前のレッスンでは、ボックスモデルについて説明しました。また、指定したサイズに基づいて要素のサイズの計算方法を変更する代替のボックスモデルと、パディングおよび境界線があることを説明しました。DevTools は、要素のサイズの計算方法を理解するのに役立ちます。

レイアウトビューでは、選択した要素上のボックス・モデルのダイアグラムと、要素のレイアウト方法を変更するプロパティと値の説明が表示されます。これには、要素で明示的に使用していないが初期値が設定されているプロパティの説明も含まれます。

このパネルでは、詳細なプロパティの 1 つに `box-sizing` プロパティがあり、これは要素が使用するボックスモデルを制御します。

`box1` と `box2` のクラスを持つ 2 つのボックスを比較してみましょう。どちらも同じ幅 (400px) が適用されていますが、`box1` の方が視覚的には広くなっています。レイアウトパネルを見ると、`content-box` を使用していることがわかります。これは、要素に与えたサイズを受け取り、パディングとボーダーの幅を追加する値です。

`box2` のクラスを持つ要素は `border-box` を使用しているので、ここでは要素に与えたサイズからパディングとボーダーが差し引かれています。つまり、ページ上でボックスが占めるスペースは、あなたが指定したサイズ（この例では `width: 400px`）と同じになります。

![DevToolsのレイアウトセクション](/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting4-box-model.png)

**メモ:** 詳細については、ボックスモデルの調査と検査をご覧ください。

詳細度に関する問題の解決
------------

開発中に、特に既存のサイトの CSS を編集する必要があるときに、いくつかの CSS を適用させるのに苦労することがあります。何をしても要素が CSS を適用してくれないのです。このような場合、一般的には、より具体的なセレクタが変更を上書きしていることが考えられますが、ここでは DevTools を使用することで解決することができます。

この例のファイルでは、`<em>` 要素に包まれた 2 つの単語があります。1 つはオレンジ色で、もう 1 つはホットピンク色で表示されています。CSS では、以下のようにしています。

```css
em {
  color: hotpink;
  font-weight: bold;
}
```

しかし、スタイルシートの上には `.special` セレクタ―を持つルールがあります。

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

カスケードと継承のレッスンで特異性について説明したことを思い出していただけると思いますが、クラス セレクタは要素セレクタよりも特異性が高いため、この値が適用されます。特に情報が巨大なスタイルシートのどこかに埋もれている場合は、DevTools を使用することで、このような問題を見つけることができます。

`.special` のクラスを持つ `<em>` を検査すると、DevTools がオレンジ色が適用されていることを示し、また、em に適用されている `color` プロパティが取り消されていることを示しています。これで、クラスが要素セレクタをオーバーライドしていることがわかります。

![emを選択し、DevToolsを見て、何が色を上書きしているかを確認します。](/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting5-specificity.png)

Firefox の開発ツールについて
------------------

MDN には、Firefox DevTools に関する多くの情報があります。DevToolsのメインセクションをご覧ください。このレッスンで簡単に説明した内容の詳細については、ハウツーガイドをご覧ください。

CSS 不具合のデバッグ
------------

CSS の問題を解決する場合、DevTools は非常に役立ちます。CSS が期待どおりに動作しない状況に陥った場合、どのように解決すればよいでしょうか。次の手順が役立ちます。

### 問題から一歩離れてみる

コーディングの問題はどんなものでもイライラすることがありますが、特に CSS の問題は、解決策を見つけるのに役立つようなエラーメッセージをオンラインで検索しても出てこないことが多いので、イライラします。イライラしてきたら、しばらく問題から離れてみましょう。散歩に行ったり、飲み物を飲んだり、同僚とおしゃべりしたり、しばらく他のことに取り組んでみましょう。問題を考えるのをやめれば、魔法のように解決策が現れることもありますし、そうでなくても、スッキリした気分の時に取り組むと、ずっと楽になります。

### HTML と CSS が正しく記述されていますか？

ブラウザーは CSS と HTML が正しく記述されていることを期待しますが、ブラウザーは非常に寛容であり、マークアップまたはスタイルシートにエラーがある場合でも、最善を尽くして Web ページを表示します。コードに誤りがある場合、ブラウザーはあなたが何を意味するのかを推測する必要があり、それはあなたが考えていたものとは異なる決定をするかもしれません。さらに、2 つの異なるブラウザーが 2 つの異なる方法で問題に対処する場合があります。したがって、適切な最初のステップは、HTML および CSS をバリデーターで実行し、エラーを見つけて修正することです。

* CSS バリデーター
* HTML バリデーター
### プロパティと値は対象ブラウザーでサポートされていますか？

ブラウザーは、理解できない CSS を単に無視します。使用しているプロパティまたは値が、テストしているブラウザーでサポートされていない場合、何も壊れませんが、その CSS は適用されません。DevTools は一般的に、サポートされていないプロパティと値を何らかの方法で強調表示します。下のスクリーンショットでは、ブラウザーは `grid-template-columns` のサブグリッド値をサポートしていません。

![grid-template-columns：サブグリッド値がサポートされていないため、サブグリッドに線を引いたブラウザーDevToolsの画像。](/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS/no-support.png)

また、MDN の各プロパティページの下部にあるブラウザーの互換性の表を見ることもできます。これらの表は、そのプロパティのブラウザーのサポート状況を示しており、そのプロパティの一部の使用法がサポートされていて、他の使用法がサポートされていない場合は分類されていることが多いです。以下の表は `shape-outside` プロパティの互換性データを示しています。

{{Compat}}### どこかで CSS が上書きされていませんか？

ここで、特異性について学んだ情報が非常に役に立つでしょう。自分が行おうとしていることをより具体的にオーバーライドしているものがある場合、何が何だかわからないという非常にイライラするゲームに突入してしまうことがあります。しかし、上記のように、DevTools を使用すると、どのような CSS が適用されているかが表示されるので、新しいセレクタをオーバーライドするのに十分なほど具体的なものにする方法を見つけることができます。

### 問題の縮小テストケースを作成する

上記の手順で問題が解決されない場合は、もう少し調査する必要があります。この時点での最善の方法は、縮小テストケースとして知られているものを作成することです。問題を減らす」ことができるということは、非常に有用なスキルです。自分のコードや同僚のコードの問題を見つけるのに役立ちますし、バグを報告したり、より効果的に助けを求めたりすることができるようになります。

縮小テストケースとは、関連のない周囲のコンテンツやスタイリングを削除して、可能な限りシンプルな方法で問題を示すコード例のことです。これは、問題のあるコードをレイアウトから取り出して、そのコードや機能だけを示す小さな例を作ることを意味することが多いでしょう。

縮小されたテストケースを作成するには：

1. マークアップが動的に生成される場合—例えば、CMS を介して—問題を示す出力の静的バージョンを作成します。CodePenなどのコード共有サイトは、オンラインでアクセスでき、同僚と簡単に共有できるため、テストケースを減らすのに役立ちます。まず、ページで[ソースの表示]を実行し、HTML を CodePen にコピーしてから、関連する CSS と JavaScript を取得して、それも含めます。その後、問題がまだ明らかかどうかを確認できます。
2. JavaScript を削除しても問題が解決しない場合は、JavaScript を含めないでください。JavaScript を削除*し*ても問題が解決しない場合は、できるだけ多くの JavaScript を削除して、問題の原因はすべて残してください。
3. 問題の原因となっていない HTML を削除します。コンポーネントまたはレイアウトの主要な要素を削除します。繰り返しになりますが、まだ問題を示している最小限のコードになるようにしてください。
4. 問題に影響を与えない CSS をすべて削除します。

その過程で、何が問題を引き起こしているのかを発見したり、特定の何かを取り除くことで、 少なくとも問題のオン/オフを切り替えることができるようになるかもしれません。あなたが物事を発見したときに、あなたのコードにいくつかのコメントを追加する価値はあります。助けを求める必要がある場合は、それがあなたがすでに試したものを助けてくれる人に伝えてくれます。これにより、考えられる問題や回避策を検索するのに十分な情報が得られる場合があります。

問題を解決するのにまだ苦労している場合は、テストケースを減らすことで、フォーラムに投稿したり、同僚に見せたりして、助けを求めることができます。助けを求める前に、問題を軽減し、どこで問題が発生しているかを正確に特定する作業を行ったことを示すことができれば、助けを得る可能性が高くなります。経験豊富な開発者であれば、問題を迅速に発見して正しい方向に導くことができるかもしれませんが、そうでない場合でも、テストケースを縮小したことで、開発者はすばやく確認することができ、少なくとも何らかの助けを提供できるようになるでしょう。

問題が実際にブラウザーのバグである場合、テストケースの縮小を使用して、関連するブラウザーベンダーにバグレポートを提出することもできます（例：Mozilla のbugzilla サイト）。

CSS を使いこなせるようになると、問題を発見するのが早くなることに気づくでしょう。しかし、最も経験豊富な人でも、「一体何が起こっているのか」と疑問に思うことがあります。体系的なアプローチをとり、テストケースを減らし、他の人に問題を説明すると、通常、修正が見つかります。

* 前のページ
* Overview: Building blocks
* 次のページ


CSS セレクター - ウェブ開発を学ぶ

CSS セレクター
=========

* 前のページ
* Overview: Building blocks
* 次のページ

CSSでは、セレクター (selector) を使って装飾したい HTML 要素を選択します。CSS セレクターは種類豊富なので、装飾したい要素を細かく選択できます。この記事では、さまざまな種類のセレクターについて、その機能を詳しく確認します。

| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本 (HTML 入門) および CSS に関するアイデア (CSS の第一歩) に関する基本的な知識を得ている。 |
| --- | --- |
| 目的: | CSS セレクターがどのように機能するかを学ぶ。 |

セレクターとは
-------

CSS セレクターは、CSS ルール (CSS Rule) の最初の部分です。CSS セレクターは要素やその他の用語の組み合わせで、どの HTML 要素を選択するかブラウザーに伝えます。選択された要素には CSS プロパティ値 (property value) が適用されます。セレクターによって選択された要素を、*選択対象* (*subject of the selector*) と呼びます。

![Some code with the h1 highlighted.](/ja/docs/Learn/CSS/Building_blocks/Selectors/selector.png)

他の記事を読むと、対象の選択方法がセレクターによって異なることに気づくかもしれません。例えば、`h1` は HTML 要素で選択する一方 `.special` はクラスで選択します。

セレクターは CSS セレクター仕様で定義されます。ほとんどのセレクターは Level 3 Selectors specification や Level 4 Selectors specification で定義されています。CSS の他の部分と同様に、セレクターが機能するにはブラウザーのサポートが必要ですが、どちらも成熟した仕様なのでブラウザーのサポートも充実しています。

セレクター一覧
-------

同じ CSS を使用する場合は、それぞれのセレクターを *セレクターリスト* (*selector list*) にまとめてルールを適用できます。たとえば、`h1` と `.special` の CSS が同じ場合、2 つの個別のルールとして記述できますし、

```css
h1 {
  color: blue;
}

.special {
  color: blue;
}
```

カンマ区切りでセレクターリストにもできます。

```css
h1, .special {
  color: blue;
}
```

カンマの前後にホワイトスペースを入れても大丈夫です。改行したほうが読みやすいかもしれません。

```css
h1,
.special {
  color: blue;
}
```

以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が変わらないはずです。

この方法でセレクターをまとめている場合、間違った文法で書かれたセレクターを 1 つでも含んでいるとルール全体が無視されます。

以下の例では無効なルールは無視され、`h1` のみが装飾されます。

```css
h1 {
  color: blue;
}

..special {
  color: blue;
}
```

ただし結合した場合は、ルール全体が無効とみなされ、`h1` も装飾されません。

```css
h1,
..special {
  color: blue;
}
```

セレクターの種類
--------

セレクターにはいくつかの異なるグループがあり、どれが必要かを知ることは有用です。この節ではさまざまなグループを詳しく見ていきます。

### 要素・クラス・ID によるセレクター

`<h1>` のような HTML 要素を選択するセレクターがこのグループに属します。

```css
h1 {
}
```

クラスを選択するセレクターも同様です。

```css
.box {
}
```

あとは ID です。

```css
#unique {
}
```

### 属性によるセレクター

特定の属性を持つ要素を選択するセレクターがこのグループに属します。

```css
a[title] {
}
```

特定の属性を持ち、かつ、特定の属性値を持つ要素を選択するセレクターもあります。

```css
a[href="https://example.com"]
{
}
```

### 擬似クラスおよび疑似要素によるセレクター

疑似クラス (pseudo-class) 、つまり特定の状態にある要素を選択するセレクターがこのグループに属します。たとえば、`:hover` 擬似クラスはマウスポインターがホバーしているときにのみ要素を選択します。

```css
a:hover {
}
```

擬似要素 (pseudo-element) 、つまり要素自体ではなく要素の特定の部分を選択するセレクターもあります。たとえば、`::first-line` は要素（以下の例では `<p>`）内の最初の行をまるで `<span>` でラップしてスタイルしたかのように動作します。

```css
p::first-line {
}
```

### 結合子

最後のグループのセレクターは、セレクター同士を組み合わせて文書内のターゲット要素を選択します。たとえば、以下の例では子結合子（子コンビネーター、child combinator）(`>`) によって `<article>` 要素の直接の子である段落を選択します。

```css
article > p {
}
```

次のステップ
------

この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、要素・クラス・ID によるセレクターから見ていくこともできます。

* 前のページ
* Overview: Building blocks
* 次のページ
セレクターのリファレンス表
-------------

以下の表で使用可能な各セレクターの概要と、それぞれの使い方を示すガイド内ページへのリンクを紹介します。そこには各セレクターのブラウザーサポートを確認できる MDN ページへのリンクもあります。セレクターを検索したり一般的に CSS を体験するときに、ここに戻ってきて参照できます。

| セレクター | 例 | CSS チュートリアル |
| --- | --- | --- |
| 要素セレクター | `h1 { }` | 要素セレクター |
| 全称セレクター | `* { }` | 全称セレクター |
| クラスセレクター | `.box { }` | クラスセレクター |
| ID セレクター | `#unique { }` | ID セレクター |
| 属性セレクター | `a[title] { }` | 属性によるセレクター |
| 擬似クラスセレクター | `p:first-child { }` | 疑似クラス |
| 疑似要素セレクター | `p::first-line { }` | 疑似要素 |
| 子孫結合子 | `article p` | 子孫結合子 |
| 子結合子 | `article > p` | 子結合子 |
| 次兄弟結合子 | `h1 + p` | 隣接兄弟 |
| 後続兄弟結合子 | `h1 ~ p` | 一般兄弟 |


CSS の値と単位 - ウェブ開発を学ぶ

CSS の値と単位
=========

* 前のページ
* Overview: Building blocks
* 次のページ

CSS で使用されるすべてのプロパティには、特定の値または組み合わせのみが許可されており、MDN の各プロパティに関するページでは有効な値を理解するのに役立ちます。このレッスンでは、もっとも一般的な値と単位について見ていきます。

| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本（HTML 入門）および CSS の動作概念（CSS の第一歩）に関する基本的な知識を得ている。 |
| --- | --- |
| 目的: | CSS プロパティで使用されるさまざまな種類の値と単位について学ぶ。 |

CSS での値とは？
----------

CSS の仕様や MDN のプロパティページでは、`<color>` や `<length>` のような角括弧で囲まれた値を見つけることができます。`<color>` の値がその特定のプロパティとして妥当なとき、ここではそのプロパティの妥当な色を表していることを意味しています。具体的な値は `<color>` のリファレンスページを参照してください。

**メモ:** *データタイプ* を参照する CSS の値を確認しましょう。これは、基本的に交換可能です — データタイプとして参照する、CSS であなたが見るものは装飾のための値を示しています。

**メモ:** CSS の値は<>括弧で示すことが多く、CSS のプロパティによって違います(例えば`color` プロパティや <color> データタイプがあります)。CSS のデータタイプ型と HTML の要素は違いますので、混乱しないでください。両方とも<>括弧を使います　— しかしそれらを使用するコンテキストは全く異なります。

次の例では、キーワードを使用して章立ての色を設定し、かつ背景色を `rgb()` 関数を使って指定します。:

```css
h1 {
  color: black;
  background-color: rgb(197, 93, 161);
}
```

CSS の値は指定可能なサブ値の集合を定義します。これは、`<color>` が妥当な箇所では、異なる種類の色の値、キーワード、16 進数、`rgb()` 関数などで設定できるかどうか考える必要はありません。あなたのブラウザーがサポートしていると仮定できる、*あらゆる* 利用可能な `<color>` の値が指定できます。MDN のページはそれぞれのブラウザーがサポートしている値の情報を提供します。例えば、`<color>` のページには、ブラウザーの互換性のセクションがあり、サポートされているそれぞれの種類を見られます。

ここでは見ることが多いいくつかのタイプの値や単位を確認しましょう。また例のさまざまな値を変えて試しましょう。

数値・長さ・割合
--------

CSS では数値データ型をいくつかみるでしょう。次のものは数値に分類されています。:

| データタイプ | 説明 |
| --- | --- |
| `<integer>` | `<integer>` (整数)は、`1024` や `-55` のようなすべての整数です。 |
| `<number>` | `<number>` (数)は 10 進数です。小数点のあるものとないものがあります。例えば、`0.255`、`128` や `-1.2` です。 |
| `<dimension>` | `<dimension>` (寸法)は `<number>` に付属するものです。例えば、`45deg`, `5s`, それに `10px` です。`<dimension>` には `<length>` (長さ), `<angle>` (角度), `<time>` (時間), さらに `<resolution>` (解像度)型があります。. |
| `<percentage>` | `<percentage>` (パーセント)は他の値との割合を表します。例えば、`50%`. この値は常に他の量との相対比です。例えば、ある要素の長さは、その親要素の長さが関連しています。 |

### Lengths(長さ)

数値型でもっともよく遭遇するのは、`<length>`です。例えば、`10px` (ピクセル) や `30em` です。CSS で使用される長さの種類は二つに分けられます。relative(相対)と absolute(絶対)です。この違いを理解することは非常に重大です。

#### 絶対長の単位

次の単位はすべて **absolute** length units(絶対的な長さの単位) です。この単位は、他の長さとの関係で決まりません。一般的にこの単位は常に同じサイズと考えられます。

| Unit | 名前 | 換算 |
| --- | --- | --- |
| `cm` | Centimeters センチメートル | 1cm = 96px/2.54 |
| `mm` | Millimeters ミリメートル | 1mm = 1/10 cm |
| `Q` | Quarter-millimeters 1/4 ミリメートル | 1Q = 1/40 1cm |
| `in` | Inches インチ | 1in = 2.54cm = 96px |
| `pc` | Picas パイカ | 1pc = 1in の 1/6 |
| `pt` | Points ポイント | 1pt = 1in の 1/72 |
| `px` | Pixels ピクセル | 1px = 1in の 1/96 |

これらの値は印刷には便利ですが、画面出力には向いていません。私たちは、スクリーン上の長さに、例えば `cm` (センチメートル)を使いません。よく使用するのは `px` (pixels/ピクセル)になります。

#### 相対長の単位

Relative length units (相対的な長さの単位) は、何かとの比較によってサイズが決まります。それは、例えば、親要素のフォントサイズかもしれませんし、ビューポート(画面幅)かもしれません。この相対的な長さ単位はが便利なのは、それを作成するときにいくつかの点に注意して、そのページ内のテキストのサイズや他の要素の相対的なサイズで作成したときです。次の表にウェブ開発で便利な単位を紹介します。

| 単位 | 関係先 |
| --- | --- |
| `em` | `font-size` のようなタイポグラフィについての特性の場合は親のフォントサイズ、`width` のような他の特性の場合は要素自体のフォントサイズ。 |
| `ex` | その要素のフォントの文字 "x" の高さ。 |
| `ch` | その要素のフォントの文字 "0" の advance measure（幅）。 |
| `rem` | ルート要素のフォントサイズ。 |
| `lh` | その要素の行の高さ。 |
| `rlh` | ルート要素の行の高さ。ルート要素の `font-size` または `line-height` プロパティに使用する場合、プロパティの初期値を参照する。 |
| `vw` | ビューポート幅の 1%。 |
| `vh` | ビューポート高さの 1%。 |
| `vmin` | ビューポート幅と高さの小さい方の 1%。 |
| `vmax` | ビューポート幅と高さの大きい方の 1%。 |
| `vb` | ルート要素のブロック方向に、最初に含むブロックの大きさの 1%。 |
| `vi` | ルート要素のインライン方向に、最初に含まれるブロックの大きさの 1%。 |
| `svw, svh` | それぞれ、small viewportの幅と高さの 1%。 |
| `lvw, lvh` | それぞれ、large viewportの幅と高さの 1%。 |
| `dvw, dvh` | それぞれ、dynamic viewportの幅と高さの 1%。 |

#### 試してみる

次の例で、絶対的な長さの単位と相対的な長さの単位の振る舞いの違いを確認しましょう。最初のボックスには `width` がピクセル単位で指定されています。 絶対単位なので、この幅は他の何が変わっても同じままです。

二番目のボックスは相対的な長さの単位の、ビューポート幅に関連した `vw` を使用しています。この値は、ビューポート幅と関連しており、10vw は ビューポート幅の 10% にあたります。もしブラウザー幅を変化させた場合、このボックスのサイズは変化します。しかし、このページは `<iframe>` に埋め込んであるため、次の例は動作しません。この動作を確認するには、このリンクをブラウザーの別タブで開いて、例を確認してください。

三番目のボックスは `em` 単位を使います。この単位はフォントサイズに関連しています。`1em` にあたるフォントサイズ設定は `<div>`で指定してあります。これは`.wrapper` クラスがあります。 この値を 1.5em に変更すると、すべての要素のフォントサイズが増加しますが、最後の項目のみ width がフォントサイズに相対的であるため、最後の項目のみが広くなります。

上の手順を行った後で、これらの値を変更してどのようにふるまうかを確認してください。

#### em と rem

`em` と `rem` は開発者がボックスやテキストまですべてのサイズを変更するときによく遭遇する相対的な長さの単位です。これらがどのように動作するか、どのように違いがあるかを理解しましょう。特にスタイルテキスト や CSS レイアウトのようなより複雑なテーマを扱うようになったときに価値があります。以下の例は、デモを提供しています。

この HTML はネストしたリストの組です。全部で 3 つのリストがあり、どちらも同じ HTML です。唯一異なるのは、最初のものは *ems* クラスを持っており、二つ目のものは *rems* クラスを持っていることです。

始めるにあたって、`<html>` 要素のフォントサイズを 16px に指定しました。

**要約すると、em 単位は活字で言えば「私の親要素のフォントサイズ」を意味します。**`ems` の `class` を持つ `<ul>` 内の `<li>` 要素は、親要素からサイズを受け取ります。そのため、入れ子の各レベルは、それぞれのフォントサイズが `1.3em` (親のフォントサイズの 1.3 倍)に設定されているため、徐々に大きくなっていきます。

**要約すると、この rem 単位は活字でいえば、「ルート要素のフォントサイズ」を意味します。**(rem は"root em"を意味します) この `rems` の `class` を持つ `<ul>` の内部の `<li>` 要素はルート要素(`<html>`)からサイズ情報を取得します。 これは、ネストの各レベルが大きくなり続けないことを意味します。

ただし、CSS で `<html>` の `font-size` を変更すると、その他のすべて（ `rem` サイズと `em` サイズの両方のテキスト）が相対的に変更されることがわかります。

### Percentages(パーセント)

多くの場合、percentage (パーセント)は length(長さ)と同じ方法で使用します。percentages のあるものは、ある他の値との相対的な値を設定します。例えば、あなたがある要素の `font-size` に percentage を設定した場合、その親要素の `font-size` のパーセントを意味します。もしある `width` の値に percentage を使用した場合、その親要素の `width` のパーセントに設定されます。

次の例では二つのパーセントでサイズ指定したボックスと、ピクセルでサイズ指定したボックスがあり、これらはそれぞれ同じクラス名を持っています。これは、それぞれ 200px と 40% の幅に設定されています。

ここで異なるのは、二番目のボックスは 400 ピクセル幅のラッパーの内側にあることです。200px で指定したボックスは、一番目と二番目が同じ幅になっています。しかし、二番目の 40%指定したボックスは違います。二番目のボックスは 400 ピクセルの 40% の幅になります。最初のものよりかなり狭くなっています。

**ラップするボックスの幅またはパーセントの値を変更してその影響を確認してください。**

次の例はフォントサイズをパーセントで指定しています。それぞれの `<li>` は 80% の `font-size` です。そのため、ネストしたリストはその親のサイズを継承するため、徐々にフォントサイズが小さくなっています。

注意: 多くの値には length(長さ) と percentage(パーセント)の両方を受け付けますが、中には length しか受け付けないものもあります。どのような値が受け付けられるかを確認するには、MDN プロパティリファレンスページを参照してください。許可される値が `<length-percentage>` の場合は length と percentage の両方を使用できます。しかし許可される値が `<length>` の場合、percentage は使用できません。

### Numbers(数)

一部の値は、単位のない数値を受け入れます。 単位のない数値を受け入れるプロパティの例は、要素の不透明度（透明度）を制御する `opacity` プロパティです。 このプロパティは、`0`（完全に透明）〜 `1`（完全に不透明）の数値を受け入れます。

**この下の例を見てください。`opacity` を `0` から `1` までの間の数に変えて、この箱とそのコンテンツがどのよう表示されるかを確認してください。**

**メモ:** CSS で値として数を使用する場合、その値を引用符で囲んではなりません。

色
-

CSS で色を指定する方法はたくさんありますが、その中には最近実装されたものもあります。テキストの色を指定する場合でも、背景の色を指定する場合でも、CSS ではどこでも同じ色の値を使うことができます。

最近のコンピューターで利用できる標準的な色のシステムは 24 ビットです。これは赤、緑、青のチャンネルでそれぞれ 256 の値を持てるため、およそ 1670 万色 (256 x 256 x 256 = 16,777,216) の色を指定できることになります。CSS で色を指定するさまざまな方法を見てみましょう。

**メモ:** このチュートリアルでは、普通のブラウザーがサポートしている、標準的な色の指定方法を見ていきます。他にも方法がありますが、それらはサポートされていないこともあり、標準的な方法ではありません。

### カラーキーワード

この学習の章や MDN でもよく例を見る方法にカラーキーワードがあります。これは色を指定する方法で非常に単純で理解しやすいものです。カラーキーワードは、その色の名前そのものを入力するだけです。このカラーキーワードのリストは `<color>` の値のページで確認できます。

**下の練習で別のカラーキーワードを試して、それがどのように作用するのか確認してください。**

### 16 進数 RGB

次のカラーの値の種類は、あたながよく遭遇する 16 進数を使うものです。それぞれの 16 進数の値には、ハッシュ記号(#) に続いて、6 個の 16 進数の数が続きます。この数には、0 から f までの 16 個の文字を使用します。(ここで f は 15 に相当) — つまり `0123456789abcdef` を使用します。この値の二文字はそれぞれ赤、緑、青のカラーチャンネルの値を表しています。そのため、16 x 16 = 256 つまり、それぞれのチャンネルに 256 通りの値を指定できます。

これらの値は少し複雑で、わかりにくいものです。しかし、16 進数はキーワードより多くの用途で使用されます。あなたのカラースキームで表す、好きな色を 16 進数で表現できるのです。

**もう一度、値を変更させてどのように色が変化するか確認しましょう。**

### RGB と RGBA

第三の方法として、RGB を説明します。RGB の値は関数 `rgb()` に渡して使います。この関数は、3 つのパラメータを受け取り、それぞれ、赤、緑、青のチャンネルの色の値として扱います。ちょうど 16 進数での表記とよく似ています。RGB は 2 つの 16 進数で表すのと違い 0 から 255 の 10 進数の数で指定します。こちらの方が少しわかりやすいです。

最後の表記を書き直して、RGB で表現してみましょう。

また、RGBA カラー方式もあります。これは、RGB カラー方式とまったく同じ方法で、RGB で表すすべての値を使用できます。しかし、RGBA は 4 つのパラメータをとり、4 番目のパラメータは色のアルファチャンネル、つまり色の不透明度(または透明度)を表します。この 4 番目のパラメータの値が `0` のとき完全な透明を表し、`1` のとき完全な不透明を表します。その間の値を指定してさまざまなレベルの透明度を指定できます。

**メモ:** 色でアルファチャンネルを設定することと、より前に学んだ、`opacity` プロパティで設定することの違いに注意しましょう。opacity プロパティで設定した場合、その要素と要素内のすべてが透明になります。一方、RGBA カラーを指定した場合、透明になるのはそのカラーだけです。

下記の例では、色付きの箱に含まれる背景画像を追加しました。そして箱にいろいろな透過値をセットしました — アルファチャンネルが小さくなるときに背景がどう表示されるか注意してみてください。

**この例では、アルファチャンネル値を変更してみて、色の出力にどう影響するのかを見ています。**

**メモ:** ある時点で、最新のブラウザーが更新され、rgba() と rgb()、そして hsl() と hsla() (後述) がお互いの純粋なエイリアスとなり、全く同じ動作をするようになりました。このため `rgba()` と `rgb()` の両方はアルファチャンネル値のある/ない色を受け入れています。上記の例の `rgba()` 関数を `rgb()` に変更して色が動作するのを見てください! どのスタイルを使うのかはあなた次第ですが、不透明と透明の色定義に別の関数を使うのは (とても) 少しブラウザーサポートが良くなって、コード内のどこで透明色を使っているかの目印になります。

### HSL と HSLA

RGB よりサポートがちょっと少ないのが HSL 色モデルです (IE の古いバージョンではサポートされません)、これはデザイナーの関心から実装されました。赤、緑、青の代わりに、`hsl()` 関数は 色相(hue), 彩度(saturation), 輝度(lightness) の値を取り、これは約 1670 万色を、別の方法で分別するのに使われます。

* **色相(Hue)**: 色のベースとなるシェード。これは 0 から 360 の値を取り、色相環の角度を表します。
* **彩度(Saturation)**: 色がどれだけ飽和しているか? これは 0–100% の値を取り、0 は色がなく (グレーのシェードに見える)、100% はフルカラーの飽和となります。
* **輝度(Lightness)**: 色がどれだけ明るいのか? これは 0–100% の値を取り、0 は明度がなく (完全な黒に見える)、100% はフルの明度です (完全な白となる)。

RGB の例を HSL の色に更新すると次のようになります:

RGB に RGBA があるように、HSL には同様な HSLA があり、アルファチャンネルの指定が同様にできます。デモとして RGBA の例を HSLA 色を使うようにしたものは次の通りです。

プロジェクトでどの色の値を使っても良いです。たいていのプロジェクトではカラーパレットを決めてから、この色（と決定した色指定の方法）を、プロジェクト全体を通して使います。色モデルを混用することもできますが、一貫させるために通常はプロジェクト全体で同じものを使うのがベストです!

画像
--

`<image>` データタイプは画像が妥当な値となる場合に使われます。これは `url()` 関数で指定される実際の画像ファイルか、グラデーションです。

下記の例では画像とグラデーションを CSS `background-image` プロパティに使っています。

**メモ:** `<image>` がとり得る他の値もありますが、それは新しくてブラウザーサポートが貧弱です。それについて知りたい場合、MDN の `<image>` データタイプのページを確認してください。

位置
--

`<position>` データタイプは 2 次元座標を表しており、背景画像のような項目 (`background-position` にて)の位置を決めるのに使われます。これは `top`, `left`, `bottom`, `right`, `center` のようなキーワードを取って、ボックスの上や左の隅からオフセットさせる長さの値とともに、2 次元のボックスの特定の境界にアイテムを揃えます。

典型的な位置の値は 2 つの値を持ち — 最初は水平位置を、2 つ目は垂直位置をセットします。1 つの軸だけの値を指定する場合、もう 1 つはデフォルトで `center` となります。

次の例では、背景画像をキーワードを使ってコンテナの右端の上から 40px の位置に配置しています。

**この値でいろいろ遊んでみて、画像がどう移動するか見てください。**

文字列と識別子
-------

上記の例を通じて、キーワードが値として使われる場所を見てきました (例えば、`<color>` キーワードの例として `red`, `black`, `rebeccapurple`, `goldenrod`)。このキーワードをより正確に述べると、CSS が理解できる特別な値の *識別子* です。このためそれは引用符で囲まれておらず、文字列として扱われません。

CSS で文字列が使われる場所もあります、例えば、生成されたコンテンツを指定するときです。この場合、値は文字列を示すようクォートで囲まれます。下記の例ではクォートで囲まれていない color キーワードと生成されたコンテンツ文字列を一緒に使っています。

関数
--

最後に見る値は関数として知られる値です。プログラミングでは、関数とは、繰り返されるタスクを実行するのに何度も呼ばれる、開発者とコンピューター両方の手間を省いてくれる、再利用できるコードの一部分です。関数は通常 JavaScript, Python, C++のような言語と関連付けられますが、CSS にもプロパティ値として存在しています。私たちはすでに色の節で `rgb()`、 `hsl()` などの関数を見ています。ファイルから画像を返すのに使われた値 — `url()` — も関数です。

従来のプログラミング言語にあるような動作をする値は CSS の `calc()` 関数です。この関数を使うと CSS 内で簡単な計算を行うことができます。特にプロジェクトの CSS を書く際に定義できない値を計算したい場合や、実行時にブラウザーに計算させる必要がある場合に便利です。

例えば、下記では `calc()` を使って `20% + 100px` の幅を出しています。20% は親コンテナである `.wrapper` の幅から計算され、その幅が変わると変更されます。親の 20% がいくらになるのか分からないので、この計算を事前にすることはできません。そのため代わりにブラウザーに計算してもらうよう `calc()` を使います。

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

この記事では多くをカバーしましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — Test your skills: Values and unit (en-US) を見てください。

まとめ
---

ここまで最もよく見かける値と単位を一通り見てきました。CSS 値と単位 のリファレンスページで、さまざまなタイプをすべて見ることができます。多くはこのレッスンを進んでいくと出てくるでしょう。

覚えておくべき重要なことは、各プロパティには許可される値の定義されたリストがあり、各値にはサブ値が何であるかを説明する定義があるということです。詳細は MDN で調べることができます。

例えば、`<image>` でもカラーグラデーションを作成できることを理解しておくと便利ですが、たぶん当たり前の知識ではないでしょう!

* 前のページ
* Overview: Building blocks
* 次のページ


ボックスの高度なエフェクト - ウェブ開発を学ぶ

ボックスの高度なエフェクト
=============

* 前のページ
* Overview: Styling boxes
* 次のページ

この記事はトリックの箱として機能し、ボックスの影、ブレンドモード、フィルタのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。

| 前提知識: | HTML の基礎（HTML 入門を学ぶ）、および CSS の機能の考え方（CSS 入門を学ぶ）。 |
| --- | --- |
| 学習目標: | ボックスの高度なエフェクトの使用方法についてのアイデアを得ることと、CSS 言語に登場しているいくつかの新生のスタイル設定ツールについて知ること。 |

ボックスの影
------

テキストの装飾のモジュールに戻って、`text-shadow` プロパティを見てみましょう。 これにより、要素のテキストに 1 つ以上のドロップシャドウを適用できます。 ボックスにも同等のプロパティがあります — `box-shadow` を使用すると、実際の要素ボックスに 1 つ以上のドロップシャドウを適用できます。 テキストの影と同様に、ボックスの影はブラウザー間で非常によくサポートされていますが、IE9 以降のみです。 古いバージョンの IE を使用しているユーザーは、影なしで対処するしかないかもしれないので、コンテンツがそれらなしで判読可能であることを確かめるためにデザインをテストするだけです。

このセクションの例は box-shadow.html にあります（ソースコードも参照）。

### 簡単なボックスの影

物事を始めるための簡単な例を見てみましょう。 まず、いくつかの HTML です。

```html
<article class="simple">
  <p>
    <strong>Warning</strong>: The thermostat on the cosmic transcender has
    reached a critical level.
  </p>
</article>
```

そして、CSS です。

```css
p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.25)
  );
}

.simple {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}
```

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

`box-shadow` プロパティ値に次の 4 つの項目があることがわかります。

1. 最初の長さの値は**水平オフセット**（horizontal offset）です — 影が元のボックスから右へオフセットした距離です（値が負の場合は左）。
2. 2 番目の長さの値は**垂直オフセット**（vertical offset）です — 影が元のボックスから下方向へオフセットした距離です（値が負の場合は上方向）。
3. 3 番目の長さの値は、**ぼかし半径**（blur radius）です — 影に適用されるぼかしの量です。
4. 色の値は、影の**基本色**（base color）です。

これらの値を定義するために必要な長さと色の単位を使用できます。

### 複数のボックスの影

次のように、1 つの `box-shadow` の宣言で、複数のボックスの影をコンマで区切って指定することもできます。
```

<article class="multiple">
  <p>
    <strong>Warning</strong>: The thermostat on the cosmic transcender has
    reached a critical level.
  </p>
</article>
```

```css
p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.25)
  );
}

.multiple {
  box-shadow:
    1px 1px 1px black,
    2px 2px 1px black,
    3px 3px 1px red,
    4px 4px 1px red,
    5px 5px 1px black,
    6px 6px 1px black;
}
```

そして、この結果を得ます。

ここでは、複数の色付きレイヤーを持つ凸型のボックスを作成することで楽しいことができましたが、例えば複数の光源に基づいて影を付けてよりリアルな外観を作成するなど、好きな方法で使用できます。

### その他のボックスの影の機能

`text-shadow` とは異なり、`box-shadow` には `inset` キーワードがあります — これを影の宣言の最初に置くと、外側の影ではなく内側の影になります。 見て理解してもらいましょう。

まず、この例では一部異なる HTML を使用します。

```html
<button>Press me!</button>
```

```css
button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow:
    1px 1px 1px black,
    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
}

button:focus,
button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow:
    inset 2px 2px 1px black,
    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
}
```

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

ここでは、フォーカス/ホバー/アクティブ状態と共にボタンの装飾を設定しました。 このボタンには、デフォルトで単純な黒いボックスの影が設定されています。 さらに、1 つは明るく、もう 1 つは暗い、2 つの内側の影を、ボタンに素晴らしい陰影エフェクトを与えるためにボタンの反対側の角に置きます。

ボタンが押されたとき、アクティブ状態は最初のボックスの影を非常に暗い内側の影と交換し、押されているボタンの外観を与えます。

**メモ:** `box-shadow` 値に設定できる別の項目があります — 色の値の直前に別の長さの値をオプションで設定できるのが、**広がり半径**（spread radius）です。 設定すると、影が元のボックスよりも大きくなります。 あまり一般的ではありませんが、言及する価値があります。

フィルタ
----

CSS フィルタは、Photoshop のようなグラフィックパッケージのレイヤーにフィルタを適用するのと同じ方法で、要素にフィルタを適用する方法を提供します。 利用可能ないくつかの異なるオプションがあり、`filter` のリファレンスページでそれらすべてについて詳しく読むことができます。 このセクションでは、構文について説明し、結果がどれほど楽しいものになるかを説明します。

基本的に、フィルタは任意の要素、ブロック、インラインに適用することができます — あなたは単に `filter` プロパティを使い、それに特定のフィルタ関数の値を与えるだけです。 利用可能なフィルタオプションの中には他の CSS 機能と非常によく似た機能を持つものがあります。 例えば、`drop-shadow()` は非常によく似た方法で機能し、`box-shadow` や `text-shadow` と同じエフェクトをもたらします。 しかし、フィルタに関して本当に素晴らしいことは、ボックス自体を 1 つの大きな塊としてではなく、ボックス内のコンテンツの正確な形状に作用することです。 それは常に望んだものではないかもしれませんが、もっときれいに見えます。 簡単な例を使用して、意味を説明しましょう。

まず、いくつかの簡単な HTML です。

```html
<p class="filter">Filter</p>

<p class="box-shadow">Box shadow</p>
```

そして今、いくつかの CSS はドロップシャドウをそれぞれに適用します。

```css
p {
  margin: 1rem auto;
  padding: 20px;
  width: 100px;
  border: 5px dashed red;
}

.filter {
  -webkit-filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.7));
}

.box-shadow {
  box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.7);
}
```

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

ご覧のとおり、フィルタのドロップシャドウは、テキストの正確な形と境界線の破線に従います。 ボックスの影はボックスの四角形にちょうど従っています。

その他注意すべきこと。

* フィルタは非常に新しく、Microsoft Edge を含む最近のほとんどのブラウザーでサポートされていますが、Internet Explorer ではまったくサポートされていません。 デザインにフィルタを使用する場合は、コンテンツがフィルタなしで使用可能であることを確認する必要があります。
* `-webkit-` 接頭辞が付いたバージョンの `filter` プロパティが含まれていることがわかります。 これはベンダー接頭辞と呼ばれ、新しい機能の実装を完了する前にブラウザーによって使用され、その機能をサポートし、接頭辞の付かないバージョンと衝突せずにその機能を試すことができます。 ベンダー接頭辞はウェブ開発者によって使われることを意図していませんが、実験的な機能が本当に望まれるならば本番ページで使われることもあります。 この場合、現在のところ Chrome / Safari / Opera のサポートには `-webkit-` バージョンのプロパティが必要ですが、Edge と Firefox は最後の接頭辞の付かないバージョンを使用します。

**メモ:** コードで接頭辞を使用する場合は、接頭辞が必要なバージョンと接頭辞の付かないバージョンを必ずすべて含めてください。 そうすれば、可能な限り最大数のブラウザーでこの機能を使用できるようになり、後でブラウザーが接頭辞をなくすときに接頭辞の付かないバージョンも使用できます。 また、これらの実験的な機能は変更される可能性があるため、コードが壊れる可能性があります。 接頭辞が削除されるまで、これらの機能を試してみることが本当に最善です。

その他のフィルタの例が filters.html にあります（ソースコードも参照）。

ブレンドモード
-------

CSS ブレンドモードでは、2 つの要素が重なるときにブレンドエフェクトを指定する要素にブレンドモードを追加できます — 各ピクセルに表示される最終的な色は、元のピクセル色とその下のレイヤーにあるピクセル色を組み合わせた結果になります。 ブレンドモードは、Photoshop のようなグラフィックアプリケーションのユーザーにとっては非常によく知られています。

CSS でブレンドモードを使用する次の 2 つのプロパティがあります。

* `background-blend-mode` は、単一の要素に設定された複数の背景画像と色をブレンドします。
* `mix-blend-mode` は、設定されている要素と、それが重なっている要素をブレンドします — 背景とコンテンツの両方です。

こちらの blend-modes.html サンプルページ（ソースコードを参照）、および `<blend-mode>` リファレンスページには、ここに掲載されている以外にもたくさんの例があります。

**メモ:** ブレンドモードもまた非常に新しいもので、フィルタよりもサポートが多少劣ります。 Edge にはまだサポートがありませんし、Safari はブレンドモードオプションのいくつかをサポートするだけです。

### background-blend-mode

ここでも、これをよりよく理解できるように、いくつかの例を見てみましょう。 まず、`background-blend-mode` です — ここでは次のいくつかの簡単な `<div>` を示すことで、オリジナルとブレンドバージョンを比較できます。

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

次にいくつかの CSS です — `<div>` に 1 つの背景画像と緑色の背景色を追加しています。

```css
div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background: url(colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

.multiply {
  background-blend-mode: multiply;
}
```

結果はこれです — 左側にオリジナル、右側に乗算ブレンドモードがあります。

### mix-blend-mode

それでは、`mix-blend-mode` を見てみましょう。 ここでは上と同様の 2 つの `<div>` を提示しますが、要素がどのようにブレンドされるかを示すために、それぞれが紫色の背景を持つ単純な `<div>` の上に乗っています。

```html
<article>
  No mix blend mode
  <div></div>
  <div></div>
</article>

<article>
  Multiply mix
  <div class="multiply-mix"></div>
  <div></div>
</article>
```

次がこれをスタイルする CSS です。

```css
article {
  width: 280px;
  height: 180px;
  margin: 10px;
  position: relative;
  display: inline-block;
}

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
}

article div:first-child {
  position: absolute;
  top: 10px;
  left: 0;
  background: url(colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

article div:last-child {
  background-color: purple;
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: -1;
}

.multiply-mix {
  mix-blend-mode: multiply;
}
```

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

ここでは、乗算混合（multiply mix）ブレンドが 2 つの背景画像だけでなく、その下の `<div>` からの色もブレンドしていることがわかります。

**メモ:** `position`、`top`、`bottom`、`z-index` など、上記のレイアウトプロパティの一部を理解していなくても心配しないでください。 これらについては、CSS レイアウトのモジュールで詳しく説明します。

-webkit-background-clip: text
-----------------------------

先に進む前に、簡単に言及しておきたいと思うもう 1 つの新生機能は、`background-clip` の `text` 値です（現在 Chrome、Safari、Opera でサポートされており、Firefox で実装されています）。 独自の `-webkit-text-fill-color: transparent;` 機能とともに使用すると、背景画像を要素のテキストの形に切り取ることができ、いくつかの素晴らしいエフェクトをもたらします。 これは公式の標準ではありませんが、普及しており、開発者によってかなり広く使用されているため、複数のブラウザーにわたって実装されています。 このコンテキストで使用すると、Webkit / Chrome 以外のブラウザーでも、両方のプロパティに `-webkit-` ベンダー接頭辞が必要になります。

```css
.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

では、なぜ他のブラウザーが `-webkit-` 接頭辞を実装したのでしょうか？ 主にブラウザーの互換性のためにです — 非常に多くのウェブ開発者が `-webkit-` 接頭辞を使用してウェブサイトを実装し始めているため、実際には標準に従っているのに、他のブラウザーでは壊れているように見え始めました。 そこで彼らはそのような機能をいくつか実装することを余儀なくされました。 これはあなたの仕事で標準的でなく接頭辞の付いた CSS 機能を使用する危険性を浮き彫りにします — それらはブラウザーの互換性の問題を引き起こすだけでなく、変更される可能性もあるため、コードはいつでも壊れる可能性があります。 標準に固執するほうがはるかに良いです。

本番環境でこのような機能を使用したい場合は、ブラウザー間で徹底的なテストを行い、機能が機能しない場合でもサイトが引き続き使用可能であることを確認してください。

**メモ:** 完全な `-webkit-background-clip: text` のコードの例については、background-clip-text.html を参照してください（ソースコードも参照）。

能動的学習: いくつかのエフェクトを用いた実験
-----------------------

今度は、あなたの番です。 この能動的学習のために、下に提供されているコードを使用して、上で読んだエフェクトのいくつかを試してみてください。

間違えた場合は、*Reset* ボタンを使用して例をいつでもリセットできます。
```

<div
 class="body-wrapper"
 style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea
 id="code"
 class="html-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<div class="style-me">
</div></textarea
 >

  <h2>CSS Input</h2>
  <textarea
 id="code"
 class="css-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
.style-me {
  width: 280px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background-color: red;
  background: url(colorful-heart.png) no-repeat center 20px,
              linear-gradient(to bottom right, #f33, #a33);
} </textarea
 >

  <h2>Output</h2>
  <div
 class="output"
 style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div>
  <div class="controls">
    <input
 id="reset"
 type="button"
 value="Reset"
 style="margin: 10px 10px 0 0;" />
  </div>
</div>
```

```
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement("style");
var headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function () {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

まとめ
---

この記事が楽しかったことを願っています — ぴかぴかのおもちゃで遊ぶのは概してそうで、最先端のブラウザーで、どのような種類のツールが使用可能になりつつあるのかを見るのはいつも面白いです。 ボックスの装飾の記事の終わりに到達したので、次に私たちの評価であなたのボックスの装飾のスキルをテストします。

* 前のページ
* Overview: Styling boxes
* 次のページ


表のスタイリング - ウェブ開発を学ぶ

表のスタイリング
========

* 前のページ
* Overview: Building blocks
* 次のページ

HTML の表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでに説明した機能のいくつかとともに、HTML の表を見栄え良くするためのガイドを提供します。

| 前提条件: | HTML の基本 (HTML 入門) と HTML の表に関する知識、 CSS の動作に関する理解 (CSS の第一歩)。 |
| --- | --- |
| 目的: | HTML の表を効果的に装飾する方法を学ぶ。 |

典型的な HTML の表
------------

典型的な HTML の表を見ることから始めましょう。 まあ、私もよく言いますが、ほとんどの HTML の表の例は、靴、天気、あるいは従業員に関するものです。 私たちはイギリスの有名なパンクバンドについてそれを作ることで、もっと面白くすることにしました。 マークアップはこのような感じです。

```html
<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>

    ... 簡潔にするためにいくつかの行を削除

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>
```

`scope`、`<caption>`、`<thead>`、`<tbody>` などの機能のおかげで、表はうまくマークアップされ、簡単に装飾を整えられ、アクセスしやすくなりました。 残念なことに、画面に表示したときは見栄えがよくありません (punk-bands-unstyled.html でライブを見る)。

![](/ja/docs/Learn/CSS/Building_blocks/Styling_tables/table-unstyled.png)

ブラウザーの既定のスタイリングでは、窮屈で、読みにくく、つまらなく見えます。これを修正するためには CSS を使用する必要があります。

表のスタイリング
--------

表の例を一緒にスタイリングしてみましょう。

1. まず始めに、サンプルマークアップのローカルコピーを作成し、noise と leopardskin の両方の画像をダウンロードして、3 つのファイルをローカルコンピュータのどこかの作業ディレクトリーに配置します。
2. 次に、`style.css` という名前の新しいファイルを作成し、他のファイルと同じディレクトリーに保存します。
3. `<head>` の内側に次の HTML 行を配置して、CSS を HTML にリンクします。

```html
<link href="style.css" rel="stylesheet" type="text/css" />
```

### スペーシングとレイアウト

最初にすべきことは、スペーシングやレイアウトを整理することです — 既定のの表の装飾はとても窮屈です！ これを行うには、`style.css` ファイルに次の CSS を追加します。

```css
/\* spacing \*/

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}
```

注意すべき最も重要な部分は次のとおりです。

* `table-layout` の値を `fixed` に設定すると、既定で表の動作が多少予測しやすくなるため、通常は表に設定することをお勧めします。 通常、表の列は、含まれるコンテンツの量に応じてサイズが変更される傾向があり、これは奇妙な結果を生むことがあります。 `table-layout: fixed` を使うと、見出しの幅に応じてカラムのサイズを調整し、その内容を適切に処理することができます。そのために、`thead th:nth-child(n)` (`:nth-child`) セレクター (`<thead>` 要素の中の `<th>` 要素で、シーケンス中の *n* 番目の子を選択する) で 4 つの異なる見出しを選択し、それらに設定されたパーセント値の幅を与えています。列全体の幅はその見出しの幅に従うので、表の列のサイズを変更するのに適した方法です。 Chris Coyier は、このテクニックを Fixed Table Layouts でさらに詳しく説明しています。
 これは 100% の `width` と結合されています。 つまり、表は入れられているコンテナーをすべて満たし、とてもレスポンシブになります (しかし、狭い画面幅で見栄えを良くするにはまだ作業が必要です)。
* `border-collapse` の `collapse` の値は、あらゆる表の装飾の取り組みにおける標準的なベストプラクティスです。 既定では、下の画像に示すように、表要素に境界線を設定すると、境界線の間に間隔が空くことになります。
 ![](/ja/docs/Learn/CSS/Building_blocks/Styling_tables/no-border-collapse.png) これはあまり見栄えがよくありません (あなたが望む外観かもしれませんが、誰にも分かりません)。 `border-collapse: collapse;` を設定すると、境界線は 1 つに折りたたまれ、次のようにずっと良く見えます。
 ![](/ja/docs/Learn/CSS/Building_blocks/Styling_tables/border-collapse.png)
* 表全体を囲むように `border` を付けています。 これは、後で表のヘッダーとフッターに境界線を付けるために必要です — 表の外側全体に境界線がなく、ギャップで終わる場合、それは本当に奇妙でまとまりのないものに見えます。
* `<th>` 要素と `<td>` 要素に `padding` を設定しました。 これにより、データ項目に余裕を持たせることができ、表がもっと見やすくなります。

この時点で、表はすでにずっと良く見えています。

![](/ja/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-spacing.png)

### 簡単なタイポグラフィ

それでは、テキストを少し整理しましょう。

まず第一に、パンクバンドについての表にふさわしいフォントを Google Fonts で見つけてあります。 望むならそこに行って、別なものを探すことができます。私たちが提供する `<link>` 要素とカスタムの `font-family` 宣言を Google Fonts が与えるものと置き換えるだけです。

まず、HTML `head` の既存の `<link>` 要素のすぐ上に、次の `<link>` 要素を追加します。

```html
<link
 href="https://fonts.googleapis.com/css?family=Rock+Salt"
 rel="stylesheet"
 type="text/css" />
```

そして、`style.css` ファイルの以前の追加の下に、次の CSS を追加します。

```css
/\* typography \*/

html {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

thead th,
tfoot th {
  font-family: "Rock Salt", cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}
```

ここに表に固有のものは何もありません。 読みやすくするために、次のようにフォントの装飾を調整しています。

* グローバルなサンセリフのフォントスタックを設定しました。 これは純粋に装飾的な選択です。 また、素敵に汚れた、パンクな外観のために `<thead>` 要素内の見出しと `<tfoot>` 要素内の見出しにもカスタムフォントを設定しました。
* 読みやすくするために、見出しとセルに `letter-spacing` を設定しています。 繰り返しますが、主に装飾的な選択です。
* `<tbody>` 内の表セル内のテキストを見出しと揃えるように中央揃えにしました。 既定では、セルは `text-align` に `left` の値が与えられ、見出しは `center` の値が与えられますが、一般的には、両方の揃えを同じに設定する方が見栄えがよくなります。 見出しフォントの既定の太字は、見た目を区別するのに十分です。
* `<tfoot>` 内の見出しは、データと視覚的に関連付けやすくなるように右揃えしています。

結果は少しきれいに見えます。

![](/ja/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-typography.png)

### グラフィックスと色

今度はグラフィックと色です。表はパンクとその態度でいっぱいですので、それに合わせていくつかの明るい印象的な装飾を与える必要があります。 心配しないで、表をそんなに騒々しくする必要はありません — もっと微妙で上品な何かを選ぶことができます。

次の CSS を `style.css` ファイルの一番下に再び追加してください。

```css
/\* グラフィックと色 \*/

thead,
tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.5)
  );
  border: 3px solid purple;
}
```

繰り返しますが、ここでは表に何も特徴がありませんが、いくつか注意することは価値があります。

`<thead>` と `<tfoot>` に `background-image` を追加し、ヘッダー内とフッター内のすべてのテキストの `color` を白に変更して（そして `text-shadow` を指定して）読みやすくしています。 読みやすいように、テキストが背景と比べてコントラストがあるようにしてください。

また、ヘッダー内とフッター内の `<th>` 要素と `<td>` 要素に線形グラデーションを追加して、テクスチャをきれいにし、それらの要素に明るい紫色の境界線を付けました。 複数のネストした要素を使用できるようにしておくと、スタイルを重ね合わせることができます。 はい、複数の背景画像を使用して `<thead>` 要素と `<tfoot>` 要素に背景画像と線形グラデーションの両方を配置することもできましたが、複数の背景画像や線形グラデーションをサポートしない古いブラウザーの利点のために別々に行うことにしました。

#### ゼブラストライピング

**ゼブラストライプ** (zebra stripes) を実装する方法を示すために別のセクションを捧げたいと思います — 表のさまざまなデータ行を解析して読みやすくするために、行の色を交互に並べます。 `style.css` ファイルの一番下に次の CSS を追加します。

```css
/\* 縞模様 \*/

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}
```

* 先ほど、`:nth-child` セレクターが特定の子要素を選択するために使われていたのを見ました。 式をパラメータとして指定することもできるので、一連の要素を選択します。 式 `2n-1` はすべての奇数番号の子（1、3、5 など）を選択し、式 `2n` はすべての偶数番号の子（2、4、6 など）を選択します。 上のコードでは `odd` と `even` のキーワードを使っていますが、それは前述の式とまったく同じです。 この場合、奇数行と偶数行に異なる（けばけばしい）色を付けます。
* また、すべての本体行に繰り返しの背景タイルを追加しました。 これは、テクスチャを提供するためのわずかなノイズです（視覚的な歪みが少しある半透明の `.png`）。
* 最後に、`:nth-child` セレクターをサポートしていないブラウザーでも本体行に背景があるように、表全体の背景色を単色にしました。

この色の爆発により、以下のような見た目になります。

![](/ja/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-color.png)

さて、これはあなたの好みではなく、少々限度を超えているかもしれませんが、ここで主張しようとしているのは、表が退屈で学術的である必要はないということです。

### キャプションの装飾

表でやるべきことがもう一つあります — キャプションの装飾です。 これを行うには、`style.css` ファイルの一番下に次のコードを追加します。

```css
/\* caption \*/

caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}
```

`caption-side` プロパティに、`bottom` の値が与えられている以外に、ここで注目に値するものは何もありません。 これにより、キャプションは表の下に配置され、他の宣言と共にこの最終的な外観が得られます（punk-bands-complete.html でライブで見る）。

![](/ja/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-caption.png)

表の装飾のちょっとした助言
-------------

先に進む前に、上に示した最も有用なポイントの簡単なリストをお送りします。

* 表のマークアップをできる限り単純にし、物事を柔軟に保ちます。 例えば、パーセントを使用することによって、デザインはよりレスポンシブになります。
* `table-layout``: fixed` を使用すると、見出し（`<th>`）の `width` を設定して列幅を簡単に設定でき、より予測可能な表レイアウトを作成できます。
* `border-collapse``: collapse` を使用して、表要素の境界線を互いに折りたたみ、見た目をよりきれいにして制御しやすくします。
* `<thead>`、`<tbody>`、`<tfoot>` を使用して表を論理的なまとまりに分割し、CSS を適用するための特別な場所を提供することで、必要に応じてスタイルを重ねることが容易になります。
* 行を読みやすくするために、ゼブラストライピングを使用します。
* `text-align` を使用して、`<th>` と `<td>` のテキストを揃えることで、きれいにして見やすくします。
スキルをテストしましょう
------------

この記事では多くの情報を取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます。Test your skills: tables (en-US) を参照してください。

まとめ
---

表のスタイリングも終わりに近づいてきたので、他にも何か時間を割くものが必要になってきました。次の記事では、CSS をデバッグする方法を探ります。レイアウトが思うように見えない、プロパティが適用されないなどの問題を解決する方法です。これには、ブラウザーの DevTools を使用して問題を解決する方法についての情報も含まれています。

* 前のページ
* Overview: Building blocks
* 次のページ