recursal/MDN huggingface dataset:
コンテンツのページの構造化
=============

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

CSS を使用してレイアウトできるようにコンテンツのページを構成することは、習得が非常に重要なスキルです。そのためこの評価では、ページがどのように表示されるのかを検討し、適切な構造セマンティクスを選択してその上にレイアウトを構築する能力についてテストします。

|  |  |
| --- | --- |
| 前提条件: | 
 この評価課題を実施する前に、コースの他の部分を履修しておく必要があります。
 コースの残りの部分、
 特に、文書とウェブサイトの構造に重点を置いて学習してください。
  |
| 目的: | ウェブページ構造の知識、および将来のレイアウト設計をマークアップで表現する方法をテストする。 |

開始地点
----

この評価を開始するには、すべての開始資産を含む zip ファイルを入手してください。

zip ファイルには以下のものが含まれています。

* 構造的マークアップを追加する必要がある HTML
* マークアップをスタイルするための CSS
* ページで使用されている画像

例はローカルコンピュータで作成するか、あるいは CodePen, jsFiddle, Glitch などのサイトを使用して作業してください。

**メモ:** もし行き詰まったら、私たちに助けを求めてください。このページの下にある評価またはさらなるヘルプの節をご覧ください。

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

このプロジェクトでは、あなたの仕事はバードウォッチングのウェブサイトのホームページのコンテンツを取り、それにページレイアウトを適用できるように構造要素を追加することです。持っている必要があるものは次のようなものです。

* ページのメインタイトル、サイトのロゴ、およびナビゲーションメニューを含む、サイトの全幅にわたるヘッダー。スタイル設定が適用されるとタイトルとロゴが並べて表示され、ナビゲーションがそれら 2 つの項目の下に表示されます。
* ウェルカムテキストを含むメインブロックと、画像のサムネイルを含むサイドバーの 2 つの列を含むメインコンテンツ領域。
* 著作権情報とクレジットを含むフッター。

以下に適したラッパーを追加する必要があります。

* ヘッダー
* ナビゲーションメニュー
* メインコンテンツ
* ウェルカムテキスト
* 画像サイドバー
* フッター

また、する必要があることは次のものです。

* 開始時に提供された既存の CSS のすぐ下に別の `<link>` 要素を追加して、提供された CSS をページに適用します。
ヒント
---

* W3C Nu HTML Checker を使用して HTML、CSS、 SVG の意図しないミス — 他の方法では見逃している可能性のあるミス — を修正できるようにします。
* この評価をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。
* 提供されている CSS は、正しい構造要素がマークアップに追加されると、レンダリングされたページでそれらが緑色に見えるように設計されています。
* 行き詰まって、どんな要素をどこに置くべきか想像できないならば、ページレイアウトの簡単なブロック図を描き、各ブロックを折り返すべきだと思う要素を書き留めることがしばしば役立ちます。
例
-

次のスクリーンショットは、マークアップされた後のホームページの外観の例を示しています。

![評価のための完成例。「バードウォッチング」という見出し、鳥の写真、ウェルカムメッセージを記載した、バードウォッチングに関するシンプルなウェブページ。](/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content/example-page.png)

評価またはさらなるヘルプ
------------

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方。

1. 作品をオンラインの共有可能なエディター、例えば CodePen, jsFiddle, or Glitch に置いてください。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「手紙のマークアップのための評価希望」のようなわかりやすいタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。
* 前のページ
* Overview: Introduction to HTML
スキルテスト: HTML テキストの基礎
====================

このスキルテストの目的は、あなたが HTML でのテキストのマークアップを行う方法を理解しているかどうかを評価することです。

**メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業することが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1
----

この課題では、与えられた HTML を意味づけされた見出しと段落要素を使用してマークアップしていただきます。

完成例はこのようになるはずです。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 2
----

この課題では、最初のマークアップされていないリストを順序なしリストに、2 つ目のリストを順序付きリストに変えていただきます。

完成例はこのようになるはずです。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 3
----

この課題では、1 つの段落が提供されています。目標は、インライン要素を使用して、強い重要性を持つ適切な単語と、強調された単語をいくつかマークアップすることです。

完成例はこのようになるはずです。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

