ボックスモデル - ウェブ開発を学ぶ

ボックスモデル
=======

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

CSS にはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することでより複雑なレイアウトができるようにします。

| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本 (HTML 入門) および CSS に関するアイデア (CSS の第一歩) に関する基本的な知識を得ている。 |
| --- | --- |
| 目的: | CSS のボックスモデルとその構成要素、代替モデルへの切り替えについて学ぶ。 |

ブロックボックスとインラインボックス
------------------

CSS には、**ブロックボックス**と**インラインボックス**の 2 種類のボックスがあります。これらの特性は、ページフローの観点から、およびページ上の他のボックスとの関係でボックスがどのように動作するかを示します。

ボックスがブロックとして定義されている場合、次のように動作します:

* ボックスはインライン方向に伸びて、コンテナで使用可能なスペースを埋めます。 ほとんどの場合、これは、ボックスが container と同じ幅になり、使用可能なスペースの 100% を占めることを意味します。
* ボックスは新しい行に分割されます。
* `width` と `height` のプロパティが尊重されます。
* padding、margin および border により、他の要素がボックスから遠ざけられます。

表示タイプをインラインに変更することを決定しない限り、デフォルトでは見出し (例: `<h1>`) や `<p>` などの要素はすべて外部表示タイプとして `block` を使用します。

ボックスの外側の表示タイプが `inline` の場合:

* ボックスは改行されません。
* `width` と `height` のプロパティは適用されません。
* padding、margin および border が適用されますが、他のインラインボックスがボックスから移動することはありません。

リンクに使用される `<a>` 要素や、`<span>`、`<em>` および `<strong>` はすべて、デフォルトではインラインで表示される要素の例です。

要素に適用されるボックスのタイプは、`block` や `inline` などの `display` プロパティ値によって定義され、`display` の**外側**の値に関連します。

余談: 内側と外側の表示タイプ
---------------

この時点で、**内側**と**外側**の表示タイプについても説明するべきでしょう。上記のように、CSS のボックスには*外側*の表示タイプがあり、ボックスがブロックかインラインかを詳細に示します。

ただし、ボックスには内部表示タイプもあり、これにより、そのボックス内の要素のレイアウト方法が決まります。デフォルトでは、ボックス内の要素は\*\*通常のフロー\*\*でレイアウトされます。つまり、他のブロック要素やインライン要素と同じように動作します（上記で説明したように）。

ただし、`flex` などの `display` の値を使用して、内部の表示タイプを変更できます。要素に `display: flex;` を設定する場合、外側の表示タイプは `block` ですが、内側の表示タイプは `flex` に変更されます。このボックスの直接の子要素はすべてフレックスアイテムになり、Flexbox 仕様で規定されているルールに従ってレイアウトされます。これについては後で学習します。

**メモ:** ディスプレイの値、およびブロックおよびインラインレイアウトでのボックスの動作の詳細については、ブロックおよびインラインレイアウトに関する MDN ガイドを参照してください。

CSS レイアウトについてさらに詳しく学習すると、`flex` や、例えば `grid` のようなボックスに設定できる他のさまざまな内部の値と出会うでしょう。

ただし、ブロックおよびインラインレイアウトは、ウェブ上のデフォルトの動作です。前述のように、*通常のフロー*と呼ばれることもあります。他の指示がない場合、ボックスはブロックまたはインラインボックスとしてレイアウトされるためです。

さまざまな表示タイプの例
------------

次に進み、いくつかの例を見てみましょう。以下に、3 つの異なる HTML 要素があります。これらはすべて、外部表示タイプの `block` を持っています。1 つ目は段落で、CSS で border が追加されています。ブラウザーはこれを block box としてレンダリングするため、段落は新しい行で始まり、利用可能な全幅に拡張されます。

2 番目はリストで、これは `display：flex` を使用してレイアウトされます。これにより、コンテナ内のアイテムのフレックスレイアウトが確立されますが、リスト自体は block box であり、段落と同様に、container の幅いっぱいに拡張され、新しい行に分割されます。

この下にブロックレベルの段落があり、その中に 2 つの `<span>` 要素があります。通常、これらの要素は `inline` ですが、要素の 1 つにブロックのクラスがあり、`display: block` に設定しました。

この次の例では、`inline` 要素の動作を確認できます。最初の段落の `<span>` はデフォルトではインラインのため、強制的に改行しません。

また、`display: inline-flex` に設定された `<ul>` 要素があり、一部の flex アイテムの周りにインラインボックスを作成します。

最後に、`display: inline` に設定された 2 つの段落があります。inline flex container と段落はすべて、ブロックレベルの要素として表示されている場合のように新しい行に分割されるのではなく、1 行で一緒に実行されます。

**この例では、`display: inline` を `display: block` に、または`display: inline-flex` を `display: flex` に変更して、これらの表示モードの間を切り替えられます。**

これらのレッスンの後半では、フレックスレイアウトなどの問題と出会います。現時点で覚えておくべき重要な点は、`display` プロパティの値を変更すると、ボックスの外側の表示タイプがブロックかインラインかを変更できるため、レイアウト内の他の要素と一緒に表示する方法が変わることです。

レッスンの残りの部分では、外側のディスプレイタイプに集中します。

CSS のボックスモデルとは？
---------------

完全な CSS ボックスモデルはブロックボックスに適用され、インラインボックスはボックスモデルで定義された動作の一部のみを使用します。 モデルは、ボックスのさまざまな部分 (マージン、ボーダー、パディング、コンテンツ) がどのように連携してページに表示できるボックスを作成するかを定義します。 さらに複雑さを追加するために、標準および代替ボックスモデルがあります。

### ボックスの構成

CSS でブロックボックスを構成するには、次のものがあります。

* **Content box**: コンテンツが表示される領域。`width` や `height` などのプロパティを使用してサイズを変更できます。
* **Padding box**: パディングはコンテンツの周囲に空白として配置されます。 そのサイズは `padding` および関連するプロパティを使用して制御できます。
* **Border box**: 境界ボックスは、コンテンツとパディングをラップします。そのサイズとスタイルは、`border` および関連するプロパティを使用して制御できます。
* **Margin box**: マージンは最も外側のレイヤーで、このボックスと他の要素の間の空白としてコンテンツ、パディング、および境界線をラップします。そのサイズは、`margin` および関連するプロパティを使用して制御できます。

以下の図は、これらのレイヤーを示しています:
 ![Diagram of the box model](/ja/docs/Learn/CSS/Building_blocks/The_box_model/box-model.png)

### CSS ボックスモデルの標準

標準のボックスモデルでは、ボックスに `width` と `height` を指定すると、*コンテンツボックス*の幅と高さが定義されます。 次に、すべての padding と border がその幅と高さに追加され、ボックスが占める合計サイズが取得されます。 これを下の画像に示します。

ボックスに `width`、`height`、`margin`、`border` および `padding` を定義する次の CSS があると仮定した場合:

```css
.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}
```

標準のボックスモデルを使用してボックスが占めるスペースは、実際には 410px (350 + 25 + 25 + 5 + 5) で、高さは 210px (150 + 25 + 25 + 5 + 5) であり、padding と border は コンテンツボックスに使用される幅に追加されます。
 ![Showing the size of the box when the standard box model is being used.](/ja/docs/Learn/CSS/Building_blocks/The_box_model/standard-box-model.png)

**メモ:** マージンは、ボックスの実際のサイズにはカウントされません。確かに、ボックスがページ上で占める合計スペースに影響しますが、ボックスの外側のスペースにのみ影響します。ボックスの領域は境界線で停止します—マージンまでは達しません。

### CSS ボックスモデルの代替

ボックスの実際のサイズを取得するために border と padding を追加する必要があるのはかなり不便だと思うかもしれませんが、正しい感覚でしょう！このため、CSS には、標準ボックスモデルのしばらく後に導入された代替ボックスモデルがありました。このモデルを使用すると、幅はページ上の表示ボックスの幅になるため、コンテンツ領域の幅は、その幅からパディングとボーダーの幅を引いたものになります。上記と同じ CSS を使用すると、以下の結果が得られます (幅 = 350px、高さ = 150px)。

![Showing the size of the box when the alternate box model is being used.](/ja/docs/Learn/CSS/Building_blocks/The_box_model/alternate-box-model.png)

デフォルトでは、ブラウザーは、標準のボックスモデルを使用します。もし要素に対して代替モデルをオンにしたい場合は、`box-sizing: border-box` を設定することでそうできます。これにより、設定した任意のサイズで定義された領域として境界ボックスを取るようにブラウザーに指示しています。

```css
.box {
  box-sizing: border-box;
}
```

すべての要素で代替ボックスモデルを使用することを望み、かつこれが開発者の間で一般的な選択である場合、以下のスニペットで見られるように、`<html>` 要素で `box-sizing` プロパティを設定して、他のすべての要素でその値を継承するように設定してください。この背景にある考え方を理解したい場合は、ボックスサイズ設定に関する CSS トリックの記事を参照してください。

```css
html {
  box-sizing: border-box;
}
\*,
\*::before,
\*::after {
  box-sizing: inherit;
}
```

**メモ:** 興味深い歴史 — Internet Explorer は以前は代替ボックスモデルにデフォルト設定されていましたが、切り替え可能なメカニズムはありませんでした。

ボックスモデルを試してみる
-------------

以下の例では、2 つのボックスを見ることができます。両方とも `.box` のクラスを持ち、同じ `width`、`height`、`margin`、`border`、および`padding` を提供します。唯一の違いは、2 番目のボックスが代替ボックスモデルを使用するように設定されていることです。

**2 番目のボックスのサイズを変更 (`.alternate` クラスに CSS を追加) して、幅と高さを最初のボックスに一致させることはできますか？**

**メモ:** ここでこのタスクの解決策を見つけることができます。

### ブラウザーの開発ツールを利用して、ボックスモデルを見てみる

ブラウザー開発ツールを使用すると、ボックスモデルをとても簡単に理解できます。Firefox の DevTools で要素を調べると、要素のサイズに加えて、margin、padding、border を確認できます。 この方法で要素を検査することは、あなたのボックスが本当にあなたが思っているサイズであるかどうかを知る素晴らしい方法です！

![Inspecting the box model of an element using Firefox DevTools](/ja/docs/Learn/CSS/Building_blocks/The_box_model/box-model-devtools.png)

Margins、padding および borders
---------------------------

上記の例では、`margin`、`padding` および`border` のプロパティが動作しているのを見てきました。 この例で使用されるプロパティは **shorthands** であり、ボックスの 4 辺すべてを一度に設定できます。これらの shorthands には、同等の longhand プロパティもあり、ボックスのさまざまな側面を個別に制御できます。

これらのプロパティをさらに詳しく見てみましょう。

### マージン

マージンは、ボックスの周りの見えないスペースです。 他の要素をボックスから遠ざけます。 マージンには正または負の値を設定できます。 ボックスの片側に負のマージンを設定すると、ページ上の他の部分と重なる場合があります。 標準または代替のボックスモデルを使用しているかどうかにかかわらず、表示ボックスのサイズが計算された後、マージンは常に追加されます。

`margin` プロパティを使用して要素のすべてのマージンを一度に制御するか、同等の longhand properties を使用して各辺を個別に制御できます。

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`

**次の例では、マージン値を変更して、この要素と含まれる要素の間のスペース (負のマージンの場合) を作成または削除するマージンのためにボックスがどのように押し出されるかを確認してください。**

#### マージンの相殺

マージンについて理解する重要なことは、マージンの相殺の概念です。 マージンが接する 2 つの要素が あり、両方のマージンが正の場合、それらのマージンは結合して 1 つのマージンになります。これは、個々のマージンのうちの最大サイズです。一方または両方のマージンが負の場合、負の値の量が合計から差し引かれます。

以下の例では、2 つの段落があります。 上の段落には、50 ピクセルの `margin-bottom` があります。2 番目の段落の `margin-top` は 30 ピクセルです。マージンは一緒に折りたたまれているため、ボックス間の実際のマージンは 50 ピクセルであり、2 つのマージンの合計ではありません。

**これをテストするには、第二段落の `margin-top` を 0 に設定します。2 つの段落間のマージンは変更されません。第一段落の `margin-bottom` に設定された 50 ピクセルを保持します。-10px に設定すると、全体のマージンが 40px になることがわかります— 50px から差し引かれま**す。

マージンが相殺される場合と相殺されない場合を規定する多くのルールがあります。 詳細については、マージンの相殺に関する詳細ページをご覧ください。現時点で覚えておくべき主なことは、マージンの相殺が起こることです。マージンによるスペースを作成していて、期待したスペースが得られない場合、おそらくこれが起こっています。

### Borders

border は、ボックスの margin と padding の間に描かれます。標準ボックスモデルを使用している場合、border のサイズがボックスの `width` と `height` に追加されます。代替ボックスモデルを使用している場合、border のサイズが利用可能な `width` と `height` の一部を占めるため、コンテンツボックスが小さくなります。

border のスタイル設定には、多数のプロパティがあります。4 つの border があり、各 border には、操作したいスタイル、width、color があります。

`border` プロパティを使用して、4 つすべての border の width、color およびスタイルを一度に設定できます。

各辺のスタイルを個別に設定するには、次を使用できます:

* `border-top`
* `border-right`
* `border-bottom`
* `border-left`

すべての辺の幅、スタイル、色を設定するには、次を使用します:

* `border-width`
* `border-style`
* `border-color`

片側の色、スタイル、または width を設定するには、最もきめ細かい longhand プロパティのいずれかを使用できます:

* `border-top-width`
* `border-top-style`
* `border-top-color`
* `border-right-width`
* `border-right-style`
* `border-right-color`
* `border-bottom-width`
* `border-bottom-style`
* `border-bottom-color`
* `border-left-width`
* `border-left-style`
* `border-left-color`

**以下の例では、さまざまなショートハンドとロングハンドを使用して border を作成しています。 さまざまなプロパティを試して、それらがどのように機能するか理解していることを確認してください。border プロパティの MDN ページには、選択可能なさまざまな border スタイルに関する情報が表示されます。**

### パディング

padding は、border とコンテンツ領域の間にあります。margin とは異なり、負の量の padding はできないため、値は 0 または正の値でなければなりません。要素に適用された背景は padding の背後に表示され、通常は border からコンテンツ遠ざけるために使用されます。

`padding` プロパティを使用して要素の各側の padding を個別に制御するか、同等のロングハンドプロパティを使用して各側を個別に制御できます。

* `padding-top`
* `padding-right`
* `padding-bottom`
* `padding-left`

**以下の例で `.box` クラスの padding の値を変更すると、ボックスに関連してテキストの開始位置が変わることがわかります。**

**`.container` クラスの padding を変更することもできます。これにより、container とボックスの間にスペースができます。padding は任意の要素で変更でき、border と要素内にあるものとの間にスペースを作ります。**

ボックスモデルとインラインボックス
-----------------

上記のすべては、ブロックボックスに完全に適用されます。一部のプロパティは`<span>` 要素によって作成されたものなどの、インラインボックスにも適用できます。

以下の例では、段落内に `<span>` があり、`width`、`height`、`margin`、`border` および `padding` が適用されています。width と height が無視されていることがわかります。マージン、パディング、ボーダーは尊重されますが、他のコンテンツとインラインボックスの関係は変わらないため、パディングとボーダーは段落内の他の単語と重なります。

display: inline-block を使用する
---------------------------

`display` には特別な値があり、`inline` と `block` の中間に位置するものを提供します。これは、アイテムを新しい行に分割したくないが、`width` と `height` を尊重し、上記の上書きを避けたい場合に便利です。

`display: inline-block` を持つ要素は、私たちがすでに知っているブロックのサブセットを実行します:

* `width` と `height` のプロパティが尊重されます。
* padding、margin、および border により、他の要素がボックスから遠ざけられます。

ただし、新しい行に分割されることはなく、`width` プロパティと `height` プロパティを明示的に追加した場合にのみ、コンテンツよりも大きくなります。

次の例では、`<span>` 要素に `display: inline-block` を追加しました。これを `display: block` 変更したり、行を完全に削除したりして、表示モデルの違いを確認してください。

これが役立つのは、padding を追加して、リンクのヒット領域を大きくしたい場合です。`<a>` は `<span>` のようなインライン要素です。 `display：inline-block` を使用して padding を設定できるようにし、ユーザーがリンクをクリックしやすくします。

これはナビゲーションバーにかなり頻繁に表示されます。以下のナビゲーションは、flexbox を使用して行に表示され、`<a>` にカーソルを合わせたときに背景色を変更できるように、`<a>` 要素に padding を追加しました。padding は、`<ul>` 要素の border に重なるように見えます。これは、`<a>`がインライン要素であるためです。

**`display: inline-block` を `.links-list a` セレクターを使用してルールに追加すると、padding が他の要素によって尊重されるようにすることで、この問題がどのように修正されるかがわかります。**

まとめ
---

以上が、ボックスモデルについて理解する必要があるほとんどのことです。レイアウト内の大きなボックスの大きさについて混乱している場合は、このレッスンに戻ってください。

次のレッスンでは背景とボーダーを使用してプレーンボックスをより面白くする方法を見ていきます。

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


背景と枠線 - ウェブ開発を学ぶ

背景と枠線
=====

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

このレッスンでは、CSS の背景・枠線モジュールの機能を使ったクリエイティブな表現方法をいくつか見ていきます。グラデーション、背景画像、角の丸めを加えることを通じて、CSS を使ったスタイリングの多様な課題に対する解答が得られるでしょう。

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

CSS による背景の設定
------------

CSS の `background` プロパティは、このレッスンで説明する多くの個別指定プロパティ(**longhand property**)を一度に指定する一括指定プロパティ(**shorthand property**)です。スタイルシートで複雑な背景プロパティを見かけると、一度に多くの値を渡していて理解するのが少し難しく感じるかもしれません。

```css
.box {
  background:
    linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.2) 39%,
        rgba(51, 56, 57, 1) 96%
      ) center center / 400px 200px no-repeat,
    url(big-star.png) center no-repeat,
    rebeccapurple;
}
```

一括指定の仕方については後ほど改めて扱います。まずは背景に対して CSS で何ができるのかを知るために、ひとつひとつのプロパティを見ていきましょう。

### 背景色

`background-color` プロパティは、要素の背景色を定義します。このプロパティは、有効な<color>値を受け入れます。`background-color`は、要素の **Content box**, **Padding box** の範囲でコンテンツの下に広がります。

次の例では、さまざまな色の値を使用して、ボックス(`.box`)、見出し(`h2`)、および `<span>` 要素に背景色を指定しています。

**利用可能な <color> を使ってみましょう。**

### 背景画像

`background-image` プロパティは、要素の背景に表示する画像を指定します。次の例には、2 個のボックスがあります。片方のボックスでは背景画像がボックスより大きく、他方のボックスの背景画像は小さな星の画像です。

 この例は、背景画像に関する 2 つのことを示しています。
 デフォルトでは、大きな画像はボックスに収まるように縮小されず、一部分のみが表示されます。いっぽう、小さな画像はボックスの内側いっぱいまで繰り返されます。この場合、実際の画像は星 1 個のみです。

背景画像と背景色を同時に指定すると、背景色より手前に背景画像が表示されます。上記の例に`background-color`プロパティを追加して、動作を確認してみましょう。

#### 背景画像の繰り返しの指定

`background-repeat` プロパティは、画像の繰り返し表示の動作を制御するために使用されます。使用可能な値には次のものがあります:

* `no-repeat` — 背景画像が繰り返されるのを完全に防ぎます。
* `repeat-x` — 水平方向に繰り返します。
* `repeat-y` — 垂直方向に繰り返します。
* `repeat` — デフォルト; 両方の方向に繰り返します

**以下の例でこれらの値を試してみましょう。値を`no-repeat`に設定したため、星が 1 つだけ表示されます。異なる値(`repeat-x`や`repeat-y`)に変えてみて、その効果を確認してみましょう。**

#### 背景画像のサイズ指定

先ほどの例では、背景を設定したい要素より画像のほうが大きいため画像の一部しか表示されませんでした。 `background-size` プロパティを使用して、背景内に収まるように画像のサイズを調整できます。

`background-size`プロパティは、<length> または <percentage> の値をとることができます。

また、次のキーワードを使うこともできます：

* `cover` —ブラウザーは、アスペクト比を維持したままボックスの領域を完全に覆うように画像の大きさを調整します。
 この場合、画像の一部が箱の外に出る可能性があります。
* `contain` —ブラウザーは、画像がボックス内にちょうど収まるように画像の大きさを調整します。
 この場合、画像とボックスのアスペクト比が異なる場合、画像の左右または上下に隙間ができる可能性があります。

次の例では、\*\*<length>\*\*値を使用して先ほどの大きな画像がボックス内におさまる大きさに変更しました。結果として、画像が歪んでいることがわかります。

以下を試してみましょう。

* 背景のサイズをあらわす\*\*<length>\*\*値を変更します。
* \*\*<length>\*\*値を削除し、`background-size: cover`や`background-size: contain`を使うとどうなるかを確認します。
* 画像がボックスより小さい場合は、`background-repeat`の値を変更して画像を繰り返すことができます。

#### 背景画像の位置の指定

`background-position` プロパティを適用すると、そのボックス上で背景画像を表示する位置を選択できます。このプロパティでは、ボックスの左上隅を`(0, 0)`として、水平方向の座標軸(**horisontal axis**)を`x`軸(**`x` axis**, 複数形は axes）、垂直方向の座標軸(**vertical axis**)を`y`軸(**`y` axis**)とする座標系にそって画像を配置します。

**メモ:** デフォルトの`background-position`の値は`(0, 0)`です。

最も一般的な`background-position`の値は、2 個の値をとります—水平方向、垂直方向の順で値を指定します。

`top`や`right`などのキーワードを使用できます (詳しくは`background-image`ページを参照):

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}
```

