recursal/MDN huggingface dataset:
基礎的なレイアウトの理解
============

* 前のページ
* Overview: CSS layout

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

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

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

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

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

### 基本設定

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

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

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

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

### あなたのタスク

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

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

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

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

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

評価
--

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

* 前のページ
* Overview: CSS layout
通常フロー
=====

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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



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

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

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

まとめ
---

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

* 前のページ
* Overview: CSS layout
* 次のページ
新しい知識を使う
========

* 前のページ
* Overview: First steps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* 前のページ
* Overview: First steps
装飾的なレターヘッド付きの便箋の作成
==================

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

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

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

出発点
---

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

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

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

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

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

### メインの手紙

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

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

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

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

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

評価
--

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

* 前のページ
* Overview: Styling boxes
* 次のページ
かっこいいボックス
=========

* 前のページ
* Overview: Styling boxes

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

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

出発点
---

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

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

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

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

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

### 一般的なタスク

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

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

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

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

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

評価
--

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

* 前のページ
* Overview: Styling boxes
要素・クラス・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
* 次のページ
見出しの直後に来た段落を強調表示するには
====================

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

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

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

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

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 の学習: 擬似クラスと擬似要素
段落の最初の行を強調するには
==============

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

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

段落の最初の行を大きく、太くしたいと思います。最初の行を `<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 トランジションの使用