評価またはさらなるヘルプ
------------

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。

1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「HTML テキストの基礎、スキルテスト 1 のための評価希望」のような説明的なタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。
スキルテスト: HTML 画像
===============

このスキルテストの目的は、あなたが画像と HTML への埋め込みを行う方法を理解しているかどうかを評価することです。

**メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業することが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1
----

このタスクでは、いくつかのブルーベリーの単純な画像をページに埋め込んでいただきます。必要なことは次の通りです。

* 画像へのパスを適切な属性に追加して、ページに埋め込みましょう。画像は `blueberries.jpg` という名前で、カレントフォルダー内の `images` というフォルダーに入っています。
* 画像を見ることができない人のために、適切な属性に代替テキストを追加して記述してください。
* `<img>` 要素に適切な `width` と `height` を与え、正しい縦横比で表示されるようにし、ページ上に表示するための十分な空間を確保しましょう。画像の内在サイズは 615 × 419 ピクセルです。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 2
----

この課題では、すでに完全な形の画像が用意されていますが、画像にマウスを乗せたときに現れるツールチップを追加していただきたいと思います。ツールチップに適切な情報を入れましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 3
----

この課題では、すでに完全な形の画像とキャプションのテキストが用意されています。ここで必要なのは、画像とキャプションを関連付ける要素を追加することです。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

評価またはさらなるヘルプ
------------

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰まっているので相談に乗ってほしいという方は次のようにしてください。

1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「HTML 画像、スキルテスト 1 のための評価希望」のような説明的なタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。
スキルテスト: マルチメディアと埋め込み
====================

このスキルテストの目的は、あなたが HTML への動画および音声コンテンツの埋め込みを行う方法、および object、iframe およびその他の埋め込み技術の使い方を理解しているかどうかを評価することです。

**メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業することが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1
----

この課題では、単純な音声ファイルをページに埋め込んでいただきます。必要なことは次の通りです。

* 音声ファイルのパスを適切な属性に追加して、ページに埋め込みましょう。音声は `audio.mp3` という名前で、カレントフォルダー内の `media` というフォルダーの中に入っています。
* ブラウザーにいくつかの既定のコントロールを表示させるための属性を追加しましょう。
* `<audio>` に対応していないブラウザーのために、適切な代替テキストを追加しましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 2
----

この課題では、複数のソース、字幕、他にも機能を備えた、少し複雑な動画プレーヤーをマークアップしていただきます。必要なことは次の通りです。

* ブラウザーにいくつかの既定のコントロールを表示させるための属性を追加しましょう。
* `<video>` に対応していないブラウザーのために、適切な代替テキストを追加しましょう。
* 動画ファイルへのパスを含む、複数のソースを追加しましょう。ファイルは `video.mp4` と `video.webm` という名前で、現在のフォルダー内の `media` というフォルダーに収められています。
* ブラウザーは、元の動画形式がどのような点であるかをあらかじめ知っておくことで、前もってダウンロードする動画形式を選択することができます。
* `<video>` の幅と高さは、その内在サイズ（320 × 240 ピクセル）と同じにしましょう。
* 動画は既定でミュート状態にしましょう。
* 動画再生時に `media` フォルダー内の `subtitles_en.vtt` というファイルに格納されたテキストトラックを表示するようにしましょう。入力する種類を字幕に、字幕言語を英語に明示的に設定する必要があります。
* 読み手が既定のコントロールを使用する際に、字幕の言語を識別できるようにしましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 3
----

このタスクでは、次のことをやっていただきます。

* PDF をページに埋め込みましょう。PDF は `mypdf.pdf` という名前で、`media` フォルダーの中にあります。
* YouTube や Google Maps 等の共有サイトへ行き、動画などのメディアアイテムをページへ埋め込みましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

評価またはさらなるヘルプ
------------

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。

1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「マルチメディアと埋め込み、スキルテスト 1 のための評価希望」のような説明的なタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。
データ属性の使用
========

HTML5 (en-US) は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 `data-*` 属性により、標準外の属性やDOM の追加プロパティなどの特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。

HTML の構文
--------