そして、 <length>および<percentage>を使用できます:

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}
```

次のように、キーワードの値を<length>や<percentage>の値と混在させてもかまいません。

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}
```

最後に、4 つの値をとる構文を使って、ボックスのいずれかの端からの距離を示すこともできます。この場合の長さは、その直前の値で指定した位置からの距離（オフセット, **offset**）です。下の CSS では、背景を上(`top`)から`20px`、右(`right`)から`10px`に配置しています。

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}
```

**次の例を使い、プロパティの値を変えてボックス内で星を動かしてみましょう。**

**メモ:** `background-position` は `background-position-x` および `background-position-y` の一括指定プロパティで、それぞれの座標軸の方向の位置を個別に設定できます。

### グラデーション背景

グラデーション(**gradient**, **勾配(こうばい)** )は、背景に使用する場合には画像と同じようにふるまいます。グラデーションは`background-image`プロパティを使用して設定されます。

<gradient>データ型の MDN ページで、さまざまな種類のグラデーションとそれらを使ってできることについて詳しく読むことができます。Web で数多く提供されている CSS グラデーションジェネレーター(例えば "CSS Gradient")を使用して、グラデーションを楽しく試せます。この Web サービスでは、グラデーションを作成したのち、グラデーションを生成するソースコードをコピー&ペーストできます。

以下の例でいろいろなグラデーションを試してみましょう。 1 つめのボックスには、ボックス全体に広がる線形グラデーション(linear gradient)を指定しています。2 つめのボックスには、サイズを設定して(そのために繰り返されている)放射状グラデーション(radial gradinet)を指定しています。

### 複数の背景画像

`background-image`プロパティにコンマ区切りで複数の画像を指定することで、複数の背景画像を使用することもできます。

これを行うと、背景画像が互いに重なり合う可能性があります。背景は、最後に指定したものが一番下に置かれ、先のものが順に上に重ねられます。

**メモ:** グラデーションを通常の背景画像と同じように重ね合わせることができます。

他の`background-*`プロパティも、`background-image`と同じ方法でコンマ区切りの値を持つことができます:

```css
background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;
```

プロパティに指定した複数のプロパティ値は、他のプロパティの同じ位置にある値と対応します。上の例で、`image1`の`background-repeat`値は`no-repeat`です。では、プロパティごとに値の個数が異なるとどうなるでしょうか？答えは、個数が少ない値が繰り返し使われる、ということです。上の例では、4 つの背景画像がありますが、2 つの `background-position` の値しかありません。最初の 2 つの位置の値は対応する位置の画像に適用され、その後は繰り返されます。つまり、`image3`には 1 番目、`image4`には 2 番目の値がふたたび使われます。

**実際に試してみましょう。以下の例には 2 つの画像があります。重ね合わせの順序を確かめるために、どの背景画像を先にするかを変えてみてください。また、他のプロパティを操作して、位置、サイズ、繰り返し方法を変えてみてください。**

### スクロール時の背景画像の固定

背景に使用できるもうひとつのオプションは、コンテンツがスクロールするときのスクロール方法を指定することです。これは, `background-attachment` プロパティを使用して制御され、次の値を取ることができます:

* `scroll`: ページ全体のスクロールに応じて要素の背景を移動します。要素のコンテンツがスクロールされた場合には、背景は移動しません。
 実際には背景はページ上の同じ位置に固定されているため、ページがスクロールするとスクロールします。
* `fixed`: 要素の背景をビューポート(viewport)に固定します。ページや要素のコンテンツがスクロールされても移動せず、画面上の同じ位置にとどまります。
* `local`: 要素の背景をその要素自身に対して固定します。要素のコンテンツをスクロールした場合にもそれにあわせて背景が移動します。
 `local`値は、多くの場合に`scroll`値の挙動が期待どおりではないことから新しく追加されました（他の値は Internet Explorer 4 以降でサポートされますが、`local`は IE 9 以降のみでサポートされます）。

`background-attachment` プロパティはスクロールするコンテンツがある場合にのみ効果があります。3 つの値の違いを示すデモ（background-attachment.html）を作成したのでご覧ください（ソースコードも公開しています）。

### 背景に関する指定をまとめておこなう

このレッスンの冒頭で、 `background` プロパティを使って背景が指定されている場合についてふれました。この一括指定プロパティを使うと、複数のプロパティを一度に設定できます。

複数の背景を使用する場合は、最初の背景に対するプロパティをすべて指定してから、カンマで区切って次の背景を追加します。以下の例では、サイズと位置を伴ったグラデーション、`no-repeat`と位置指定を伴った背景画像、最後に背景色を指定しています。

背景画像に関する一括指定を書くとき、いくつかのルールを守る必要があります。例えば：

* `background-color` は最後のコンマの後にのみ指定できます。
* `background-size`の値は、`center / 80％`のように、`background-position`の値の直後に`/`文字を挟んだ位置でのみ使うことができます。

すべての注意点を確認するには、 `background` の MDN ページをご覧ください。

### アクセシビリティの観点での注意点

テキストを背景画像や背景色の上に配置する際には、閲覧者がテキストを読み取れるだけの十分なコントラストを確保するよう注意する必要があります。画像の上にテキストを配置する場合は、画像が読み込まれない場合でもテキストが読み取れるような背景色も指定する必要があります。

スクリーンリーダーは背景画像を解析できないため、画像は装飾としての役割のみを担うべきです。重要なコンテンツはすべて HTML ページのなかで表現するべきで、背景画像のなかに含めるべきではありません。

枠線
--

ボックスモデルについて学習するとき、枠線(border)がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、枠線をクリエイティブに活用する方法を見ていきます。

通常、CSS で要素に枠線を追加するときは、CSS の 1 行で枠線の色、幅、スタイルを指定する一括指定プロパティを使います。

`border`:を使用して、ボックスの 4 辺すべてに枠線を設定できます。

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

または、次のように、ボックスの 1 つの辺を対象にすることができます。:

```css
.box {
  border-top: 1px solid black;
}
```

一括指定で指定した個々のプロパティは次のとおりです：

```css
.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
```

一辺ごとの個別指定については次のようになります：

```css
.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}
```

**メモ:** top, right, bottom, left の各方向の枠線を指定するプロパティには、HTML 文書の書字モード（writing mode）と結びついた*論理*プロパティ（*logical* property）が割り当てられています（書字モードは、左から右、右から左、上から下といったテキストの方向を制御するものです）。次のレッスンでは、さまざまなテキストの方向の処理について説明します。

枠線にはさまざまなスタイルを指定できます。以下の例では、ボックスの 4 辺にそれぞれ異なる枠線スタイルを使用しています。枠線の色、幅、スタイルを試して、枠線の動作を確認しましょう。

### 角の丸み

`border-radius`一括指定プロパティと、各々の角に対応した個別指定プロパティを使用して、ボックスの角の丸みを実現できます。各プロパティは 2 個の<length>または<percentage>を値として使用できます。最初の値は水平方向の半径(radius)を定義し、2 番目の値は垂直方向の半径を定義します。多くの場合、1 つの値のみを指定して両方向に適用します。

例えば、ボックスの 4 つの角すべてに半径 10px の丸みを持たせるには:

```css
.box {
  border-radius: 10px;
}
```

または、右上角の水平方向の半径を 1em、垂直方向の半径を 10％ にするには:

```css
.box {
  border-top-right-radius: 1em 10%;
}
```

以下の例では、はじめに 4 つの角すべてについて角の丸みを設定したのち、右上角を他と異なる値に変更しました。値を変えて試してみましょう。使用できる構文は`border-radius` プロパティのページを見て確認してください。

背景と枠線を試す
--------

学んだ知識を試すために、背景と枠線を使って次のものを作成してみてください。コード例を出発点として使ってください:

1. ボックスに幅が 5px の黒い実線の境界線を付け、角に半径が 10px の丸みをつけてください。
2. 背景画像を追加し（URL `balloons.jpg`を使用）、ボックスを覆うようにサイズを変更してください。
3. `<h2>`に半透明の黒い背景色を指定し、テキストを白にしてください。

**メモ:** ここで正解を確認できますが、まずは自分の力で解答してみてください！

まとめ
---

このレッスンではかなり多くのことを説明してきましたが、そのなかで背景や枠線をボックスに追加する方法がたくさんあることがわかりました。これまでに説明した機能について詳しく知りたくなったら、各プロパティの MDN ページに目を通してみましょう。これらのページには知識を活用したり強化したりするための使用例が書かれています。

次のレッスンでは、ドキュメントの書字モードが CSS とどのように相互作用するかを説明します。テキストが左から右以外の方向に流れる場合に何が起こるのでしょうか？

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


CSS によるサイズ設定 - ウェブ開発を学ぶ

CSS によるサイズ設定
============

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

これまでのさまざまなレッスンで、CSS を使用してウェブページ上のアイテムのサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大事かを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。

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

要素固有のサイズ
--------

HTML 要素には自然なサイズがあり、CSS の影響を受ける前に設定されます。簡単な例は画像です。画像には、ページに埋め込む画像ファイルで定義された幅と高さがあります。このサイズは**固有のサイズ**と呼ばれ、画像自体に由来します。

`<img>` タグまたは CSS の属性を使用してページに画像を配置し、その高さと幅を変更しない場合、その固有のサイズを使用して表示されます。以下の例では、ファイルの範囲を確認できるように画像に境界線を付けています。

ただし、空の `<div>` には独自のサイズはありません。コンテンツのない HTML に `<div>` を追加し、画像で行ったように境界線を付けると、ページに線が表示されます。これは、要素の折りたたまれた境界線です。開いたままにするコンテンツはありません。以下の例では、その境界線はコンテナの幅まで伸びています。これはブロックレベルの要素であるため、慣れ親しんだ動作になるはずです。コンテンツがないため、高さ（またはブロックディメンションのサイズ）はありません。

上記の例では、空の要素内にテキストを追加してみてください。要素の高さがコンテンツによって定義されているため、境界線にはそのテキストが含まれています。したがって、`<div>` ブロックディメンションにおけるこのサイズは、コンテンツのサイズに由来します。繰り返しますが、これは要素の固有のサイズです。そのサイズはコンテンツによって定義されます。

サイズの指定
------

もちろん、デザインの要素に特定のサイズを与えることもできます。要素にサイズが指定されている場合（およびそのコンテンツがそのサイズに収まる必要がある場合）、それを**外部サイズ**と呼びます。上記の例の `<div>` を見てみます。特定の `width` と `height` の値を指定できるため、そ コンテンツがどのように配置されても、そのサイズになります。 前のオーバーフローに関するレッスンで見たように、要素の中に収まるスペースよりも多くのコンテンツがある場合、高さを設定するとコンテンツがオーバーフローする可能性があります。

このオーバーフローの問題のため、要素の高さを長さまたはパーセンテージで固定することは、Web 上で非常に注意深く行う必要があります。

### 比率指定

多くの点で、パーセンテージは長さの単位のように機能し、値と単位に関するレッスンで説明したように、多くの場合、長さと同じ意味で使用できます。パーセンテージを使用している場合、あなたはそれが*何に対する*比率であるかを認識する必要があります。別のコンテナー内のボックスの場合、子ボックスに幅のパーセンテージを与えると、親コンテナーの幅のパーセンテージになります。

これは、パーセンテージがそれを包含するブロックのサイズに対して解決されるためです。パーセンテージを適用しない `<div>` 場合、これはブロックレベルの要素であるため、使用可能なスペースの 100％を占めます。パーセンテージの幅を指定すると、これは通常埋められるスペースに対するの比率になります。

### マージンとパディングの比率

パーセンテージとして `margin` と `padding` を設定すると、奇妙な動作に気付く場合があります。以下の例では、ボックスがあります。内部ボックスに 10％の `margin` と 10％の `padding` を与えました。ボックスの上下の padding と margin は、左右の margin と同じサイズです。

例えば、上下のマージンのパーセンテージは要素の高さのパーセンテージであり、左右のマージンのパーセンテージは要素の幅のパーセンテージであると予想するかもしれません。しかし、そうではありません。

マージンとパディングをパーセンテージで設定する場合、値は**インラインサイズ**から計算されます。したがって横書きの言語で作業するときの幅になります。この例では、マージンとパディングはすべて幅の 10％です。つまり、ボックス全体で同じサイズのマージンとパディングを使用できます。この方法でパーセンテージを使用する場合、これは覚えておかなければならない事実です。

最小サイズ、最大サイズ
-----------

固定サイズを与えることに加えて、要素に最小サイズまたは最大サイズを与えるよう CSS に要求できます。さまざまな量のコンテンツを含む可能性のあるボックスがあり、常に特定の高さ*以上*にしたい場合は、そのボックスに `min-height` プロパティを設定できます。ボックスは常にこの高さ以上になりますが、ボックスの最小高さでのスペースよりも多くのコンテンツがある場合は、ボックスの高さが高くなります。

以下の例では、2 つのボックスがあり、どちらも 150 ピクセルの高さが定義されています。左側のボックスの高さは 150 ピクセルです。右側のボックスには、より多くのスペースを必要とするコンテンツがあるため、150 ピクセルよりも高くなっています。

これは、オーバーフローを回避しながら、可変量のコンテンツを処理するのに非常に役立ちます。

`max-width` の一般的な用途は、固有の幅で表示するための十分なスペースがない場合に画像を縮小し、その幅よりも大きくならないようにすることです。

例として、画像に `width: 100%` を設定する場合、その固有の幅がコンテナーよりも小さいと、画像は強制的に引き伸ばされて大きくなり、ピクセル化されたように見えます。固有の幅がコンテナーよりも大きい場合、オーバーフローします。どちらの場合も、あなたが起こりたいことではないでしょう。

代わりに `max-width: 100%` を使用すると、画像は本来のサイズよりも小さくなりますが、サイズの 100％で止まります。

以下の例では、同じ画像を 2 回使用しています。最初の画像には `width: 100%` が指定されており、それよりも大きいコンテナー内にあるため、コンテナーの幅まで拡大されます。2 番目の画像には `max-width: 100%` が設定されているため、コンテナを埋めるために引き伸ばされることはありません。3 番目のボックスにも同じ画像が含まれており、 `max-width: 100%` も設定されています。この場合、ボックスに収まるように縮小された様子を確認できます。

この手法は、画像を*レスポンシブ*にするために使用されます。そのため、より小さなデバイスで表示すると、適切に縮小されます。ただし、この手法を使用して非常に大きな画像を読み込んでから、ブラウザーで縮小するべきではありません。画像は、デザインに表示される最大サイズに必要なサイズよりも大きくならないように適切なサイズにするべきです。大きすぎる画像をダウンロードすると、サイトが遅くなり、ユーザーが従量制の接続を使用している場合は、より多くの費用がかかる可能性があります。

**メモ:** レスポンシブ画像技術の詳細をご覧ください。

ビューポートに関する単位
------------

ビューポート（サイトの表示に使用しているブラウザーでのページの表示領域）にもサイズがあります。CSS には、ビューポートのサイズに関連する単位（ビューポートの幅 `vw` とビューポートの高さ `vh` ）があります。これらの単位を使用すると、ユーザーのビューポートを基準にしてサイズを変更できます。

`1vh` はビューポートの高さの 1％に等しく、`1vw` はビューポートの幅の 1％に等しい。これらの単位を使用して、ボックスだけでなくテキストのサイズも変更できます。以下の例では、20vh と 20vw のサイズのボックスがあります。ボックスには、 `font-size` が 10vh の文字 `A` が含まれています。

**`vh` との `vw` 値を変更すると、ボックスまたはフォントのサイズが変更されます。ビューポートに相対的なサイズであるため、ビューポートのサイズを変更しても、サイズが変更されます。ビューポートのサイズを変更したときにサンプルの変更を確認するには、サイズを変更できる新しいブラウザーウィンドウにサンプルを読み込む必要があります（上記の例を含む埋め込み `<iframe>` がビューポートであるため）。サンプルを開き、ブラウザーウィンドウのサイズを変更して、ボックスとテキストのサイズがどうなるかを観察します。**

ビューポートに応じてサイズを調整することは、デザインに役立ちます。例えば、全ページのヒーローセクション(hero section)を他のコンテンツの前に表示させたい場合、ページのその部分を 100vh の高さにすると、残りのコンテンツはビューポートの下に押しやられてしまい、ドキュメントがスクロールされたときにのみ表示されます。

まとめ
---

このレッスンでは、Web 上のサイズを決定するときに遭遇する可能性があるいくつかの重要な問題の概要を説明しました。CSS レイアウトに移ると、さまざまなレイアウトメソッドを習得する際にサイズ設定が非常に重要になるため、先に進む前に、ここで概念を理解しておくことをお勧めします。

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


画像・メディア・フォーム要素 - ウェブ開発を学ぶ

画像・メディア・フォーム要素
==============

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

このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能かを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことのをいくつかを取り上げます。

| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本（HTML 入門）および CSS に関するアイデア（CSS の第一歩）に関する基本的な知識を得ている。 |
| --- | --- |
| 目的: | CSS でスタイルを設定したときに一部の要素が異常に動作することを理解する。 |

置換要素
----

画像とビデオは、\*\*置き換えられた要素\*\*として説明されています。これは、CSS がこれらの要素の内部レイアウトに影響を与えることはできず、他の要素の中でのページ上の位置のみに影響を与えることを意味します。ただし、後で説明するように、CSS が画像に対して様々なことができます。

画像や動画などの特定の置換された要素は、アスペクト比を持つものとしても記述されています。これは、水平方向 (x) と垂直方向 (y) の両方の寸法を持ち、デフォルトではファイルの本質的な寸法を使って表示されることを意味します。

画像サイズ
-----

これらのレッスンを受けてすでにお分かりのように、CSS ではすべてのものがボックスを生成します。画像ファイルの固有の寸法よりも小さいか大きいサイズの画像をボックス内に配置すると、ボックスよりも小さく表示されるか、ボックスをオーバーフローさせてしまいます。オーバーフローで何が起こるかについて決定を下す必要があります。

以下の例では、2 つのボックスがあり、どちらもサイズは 200 ピクセルです。

* 1 つは 200 ピクセル未満の画像を含んでいます。これはボックスよりも小さく、それを埋めるために引き伸ばしません。
* もう 1 つは 200 ピクセルより大きく、ボックスをオーバーフローします。

では、オーバーフローの問題について何ができるでしょうか？

前のレッスンで学んだように、一般的な手法は、画像の `max-width` を 100％にすることです。これにより、画像のサイズはボックスよりも小さくなりますが、大きくはなりません。この手法は、`<video>`や `<iframe>` などの他の置換された要素でも機能します。

**上記の例 `max-width: 100%` の `<img>` 要素に追加してみてください。小さい画像は変更されないままですが、大きい画像はボックスに収まるように小さくなります。**

コンテナー内のイメージについて他の選択を行うことができます。例えば、ボックスを完全に覆うように画像のサイズを変更したい場合があります。

ここでは、`object-fit` プロパティが役立ちます。`object-fit` 置き換えられた要素を使用する場合、さまざまな方法でボックスに合うようにサイズを変更できます。

以下では、値 `cover` を使用して画像を縮小し、アスペクト比を維持してボックスをきれいに埋めます。アスペクト比が維持されているため、画像の一部がボックスでトリミングされます。

`contain` を値として使用する場合、ボックス内に収まるほど小さくなるまで画像が縮小されます。これは、ボックスと同じアスペクト比ではない場合、「レターボックス」になります。

`fill` を試すこともできます 。これは、ボックスを塗りつぶしますが、アスペクト比を維持しません。

レイアウト内の置換要素
-----------

置換された要素にさまざまな CSS レイアウト手法を使用すると、他の要素とは動作が少し異なる場合があります。 たとえば、フレックスまたはグリッドレイアウトでは、要素はデフォルトで領域全体に拡大されます。 画像は伸縮せず、代わりにグリッド領域またはフレックスコンテナーの始点に揃えられます。

次の例では、2 列 2 行のグリッドコンテナーがあり、4 つのアイテムが含まれています。すべての `<div>` 要素には背景色があり、行と列に合わせて伸縮します。ただし、画像は引き伸ばされません。

これらのレッスンを順番に実行している場合は、まだレイアウトを確認していない可能性があります。置き換えられた要素は、グリッドまたはフレックスレイアウトの一部になると、基本的にレイアウトによって不自然に引き伸ばされないようにするために、異なるデフォルトの動作になることに注意してください。

画像を強制的に引き伸ばして、グリッドセルを塗りつぶすには、次のような操作を行う必要があります。

```css
img {
  width: 100%;
  height: 100%;
}
```

ただし、これは画像を引き伸ばすため、おそらく望んでいることではありません。

フォーム要素
------

CSS でのスタイル設定に関しては、フォーム要素はトリッキーな問題であり、HTML フォームモジュールには、フォーム要素のスタイル設定に関する詳細なガイドが含まれていますが、ここでは完全には再現しません。記事のこのセクションでは、強調すべきいくつかの重要な点があります。

多くのフォームコントロールは `<input>` 要素によってページに追加されます。これは、テキスト入力などの単純なフォームフィールドから、色や日付の選択などの HTML5 で追加されたより複雑なフィールドまでを定義します。の `<textarea>` などの追加要素や、`<fieldset>` や `<legend>` などのフォームの一部を格納したりラベルを貼ったりするために使われる要素もあります。

HTML5 には、Web 開発者が必須フィールド、さらには入力する必要があるコンテンツのタイプを指定できるようにする属性も含まれています。ユーザーが予期しない何かを入力したり、必須フィールドを空白のままにしたりすると、ブラウザーにエラーメッセージが表示されることがあります。 ブラウザーによって、このようなアイテムのスタイリングやカスタマイズがどの程度可能なのかについては一貫性がありません。

### テキスト入力欄のスタイル

`<input type="text">`、`<input type="email">`、`<textarea>` 要素などのテキスト入力を可能にする要素は、スタイルを整えるのが非常に簡単で、ページ上の他のボックスと同じように振る舞う傾向があります。しかし、これらの要素のデフォルトのスタイルは、ユーザーがサイトを訪問する際に使用するオペレーティングシステムやブラウザーによって異なります。

以下の例では、CSS を使用していくつかのテキスト入力にスタイルを設定しています。境界線、マージン、パディングなどがすべて期待どおりに適用されていることがわかります。属性セレクターを使用して、さまざまな入力タイプをターゲットにしています。ボーダーを調整し、フィールドに背景色を追加し、フォントとパディングを変更して、このフォームの外観を変更してみてください。

**警告:** フォーム要素のスタイルを変更するときは、ユーザーがフォーム要素であることをユーザーに明確に伝えるように注意する必要があります。周囲のコンテンツとほとんど見分けがつかない境界線や背景のないフォーム入力を作成することもできますが、これにより認識や入力が非常に難しくなります。

このコースの HTML パートのフォームスタイリングに関するレッスンで説明したように、より複雑な入力タイプの多くはオペレーティングシステムによってレンダリングされ、スタイリングにアクセスできません。そのため、フォームは訪問者によってかなり違って見えることを常に想定し、複雑なフォームをいくつかのブラウザーでテストする必要があります。

### 継承とフォーム要素

一部のブラウザーでは、フォーム要素はデフォルトではフォントのスタイルを継承しません。そのため、フォームのフィールドがボディや親要素で定義されたフォントを使用するようにしたい場合は、CSS にこのルールを追加する必要があります。

```css
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}
```

### フォーム要素と box-sizing

ブラウザー間で、フォーム要素は、さまざまなウィジェットに対してさまざまなボックスサイズ設定ルールを使用します。ボックスモデルのレッスンで`box-sizing` プロパティについて学習しました。フォームのスタイル設定時にこの知識を使用して、フォーム要素に幅と高さを設定するときに一貫したエクスペリエンスを確保できます。

一貫性を保つために、すべての要素でマージンとパディングに `0` を設定し、特定のコントロールをスタイリングするときにこれらを追加することをお勧めします

```css
button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
```

### その他の便利な設定

上記のルールに加えて、スクロールバーが不要な場合に IE がスクロールバーを表示しないよう `overflow: auto` に `<textarea>`s を設定する必要があります。

```css
textarea {
  overflow: auto;
}
```

### リセット処理としてまとめる

最後のステップとして、上記で説明したさまざまなプロパティを次の「フォームリセット」にラップして、作業の一貫性のあるベースを提供できます。これには、最後の 3 つのセクションで言及したすべてのアイテムが含まれます。

```css
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}
```

**メモ:** 正規化スタイルシートは、すべてのプロジェクトで使用する一連のベースラインスタイルを作成するために、多くの開発者によって使用されています。通常、これらは上記で説明したものと同様のことを行います。CSS で独自の作業を行う前に、ブラウザー間で異なるものがすべて一貫したデフォルトに設定されていることを確認してください。ブラウザーは通常、以前より一貫性があるため、以前ほど重要ではありません。ただし、1 つの例を見てみたい場合は、Normalize.css をチェックしてください。Normalize.cssは、多くのプロジェクトでベースとして使用されている非常に人気のあるスタイルシートです。

フォームのスタイル設定の詳細については、これらのガイドの HTML セクションにある 2 つの記事をご覧ください。

* HTML フォームのスタイル
* HTML フォームの高度なスタイル
まとめ
---

このレッスンでは、CSS で画像、メディア、およびその他の異常な要素を操作するときに発生するいくつかの違いを強調しました。次の記事では、HTML テーブルをスタイルする必要がある場合に役立ついくつかのヒントについて説明します。

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


要素・クラス・ID によるセレクター - ウェブ開発を学ぶ

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

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

このレッスンでは、利用できる最も簡単にみえるセレクタをとりあげます。これは今後あなたが作業でよく使うことになります。

| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本（HTML 入門）および CSS に関するアイデア（CSS の第一歩）に関する基本的な知識を得ている。 |
| --- | --- |
| 目的: | CSS をドキュメントに適用するためのさまざまな CSS セレクタについて学ぶ。 |

タイプセレクタ
-------

**タイプセレクタ**は*タグ名セレクタ*または*要素セレクタ*を参照します。これはあなたのドキュメント中のタグまたは要素を選択するからです。次の例で span, em それに strong セレクタを使用します。そのため `<span>`, `<em>` と `<strong>` の要素はスタイル修飾されます。

**CSS ルールを追加して `<h1>` 要素を選択してその色を青に変えましょう。**

ユニバーサルセレクタ
----------

ユニバーサルセレクタはアステリスク (`*`) で表します。またこれはドキュメントのすべてまたは親要素に含まれるすべての要素( これはそれが連なっている、他の要素やそれらの子要素に連なっている要素すべて) を選択します。次の例ではすべての要素から margin を削除しています。これはブラウザーによって追加されたデフォルトのスタイルの代りに、章立てやパラグラフの margin を消してそれぞれを近く配置させます。これにより個々のパラグラフが見分けがつかなくなってしまいます。

この種類の動作はしばしば「スタイルシートのリセット」と呼び、ブラウザーのスタイル設定を取り消します。ユニバーサルセレクタはグローバルな変更をもたらすため、下記に述べる特定の状況のみに使うべきです。

### ユニバーサルセレクタを使用してセレクタの可読性をあげる

ユニバーサルセレクタの使用方法のひとつに、セレクタを読みやすくし、その動作を明かにするのものがあります。例えば、`<article>` 要素の最初の子要素を選択し、それがどんな要素であったとしてもそれを太字にしたいとします。これには`:first-child` セレクタを使うことができます。これはあとの疑似クラスと疑似要素のコースで詳細を学びますが、`<article>` 要素セレクタの後ろで指定します。

```css
article :first-child {
}
```

しかしこれは、`article:first-child` と混同しかねません。これは他の要素の第一子要素の`<article>` 要素を選択してしまうのです。

この混乱を避けるために、`:first-child` にユニバーサルセレクタを追加します。これで何を選択しているかが明らかです。`<article>` 要素の第一子要素にあたるすべての要素を選択しています。

```css
article \*:first-child {
}
```

クラスセレクタ
-------

クラスセレクタの名前はピリオド `(.`) から始まります。そしてそのクラスが適用されている、ドキュメント内のすべてを選択します。次の例では、`.highlight` というクラスを作成し、ドキュメントのいくつかの場所に適用します。このクラスが適用されたすべての要素をハイライトします。

### 特定の要素のクラスを対象にする

特定のクラスが適用された特定の要素を対象にするセレクタを作成できます。次の例では、`highlight` クラスの `<span>` をハイライトしますが、`highlight` クラスの `<h1>` 見出しを異なるようにハイライトします。対象にしたい要素にタイプセレクタを使用して実現できます。ドットの後にクラスを追加しますが、クラスとの間にホワイトスペースをいれません。

このアプローチでは、ルールが特定の要素とクラスの組み合わせにのみ適用されるため、ルールの範囲が狭くなります。そのため、ルールを他の要素にも適用したい場合は、別のセレクタを追加する必要があります。

### 複数のクラスが適用された要素を対象にする

一つの要素に複数のクラスを適用できます。それらを個別に選択することも、すべてのクラスがあるものだけを選択することもできます。これは、サイト上で様々な方法で組み合わせることができるコンポーネントを構築する際に便利です。

次の例は、ノートのある `<div>` です。灰色の境界はそのボックスが `notebox` クラスもっている場合にのみ適用されます。もしそれが `warning` や `danger` クラスも持っていた場合 `border-color` を変更します。

ブラウザーに、2 つのクラスが存在する要素だけ一致するように指定するには、それらのクラスをすべて空白を入れずに繋げて指定します。最後の `<div>` には `danger` クラスがあるだけなので、適用されるスタイルはありません。

ID セレクタ
-------

ID セレクタは ピリオドではなく `#` で始めますが、それ以外は基本的にクラスセレクタと同じです。しかし ID はそのドキュメントの名にはただ一度しか使用できません。ID セレクタはその `id` が設定されている要素を選択します。要素と ID の両方に一致するものだけを対象にする場合、ID セレクタをタイプセレクタの前に置くことができます。これを次の例で確認しましょう。:

**メモ:** このレッスンの特例で学んだように ID は非常に特別なもので、他のセレクタを上書きすることがあります。これは対応が難しくなることがあります。多くの場合、ID を使用する代りにクラスを追加するほうが望ましいです。しかしその要素を対象にする方法が ID を使うしかないような場合、例えばそのマークアップにあなたがアクセスできず、編集できないような場合、この方法を使用できます。

次の記事
----

属性セレクタ によるセレクタを調べます。

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


結合子 - ウェブ開発を学ぶ

結合子
===

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

ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、結合子と呼ばれます。

|  |  |
| --- | --- |
| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアのインストール、ファイルの扱い、の基本知識、 HTML の基本（HTML 入門で学習）および CSS の動作が分かっていること（CSS の第一歩で学習） |
| 目的: |
 CSS で使用できるさまざまな結合子セレクターについて学ぶ。
 CSS.
  |

子孫結合子
-----

**子孫結合子** (descendant combinator) は、通常は単一のスペース（" "）文字で表され、2 つのセレクターを結合して、最初のセレクターと一致する祖先（親、親の親、親の親の親など）要素がある場合、 2 番目のセレクターと一致する要素が選択されるようにします。 子孫結合子を利用するセレクターは、子孫セレクターと呼ばれます。

```css
body article p
```

以下の例は、 `.box` クラスのついた要素の内部にある `<p>` 要素のみに一致します。

子結合子
----

**子結合子** (child combinator, `>`) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターで一致した要素のうち、最初のセレクターで一致した要素の直接の子要素にのみ一致します。さらに下の階層の要素には一致しません。例えば、 `<article>` 要素の直接の子である `<p>` 要素のみを選択するためには、次のようにします。

```css
article > p
```

次の例では、順序付けられていないリストがあり、その中にネストされているのは別の順序付けられていないリストです。子コンビネータを使用して、`<ul>` の直接の子である `<li>` 要素のみを選択し、上部の境界線を設定しています。

これを子結合子として指定している `>` を削除すると、子孫セレクターになり、すべての `<li>` 要素に赤い境界線が表示されます。

次兄弟結合子
------

**次兄弟結合子** (next-sibling selector, `+`) は 2 つの CSS セレクターの間に配置されます。2つ目のセレクターに一致する要素のうち、最初のセレクターの次の兄弟要素で あるものだけに一致します。例えば、`<p>` 要素の直後に来るすべての `<img>` 要素を選択するためには、次のようにします。

```css
p + img
```

一般的な用途としては、次の例のように見出しに続く段落に何かをすることです。この例では、 `<h1>` と親要素を共有し、その `<h1>` の直後に続く段落を探します。

もし `<h1>` と `<p>` の間に `<h2>` のような他の要素を挿入すると、段落はセレクターに一致しなくなり、要素が隣接しているときに適用される背景色と前景色が適用されなくなります。

後続兄弟結合子
-------

要素が直接隣接していなくても、その要素の兄弟を選択したい場合は、後続兄弟結合子 (subsequent-sibling combinator, `~`) を使うことができます。 `<p>` 要素の後のどこかに来る `<img>` 要素をすべて選択するには、次のようにします。

```css
p ~ img
```

以下の例では、`<h1>` の後に続くすべての `<p>` 要素を選択しています。また、ドキュメントに `<div>` がある場合でも、その後にある `<p>` が選択されています。

入れ子による複雑なセレクターの作成
-----------------

CSS 入れ子モジュールにより、結合子を使って複雑なセレクターを作るルールを書くことができます。

```css
p {
  ~ img {
  }
}
/\* ブラウザーは次のように解釈します。 \*/
p ~ img {
}
```

`&` ネスティングセレクターも、複合セレクターを作成するために使用されることがあります。

```css
p {
  & img {
  }
}
/\* ブラウザーは次のように解釈します。 \*/
p img {
}
```

結合子の使用
------

前回学んだセレクターを結合子と組み合わせることで、文書内の一部を選択することができます。例えば、 `<ul>` の直接の子であるクラスが "a" のリストアイテムを選択するには、次の例のようにします。

```css
ul > li[class="a"] {
}
```

しかし、文書の特定の部分を選択するセレクターの大きなリストを作成するときには注意してください。マークアップ内の要素の位置にとても固有のセレクターを作成したため、 CSS ルールを再利用することが難しくなります。

単純なクラスを作成し、それを対象の要素に適用する方が多いでしょう。とはいえ、結合子の知識は、文書内の何かをスタイル設定する必要があるときに、おそらく CMS によって生成された HTML にアクセスすることができない場合に、とても有益なものになるでしょう。

スキルをテストしましょう
------------

あなたはこの記事の最後までたどり着きましたが、最も重要な情報を覚えていますか？次に進む前に、この情報が記憶されているかどうかを確認するために、さらにいくつかのテストが用意されています。 Test your skills: Selectors (en-US) を参照してください。

まとめ
---

セレクターの学習はこの章で終わりです。次は、 CSS のもう一つの重要な部分であるカスケード、詳細度、継承に進みます。

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


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

属性セレクター
=======

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

HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。

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

存在や値のセレクター
----------

これらのセレクターにより、要素を属性が存在するか (`href` など)、または属性の値に対して様々な方法で一致させて選択できるようになります。

| セレクター | 例 | 説明 |
| --- | --- | --- |
| `[attr]` | `a[title]` | *attr* という属性名を持つ要素と一致します。 — 値を角括弧の中に入れます。 |
| `[attr=value]` | `a[href="https://example.com"]` | *attr* という属性名で値が *value* と完全一致する要素と一致します。— 文字列は引用符の中に入れます。 |
| `[attr~=value]` | `p[class~="special"]` | 値が正確に *value* である *attr* の属性名を持つ要素、または 1 つ以上の値を含む *attr* 属性を持つ要素に一致します。複数の値のリストでは、個別の値が空白で区切られていることに注意してください。 |
| `[attr|=value]` | `div[lang|="zh"]` | 値が正確に *value* であるか、または *value* の直後にハイフンが続く値で始まる *attr* 属性を持つ要素にマッチします。 |

以下の例では、これらのセレクタが使用されていることがわかります。

* `li[class]` を使用することで、クラス属性を持つ任意のセレクタにマッチさせることができます。これは、最初のものを除いたすべてのリスト項目にマッチします。
* `li[class="a"]` は、a のクラスを持つセレクタにはマッチしますが、別のスペースで区切られたクラスを値の一部として持つ a のクラスを持つセレクタにはマッチしません。2 番目のリスト項目を選択します。
* `li[class~="a"]`は、 `a` のクラスを持つセレクタにマッチしますが、空白で区切られたリストの一部に `a` のクラスを含む値にもマッチします。2 番目と 3 番目のリスト項目を選択します。

部分文字列一致セレクター
------------

これらのセレクタは、属性の値の中の部分文字列をより高度にマッチさせることができます。例えば、 `box-warning` と `box-error` のクラスがあり、文字列 "box-" で始まるものを全てマッチさせたい場合、 `[class^="box-"]` を使用して両方を選択することができます。

| セレクター | 例 | 説明 |
| --- | --- | --- |
| `[attr^=value]` | `li[class^="box-"]` | 値が `value` で始まる `attr` 属性（名前は角括弧内の値）を持つ要素とマッチします。 |
| `[attr$=value]` | `li[class$="-box"]` | 値が `value` で終わる `attr` 属性を持つ要素にマッチします。 |
| `[attr*=value]` | `li[class*="box"]` | 文字列内の任意の場所に `value` を含む attr 属性を持つ要素にマッチします。 |

次の例は、これらのセレクタの使用法を示しています。

* `li[class^="a"]` は `a` で始まる属性値にマッチするので、最初の 2 つのリスト項目にマッチします。
* `li[class$="a"]` は `a` で終わる属性値にマッチするので、最初と 3 番目のリスト項目にマッチします。
* `li[class*="a"]`は、`a` が文字列のどこかに現れる属性値にマッチします。

大文字・小文字の区別
----------

属性値を大文字小文字を区別せずにマッチさせたい場合は、閉じ括弧の前に値 `i` を使うことができます。このフラグは、ブラウザーに ASCII 文字を大文字小文字を区別せずにマッチさせるように指示します。このフラグがない場合、値は文書言語の大文字小文字の区別に従ってマッチされます - HTML の場合は大文字小文字を区別します。

以下の例では、最初のセレクタは `a` で始まる値にマッチします。他の 2 つのリスト項目は大文字の A で始まるため、最初のリスト項目にのみマッチします。

**メモ:** 新しい値 `s` もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別するマッチングを強制しますが、これはブラウザーではあまりサポートされておらず、HTML コンテキストではあまり役に立ちません。

やってみよう
------

下のライブの例では、属性セレクタを使った CSS を追加して以下のようにします。

* `title` 属性を持つ `<a>` 要素をターゲットにして、ボーダーをピンク（`border-color: pink`）にする。
* `<a>` 要素の `href` 属性の値のどこかに `contact` という単語が含まれているものをターゲットにして、ボーダーをオレンジ色にする (`border-color: orange`)。
* `href` 属性の値が `https` で始まる `<a>` 要素を対象とし、ボーダーを緑色(`border-color: green`)にする。

**メモ:** ここで解答を見ることができますが、まずは自分で考えてみてください。

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

これで属性セレクターが完了しました。次の記事に進んで、pseudo-class and pseudo-element selectorsについて読むことができます。

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


擬似クラスと擬似要素 - ウェブ開発を学ぶ

擬似クラスと擬似要素
==========

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

次に見ていくセレクターの集合は、**擬似クラス**と**擬似要素**と呼ばれるものです。これらのセレクターは多数あり、かなり特有の用途に使われることが多いです。これらがどのように動作するのかがわかれば、一覧を見て、達成しようとしている作業にとってうまくいくものがあるかどうかを確認することができます。ブラウザーの対応については、繰り返しになりますが、セレクターの MDN ページが参考になります。

|  |  |
| --- | --- |
| 前提条件: | 基本的なコンピュータリテラシー、基本的なソフトウェアのインストール、ファイルの操作に関する基本的な知識、 HTML の基本（HTML 入門を学んでください）、 CSS の動作に関する知識（CSS 第一歩を学んでください）。 |
| 目的: | 擬似クラスおよび擬似要素セレクターについて学習すること。 |

擬似クラスとは何か
---------

擬似クラスは、特定の状態にある要素を選択するセレクターです。例えば、その型の最初の要素であるとか、ポインターを当てた状態であるなどです。擬似クラスは、あたかも文書内の一部にクラスを適用したかのように動作する傾向があり、マークアップ内の余分なクラスを削減することを支援していただくことが多く、より柔軟で保守性の高いコードを提供します。

擬似クラスはコロンで始まるキーワードです。例えば `:hover` は擬似クラスです。

### 単純な擬似クラスの例

簡単な例を見てみましょう。以下の最初の例に示すように、記事の最初の段落を大きく太字にしたい場合は、その段落にクラスを追加してから、そのクラスに CSS を追加できます。

しかし、これでは保守が面倒になります。文書の先頭に新しい段落が追加されたらどうでしょう？新しい段落にクラスを移さなければなりません。クラスを追加する代わりに、 `:first-child` 擬似クラスセレクターを使用することができます。これは常に記事の最初の子要素を対象としますので、 HTML を編集する必要がなくなります（これは、CMS によって生成された可能性があるため、とにかく常に可能であるとは限りません）。

すべての擬似クラスは、この同じ方法で動作します。特定の状態にある文書の一部を対象にして、 HTML にクラスを追加したかのように動作します。 MDN の他の例をいくつか見てみましょう。

* `:last-child`
* `:only-child`
* `:invalid`

**メモ:** 擬似クラスや要素の前に要素セレクターを書かずに書くことは有効です。この例では、 `:first-child` と書けば、段落の最初の子要素だけでなく、 `<article>` 要素の最初の子要素であるすべての要素に適用されます。 `:first-child` は `*:first-child` と等価だからです。しかし、通常は複数の要素を制御したいので、より詳細度を上げる必要があります。

### ユーザー操作擬似クラス

一部の擬似クラスは、ユーザーが何らかの方法で文書を操作したときにのみ適用されます。これらの**ユーザー操作の**擬似クラスは、**動的擬似クラス**と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。

* `:hover` — 前述の通りです。これは、ユーザーが要素（通常はリンク）の上にポインターを載せた場合にのみ適用されます。
* `:focus` — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。

擬似要素とは何か
--------

擬似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しい HTML 要素をマークアップに追加したかのように動作します。

擬似要素はダブルコロン `::` で始まります。擬似要素の例は `::before` です。

**メモ:** 一部の初期の擬似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザーは、後方互換性のためにシングルまたはダブルコロン構文で初期の擬似要素に対応しています。

たとえば、段落の最初の行を選択する場合は、それを `<span>` 要素にラップして要素セレクターを使用できます。ただし、ラップした単語の数が親要素の幅よりも長いまたは短い場合は、失敗します。1 行にいくつの単語が収まるかわからない傾向があるため（画面の幅やフォントサイズが変わると、単語数が変わるため）、HTML を追加してこれを確実に行うことは不可能です。

`::first-line` 擬似要素セレクタは確実にあなたのためにこれを行います-それはまだ最初の行のみを選択します言葉の数が増加した場合と減少します。

それはまるで最初の整形された行を `<span>` で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。

これにより、両方の段落の最初の行が選択されていることがわかります。

擬似クラスと擬似要素を組み合わせる
-----------------

最初の段落の最初の行を太字にしたい場合は、 `:first-child` および `::first-line` セレクターを連結することができます。前のライブ例を編集して、次の CSS を使用するようにしてください。 `<article>` 要素内にある最初の `<p>` 要素の最初の行を選択したいということです。

```css
article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}
```

::before および ::after を使用したコンテンツの生成
----------------------------------

CSS を使用してコンテンツを文書に挿入するための `content` プロパティと共に使用される特別な擬似要素がいくつかあります。

以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。`content` プロパティのテキスト値を変更してみて、出力でそれを確認してください。 `::before` 擬似要素を `::after` に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。

CSS からテキストを挿入することは、ウェブ上で実に多く使用することではありません。なぜなら、そのテキストはスクリーンリーダーによってはアクセスできず、将来誰かが見つけて編集するのが難しくなるからです。

これらの擬似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。

これらの擬似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。

次の例では、 `::before` 擬似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを `display: block` に設定しました。次に、CSS を使用して、他の要素と同じようにスタイルを設定します。CSS をいじって、CSS の外観と動作を変更できます。

`::before` と `::after` 擬似要素を `content` プロパティとともに使用することは、CSS では「生成コンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、 CSS Arrow Please のサイトで、 CSS で矢印を生成するのに役立てています。矢印を作成するときの CSS を見ると、 `::before` および `::after` 擬似要素が使用されていることがわかります。これらのセレクターが表示されたら、`content` プロパティを見て、文書に何が追加されているかを確認してください。

まとめ
---

この記事では、特殊な種類のセレクターである CSS 擬似クラスと擬似要素を紹介しました。

擬似クラスを使用すると、要素が特定の状態にあるときに、その状態のクラスを DOM に追加したかのように、その要素を対象とすることができます。擬似要素は、あたかも DOM に新しい要素を追加したかのように動作し、その要素をスタイル設定することができます。擬似要素の `::before` と `::after` では、 CSS を使用して文書内のコンテンツを挿入することができます。

次の記事では、結合子について学びます。

関連情報
----

* 擬似クラスリファレンス
* 擬似要素リファレンス
* 前のページ
* Overview: Building blocks
* 次のページ


見出しの直後に来た段落を強調表示するには - ウェブ開発を学ぶ

見出しの直後に来た段落を強調表示するには
====================

このガイドでは、見出しの直後にある段落を強調表示する方法を紹介します。

見出しの後にある最初の段落のスタイル設定
--------------------

よくあるパターンは、記事の最初の段落と、その後に続く段落を異なる形でスタイル設定することです。通常、この最初の段落は見出しの直後に来るので、もしこのようなデザインにするならば、その段落を対象とするためにその要素の組み合わせを使用することができます。

次兄弟結合子
------

CSS の CSS セレクター のグループには、複数のセレクターを組み合わせて選択することから**結合子**と呼ばれるものが存在します。この例では、次兄弟結合子を使用することにします。この結合子は、ある要素が他の要素の隣にあることを基準に選択します。HTML は h1 の後に `<p>` が続いています。`<p>` は `<h1>` の隣接する兄弟要素なので、`h1 + p` で選択することができます。

関連情報
----

* CSS の学習: セレクター
* CSS の学習: 結合子


アイテムを中央揃えするには - ウェブ開発を学ぶ

アイテムを中央揃えするには
=============

このガイドでは、アイテムを他の要素の中で、水平方向と垂直方向の両方にセンタリングする方法について説明します。

ボックスの中央揃え
---------

CSS を使用して、あるボックスを別のボックスの中に配置するには、親コンテナーで CSS ボックス配置プロパティを使用する必要があります。これらの配置プロパティは、ブロックやインラインレイアウトにおいてはブラウザーがまだ対応していないので、配置を使用する機能を有効にするためには、親コンテナーをフレックスまたはグリッドにする必要があります。

下記の例では、親コンテナーに `display: flex` を指定し、水平方向に配置するために `justify-content` を center に、垂直方向に配置するために `align-items` を center に設定しています。

**メモ:** このテクニックを使用して、1 つ以上の要素を別の要素の中に配置することができます。上の例では、`justify-content` と `align-items` の値を任意の有効な値に変更してみてください。

関連情報
----

* フレックスボックスでのボックス配置
* グリッドレイアウトでのボックス配置


画像を歪ませずにボックスを埋めるには - ウェブ開発を学ぶ

画像を歪ませずにボックスを埋めるには
==================

このガイドでは、HTML 画像を完全に枠いっぱいに表示させるテクニックを学ぶことができます。

object-fit の使用
--------------

HTML の `<img>` 要素を使ってページに画像を追加すると、画像は画像ファイルや HTML の `width`、`height` 属性から得たサイズとアスペクト比が使われます。時には、画像を配置した枠を完全に埋めるようにしたい場合があります。このような場合、まず、画像のアスペクト比がコンテナーと合わない場合にどうするかを決める必要があります。

1. 画像は、アスペクト比を保ったまま完全に枠内に収まるようにし、大きすぎて収まらない辺はトリミングする。
2. 画像はボックス内に収まるようにし、小さすぎる辺は背景が棒状に透けて見えるようにする。
3. 画像はボックスいっぱいに表示され、引き伸ばされる。これは、間違ったアスペクト比で表示される場合がある。

`object-fit` プロパティは、これらの手法のそれぞれを使用することが可能です。下記の例では、同じ画像を使用する場合、`object-fit` の値が異なるとどのように動作するのかを見ることができます。デザインに最も適した手法を選択してください。


最初の段落を強調表示するには - ウェブ開発を学ぶ

最初の段落を強調表示するには
==============

このガイドでは、コンテナーの中にある最初の段落を強調表示する方法について説明します。

最初の段落のスタイル付け
------------

最初の段落を大きく、太くしたいと思ったとします。最初の段落にクラスを追加して選択する方法もありますが、擬似クラスセレクターを使用した方がより柔軟です。これは、文書内の位置に基づいて段落を対象とすることができ、ソースの順序が変更された場合にクラスを手動で移動する必要がないということです。

擬似クラスの使用
--------

`擬似クラス`は、クラスを適用した時と同様に動作します。しかし、CSS はクラスセレクターを使用するのではなく、文書の構造に基づいて選択します。さまざまな擬似クラスがあり、さまざまなものを選択することができます。今回の用途では、`:first-child` を使用することにします。これは、親の最初の子である要素を選択します。

上のライブ例で `:first-child` を `:last-child` に変更してみると、最後の段落が選択されます。

文書内の何かを対象とする必要があるときは、利用できる`擬似クラス`のいずれかで実現できるかどうか調べてみるとよいでしょう。

関連情報
----

* `擬似クラス`のリファレンスページ
* CSS の学習: 擬似クラスと擬似要素


装飾的なボックスの作成 - ウェブ開発を学ぶ

装飾的なボックスの作成
===========

CSS ボックスは、CSS で装飾されたウェブページの構成要素です。 見栄えを良くすることは、楽しさとやりがいの両方です。 デザインのアイデアを実用的なコードに変えることがすべてだからです。 面倒な制約と CSS の使用における狂気の自由のために、それは挑戦的です。 いくつかの装飾的なボックスをやりましょう。

実用的な側面に取り掛かる前に、CSS ボックスモデルに慣れていることを確認してください。 いくつかの CSS レイアウトの基本を熟知していることも賢明ですが、前提条件ではありません。

技術面では、装飾的なボックスの作成は、CSS の境界線と背景のプロパティの習得と、それらを特定のボックスに適用する方法についてのものです。 しかし、テクニックを超えてそれはまたあなたの創造性を解き放つことに関するすべてです。 それは 1 日で終わらないでしょうし、何人かのウェブ開発者はそれを楽しんで一生を過ごします。

私たちは多くの例を見ようとしていますが、可能な限り最も単純な HTML の部分、次の単純な要素に取り組むつもりです。

```html
<div class="fancy">Hi! I want to be fancy.</div>
```

はい、HTML のごく一部ですが、その要素について何を調整できるのでしょうか？ 次のすべてです。

* そのボックスモデルのプロパティ: `width`、`height`、`padding`、`border` など
* その背景のプロパティ: `background`、`background-color`、`background-image`、`background-position`、`background-size` など
* その擬似要素: `::before` および `::after`
* そして、いくつかの脇のプロパティ: `box-shadow`、`rotate`、`outline` など

とても広い遊び場があります。 楽しく始めましょう。

ボックスモデルの調整
----------

ボックスモデルだけで、単純な境界線の追加、四角形の作成など、基本的なことを行うことができます。 負の `padding` や負の `margin`、あるいはその両方を使用して、`border-radius` をボックスの実際のサイズよりも大きくすることによって、プロパティを限界にプッシュすると、面白くなり始めます。

### 円を作る
```

<div class="fancy">Hi! I want to be fancy.</div>
```

これはとてもシンプルでとても楽しいものです。 `border-radius` プロパティは、ボックスに適用される丸い角を作成するように作られていますが、半径のサイズがボックスの実際の幅と等しいかそれより大きい場合はどうなるでしょうか？

```css
.fancy {
  /\* 円の中では、中央揃えのテキストは見栄えがよくなります。 \*/
  text-align: center;

  /\* テキストが境界線に触れないようにしましょう。
 テキストはまだ四角形の中を流れているので、
 そのようにするときれいに見えて、
 それが「本当の」円であるという感覚を与えます。 \*/
  padding: 1em;

  /\* 境界線は円に見えるようになります。
 背景は境界線の半径で切り取られるので、
 背景を使用することもできます。 \*/
  border: 0.5em solid black;

  /\* 正方形であることを確認しましょう。
 正方形でない場合は、円ではなく楕円です。 ;) \*/
  width: 4em;
  height: 4em;

  /\* そして正方形を円に変えましょう。 \*/
  border-radius: 100%;
}
```

はい、円ができます。

背景
--

装飾的なボックスについて話すとき、それを扱うための中心的なプロパティは background-\* プロパティです。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。

いくつかの実用的な例に進む前に、背景について知っておくべきことが 2 つあるので、少し後退しましょう。

* 一つのボックスに複数の背景を設定することが可能です。 それらは層のように互いの上に積み重ねられています。
* 背景は単色や画像のどちらでもかまいません。 単色は常に表面全体を塗りつぶしますが、画像は拡大縮小して配置することができます。
```

<div class="fancy">Hi! I want to be fancy.</div>
```

さて、背景を楽しんでみましょう。

```css
.fancy {
  padding: 1em;
  width: 100%;
  height: 200px;
  box-sizing: border-box;

  /\* 背景の積み重ねの一番下を、
 霧のかかった灰色の単色にしましょう。 \*/
  background-color: #e4e4d9;

  /\* カラーストリップエフェクトを作成するために、
 線形グラデーションを重ね合わせます。
 お気づきのとおり、
 色のグラデーションは画像と見なされ、
 そのように操作することができます。 \*/
  background-image: linear-gradient(175deg, rgba(0, 0, 0, 0) 95%, #8da389 95%),
    linear-gradient(85deg, rgba(0, 0, 0, 0) 95%, #8da389 95%), linear-gradient(
      175deg,
      rgba(0, 0, 0, 0) 90%,
      #b4b07f 90%
    ), linear-gradient(85deg, rgba(0, 0, 0, 0) 92%, #b4b07f 92%),
    linear-gradient(175deg, rgba(0, 0, 0, 0) 85%, #c5a68e 85%), linear-gradient(
      85deg,
      rgba(0, 0, 0, 0) 89%,
      #c5a68e 89%
    ), linear-gradient(175deg, rgba(0, 0, 0, 0) 80%, #ba9499 80%),
    linear-gradient(85deg, rgba(0, 0, 0, 0) 86%, #ba9499 86%), linear-gradient(
      175deg,
      rgba(0, 0, 0, 0) 75%,
      #9f8fa4 75%
    ), linear-gradient(85deg, rgba(0, 0, 0, 0) 83%, #9f8fa4 83%),
    linear-gradient(175deg, rgba(0, 0, 0, 0) 70%, #74a6ae 70%), linear-gradient(85deg, rgba(
          0,
          0,
          0,
          0
        ) 80%, #74a6ae 80%);
}
```

**メモ:** グラデーションは、非常に独創的な方法で使用できます。 あなたがクレイジーな例を見たいのなら、Lea Verou の CSS パターン（英語）を見てください。グラデーションについてもっと知りたい場合は、気軽に専用の記事を見てください。

擬似要素
----

1 つのボックスを装飾するときに、自分自身が制限されていることに気付き、さらに素晴らしい装飾を作成するためにもっとボックスを追加したいと思うかもしれません。 ほとんどの場合、これは独自の装飾の目的で HTML 要素を追加することによって DOM を汚染することにつながります。 たとえそれが必要であっても、それはやや悪い習慣と考えられています。 そのような落とし穴を回避するための 1 つの解決策は、CSS 擬似要素を使用することです。

### 雲
```

<div class="fancy">Hi! I want to be fancy.</div>
```

ボックスを雲に変える例を見てみましょう。

```css
.fancy {
  text-align: center;

  /\* 以前に円を作るために使用したのと同じトリックです。 \*/
  box-sizing: border-box;
  width: 150px;
  height: 150px;
  padding: 80px 1em 0 1em;

  /\* 雲の「耳」のための場所を空けます。 \*/
  margin: 0 100px;

  position: relative;

  background-color: #a4c9cf;

  /\* それで、私たちは雲の底を平らにしたいので、
 実際に一周していません。
 この例を気軽に微調整して、
 底が平らでない雲にしてください。 ;) \*/
  border-radius: 100% 100% 0 0;
}

/\* これらは、::before 擬似要素と ::after 擬似要素
 の両方に適用される共通のスタイルです。 \*/
.fancy::before,
.fancy::after {
  /\* これは、たとえ値が空の文字列であっても、
 擬似要素の表示を許可するために必要です。 \*/
  content: "";

  /\* 擬似要素をボックスの左右に配置しますが、
 常に一番下に配置します。 \*/
  position: absolute;
  bottom: 0;

  /\* これにより、擬似要素は、何が起こっても
 ボックスのコンテンツの下になります。 \*/
  z-index: -1;

  background-color: #a4c9cf;
  border-radius: 100%;
}

.fancy::before {
  /\* これは雲の左耳の大きさです。 \*/
  width: 125px;
  height: 125px;

  /\* 少し左に動かします。 \*/
  left: -80px;

  /\* 雲の底が平らに保たれるようにするには、
 左耳の正方形の右下角を作る必要があります。 \*/
  border-bottom-right-radius: 0;
}

.fancy::after {
  /\* これは右耳の雲の大きさです。 \*/
  width: 100px;
  height: 100px;

  /\* 少し右に動かします。 \*/
  right: -60px;

  /\* 雲の底が平らに保たれるようにするには、
 右耳の正方形の左下角を作る必要があります。 \*/
  border-bottom-left-radius: 0;
}
```

### ブロック引用

擬似要素を使用するより実用的な例は、HTML の `<blockquote>` 要素のための素晴らしいフォーマットを構築することです。 それでは、少し異なる HTML スニペットを使った例を見てみましょう（デザインのローカライゼーションもどのように処理するかを見る機会を提供してくれます）。

```html
<blockquote>
  People who think they know everything are a great annoyance to those of us who
  do. <i>Isaac Asimov</i>
</blockquote>
<blockquote lang="fr">
  L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase.
  <i>Pierre Desproges</i>
</blockquote>
```

それで、これが装飾です。

```css
blockquote {
  min-height: 5em;
  padding: 1em 4em;
  font: 1em/150% sans-serif;
  position: relative;
  background-color: lightgoldenrodyellow;
}

blockquote::before,
blockquote::after {
  position: absolute;
  height: 3rem;
  font:
    6rem/100% Georgia,
    "Times New Roman",
    Times,
    serif;
}

blockquote::before {
  content: "“";
  top: 0.3rem;
  left: 0.9rem;
}

blockquote::after {
  content: "”";
  bottom: 0.3rem;
  right: 0.8rem;
}

blockquote:lang(fr)::before {
  content: "«";
  top: -1.5rem;
  left: 0.5rem;
}

blockquote:lang(fr)::after {
  content: "»";
  bottom: 2.6rem;
  right: 0.5rem;
}

blockquote i {
  display: block;
  font-size: 0.8em;
  margin-top: 1rem;
  text-align: right;
}
```

すべて一緒に、その他
----------

ですから、これらすべてを混ぜ合わせると素晴らしいエフェクトを生み出すことができます。 ある時点で、そのようなボックス装飾を達成することは、CSS プロパティの設計と技術的使用の両方において、創造性の問題です。 このようにすることで、この例のようにボックスを生き生きとさせることができる錯視を作成することが可能です。
```

<div class="fancy">Hi! I want to be fancy.</div>
```

部分的なドロップシャドウ効果を作成してみましょう。`box-shadow` プロパティでは、内照や 平面的なドロップシャドウ効果を作成することができますが、少し作業を加えることで、擬似要素や `transform` の 3 つの個別プロパティのひとつである `rotate` プロパティを使用してより自然に近い形状を作ることが可能です。

```css
.fancy {
  position: relative;
  background-color: #ffc;
  padding: 2rem;
  text-align: center;
  max-width: 200px;
}

.fancy::before {
  content: "";

  position: absolute;
  z-index: -1;
  bottom: 15px;
  right: 5px;
  width: 50%;
  top: 80%;
  max-width: 200px;

  box-shadow: 0px 13px 10px black;
  rotate: 4deg;
}
```


段落の最初の行を強調するには - ウェブ開発を学ぶ

段落の最初の行を強調するには
==============

このガイドでは、段落の最初の行の長さがわからない場合でも、その行をハイライトする方法をご紹介します。

テキストの最初の行のスタイル設定
----------------

段落の最初の行を大きく、太くしたいと思います。最初の行を `<span>` で囲むと、スタイル設定ができますが、ビューポートサイズが小さいために最初の行が短くなると、スタイル設定されたテキストは次の行に回り込みます。

擬似要素の使用
-------

`擬似要素`は `<span>` の代わりになります。しかし、より柔軟です。擬似要素によって選択された正確なコンテンツは、ブラウザーがコンテンツを表示した後に計算するので、ビューポートサイズが変化しても動作するようになります。

この場合、 `::first-line` 擬似要素を使用する必要があります。これは、各段落の最初の書式化された行を選択するもので、つまり、あなたが必要とするスタイルを設定することができます。

**メモ:** すべての擬似要素はこのように動作します。それらは、文書内に要素を挿入したかのように振る舞いますが、実行時に表示されるコンテンツに基づいて動的にそうします。

擬似要素と他のセレクターの組み合わせ
------------------

上の例では、擬似要素はすべての段落の最初の行を選択します。最初の段落の最初の行だけを選択するには、他のセレクターと組み合わせてください。それはクラスにすることができますが、この例では `:first-child` `擬似クラス`です。これにより、 `.wrapper` の最初の子の最初の行を選択することができます。

関連情報
----

* `擬似要素`のリファレンスページ
* CSS の学習: 擬似クラスと擬似要素


テキストに影を追加するには - ウェブ開発を学ぶ

テキストに影を追加するには
=============

このガイドでは、ページ上の任意のテキストに影を追加する方法を紹介します。

テキストに影を追加
---------

ボックスに影を追加するガイドでは、ページ上の任意の要素に影を追加する方法を紹介しています。しかし、そのテクニックは、要素の周囲のボックスにのみ影を追加するものです。ボックス内のテキストにドロップシャドウを追加するには、異なる CSS プロパティ `text-shadow` が必要です。

`text-shadow` プロパティはいくつかの値を取ります。

* X 軸上のオフセット
* Y 軸上のオフセット
* ぼかし半径
* 色

下記の例では、X 軸のオフセットを 2px、Y 軸のオフセットを 4px、ぼかし半径を 4px、色を半透明の青に設定しています。さまざまな値を使って、影がどう変わるか試してみてください。

**メモ:** テキストシャドウを使用すると、簡単にテキストを読みづらくなる場合があります。低コントラストのテキストを読むことが困難な閲覧者のために、選択した色が読みやすく、十分な色コントラスト (en-US)になっていることを確認しておいてください。


ボックスを半透明にするには - ウェブ開発を学ぶ

ボックスを半透明にするには
=============

このガイドでは、CSS を使用してボックスを半透明にする方法についてお手伝いします。

ボックスとコンテンツの不透明度の変更
------------------

ボックスとそのボックスのすべてのコンテンツの不透明度を変更したい場合は、CSS の `opacity` プロパティを使用します。不透明度 (opacity) は透明度 (transparency) の逆です。したがって、`opacity: 1` は完全に不透明であり、ボックスはまったく透けて見えません。

`0` の値を使用すると、ボックスは完全に透明になり、2 つの値の間では不透明度が変化し、高い値になるほど透明度が低くなります。

背景色の不透明度のみを変更する場合
-----------------

多くの場合、背景色を部分的に透過させるだけで、テキストや他の要素は完全に不透明なままにしておきたいでしょう。これを実現するには、rgba のようなアルファチャンネルを持つ色の値を使用してください。`opacity` と同様に、アルファチャンネルの値を `1` にすると、その色は完全に不透明になります。したがって、`background-color: rgba(0,0,0,.5);` は、背景色を 50% の不透明度に設定します。

下記の例で、不透明度とアルファチャンネルの値を変えてみて、ボックスの後ろの背景画像が見える割合を上下させてみてください。

**メモ:** 画像を重ねる場合は、テキストと背景のコントラストが十分に保たれるように注意してください。そうしないと、コンテンツが読みづらくなる可能性があります。

関連情報
----

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


ポインターを当てるとボタンの色を変えるには - ウェブ開発を学ぶ

ポインターを当てるとボタンの色を変えるには
=====================

このガイドでは、ボタンに当てたときに2つの色の間で滑らかに色が変わるようにする方法を紹介します。

ボタンの例では、`:hover` 動的擬似クラスに異なる背景色を定義することで、ボタンの背景を変更することができます。しかし、ボタンの上に当てた場合、背景色は新しい色に切り替わるようになります。より滑らかに変化させるためには、CSS トランジションを使用することができます。

トランジションの使用
----------

ホバー状態に必要な色を追加した後、ボタンのルールに `transition` プロパティを追加します。単純なトランジションの場合、`transition` の値は、このトランジションを適用したいプロパティの名前と、トランジションのために要する時間です。

`:active` と `:focus` の擬似クラスでは、`transition` プロパティは none に設定されており、クリックされるとボタンはアクティブ状態に移行します。

この例では、トランジションに 1 秒かけていますが、これを変更することで、スピードの変化による違いを確認することができます。

**メモ:** `transition` プロパティは、`transition-delay`、`transition-duration`、`transition-property`、`transition-timing-function` の一括指定です。トランジションを調整する方法を調べるには、MDNでこれらのプロパティのページを参照してください。

関連情報
----

* CSS トランジションの使用


CSS 生成コンテンツの使用 - ウェブ開発を学ぶ

CSS 生成コンテンツの使用
==============

この記事では、文書を表示するときに CSS を使用してコンテンツを追加する方法をいくつか説明します。スタイルシートを変更することで、テキストコンテンツや画像を追加することができます。

CSS の重要な利点の一つが、文書のスタイルをそのコンテンツから分離しやすくすることです。しかし、あるコンテンツを文書の一部としてではなく、スタイルシートの一部として指定することが理にかなっている場合もあります。テキストや画像の内容が文書の構造に密接に関連している場合は、スタイルシートの中で指定することができます。

**メモ:** スタイルシート内で記述されたコンテンツは、 DOM の一部にはなりません。

スタイルシートでコンテンツを指定すると、厄介な問題が発生することがあります。例えば、スタイルシートが複数の言語の文書で共有されていることがあります。スタイルシートの中で翻訳が必要なコンテンツを指定する場合は、スタイルシートのその部分を別なファイルに置き、適切な言語版の文書にリンクするようにする必要があります。

この問題は、指定するコンテンツが、あらゆる言語や文化に適用される記号や画像で構成されている場合には発生しません。

例
-

### テキストコンテンツ

CSS では、要素の前後にテキストコンテンツを挿入したり、`display: list-item;` で `<li>` などの要素の前にリスト項目のマーカー（丸印や数字など）の内容を変更することができます。これを指定するには、ルールを作り、セレクターに `::before`、`::after`、`::marker` のいずれかを追加します。宣言では、`content` プロパティを指定し、その値としてテキストコンテンツを指定します。

#### HTML

```html
A text where I need to <span class="ref">something</span>
```

#### CSS

```css
.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference ";
}
```

#### 出力

スタイルシートの文字セットは規定で UTF-8 ですが、リンク、スタイルシート自身の内部、もしくはその他の方法で指定することができます。CSS 仕様書の 4.4 CSS style sheet representation をご覧ください。

個々の文字は、バックスラッシュをエスケープ文字として使用して、エスケープ機構を使って記述することもできます。例えば、 "\265B" はチェスの黒クイーン ♛ です。詳しくは CSS 仕様書の Referring to characters not represented in a character encoding と Characters and case をご覧ください。

### 画像コンテンツ

要素の前や後ろに画像を追加するには、 `content` プロパティの値として画像ファイルの URL を記述します。

このルールは `glossary` を持つすべてのリンクの後ろに、空白とアイコンを追加します。

#### HTML

```html
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
```

#### CSS

```css
a.glossary::after {
  content: " " url("glossary-icon.gif");
}
```

#### 出力結果


CSS の一般的な質問 - ウェブ開発を学ぶ

CSS の一般的な質問
===========

この記事には、 CSS に関するいくつかのよくある質問 (FAQ) とその解答があります。ウェブ開発者になるための道で役に立つかもしれません。

なぜ CSS が妥当なのに正しくレンダリングされないのか？
-----------------------------

ブラウザーは `DOCTYPE` 宣言を使用して、文書の表示にウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい `DOCTYPE` 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。

現代のブラウザーは、2 つの主要なレンダリングモードを備えています。

* 後方互換モード (*Quirks Mode*): 古いウェブページが制作者の意図したとおりにレンダリングされるようにして、古いブラウザーが用いていた非標準のレンダリングルールに従います。 `DOCTYPE` 宣言が不完全、不正確、あるいは存在しない、または 2001 年より前に一般的であった既知の `DOCTYPE` 宣言である文書は、後方互換モードでレンダリングされます。
* 標準モード (*Standards Mode*): ブラウザーは W3C 標準へ厳密に従おうとします。新しい HTML ページは標準に準拠したブラウザー向けに設計されていると考えられるため、新しい `DOCTYPE` 宣言を持つページは標準でレンダリングされます。

Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第 3 のモードである *Almost Standards Mode* があります。

標準の `DOCTYPE` 宣言では、標準モードが起動します。

```html
<!doctype html>
```

すべて使用可能な場合は、上記の doctype を使用してください。他にも、標準モードやほぼ標準モードを起動する有効な古い doctype があります。

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

なぜ CSS が妥当なのにまったくレンダリングされないのか?
------------------------------

以下のような可能性があります。

* CSS ファイルへのパスが間違っている。
* 適用されるためには、 CSS スタイルシートを MIME タイプ `text/css` で提供しなければなりません。ウェブサーバがこのタイプで提供していない場合、スタイルシートは適用されません。
`id` と `class` の違いは
-------------------

HTML の要素は、 `id` 属性と `class` 属性の片方または両方を持つことができます。 `id` 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 `class` 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の `id` または `class` 名に対してスタイルを設定できます。

* ページ内のたくさんのブロックや要素にスタイルのルールを適用したい場合や、スタイルを適用したい要素が 1 つしかないものの、後で追加したい場合は、 class 指定によるスタイルを使用してください。
* 適用されるスタイルのルールを 1 つの特定のブロックや要素に限定する必要がある場合は、 id 指定によるスタイルを使用してください。このスタイルは特定の id を持った特定の要素にのみ使用されます。

一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合（ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など）に限り使用することが推奨されます。

* class を使用するとスタイルの用途が広げられるようになり、現在は特定のルールセットのスタイルを 1 つの要素にしか適用しなくても、後から追加したくなる可能性があります
* class を使用すると、複数の要素のスタイルを設定できるため、id セレクターを使用する複数のルールで同じスタイル設定情報を書き出す必要がなくなり、より短いスタイルシートを作成できます。より短いスタイルシートはより高性能です
* class セレクターは id セレクターよりも詳細度が低いため、必要に応じてオーバーライドする方が簡単です

**メモ:** 詳しくはセレクターもご覧ください。

プロパティを既定値に戻すには
--------------

当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。

```css
/\* 見出しの既定の色は黒 \*/
h1 {
  color: red;
}
h1 {
  color: black;
}
```

これは CSS 2 で変わり、initial キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。

```css
/\* 見出しの既定の色は黒 \*/
h1 {
  color: red;
}
h1 {
  color: initial;
}
```

スタイルを他のスタイルから派生させるには
--------------------

CSS では、あるスタイルが他の表現で定義されることを許可していません。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を 1 ヶ所で定義する方法として、 CSS 変数 が導入されました。

ひとつの要素に複数のクラスを割り当てる方法は?
-----------------------

HTML の要素は `class` 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。

```html
<style>
 .news {
 background: black;
 color: white;
 }
 .today {
 font-weight: bold;
 }
</style>

<div class="news today">Content of today's news goes here.</div>
```

同じプロパティが双方のルール内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。`class` 属性内のクラスの順序は関係がありません。

なぜスタイルルールは正しく動作しないのか
--------------------

構文が正しいスタイルルールが、ある状況下で適用されないことがあります。この種類の問題をデバッグするために、インスペクターの *CSS ペイン* のルールビューを使用することができますが、スタイルが無視される事例でもっとも頻発するものは以下のものです。

### HTML 要素の階層

CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS ルールの詳細度や優先度にかかわらず、子孫に適用されたルールは親のスタイルをオーバーライドすることを覚えておくことが重要です。

```css
.news {
  color: black;
}
.corpName {
  font-weight: bold;
  color: red;
}
```

```html
<!-- ニュース項目は黒色ですが、社名は赤色かつ太字です -->
<div class="news">
  (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on
  Thursday…
</div>
```

複雑な HTML 階層でルールが無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。

### 明示的に再定義されたスタイルルール

CSS スタイルシートでは、順序**こそが**重要です。あるルールを定義した後に同じルールを再定義した場合は、最後の定義が使用されます。

```css
#stockTicker {
  font-weight: bold;
}
.stockSymbol {
  color: red;
}
/\* other rules \*/
/\* other rules \*/
/\* other rules \*/
.stockSymbol {
  font-weight: normal;
}
```

```html
<!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません -->
<div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0…</div>
```

このような誤りを避けるには、あるセレクターに対するルールは 1 回だけ定義するようにして、セレクターに所属するすべてのルールをグループ化してください。

### 一括指定プロパティの使用

一括指定プロパティを使用したスタイルルールの定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つ一括指定プロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前のルールは暗黙的にオーバーライドされます。

```css
#stockTicker {
  font-size: 12px;
  font-family: Verdana;
  font-weight: bold;
}
.stockSymbol {
  font: 14px Arial;
  color: red;
}
```

```html
<div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0…</div>
```

前の例では別の要素に属するルールで問題が発生していますが、同一の要素でも問題が起こりえます。これは、ルールの順序**こそが**重要であるためです。

```css
#stockTicker {
  font-weight: bold;
  font: 12px Verdana; /\* font-weight is now set to normal \*/
}
```

### `*` セレクターの使用

ワイルドカードセレクター `*` はすべての要素を参照するものであり、特に注意して使用しなければなりません。

```css
body \* {
  font-weight: normal;
}
#stockTicker {
  font: 12px Verdana;
}
.corpName {
  font-weight: bold;
}
.stockUp {
  color: red;
}
```

```html
<div id="section">
  NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0…
</div>
```

この例では、`body *` セレクターで body 要素内の全要素に対してルールを適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した `font-weight: bold;` は、body 内の全要素に適用した `font-weight: normal;` にオーバーライドされます。

特にセレクターの最初の要素として使用しない場合に、\* セレクターは遅いセレクターであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。

### CSS の詳細度

ある要素に複数のルールを適用すると、スタイルの詳細度に従ってルールが選ばれます。インラインスタイル（HTML の `style` 属性）が最上位の詳細度で他のあらゆるセレクターを上書きし、次に ID セレクター、それからクラスセレクター、要素名セレクターの順となります。よって、以下の `<div>` の文字色は赤になります。

```css
div {
  color: black;
}
#orange {
  color: orange;
}
.green {
  color: green;
}
```

```html
<div id="orange" class="green" style="color: red;">This is red</div>
```

セレクターが複数の範囲を持つ場合、ルールはより複雑になります。セレクターの詳細度がどのように算出されるかについて、詳しくはCSS 詳細度のドキュメントでご覧いただけます。

-moz-\*、-ms-\*、-webkit-\*、-o-\*、-khtml-\* プロパティは何をするのか
------------------------------------------------------

これらのプロパティは*接頭辞付きプロパティ*と呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。

このようなプロパティを本番のウェブサイトで使用することは推奨されません。これらはすでに巨大なウェブ互換性の混乱を作り出しています。例えば、多くの開発者は、接頭辞のないプロパティがすべてのブラウザーで完全に対応している場合にのみ、接頭辞のある `-webkit-` プロパティを使用しています。これは、そのプロパティに頼っているデザインが、webkit ベースのブラウザー以外で動作する可能性があるにもかかわらず、動作しないことを意味します。この問題は、ウェブ互換性を向上させるために、他にもウェブブラウザーが `-webkit-` 接頭辞付きエイリアスを実装するように働きかけ、Compatibility Living Standard で規定されるほど大きな問題となりました。

ブラウザーは、新しい実験的機能を実装するために CSS 接頭辞を使用することはなくなりました。その代わり、新しい機能を設定可能な実験的フラグでテストしたり、ブラウザーの Nightly バージョンやそれに類するものだけでテストするようになっています。

もし作業する際に接頭辞を使用する必要がある場合は、接頭辞のあるバージョンを先に書き、その後に接頭辞のない標準バージョンを書いてください。こうすることで、対応している場合、標準版が接頭辞を自動的に上書きします。例えば次のようになります。

```css
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;
```

**メモ:** 接頭辞付きプロパティの処理の詳細については、クロスブラウザーテストモジュールの一般的な HTML および CSS の問題の処理 - CSS 接頭辞の処理を参照してください。

**メモ:** ブラウザー接頭辞付き CSS プロパティの一覧は、Mozilla CSS 拡張, Microsoft CSS 拡張, WebKit CSS 拡張 を参照してください。

z-index は位置指定へどのように関係するのか?
--------------------------

z-index プロパティは、要素を積み重ねる順序を指定します。

z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (`position:absolute`、`position:relative`、または `position:fixed`) を持つ要素に対してのみ機能します。

**メモ:** 詳細については、位置指定の学習の記事、特に z-index の紹介の節を参照してください。


要素に影を追加するには - ウェブ開発を学ぶ

要素に影を追加するには
===========

このガイドでは、ページ上の任意のボックスに影を追加する方法を紹介します。

ボックスに影を追加
---------

影は、ページ上で要素を目立たせるために役立つ、一般的なデザイン機能です。CSS では、要素のボックスの影は `box-shadow` プロパティを使用して作成します（テキスト自体に影を追加したい場合は `text-shadow` が必要です）。

`box-shadow` プロパティは、いくつかの値を取ります。

* X 軸上のオフセット
* Y 軸上のオフセット
* ぼかし半径
* 拡散半径
* 色
* `inset` キーワード

下記例では、X 軸と Y 軸を 5px、ぼかしを 10px、広がりを 2px に設定しています。色として半透明の黒を使用しています。異なる値でシャドウがどのように変わるか、試してみてください。

**メモ:** この例では `inset` を使用していません。これは、シャドウが既定のドロップシャドウであり、シャドウの上にボックスがあることを意味しています。インセットシャドウは、コンテンツがページに押し込まれているかのように、ボックスの内側に現れます。

関連情報
----

* ボックスの影作成ツール
* CSS の学習: 高度な装飾効果


リストの装飾 - ウェブ開発を学ぶ

リストの装飾
======

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

リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。

| 前提知識: | 基本的なコンピューターリテラシー、HTML の基本 (HTML 入門を学ぶ)、 CSS の基本 (CSS 入門を学ぶ)、CSS のテキストとフォントの基礎。 |
| --- | --- |
| 学習目標: | リストの装飾に関連するベストプラクティスとプロパティに慣れること。 |

簡単なリストの例
--------

はじめに、簡単なリストの例を見てみましょう。 この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たような装飾機能持っていますが、リストの種類に特有のものもあります。 装飾していない例は Github にあります (ソースコードもチェックしてください) 。

そのリストの例の HTML はこんな感じです。

```html
<h2>Shopping (unordered) list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ul>
  <li>Hummus</li>
  <li>Pita</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ol>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

<h2>Ingredient description list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<dl>
  <dt>Hummus</dt>
  <dd>
    A thick dip/sauce generally made from chick peas blended with tahini, lemon
    juice, salt, garlic, and other ingredients.
  </dd>
  <dt>Pita</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>
    A semi-hard, unripened, brined cheese with a higher-than-usual melting
    point, usually made from goat/sheep milk.
  </dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>
```

ここで実際の例に行き、ブラウザー開発者ツールを使用してリスト要素を調べると、次のようないくつかの装飾の既定設定に気付くでしょう。

* `<ul>` 要素と `<ol>` 要素の上下の `margin` は `16px` (`1em`)、`padding-left` は `40px` (`2.5em`) です。
* リスト項目 (`<li>` 要素) には、間隔の設定に関する既定はありません。
* `<dl>` 要素の上下の `margin` は `16px` (`1em`) ですが、パディングの設定はありません。
* `<dd>` 要素の `margin-left` は `40px` (`2.5em`) です。
* 参照用に含めた `<p>` 要素には、さまざまな種類のリストと同じ `16px` (`1em`) の上下の `margin` があります。
リストの間隔の取り扱い
-----------

リストを装飾するときは、 (段落や画像などの) 周囲の要素と同じ垂直方向の間隔 (バーティカルリズム (vertical rhythm) とも呼ばれる) と、互いに同じ水平方向の間隔を維持するように装飾を調整する必要があります (Github で完成した装飾した例を見ることができ、ソースコードも見つけることができます) 。

テキストの装飾と間隔調整に使用する CSS は次のとおりです。

```css
/\* General styles \*/

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/\* Description list styles \*/

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}
```

* 1 番目の規則はサイト全体のフォントと `10px` の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。
* 2 番目と 3 番目の規則では、見出し、さまざまなリストの種類 (リスト要素の子はこれらを継承) 、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。
* 4 番目では、段落とリスト項目に同じ `line-height` を設定しているため、段落と各個々のリスト項目のラインの間隔は同じになります。 これは、バーティカルリズムを一定に保つのにも役立ちます。
* 説明リストには 5 番目と 6 番目の規則が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ `line-height` を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。>
リスト固有の装飾
--------

リストの一般的な間隔調整テクニックを見てきました。 次に、リスト固有のプロパティを調べてみましょう。 最初に知っておくべき 3 つのプロパティがあり、それらは `<ul>` や `<ol>` 要素に設定できます。

* `list-style-type`: リストに使用する行頭記号の種類を設定します。 例えば、順序なしリストの場合は正方形や丸の行頭記号、順序付きリストの場合は数字、文字、ローマ数字などです。
* `list-style-position`: 行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。
* `list-style-image`: 行頭記号に簡単な正方形や円ではなく、カスタム画像を使うことができます。
### 行頭記号の装飾

前述のように、`list-style-type` プロパティを使用して、行頭記号 (bullet point) に使用する行頭記号 (bullet) の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。

```css
ol {
  list-style-type: upper-roman;
}
```

これにより、次のようになります。

![行頭記号がリスト項目テキストの外側に表示されるように設定された順序付きリスト。](/ja/docs/Learn/CSS/Styling_text/Styling_lists/outer-bullets.png)

それ以外のオプションを見るには、 `list-style-type` のリファレンスページを参照してください。

### 行頭記号の位置

`list-style-position` プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 既定値は `outside` です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。

値を `inside` に設定すると、行頭記号を行の内側に配置します。

```css
ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}
```

![行頭記号がリスト項目のテキストの内側に表示されるように設定された順序付きリスト。](/ja/docs/Learn/CSS/Styling_text/Styling_lists/inner-bullets.png)

### 独自の行頭記号画像の使用

`list-style-image` プロパティを使用すると、行頭記号に独自の画像を使用することができます。構文は次のようにとても簡単です。

```css
ul {
  list-style-image: url(star.svg);
}
```

ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 `background` プロパティファミリーを使用するほうが得策です。 これについては、ボックスの装飾モジュールで詳しく説明します。とりあえず、その例をご紹介しましょう。

完成した例では、 (既に上で見たものの上に) 次のように順序なしリストを装飾しました。

```css
ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}
```

ここでは次のことを行いました。

* `<ul>` の `padding-left` を既定の `40px` から `20px` に減らし、リスト項目にも同じ量を設定します。 これにより、リスト項目は全体的にはまだ順序リスト項目や説明リストの説明文が並んでいますが、リスト項目には背景画像が入るように多少のパディングが入っています。これをしないと、背景画像がリスト項目のテキストと重なってしまい、見た目がごちゃごちゃしてしまいます。
* 既定で行頭記号が表示されないように、`list-style-type` を `none` に設定します。 代わりに、行頭記号を処理するために `background` プロパティを使用します。
* 各順序なしリスト項目に行頭記号を挿入しました。 関連するプロパティは次のとおりです。
    + `background-image`: 行頭記号として使用する画像ファイルへのパスを参照します。
    + `background-position`: これは選択した要素の背景のどこに画像を表示するかを定義します。 この場合は `0 0` としています。 つまり、各リスト項目の左上に行頭記号が表示されます。
    + `background-size`: 背景画像のサイズを設定します。 行頭記号のサイズをリスト項目と同じサイズ (または、ごくわずかに大きいか小さい) にすることをお勧めします。 サイズは `1.6rem` (`16px`) を使用しています。 これは、行頭記号を内部に配置できる `20px` のパディングに非常によく合っています — 行頭記号とリスト項目のテキストの間に 16px + 4px のスペースがあるとうまくいきます。
    + `background-repeat`: 既定では、背景画像は利用可能な背景スペースを埋めつくすまで繰り返します。 それぞれの場合に画像のコピーを 1 つだけ挿入したいので、これを `no-repeat` の値に設定します。

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

![行頭記号が小さな星の画像として設定された順序なしリスト](/ja/docs/Learn/CSS/Styling_text/Styling_lists/list_formatting.png)

### list-style 一括指定

上記の 3 つのプロパティはすべて、単一の一括指定プロパティ `list-style` を使用して設定できます。 例えば、次の CSS を、

```css
ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}
```

これに置き換えることができます。

```css
ul {
  list-style: square url(example.png) inside;
}
```

値は任意の順序でリストすることができ、1 つ、2 つ、または 3 つすべてを使用できます (含まれていないプロパティーに使用される既定値は `disc`、`none`、`outside` です) 。 `type` と `image` の両方が指定されている場合、画像が何らかの理由でロードできない場合に、`type` を代替として使用します。

リストの数え方の制御
----------

場合によっては、順序付きリストで異なる方法で数えたいことがあります — 例えば 1 以外の数から始めたり、逆方向に数えたり、1 以上のステップで数えたりです。 HTML と CSS には、ここで役立つツールがいくつかあります。

### start

`start` 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、

```html
<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
```

この出力が得られます。

### reversed

`reversed` 属性はリストのカウントアップではなくカウントダウンを開始します。 次の例では、

```html
<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
```

この出力が得られます。

**メモ:** 逆方向のリストに `start` 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。

### 値

`value` 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、

```html
<ol>
  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
  <li value="4">
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
```

この出力が得られます。

**メモ:** 数値以外の `list-style-type` を使用している場合でも、`value` 属性に同等の数値を使用する必要があります。

アクティブラーニング: ネストしたリストの装飾
-----------------------

このアクティブラーニングセッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。

1. 順序なしリストに正方形の行頭記号を付けます。
2. 順序なしリスト項目と順序付きリスト項目のフォントサイズの 1.5 のラインの高さを指定します。
3. 順序付きリストに小文字のアルファベットの行頭記号を付けます。
4. 行頭記号の種類、間隔、その他見つけられるものは何でも試して、好きなだけリストの例を試してみてください。

間違えた場合は、*Reset* ボタンを使用していつでもリセットできます。 本当に立ち往生したら、答えを見るために *Show solution* ボタンを押してください。
```

<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;">
<ul>
  <li>First, light the candle.</li>
  <li>Next, open the box.</li>
  <li>Finally, place the three magic items in the box, in this exact order, to complete the spell:
    <ol>
      <li>The book of spells</li>
      <li>The shiny rod</li>
      <li>The goblin statue</li>
    </ol>
  </li>
</ul></textarea
 >

  <h2>CSS Input</h2>
  <textarea
 id="code"
 class="css-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>

  <h2>Output</h2>
  <div
 class="output"
 style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
  <div class="controls">
    <input
 id="reset"
 type="button"
 value="Reset"
 style="margin: 10px 10px 0 0;" />
    <input
 id="solution"
 type="button"
 value="Show solution"
 style="margin: 10px 0 0 10px;" />
  </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 solution = document.getElementById("solution");

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();
});

solution.addEventListener("click", function () {
  htmlInput.value = htmlCode;
  cssInput.value =
    "ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}";
  drawOutput();
});

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

関連情報
----

CSS カウンターは、リストの数え方と装飾をカスタマイズするための高度なツールを提供しますが、非常に複雑です。 あなたが自身を伸ばしたいと思うならば、これらを調べることを勧めます。 次を見てください。

* `@counter-style`
* `counter-increment`
* `counter-reset`
腕試し
---

この記事の最後までたどり着き、アクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後も最も重要な情報を覚えていられますか？モジュールの最後には、あなたがこの情報を覚えているかどうかを確認するための評価があります — コミュニティスクールのホームページの組版を参照してください。

この評価は、このモジュールで説明されているすべての知識をテストするものなので、先に進む前に他の記事を読んでおくとよいでしょう。

まとめ
---

関連するいくつかの基本的な原則と特定のプロパティを知っていれば、リストの装飾のこつは比較的簡単です。 次の記事では、リンクの装飾テクニックについて説明します。

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


リンクの装飾 - ウェブ開発を学ぶ

リンクの装飾
======

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

リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。 この記事では、これらすべてのトピックを見ていきます。

| 前提知識: | 基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。 |
| --- | --- |
| 学習目標: | リンク状態を装飾する方法と、ナビゲーションメニューのような一般的な UI 機能でリンクを効果的に使用する方法を学ぶこと。 |

いくつかのリンクを見てみましょう
----------------

ハイパーリンクの作成のベストプラクティスに従って、HTML がリンクをどのように実装するかを調べました。 この記事では、この知識を基にして、リンクの装飾のためのベストプラクティスを示します。

### リンク状態

最初に理解するべきことはリンク状態の概念です。リンクが存在できる様々な状態のことで、それらは異なる疑似クラスを使って装飾することができます。

* **リンク（未訪問）**: リンクが他のどの状態にもない場合に、リンクが属するデフォルトの状態。 これは、`:link` 疑似クラスを使用して特に装飾できます。
* **訪問済み**: 既に訪問済み（ブラウザーの履歴に存在する）のリンクで、`:visited` 擬似クラスを使用して装飾します。
* **ホバー**: リンクにユーザーのマウスポインタが合わせられているときのリンクで、`:hover` 疑似クラスを使用して装飾します。
* **フォーカス**: フォーカスしたときのリンク（例えば、
 `Tab`
 キーなどを使用してキーボードユーザーによって移動してきたか、`HTMLElement.focus()` を使用してプログラムでフォーカスした） — これは `:focus` 擬似クラスを使用して装飾します。
* **アクティブ**: アクティブ化している（例えばクリックされている）ときのリンクで、`:active` 疑似クラスを使用して装飾します。
### デフォルトの装飾

次の例は、リンクがデフォルトでどのようにふるまうかを示しています（CSS は、テキストをより見やすくするために、単にテキストを拡大して中央に配置しています）。

```html
<p><a href="#">A simple link</a></p>
```

```css
p {
  font-size: 2rem;
  text-align: center;
}
```

**メモ:** このページの例にあるリンクはすべて偽のリンクです — `#`（ハッシュまたはポンド記号）が実際の URL の代わりに配置されています。 これは、実際のリンクが含まれている場合、それらをクリックすると例が壊れる可能性があるためです（エラーが発生したり、ロードしたページから埋め込まれた例に戻ることができません）。 `#` は現在のページにリンクしているだけです。

デフォルトの装飾を調べていくうちに、次のようないくつかのことに気付くでしょう。

* リンクには下線が引かれています。
* 未訪問のリンクは青です。
* 訪問済みのリンクは紫色です。
* リンクにホバーすると、マウスポインタが小さな手のアイコンに変わります。
* フォーカスのあるリンクの周囲にはアウトラインがあります —
 `Tab`
 キーを押すと、キーボードでこのページのリンクにフォーカスを合わせることができます（Mac では、これが機能する前に
 `Ctrl`
 +
 `F7`
 を押して*フルキーボードアクセス: すべてのコントロール*オプションを有効にする必要があるかもしれません）。
* アクティブなリンクは赤です（リンクをクリックしながらマウスボタンを押したままにしてみてください）。

興味深いことに、これらのデフォルトの装飾は、1990 年代半ばのブラウザーの初期の頃のものとほぼ同じです。 これは、ユーザーがこのふるまいを知っており、予期するようになったためです — リンクの装飾が異なると、多くの人が混乱してしまうでしょう。 これは、リンクの装飾を設定してはいけないという意味ではなく、予想されるふるまいから大きく外れてはいけないということです。 少なくとも次のことをするべきです。

* リンクには下線を使用しますが、他のものには使用しません。 リンクに下線を付けたくない場合は、少なくとも他の方法でリンクをハイライトしてください。
* ホバー/フォーカスしたときに何らかの方法で反応するようにし、アクティブ化したときには少し異なる方法で反応するようにします。

デフォルトの装飾は、次の CSS プロパティを使用してオフにしたり変更したりできます。

* テキストの色は `color` です。
* マウスポインタのスタイルは `cursor` です — 非常に良い理由がない限り、これをオフにしないでください。
* テキストのアウトラインは `outline` です（アウトラインは境界線に似ていますが、唯一の違いは、境界線はボックス内のスペースを占めますが、アウトラインは占めずに背景の上にあるだけだということです）。 このアウトラインは、アクセシビリティを向上させるのに役立つので、オフにする前に慎重に検討してください。 フォーカス状態でリンクホバー状態に与えられた装飾を少なくとも 2 倍にするべきです。

**メモ:** リンクの装飾は上記のプロパティに制限されているわけではありません — 好きなプロパティを自由に使用できます。 夢中になりすぎないようにしてください！

### いくつかのリンクを装飾する

デフォルトの状態を少し詳しく見てきたので、典型的なリンクの装飾のセットを見てみましょう。

まず始めに、空の規則セットを書き出します。

```css
a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}
```

リンクのスタイルは互いに重なっているため、この順序は重要です。 例えば、最初の規則の装飾は、それ以降のすべての規則に適用され、リンクがアクティブになっているときは、ホバーもしています。 これらを間違った順序で並べると、物事は適切に機能しません。 順番を覚えておくには、**L**o**V**e **F**ears **HA**te のようなニーモニックを使用してみてください。

それでは、これを適切に装飾するための情報を追加しましょう。

```css
body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}
```

CSS を適用するためのサンプル HTML も提供します。

```html
<p>
  There are several browsers available, such as <a href="#">Mozilla Firefox</a>,
  <a href="#">Google Chrome</a>, and <a href="#">Microsoft Edge</a>.
</p>
```

2 つをまとめると、この結果が得られます。

それでは、ここで何をしたでしょうか？ これは確かにデフォルトの装飾とは異なるように見えますが、それでもユーザーに何が起こっているのかを知るための十分な身近な経験を提供します。

* 最初の 2 つの規則は、この説明にとってそれほど興味深いものではありません。
* 3 番目の規則は `a` セレクタを使ってデフォルトのテキストのアンダーラインとフォーカスのアウトライン（とにかくブラウザーによって異なります）を取り除き、各リンクに少量のパディングを追加します — これらすべては後で明らかになります。
* 次に、`a:link` セレクタと `a:visited` セレクタを使用して、未訪問リンクと訪問済みリンクに 2 つのカラーバリエーションを設定して区別します。
* 次の 2 つの規則では、`a:focus` と `a:hover` を使用して、フォーカスされたリンクとホバーされたリンクを異なる背景色に設定し、さらにリンクを目立たせるために下線を使用します。 ここで注意すべき 2 つの点があります。
    + 下線は `text-decoration` ではなく、 `border-bottom` を使用して作成されています — 前者よりも後者の方が装飾オプションが優れていて、少し下に描かれるので下線が引かれている単語のディセンダ（例えば、g と y で x より下に出ている部分）を横切ることがないため、一部の人々はこれを好みます。
    + `border-bottom` の値は、色を指定せずに `1px solid` として設定しています。 こうすると、境界線は要素のテキストと同じ色になります。 これは、テキストがそれぞれ異なる色であるような場合に役立ちます。
* 最後に、`a:active` は、リンクがアクティブになっている間に反転配色を与えるために使用され、重要なことが起こっていることを明確にします！
### 能動的学習: あなた自身のリンクを装飾する

この能動的学習セッションでは、空の規則のセットにあなた自身の宣言を追加してリンクを本当にかっこよく見せてください。 想像力を駆使して、ワイルドに。 上記の例と同じように、よりかっこよく機能的なものを思いつくことができると確信しています。

間違えた場合は、*Reset* ボタンを使用していつでもリセットできます。 本当に立ち往生してしまったら、上に示した例を挿入するために *Show solution* ボタンを押してください。
```

<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;">
<p>There are several browsers available, such as <a href="#">Mozilla
 Firefox</a>, <a href="#">Google Chrome</a>, and
<a href="#">Microsoft Edge</a>.</p></textarea
 >

  <h2>CSS Input</h2>
  <textarea
 id="code"
 class="css-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
a {

}

a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}</textarea
 >

  <h2>Output</h2>
  <div
 class="output"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input
 id="reset"
 type="button"
 value="Reset"
 style="margin: 10px 10px 0 0;" />
    <input
 id="solution"
 type="button"
 value="Show solution"
 style="margin: 10px 0 0 10px;" />
  </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 solution = document.getElementById("solution");

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();
});

solution.addEventListener("click", function () {
  htmlInput.value = htmlCode;
  cssInput.value =
    "p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}";
  drawOutput();
});

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

リンクにアイコンを含める
------------

一般的なやり方は、リンクがどの種類のコンテンツを指しているかに関するより多くの標識を提供するためにリンクにアイコンを含めることです。 外部リンク（他のサイトにつながるリンク）にアイコンを追加する、本当に簡単な例を見てみましょう。 このようなアイコンは、通常、ボックスから出る小さな矢印のように見えます — この例では、icons8.com からの素晴らしい例を使います。

欲しい効果が得られる HTML と CSS を見てみましょう。 まず、装飾する簡単な HTML です。

```html
<p>
  For more information on the weather, visit our <a href="#">weather page</a>,
  look at <a href="http://#">weather on Wikipedia</a>, or check out
  <a href="http://#">weather on Extreme Science</a>.
</p>
```

次に、CSS です。

```css
body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus,
a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href\*="http"] {
  background: url("external-link-52.png") no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}