構文は単純です。あらゆる要素上で、名前が `data-` で始まるあらゆる属性がデータ属性です。例えば、記事 (article) があり、視覚表現を行わない追加情報を格納したいとします。 `data` 属性を使用するとこれだけです。


```html
<article
 id="electric-cars"
 data-columns="3"
 data-index-number="12314"
 data-parent="cars">
  ...
</article>
```

JavaScript からのアクセス
------------------

JavaScript でこれらの属性の値を読み出すことも、とても簡単です。 `getAttribute()` で完全な HTML での名前を使用して読むこともできますが、もっと簡単な方法が標準で定義されています。 `dataset` プロパティを通して `DOMStringMap` で読み出すことができます。

`dataset` オブジェクトを通して `data` 属性を取得するには、属性名の `data-` より後の部分を使用して取得します (なお、ダッシュは camelCase に変換されます)。


```js
const article = document.getElementById("electric-cars");

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
```


それぞれのプロパティは文字列であり、読み書きができます。上記の場合、 `article.dataset.columns = 5` を設定すると、その属性が `"5"` に変わります。

CSS からのアクセス
-----------

データ属性はプレーンな HTML 属性であるため、CSS からもアクセスできることに注意してください。 例えば、記事の親データを表示するには、次のように `attr()` 関数を使用して CSS で生成したコンテンツを使用できます。


```css
article::before {
  content: attr(data-parent);
}
```


CSS の属性セレクタを使用して、次のようにデータに応じてスタイルを変更することもできます。


```css
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
```


この JSBin の例では、これらすべてが一緒に機能していることがわかります。

データ属性を保存して、ゲームのスコアなど、絶えず変化する情報を含めることもできます。 ここで CSS セレクタと JavaScript アクセスを使用すると、独自の表示ルーチンを作成することなく、気の利いたエフェクトを作成できます。 生成したコンテンツと CSS トランジション（transition、遷移）を使用した例については、このスクリーンキャストを参照してください（JSBin の例）。

データ値は文字列です。 スタイリングを有効にするには、セレクタで数値を引用符で囲む必要があります。

問題
--

支援技術がアクセスできない可能性があるため、データ属性に表示およびアクセス可能なコンテンツを保存しないでください。 さらに、検索クローラーはデータ属性の値にインデックスを付けない場合があります。

考慮すべき主な問題は、Internet Explorer のサポートとパフォーマンスです。 Internet Explorer 11 以降は標準のサポートを提供しますが、以前のバージョンはすべて `dataset` をサポートしていません（英語）。 IE 10 以下をサポートするには、代わりに `getAttribute()` を使用してデータ属性にアクセスする必要があります。 また、通常の JS オブジェクトにこのデータを保存する場合と比較して、データ属性の読み取りパフォーマンス（英語）が低下します。

ただし、カスタム要素に関連付けられたメタデータの場合、それらは優れたソリューションです。

Firefox 49.0.2（およびおそらくそれに前後したバージョン）では、1022 文字を超えるデータ属性は Javascript（EcmaScript 4）によって読み取られません。

関連情報
----

* この記事は、hacks.mozilla.org の JavaScript および CSS でのデータ属性の使用（英語）から改編されました。
* カスタム属性は SVG 2 でもサポートされています。 詳細については、`SVGElement.dataset` および `data-\* (en-US)` を参照してください。
* HTML5 データ属性の使用方法（Sitepoint、英語）
画像にヒットマップを追加する
==============

ここでは、イメージマップを設定する方法と、最初に検討すべきいくつかの欠点を説明します。

| 前提条件: | 基本的な HTML 文書の作成方法と、アクセス可能な画像をウェブページに追加する方法について、理解している必要があります。 |
| --- | --- |
| 目的: | 1 つの画像の異なる領域を異なるページにリンクする方法を学びます。 |

**警告:** この記事では、クライアント側のイメージマップについてのみ説明します。 ユーザーにマウスが必要なサーバー側のイメージマップは使用しないでください。

イメージマップとその欠点
------------

`<a>` 内に画像をネストすると、画像全体が 1 つのウェブページにリンクします。 一方、イメージマップは、それぞれが異なるリソースにリンクするいくつかのアクティブな領域（「ホットスポット」と呼ばれます）を含みます。

以前は、イメージマップは一般的なナビゲーションデバイスでしたが、そのパフォーマンスとアクセシビリティの影響を徹底的に検討することが重要です。

いくつかの理由からテキストリンク（CSS でスタイル付けされたもの）がイメージマップよりも好ましい。 テキストリンクは軽量でメンテナンス可能で、多くの場合 SEO に優しく、アクセシビリティのニーズをサポートしています（スクリーンリーダー、テキストのみのブラウザー、翻訳サービスなど）。

イメージマップを正しく挿入する方法
-----------------

### ステップ 1: 画像

どんな画像でも受け入れられるわけではありません。

* 画像は、人々が画像のリンクをたどったときに何が起こるかを明確にする必要があります。 `alt` テキストはもちろん必須ですが、多くの人々は決してそれを見ません。
* 画像には、ホットスポットの始まりと終わりを明示する必要があります。
* ホットスポットは、どのビューポートサイズでも快適にタップするのに十分な大きさでなければなりません。 どれくらいの大きさか？ 72 × 72 CSS ピクセルは良好な最小値（英語）で、タッチターゲット間の間隔に余裕もあります。 50languages.com の世界地図（執筆時点）は、問題を完全に示しています。 アルバニアやエストニアよりもロシアや北米をタップする方がはるかに簡単です。

`<img>` 要素と `img` テキストを使用して、常に同じ方法で画像を挿入します。 画像がナビゲーションデバイスとしてのみ存在する場合、後で `<area>` 要素に適切な `area` テキストを指定すると `alt=""` と書くことができます。

特殊な `usemap` 属性が必要です。 イメージマップには、スペースを含まない一意の名前を考えてください。 次に、`usemap` 属性の値としてその名前（# が先行する）を割り当てます。


```html
<img src="image-map.png" alt="" usemap="#example-map-1" />
```

### ステップ 2: ホットスポットを有効にする

このステップでは、すべてのコードを `<map>` 要素内に配置します。 `<map>` には、上の `usemap` 属性で使用したのと同じマップ名の `name` 属性だけが必要です。


```html
<map name="example-map-1"></map>
```


`<map>` 要素の中に `<area>` 要素が必要です。 `<area>` 要素はそれぞれが 1 つのホットスポットに対応します。 キーボードでのナビゲーションを直観的に保つには、`<area>` 要素のソースでの順序がホットスポットの視覚的順序に対応していることを確認してください。

`<area>` 要素は空要素ですが、次の 4 つの属性が必要です。

`shape`

`coords`

`shape` は、`circle`（円）、`rect`（四角形）、`poly`（ポリゴン）、`default`（デフォルト）の 4 つの値のいずれかをとります。 （`default` の `<area>` は画像全体から、あなたが定義した他のホットスポットを除いたものです。） 選択した `shape` によって、`coords` で指定する必要がある座標情報が決まります。

* 円の場合は、中心の x 座標と y 座標を指定し、その後に半径の長さを指定します。
* 四角形の場合は、左上角と右下角の x/y 座標を指定します。
* ポリゴンの場合は、各角の x/y 座標を指定します（したがって、少なくとも 6 つの値）。

座標は CSS ピクセルで与えます。

重なり合っている場合、ソースでの順序で選ばれます。

`href`

リンク先のリソースの URL。 現在の領域をどこにもリンクさせたくない場合は、この属性を空白のままにしておくことができます（空白の円を描いている場合など）。

`alt`

リンクがどこにあるのか、それが何をするのかを人に伝える必須の属性。 `alt` テキストは、画像が利用できない場合にのみ表示されます。 アクセス可能なリンクテキストを書くためのガイドラインを参照してください。

`href` 属性が空白で、画像全体に既に `alt` 属性がある場合、`alt=""` と書くことができます。


```html
<map name="example-map-1">
  <area
 shape="circle"
 coords="200,250,25"
 href="page-2.html"
 alt="circle example" />

  <area
 shape="rect"
 coords="10, 5, 20, 15"
 href="page-3.html"
 alt="rectangle example" />
</map>
```

### ステップ 3: 誰にとっても効果があることを確認する

多くのブラウザーやデバイスでイメージマップを厳密にテストするまで、あなたは完了していません。 キーボードだけでリンクをたどってみてください。 画像をオフにしてみてください。