```

それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後の規則は興味深いです — ここでは前回の記事のリストアイテムのカスタム行頭記号を処理したのと同じ方法で外部リンクにカスタム背景画像を挿入しています — 今回は個々のプロパティの代わりに `background` の一括指定を使用します。 挿入したい画像へのパスを設定し、`no-repeat` を指定してコピーを 1 つだけ挿入するようにしてから、テキストコンテンツの右側へ 100%、上から 0 ピクセルの位置を指定します。

また、`background-size` を使用して、背景画像を表示するサイズを指定します。 レスポンシブウェブデザインの目的に合わせて、アイコンを大きくしておいて、このようにサイズを変更すると便利です。 ただし、これは IE 9 以降でのみ機能するため、これらの古いブラウザーをサポートする必要がある場合は、画像のサイズを変更しておいて、それをそのまま挿入する必要があります。

最後に、背景画像を表示するスペースを確保するためにリンクに `padding-right` を設定しているので、テキストと重なっていません。

最後の一言 — どのように外部リンクだけを選択したのでしょうか？ あなたがHTML リンクを適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。 したがって、テキスト "http" は（2 番目と 3 番目のリンクのように）外部リンクにのみ現れ、これを属性セレクタで選択できます。 `a[href*="http"]` は `<a>` 要素を選択しますが、"http" を含む値を持つ `href` 属性がある場合に限ります。

それでは、これで全部です — 上の能動的学習セクションを再検討して、この新しいテクニックを試してみてください！

**メモ:** 背景やレスポンシブウェブデザイン (en-US)にまだ慣れていなくても心配しないでください。 これらは他の場所で説明されています。

ボタンとしてのリンクの装飾
-------------

この記事でこれまでに説明したツールは、他の方法でも使用できます。 例えば、ホバーのような状態は、リンクだけでなく、さまざまな要素を装飾するために使用できます — 段落、リスト項目、またはその他のもののホバー状態を装飾することができます。

さらに、リンクは特定の状況下ではボタンのように見えて、そうふるまうように装飾されているのが普通です — ウェブサイトのナビゲーションメニューは通常リンクを含むリストとしてマークアップれており、ユーザーがサイトの他の部分にアクセスできるようにする一連のコントロールボタンやタブのように簡単にスタイル設定できます。 その方法を探りましょう。

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

```html
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Pizza</a></li>
  <li><a href="#">Music</a></li>
  <li><a href="#">Wombats</a></li>
  <li><a href="#">Finland</a></li>