イメージマップが約 240 px より広い場合は、ウェブサイトをレスポンシブにするためにさらに調整する必要があります。 座標が同じままでは、もはや画像と一致しないので、小さな画面の場合は画像のサイズを変更するだけでは不十分です。

イメージマップを使用する必要がある場合は、Matt Stow の jQuery プラグイン（英語）を調べることができます。 また、Dudley Storey は、イメージマップエフェクトとして SVG を使用する方法（英語）と、その後にビットマップ画像用に SVG とラスターを組み合わせる方法（英語）を示しています。

より詳しく知る
-------

* `<img>`
* `<map>`
* `<area>`
* オンラインイメージマップエディター（英語）
* Advice on handling email clients（リンク切れ）
CSS レイアウト
=========

現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな `display` の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、 CSS レイアウトについて深く掘り下げることができます。

#### フロントエンドのウェブ開発者を目指している方へ

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

前提知識
----

このモジュールを始める前に、次のことを理解しているべきです。

1. HTML 入門で説明したように、HTML についての基本的な知識があること。
2. CSS 入門で説明したように、CSS の基本を容易にこなせること。
3. ボックスの装飾の方法を理解していること。

**メモ:** 使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、JSBin や Glitch などのオンラインコーディングプログラムで (ほとんどの) コードサンプルを試すことができます。

ガイド
---

これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。

CSS レイアウト入門

この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな `display` の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。

通常フロー

ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。

フレックスボックス

フレックスボックスは、項目を行または列にレイアウトするための 1 次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。このガイドを学習した後は、フレックスボックスのスキルをテスト (en-US)して、理解度を確認してから次のステップに進むことができます。

グリッド

CSS グリッドレイアウトは、ウェブ用の 2 次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できる多くの機能を備えています。 この記事では、ページレイアウトを始めるために必要な情報を提供し、次に進む前にグリッドのスキルをテスト (en-US)しましょう。

浮動レイアウト

`float` プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの 1 つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。

位置指定

位置指定を使用すると、通常の文書のｐレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな `position` の値とその使い方について説明します。

段組みレイアウト

段組みレイアウトの仕様では、新聞に見られるような、コンテンツを複数の段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。

レスポンシブデザイン

ウェブ対応端末の画面サイズが多様化するにつれ、レスポンシブウェブデザイン (RWD) という概念が登場しました。これは、異なる画面幅や解像度などに合わせて、ウェブページのレイアウトや外観を変更できるようにする一連の手法です。この記事では、レスポンシブウェブデザインを使いこなすために必要な主なテクニックをご紹介します。

メディアクエリーの初心者向けガイド

**CSS メディアクエリー**は、ブラウザーや端末の環境が、「ビューポートの幅が 480 ピクセル以上」などの指定したルールに合致した場合にのみ、 CSS を適用する方法です。メディアクエリーは、ビューポートの大きさに応じて異なるレイアウトを作成することができるため、レスポンシブウェブデザインの重要な要素となっていますが、ユーザーがマウスではなくタッチパネルを使用しているかどうかなど、サイトが実行されている環境に関する他の事柄を検出するためにも使用できます。このレッスンでは、まずメディアクエリーで使用される構文について学び、次にメディアクエリーを使用して、シンプルなデザインをどのようにレスポンシブにするかを示す実例を見ていきます。

古いレイアウト方法

グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動レイアウトや他のレイアウト機能を使用して実装される傾向がありました。 レイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。

古いブラウザーの対応

このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法に対応していないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブ技術を使用する方法について説明します。

評価試験: 基礎的なレイアウトの理解

ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。

関連情報
----

実用的な位置指定の例

この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。
CSS の構成要素
=========

このモジュールは CSS の第一歩から派生しています。CSS の言語や文法に慣れてきて、それを使う上での基本的な経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクターの全種類・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。

ここでの目的は、テキストの装飾や CSS レイアウトなどのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。

#### フロントエンドのウェブ開発者を目指している方へ

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

前提知識
----

このモジュールを始める前に、次のものを身につけておいてください。

1. コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった) ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。
2. 基本的なソフトウェアのインストールで説明されている基本的な作業環境と、ファイルの扱い方で説明されているファイルの作り方や管理の仕方について理解していること。
3. HTML 入門で説明されている HTML についての基礎知識に慣れ親しんでいること。
4. CSS の第一歩で説明されている CSS の基本について理解していること。

**メモ:** 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは JSBin や Glitch といったオンラインコーディングプログラムで試すことが可能です

ガイド
---

このモジュールは、 CSS 言語のもっとも重要な部分をカバーする以下の記事で構成されています。各記事には理解度を試す練習問題も含まれています。

カスケードと継承

このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念 (カスケード・詳細度・継承) の理解を深めていくことです。

CSS セレクター

CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです。

* 要素・クラス・ID によるセレクター
* 属性によるセレクター
* 擬似クラスおよび疑似要素
* 結合子

ボックスモデル

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

背景と枠線

このレッスンでは、CSS の背景と枠線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや背景画像や角丸について、背景と枠線は CSS のスタイリングに関する多くの疑問の解決策です。

テキスト方向の操作

近年では、右から左へだけでなく上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな向きをより適切にサポートするために CSS サポートが進化しています。これらのさまざまな向きの考え方については "**writing modes"** と呼ばれます。レイアウトの学習を進めて進めていくと "writing modes" の理解がとても役に立っていきますので、この記事ではそれらを紹介していきます。

コンテンツのはみ出し (オーバーフロー)

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

CSS の値と単位

CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。このレッスンでは、もっともよく使用される値と単位について見ていきます。

CSS によるサイズ設定

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

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

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

表のスタイリング

HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。この記事では、表をスタイリングするテクニックとともに、HTML 表を見栄え良くするためのガイドを提供します。

CSS のデバッグ

CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに、すべてのモダンブラウザーに入っている開発者ツールがどう役立つかを示します。

CSS の整理

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

評価テスト
-----

CSS スキルをテストしたいですか？以下の各評価では上記のガイドで説明されている CSS の理解度をテストできます。

基本的な CSS の理解

この評価では基本的な構文・セレクター・詳細度・ボックスモデル・その他の理解度をテストします。

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

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

かっこいいボックス

ここでは背景と枠線のスタイリングを使った人目を引くボックスの作り方を実践します。

関連情報
----

ボックスの高度な効果

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

このページでは、CSS の一般的な問題を解決するのに役立つ質問と回答、MDN サイトで公開されている他の素材について扱っています。

ボックスのスタイル付け
-----------

要素にドロップシャドウを付けるには

ボックスに影を追加するには、`box-shadow` プロパティを使用します。このチュートリアルでは、その作業方法を説明し、例を示します。

画像を歪ませずに枠内に収めるには

縦横比の異なるボックスに画像を収める異なる方法が `object-fit` プロパティによって提供されており、その使用方法はこのチュートリアルで確認することができます。

ボックスを装飾するのに使える方法

CSS を使用してボックスをスタイル設定する際に有益な、さまざまなプロパティを紹介します。

要素を半透明にするには

`opacity` プロパティや、アルファチャンネルのついたカラー値を使うと実現できます。いつどちらを使うかについて確認しましょう。

### ボックス装飾のレッスンとガイド

* ボックスモデル
* 背景と境界の装飾
CSS とテキスト
---------

テキストにドロップシャドウを付けるには

テキストに影を追加するには、`text-shadow` プロパティを使用します。このチュートリアルでは、その作業方法を説明し、例を示します。

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

`::first-line` 擬似要素で段落の最初の行を対象とする方法を確認しましょう。

記事の最初の段落を強調するには

`:first-child` 擬似クラスで最初の段落を対象とする方法を確認しましょう。

見出しの直後に来た段落だけを強調するには

結合子は、文書内のどこにある要素を正確に対象とするのに役立ちます。このチュートリアルでは、見出しの直後に続く段落に対して CSS を適用する方法について説明します。

### テキスト装飾のレッスンとガイド

* テキストを装飾するには
* 要素のリストをカスタマイズするには
* リンクを装飾するには
* CSS セレクター
CSS レイアウト
---------

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

ボックスの中にあるアイテムを水平方向と垂直方向にセンタリングするのは厄介なことでしたが、フレックスボックスなら簡単にできるようになりました。