</ul>
```

そして CSS です。

```css
body,
html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link,
a:visited,
a:focus {
  background: yellow;
}

a:hover {
  background: orange;
}

a:active {
  background: red;
  color: white;
}
```

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

最も興味深い部分に焦点を当てて、ここで何が起こっているのかを説明しましょう。

* 2 番目の規則は、`<ul>` 要素からデフォルトの `padding` を削除し、その幅を外側のコンテナ（この場合は `<body>`）の 100% になるように設定します。
* `<li>` 要素は通常デフォルトでブロックです（復習のために CSS ボックスの種類を参照してください）。 つまり、要素はそれぞれ自身のラインに配置されます。 この場合、水平方向のリンクのリストを作成しているので、3 番目の規則で `display` プロパティを `inline` に設定します。 これにより、リスト項目は互いに同じラインに配置されます — それらはインライン要素のようにふるまいます。
* `<a>` 要素を装飾する 4 番目の規則は、ここで最も複雑です。 ステップバイステップで進みましょう。
    + 前の例と同様に、デフォルトの `text-decoration` と `outline` をオフにすることから始めます — 見た目を損なうものは欲しくありません。
    + 次に、`display` を `inline-block` に設定します — `<a>` 要素はデフォルトではインラインですが、ブロックのように、要素を自身のラインからこぼさずに、サイズを変更できるようにしたいのです。 `inline-block` はこれを可能にします。
    + これからサイズを設定します！ `<ul>` の全幅を埋め、各ボタンの間には少しマージンを残して（ただし、右端には隙間はありません）、5 つのボタンを配置します。 それらはすべて同じサイズでなければなりません。 これを行うには、`width` を 19.5% に設定し、`margin-right` を 0.625% に設定します。この幅の合計が 100.625% になることに気付くでしょう。 これは最後のボタンが `<ul>` をオーバーフローさせ、次のラインに落ちることになります。 ただし、次の規則を使用してリストの最後の `<a>` のみを選択し、そこからマージンを削除して、100% に戻します。 これで完了です！
    + 最後の 3 つの宣言は非常に単純で、主に見た目を目的としています。 各リンク内のテキストを中央揃えにし、ボタンの高さ設定するために `line-height` を 3 に設定し（テキストを垂直方向に中央揃えする利点もあります）、テキストの色を黒に設定します。

**メモ:** HTML 内のリスト項目がすべて一行に記述されていることに気付いたかもしれません。インラインブロック要素間のスペースや改行は、単語間のスペースと同様にページにスペースを作成します。 そして、そのようなスペースは水平ナビゲーションメニューのレイアウトを壊すでしょう。だからスペースを取り除きました。この問題（と、その解決方法）についての詳細は、インラインブロック要素間のスペースの戦い（英語）で見つけることができます。

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

あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？この情報を保持しているかどうかを確認するためのアセスメントがモジュールの最後にあります。コミュニティスクールのホームページの組版を参照してください。

この評価ではこのモジュールで説明されているすべての知識をテストしますので、次に進む前に次の記事を読んだほうがいいかもしれません。

まとめ
---

この記事が、リンクについて知っておく必要があるすべての情報を提供してくれることを願っています — 今のところは！ テキストの装飾モジュールの最後の記事では、ウェブサイトでのカスタムフォントの使用方法や、ウェブフォントの使用方法について詳しく説明しています。

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


コミュニティスクールのホームページの組版 - ウェブ開発を学ぶ

コミュニティスクールのホームページの組版
====================

* 前のページ
* Overview: Styling text

この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 途中で楽しい時間があるかもしれません。

| 前提知識: | この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。 |
| --- | --- |
| 学習目標: | CSS テキスト装飾テクニックの理解をテストすること。 |

出発点
---

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

* 練習用の HTML ファイルと CSS ファイルと、提供されている外部リンクアイコンを入手してください。
* ローカルコンピュータにそれらのコピーを作成します。

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

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

架空のコミュニティカレッジのホームページ用の生の HTML と、ページを 2 列のレイアウトに装飾し、その他の基本的な装飾をする CSS が提供されています。 CSS ファイルの最後にあるコメントの下に CSS の追加部分を書いて、あなたが行った部分に簡単に印を付けることができるようにします。 一部のセレクタがくどくても心配しないで、この場合は見逃してください。

フォント

* まずはじめに、いくつかの自由に使えるフォントをダウンロードしてください。 これはカレッジですから、フォントはかなり真面目で、形式的で、信頼できる感じをページに与えるために選ばれるべきです — 一般的なテキスト本文のためのサイト全体の serif フォントに、見出しのための sans-serif または slab serif を組み合わせるといいかもしれません。
* 適切なサービスを使用して、これら 2 つのフォント用の bulletproof `@font-face` コードを生成してください。
* 本文フォントをページ全体に適用し、見出しフォントを見出しに適用します。

一般的なテキスト装飾

* サイト全体の `font-size` を `10px` にします。
* 見出しや他の要素タイプには、適切な相対単位を使用して定義された適切な `font-size` を与えます。
* 本文に適切な `line-height` を与えます。
* トップレベルの見出しをページの中央に配置します。
* 見出しをあまりにも押しつぶしすぎないようにし、文字が少し呼吸できるようにするために、見出しに少し `letter-spacing` を与えます。
* 必要に応じて、本文に `letter-spacing` と `word-spacing` を与えます。
* `<section>` の各見出しの後の最初の段落に、`20px` で、少し `text-indent` を与えます。

リンク

* ページの上部と下部にある水平バーの色に合わせて、リンクに訪問、フォーカス、ホバーの状態を設定します。
* デフォルトでリンクに下線が引かれますが、ホバーするかフォーカスを合わせると下線が消えるようにします。
* ページ上のすべてのリンクからデフォルトのフォーカスアウトラインを取り除きます。
* 目立つようにアクティブな状態に著しく異なるスタイルを与えますが、それでも全体的なページデザインに収まるようにします。
* 外部リンクの隣に外部リンクアイコンが挿入されるようにします。

リスト

* リストとリスト項目の間隔が、ページ全体のスタイルとうまく一致するようにしてください。 各リスト項目は段落行と同じ `line-height` を持ち、各リストの上下の段落の間隔は同じです。
* リスト項目に、ページのデザインにふさわしい素敵な行頭記号を付けてください。 カスタムの行頭記号画像を選択するか、それ以外のものを選択するかは、あなた次第です。

ナビゲーションメニュー

* ページのルックアンドフィールが適切になるようにナビゲーションメニューを装飾します。
ヒントとコツ
------

* この演習では、HTML を編集する必要はまったくありません。
* ナビゲーションメニューを必ずしもボタンのように見せる必要はありませんが、ページの横に愚かに見えないように少し高くする必要があります。 また、これを垂直ナビゲーションメニューにする必要があることも忘れないでください。
例
-

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

![](/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage/example2.png)

評価
--

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

* 前のページ
* Overview: Styling text


ウェブフォント - ウェブ開発を学ぶ

ウェブフォント
=======

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

このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます。これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。

|  |  |
| --- | --- |
| 前提知識: |
 基本的なコンピューターリテラシー、HTML の基本（HTML 入門の学中）、 CSS の基本（CSS 入門の学習）、
 CSS のテキストとフォントの基礎。
  |
| 目標: | サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得する。 |

フォントファミリーの復習
------------

基本的なテキストとフォントの装飾で見たように、HTML に適用されるフォントは `font-family` プロパティを使って制御できます。 これは 1 つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。

```css
p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
```

このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆるウェブセーフフォントです。フォントスタックを使用して、好ましいフォント、ウェブセーフな代替フォント、既定のシステムフォントの順で指定することができます。しかし、これはあなたのデザインが各フォントで作業することを確認するために必要なテストのため、作業量が増えてしまいます。（訳注：日本語フォントを英語フォントの後、既定のフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語の既定のフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。）

ウェブフォント
-------

しかし、これはとてもうまく動作する代替案があります。( IE バージョン 6 のような古いブラウザーでも対応しています。) CSS では、ウェブ上で利用できるフォントファイルを指定して、ウェブサイトにアクセスしたときに一緒にダウンロードさせることができます。つまり、この CSS 機能に対応しているブラウザーであれば、指定したフォントを表示することができるのです。すごいですね。 必要な構文は次のようなものです。

まず最初に、CSS の先頭に `@font-face` ブロックがあり、ダウンロードするフォントファイルを指定します。

```css
@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}
```

これより下では、 `@font-face` の中で指定されているフォントファミリー名を使ってカスタムフォントを通常通り好きなものに適用できます。

```css
html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}
```

構文はこれより少し複雑になります。 以下で詳しく説明します。

ウェブフォントに関して留意すべき重要な点が 2 つあります。

1. フォントは一般的に無料で使用できるものではありません。フォントの代金を支払ったり、コード内（またはサイト内）でフォント作成者のクレジット表記をするなどのライセンス条件に従ったりする必要があります。フォントを盗んで、適切なクレジットを与えずに使用すべきではありません。
2. 主要なブラウザーのすべてが WOFF/WOFF2 （Web Open Font Format version 1 and 2）に対応しています。 IE9（2011 年リリース）など古いブラウザーでも WOFF 形式には対応しています。
3. WOFF2 は、可変フォント、クロマティックフォント、フォントコレクションを含む TrueType および OpenType の仕様の全てに対応しています。
4. フォントファイルを掲載されている順番は重要です。ダウンロードする複数のフォントファイルのリストをブラウザーに指定された場合、ブラウザーは使用される可能性のある最初のフォントファイルを選ぶことになります。そのため、最初に掲載する形式は、優先される形式、つまり WOFF2 とし、古い形式はその後に掲載されるようにします。ある形式を理解できないブラウザーは、リストの中の次の形式で対応することになります。
5. 古いブラウザーで作業する必要がある場合、EOT (Embedded Open Type), TTF (TrueType Font), SVG ウェブフォントをダウンロードできるように指定する必要があります。この記事では、 Fontsquirrel Webfont Generator を使用して、必要なファイルを生成する方法を説明します。

**メモ:** テクノロジーとしてのウェブフォントは、バージョン 4 以降の Internet Explorer で対応しています。

Firefox Font Editor を使えば、ウェブフォントであろうとなかろうと、ページで使用されているフォントを調べたり操作したりすることができます。この動画は素晴らしいチュートリアルを提供しています。

アクティブラーニング: ウェブフォントの例
---------------------

この点を考慮して、最初の原則から基本的なウェブフォントの例を作り上げましょう。 埋め込まれたライブの例を使用してこれをデモすることは困難なので、代わりに、以下のセクションで詳述されている手順に従うことでプロセスを理解してください。

コードを追加するための出発点として、web-font-start.html ファイルと web-font-start.css ファイルを使用する必要があります（ライブの例を見る）。 ここで、これらのファイルのコピーをコンピュータの新しいディレクトリーに作成します。 `web-font-start.css` ファイルには、この例の基本的なレイアウトと組版を処理するための最小限の CSS がいくつかあります。

### フォントを探す

この例では、見出し用と本文テキスト用の 2 つのウェブフォントを使用します。 まず最初に、フォントを含むフォントファイルを見つける必要があります。 フォントはフォント製造元によって作成され、さまざまなファイル形式で保存されます。 フォントを入手できるサイトは、一般的に 3 種類あります。

* 無料フォント配布会社: これは無料フォントをダウンロードできるサイトです（フォント作成者へのクレジット表示などのライセンス条件が他にあるかもしれません）。 例としては、Font Squirrel、dafont、Everything Fonts などがあります。
* 有料フォント配布会社: これは、fonts.com や myfonts.com など、フォントを有料で利用できるようにするサイトです。 Linotype、Monotype、Exljbris などのフォント製造元から直接フォントを購入することもできます。
* オンラインフォントサービス: これはあなたに代わってフォントを保存し提供するサイトで、全体のプロセスをより簡単にします。 詳細については、オンラインフォントサービスの使用のセクションを参照してください。

いくつかのフォントを見つけましょう！ Font Squirrel に行き、2 つのフォントを選択します — 見出しには素敵で面白いフォント（多分素敵な display や slab serif フォント）、段落にはやや派手で読みやすいフォントです。 各フォントが見つかったら、download（ダウンロード）ボタンを押して、先ほど保存した HTML ファイルと CSS ファイルと同じディレクトリー内にファイルを保存します。 TTF (True Type Fonts) か OTF (Open Type Fonts) かは関係ありません。

いずれの場合も、フォントパッケージを展開します（ウェブフォントは通常、フォントファイルとライセンス情報を含む ZIP ファイルで配布されます）。 パッケージの中に複数のフォントファイルを見つけるかもしれません — 例えば、thin（細字）、medium（中字）、bold（太字）、italic（イタリック）、thin italic（細字イタリック）など、利用可能なさまざまな異形（variant）を持つファミリーとして配布されるフォントがあります。 この例では、それぞれの選択に対して 1 つのフォントファイルを使用することを考慮してください。

**メモ:** 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）

### 必要なコードの生成

今、必要なコード（そしてフォント形式）を生成する必要があります。 フォントごとに、次の手順に従います。

1. 商用やウェブのプロジェクトでこれを使用する場合は、ライセンス要件をすべて満たしていることを確認してください。
2. Fontsquirrel の Webfont Generator（ウェブフォントジェネレーター）に行きます。
3. *Upload Fonts*（フォントのアップロード）ボタンを使って 2 つのフォントファイルをアップロードします。
4. "Yes, the fonts I'm uploading are legally eligible for web embedding." （はい、アップロードしたフォントはウェブの埋め込みに法的に適格です。）というチェックボックスをオンにします。
5. *Download your kit*（キットをダウンロードする）をクリックします。

ジェネレーターの処理が完了したら、ZIP ファイルをダウンロードする必要があります — それを HTML と CSS と同じディレクトリーに保存してください。

古いブラウザーに対応する必要がある場合は、キットをダウンロードする前に、 Fontsquirrel Webfont Generator で「エキスパート」モードを選択し、SVG、EOT、TTF の形式のいずれかを選択してください。

フォント生成のためのウェブサービスは、通常、ファイルサイズを制限しています。そのような場合は、以下のようなツールを使用することを検討してください。

1. sfnt2woff-zopfli は ttf を woff へ変換
2. fontforge は ttf を svg へ変換
3. batik ttf2svf は ttf を svg へ変換
4. woff2 は ttf を woff2 へ変換
### デモでのコードの実装

この時点で、生成したばかりのウェブフォントのキットを展開します。 展開したディレクトリー内には、3 つの便利なアイテムがあります。

* 各フォントの複数のバージョン（`.woff`、`.woff2` ファイル） 。
* 各フォントのデモ HTML ファイル: ブラウザーにこれらをロードして、フォントがさまざまな使用状況でどのように見えるかを確認します。
* `stylesheet.css` ファイル: 生成された `@font-face` コードが含まれています。

デモにこれらのフォントを実装するには、次の手順に従います。

1. 展開したディレクトリーの名前を `fonts` のように簡単でシンプルなものに変更します。
2. `stylesheet.css` ファイルを開き、その中に含まれている両方の `@font-face` ブロックを `web-font-start.css` ファイルにコピーします。フォントはサイトで使用する前にインポートする必要があるため、 CSS のどれよりも前の一番上に配置する必要があります。
3. それぞれの `url()` 関数は CSS にインポートしたいフォントファイルを指しています。ファイルへのパスが正しいことを確認する必要があるので、各パスの先頭に `fonts/` を追加します（必要に応じて調整します）。
4. これで、ウェブセーフフォントや既定のシステムフォントと同じように、これらのフォントをフォントスタックで使用できます。 例えば次のようにします。

```css
@font-face {
  font-family: "zantrokeregular";
  src:
    url("fonts/zantroke-webfont.woff2") format("woff2"),
    url("fonts/zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
```

```css
font-family: "zantrokeregular", serif;
```

いくつかの素敵なフォントが実装されたデモページができあがるはずです。異なるフォントは異なるサイズで作成されるため、サイズや間隔などを調整して、ルックアンドフィールを調整する必要があります。

![ウェブフォントによるアクティブラーニングの演習の完成デザイン。このページには 2 つの見出しと 3 つの段落があります。ページには、異なるフォントと異なるサイズのテキストが含まれています。](/ja/docs/Learn/CSS/Styling_text/Web_fonts/web-font-example.png)

**メモ:** これがうまくいかない場合は、自分のバージョンと完成したファイルとを比較してみてください。 web-font-finished.html と web-font-finished.css を見てください。 GitHub からコードをダウンロードするか、完成した例をライブ実行することができます。

オンラインフォントサービスの使用
----------------

オンラインフォントサービスは一般的にあなたのためにフォントを保存して提供するので、`@font-face` コードを書くことを心配する必要はなく、一般的にサイトに 1 行か 2 行の単純なコードを挿入するだけですべてがうまくいきます。例としては、Adobe Fonts や Cloud.typography などが挙げられます。これらのサービスのほとんどはサブスクリプションベースですが、特に迅速なテスト作業やデモを書くのに便利な無料のサービスである Google Fonts は例外です。

これらのサービスのほとんどは使いやすいので、詳細には説明しません。 Google のフォントを簡単に見てみましょう。 そうすれば、アイデアを得ることができます。 ここでも、出発点として `web-font-start.html` と `web-font-start.css` のコピーを使用してください。

1. Google Fonts に行きます。
2. 好きなフォントを検索するか、ページ上部のフィルターを使用してフォントの種類を表示し、気に入ったフォントをいくつか選んでください。
3. フォントファミリーを選択するには、その横にある ⊕ ボタンを押します。
4. フォントファミリーを選択したら、ページ下部の *[選択数] Families Selected* バーを押します。
5. 表示された画面で、最初に表示された HTML コードの行をコピーして、それを HTML ファイルの先頭に貼り付ける必要があります。 フォントを CSS で使用する前にインポートされるように、既存の `<link>` 要素の上に配置します。
6. 次に、カスタムフォントを HTML に適用するために、リストされている CSS 宣言を必要に応じて CSS にコピーする必要があります。

**メモ:** 自分の作品を私たちの作品と比べてみる必要がある場合は、完成版を google-font.html および google-font.css で見ることができます（ライブで見る）。

@font-face の詳細
--------------

Fontsquirrel によって生成された `@font-face` 構文を調べてみましょう。 これは、ブロックの 1 つがどのように見えるかです。

```css
@font-face {
  font-family: "zantrokeregular";
  src:
    url("zantroke-webfont.woff2") format("woff2"),
    url("zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
```

何ができるのか、見て行きましょう。

* `font-family`: この行はフォントとして参照したい名前を指定します。 CSS を通して一貫してそれを使う限り、好きなものにすることができます。
* `src`: これらの行は CSS にインポートされるフォントファイルへのパス（`url` 部分）と各フォントファイルの形式（`format` 部分）を指定します。 どの場合も後者の部分はオプションですが、ブラウザーが使用できるフォントをすばやく見つけることができるため、宣言すると有益です。複数の宣言をカンマで区切ってリストすることができます。ブラウザーはそれらを検索し、最初に理解できるとわかったものを使用します。従って、先に WOFF2 のようなより新しくより良い形式を置き、そして後に TTF のようなより古くあまり良くない形式を置くのが最善です。
* `font-weight`/`font-style`: これらの行はフォントの太さ、およびイタリックかどうかを指定します。 同じフォントの複数の太さをインポートする場合は、フォントファミリーのすべての異なるメンバーに異なる名前を付けるのではなく、それらの太さ/スタイルを指定して、異なる値の `font-weight`/`font-style` を使用することができます。 @font-face tip: define font-weight and font-style to keep your CSS simple（英語）によって Roger Johansson が何をすべきかをより詳細に示しています。

**メモ:** ウェブフォントに特定の `font-variant` および `font-stretch` の値を指定することもできます。 新しいブラウザーでは、`unicode-range` の値でウェブフォントで使用する特定の文字範囲を指定することもできます — サポートしているブラウザーでは、指定された文字のみがダウンロードされ、不要なダウンロードを節約できます。 Drew McLellan による Creating Custom Font Stacks with Unicode-Range（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。

可変フォント
------

ブラウザーで利用できる新しいフォント技術に、可変フォントと呼ばれるものがあります。これは、幅、太さ、スタイルごとに別個のフォントファイルを保有するのではなく、ひとつのファイルに書体の異なるさまざまなバリエーションを組み込むことができるフォントです。このコースの初級編ではやや高度な内容になっていますが、もしあなたが背伸びをして可変フォントを調べたいなら、可変フォントガイドを読んでみてください。

まとめ
---

テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「コミュニティスクールのホームページの組版」の評価で理解度をテストします。

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