### レイアウトガイド

* フレックスボックスの基本概念
* CSS 段組みレイアウトの使用
* グリッドレイアウトの基本概念
* CSS 生成コンテンツ

**メモ:** CSS レイアウトの問題解決に向けた料理帳があり、良くあるレイアウトのタスクの完全に動作する例と説明が付いています。
CSS の第一歩
========

CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。

#### フロントエンドのウェブ開発者になりたいですか？

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

前提条件
----

このモジュールを始める前に、次の状態になっておくべきです。

1. コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった)ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。
2. 基本的なソフトウェアのインストールで説明されている基本的な作業環境と、ファイルの扱い方で説明されているファイルの作り方や管理の仕方について理解していること。
3. HTML 入門で説明されている HTML についての基礎知識に慣れ親しんでいること。

**メモ:** 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは JSBin や Glitch といったオンラインコーディングプログラムで試すことが可能です。

ガイド
---

このモジュールには、CSS についてすべての基本的なことがらと、いくつかのスキルをテストできる次の記事が含まれています。

CSS とは何か？

**CSS** (Cascading Style Sheets; カスケーティングスタイルシート) は見栄えのよいウェブページを作ることができますが、背後ではどのように動いているのでしょうか？この記事では CSS について、簡単なコードの例とこの言語の主要な項目を説明します。

CSS 入門

この記事では、簡単な HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。

CSS の全体像

CSS の概要と使用方法の基本について理解できたので、今度は言語自体の構造をもう少し詳しく見てみましょう。ここで説明した概念の多くはすでに目にしています。あとに出てくる概念がわかりにくい場合は、ここに戻って見直してしてください。

CSS はどう働くか？

CSS の基本とその目的、そして簡単なスタイルシートの書き方を学びました。このレッスンでは CSS と HTML がブラウザーにどう働いてウェブページにするかを見ていきます。

新しい知識を使う

過去数回のレッスンで学んだことから、CSS で単純なテキスト文書をフォーマットし、独自のスタイルを追加できることがわかります。この記事ではそれを行う機会を提供します。

関連情報
----

Intermediate Web Literacy 1: Intro to CSS

本記事で説明した *CSS 入門* スキルを確認およびテストするのにちょうどいい Mozilla 基礎コース。セレクター、属性、値などを使った HTML 要素のスタイリングを学べます。
テキストの装飾
=======

CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。

前提知識
----

このモジュールを始める前に、HTML 入門のモジュールで説明したようにすでに HTML についての基本的な知識があり、CSS 入門で説明したように CSS の基本に慣れている必要があります。

**メモ:** 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、JSBin、CodePen、Thimble のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。

ガイド
---

このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。

基本的なテキストとフォントの装飾

この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。

リストの装飾

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

リンクの装飾

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

ウェブフォント

ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。

評価
--

以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。

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

この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。
スキルテスト: 位置指定
============

このスキルテストの目的は、CSS の `position` プロパティと値を使用した CSS の位置指定を理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、2 つの小さな課題を行っていただきます。

**メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業したほうが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1
----

この課題では、5px のグレーの境界線があるコンテナーの上と右に、`target` というクラスを持つアイテムを配置します。

最終的には下記画像のようになっているはずです。

![緑色のボックスが灰色の枠で囲まれたコンテナーの右上にあります。](/ja/docs/Learn/CSS/CSS_layout/Position_skills/position-task1.png)

下記のライブコードを更新して、完成例を再現してみてください。

追加の課題です。

* 追加課題として、 target をテキストの下に表示するように変更できますか？

自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。

課題 2
----

このタスクでは、下記の例でボックスをスクロールすると、サイドバーがコンテンツと一緒にスクロールします。サイドバーが配置されたまま、コンテンツだけがスクロールするように変更してください。

![コンテンツはスクロールしていますが、サイドバーはその場に留まります。](/ja/docs/Learn/CSS/CSS_layout/Position_skills/position-task2.png)

下記のライブコードを更新して、完成例を再現してみてください。

自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。

評価またはさらなるヘルプ
------------

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。

1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「位置指定のスキルテスト 1 のための評価希望」のような説明的なタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。