ウェブとウェブ標準 - ウェブ開発を学ぶ

ウェブとウェブ標準
=========

この記事では、ウェブがどのようにして生まれたのか、ウェブ標準技術とは何か、どのように連携して動作するのか、なぜ「ウェブ開発者」が素晴らしい職業として選ばれるのか、コースを通じてどのような最善の手法を学ぶことができるのか、といったウェブの背景について、いくつか役立つ情報を提供しています。

ウェブの略歴
------

ウェブの歴史については、多くの（より）詳細な説明があるので（後ほどリンクします）、ここではとても手短に説明します。（より詳細に関心がある方は、お好みの検索エンジンで「ウェブの歴史」を検索して、何が出てくるか見てみてください）。

1960 年代後半、米軍は ARPANET という通信網を開発しました。これは、パケット交換で動作し、 TCP/IP プロトコルスイートの最初の実装を特徴としているため、ウェブの前身と考えることができます。この2つの技術は、インターネットを構築するインフラの基礎を形成しています。

1980 年、ティム・バーナーズ=リー（以下、TimBL）は、異なるノード間のリンクという概念を取り入れた ENQUIRE というノートブックプログラムを書きました。聞き覚えはありませんか？

1989 年になると、 TimBL は Information Management: A Proposal とハイパーテキストを CERN で書きました。この 2 つの出版物は一緒になって、ウェブがどのように動作するかの背景を提供したのです。この 2 つの出版物は、ウェブがどのように機能するかの背景を示したもので、かなりの関心を呼び、 TimBL の上司はグローバルなハイパーテキストシステムを構築することを許可しました。

1990 年後半までに、 TimBL はウェブの最初のバージョンを実行するために必要なすべてのものを作成しました。 HTTP、HTML、WorldWideWebと呼ばれる最初のウェブブラウザー、 HTTP サーバー、そして見るためのいくつかのウェブページです。

それからの数年間で、ウェブは爆発的に普及し、複数のブラウザーがリリースされ、何千ものウェブサーバーが設定され、何百万ものウェブページが作成されるようになったのです。さて、これは起こったことをとても簡単にまとめたものですが、私たちは簡単な概要を皆さんに約束しました。

最後に重要なデータとして、 1994 年に TimBL が World Wide Web Consortium (W3C) という、さまざまな技術企業の代表が集まり、ウェブ技術の仕様書を作るために共同で作業する組織を得たことを紹介します。以下、CSS、JavaScript など他の技術が続くことで、現在のようなウェブの姿が見えてきたのです。

ウェブ標準
-----

**ウェブ標準**は、私たちがウェブサイトを構築するために使用する技術です。これらの標準は、仕様書と呼ばれる長い技術文書として存在し、この技術がどのように動作すべきかを詳細に記述しています。これらの文書は、記述されている技術をどのように使用するかを学ぶにはとても役に立ちません（MDN Web Docs のようなサイトがあるのはこのためです）。その代わりに、ソフトウェア技術者がこれらの技術を（通常はウェブブラウザーで）実装するために使用するよう意図されています。

例えば、 HTML Living Standard では、 HTML （すべての HTML 要素とそれに関連する API、およびその他の周辺技術）を実装するためにどうすればよいかは正確に記述されています。

ウェブ標準は標準化団体によって作成さ れています。標準化団体は、さまざまな技術企業の人々からなるグループを招き、すべての用途を満たすために技術がどのように動作するのが最善であるかについて合意させる機関です。 W3C は最もよく知られたウェブ標準化団体ですが、他にも WHATWG （HTML 言語の標準を維持）、 ECMA （JavaScript のベースである ECMAScript の標準を公開）、 Khronos （WebGL などの三次元グラフィックに関する技術を公開）など、さまざまな団体に所属しています。

### 「オープン」規格

TimBL と W3C が当初から合意していたウェブ標準の重要な側面の一つは、ウェブ（とウェブ技術）は投稿も使用も自由であるべきで、特許やライセンスに邪魔されるべきでないということです。したがって、誰でも無料でウェブサイトを構築するコードを書くことができ、誰でも仕様が書かれる標準作成プロセスに関わることができるのです。

ウェブ技術は、さまざまな企業が協力してオープンに作成されるため、一企業が独占的に制御することができないことを意味しており、これは実に良いことです。一企業が突然、ウェブ全体を有料にすると決めたり、新しいバージョンの HTML をリリースして、誰もがウェブサイトを作り続けるために購入しなければならないようにしたり、さらに悪いことに、もう興味がないと判断してウェブサービスを停止してしまうようなことは避けなければなりません。

これによって、ウェブは自由に利用できる公共のリソースであり続けることができるのです。

### ウェブを壊すな

オープンなウェブ標準の周りで耳にするもう一つの言葉は「ウェブを壊すな」です。この考えは、導入される新しいウェブ技術は、過去に行われたものが下位互換性を持ち（つまり、古いウェブサイトも引き続き動作する）、上位互換性がある（将来の技術は、現在あるものと互換性がある）べきだというものです。ここで紹介する学習素材を読んでいくと、このことが、とても賢い設計と実装の作業によって可能になることが分かってきます。

ウェブ開発者になるのはいいことだ
----------------

ウェブ業界は、仕事を探している人にとって、参入しやすいとても魅力的な市場です。最近公開された数字によると、現在世界には約 1900 万人のウェブ開発者がおり、この数字は今後 10 年で 2 倍以上になると想定されています。そして同時に、この業界ではスキルが不足しています。ですから、ウェブ開発を学ぶには絶好の機会だと言えるでしょう。

しかし、楽しいことばかりではありません。ウェブサイトの構築は、以前よりも複雑な課題となっています。使用するさまざまな技術、知っておくべき技術や最善の手法、実装するために必要とされる典型的なパターンをすべて勉強するためには、ある程度の時間をかける必要があるでしょう。そして、ウェブプラットフォームに現れる新しいツールや機能に対応できるよう、常に最新の知識を身につけ、練習を重ね、自分の技術を磨いていくことが必要です。

*唯一変わらないのは、変化することです。*

難しそうですか？心配しないでください。私たちは、始めるために必要なすべてを提供することを目指しており、より簡単に取り組むことができるようになります。ウェブの絶え間ない変化と不確実性を受け入れれば、自分自身を楽しみ始めることができます。ウェブコミュニティの一員として、あなたを助ける連絡先や役に立つ素材がウェブ全体に存在し、それがもたらす創造性の可能性を楽しめるようになるでしょう。

あなたは今、デジタルクリエイティブの世界にいます。その経験を生かし、生計を立てる可能性を楽しんでください。

最近のウェブ技術の概要
-----------

フロントエンドのウェブ開発者を目指すのであれば、学ぶべき技術はいくつもあります。この節では、それらについて簡単に記述します。これらのうちのいくつかがどのように連携して動作するかのより詳しい説明については、ウェブのしくみの記事をお読みください。

### ブラウザー

あなたはおそらく、今この瞬間もウェブブラウザーの中でこの言葉を読んでいるでしょう（プリントアウトした場合や、スクリーンリーダーなどの支援技術を使用して読み上げている場合は除きます）。ウェブブラウザーとは、人々がウェブを利用するために使用するソフトウェアのことで、Firefox、Chrome、Opera、Safari、Edge などがあります。

### HTTP

ハイパーテキスト転送プロトコル、またはHTTPは、ウェブブラウザーをウェブサーバー（ウェブサイトが格納される場所）と通信させるためのメッセージプロトコルです。良くあるやり取りは次のようなものです。
```

「やあ、ウェブサーバー。 bbc.co.uk を表示するのに必要案ファイルをくれる？」

「分かったよ、ウェブブラウザー。ほら、どうぞ。」

[ファイルをダウンロードしてウェブページを描画する]
```

HTTP メッセージ（リクエストとレスポンスと呼ばれる）の実際の構文は、それほど人間が読めるようなものではありませんが、これで基本的な考え方がわかります。

### HTML、CSS、JavaScript

HTML、CSS、JavaScript はウェブサイトを構築するために使用する三大技術です。

* ハイパーテキストマークアップ言語、すなわち **HTML** は、内容に意味（セマンティクス）と構造を与えるために、内容を包む（マークアップする）さまざまな要素からなるマークアップ言語です。簡単な HTML は次のようになります。

```html
<h1>これは最上位の見出しです</h1>

<p>これは文章の段落です。</p>

<img src="cat.jpg" alt="A picture of my cat" />
```

家づくりに例えるなら、HTML は家の土台や壁のようなもので、構造を与え、家を支えているものです。
* Cascading Style Sheets (**CSS**) は、 HTML にスタイルを適用するために使用されるルールベースの言語で、例えば、テキストや背景色を設定したり、境界線を加えたり、物をアニメーション化したり、ページを特定の方法でレイアウトしたりすることができます。簡単な例として、以下のコードでは HTML の段落を赤くすることができます。

```css
p {
  color: red;
}
```

家に例えると、CSS は家をきれいに見せるために使用する塗料、壁紙、絨毯、絵画のようなものです。
* **JavaScript** は、動的なスタイルの切り替えから、サーバーからの更新の取得、複雑な 3D グラフィックに至るまで、ウェブサイトに対話性を追加するために使用されるプログラミング言語です。以下の簡単な JavaScript は、段落への参照をメモリーに格納し、その中のテキストを変更します。

```js
let pElem = document.querySelector("p");
pElem.textContent = "We changed the text!";
```

家に例えると、 JavaScript は炊飯器、テレビ、電子レンジ、ドライヤーなどです。家に便利な機能を与えるものです。
### ツール

ウェブページを作成するための「生」の技術（HTML、CSS、JavaScriptなど）を一通り学んだら、今度は作業を簡単にしたり効率化したりするための様々なツールに出会うようになります。例えば、以下のようなものが挙げられます。

* コードのデバッグに使用することができる、現代のブラウザー内にある開発者ツール。
* コードが意図したとおりに動作しているかどうかを示すテストを使用することができるテストツール。
* ある種のウェブサイトをすばやく効果的に構築することができる、 JavaScript 上に構築されたライブラリーやフレームワーク。
* 一連のルールを受け取り、コードを調べて、ルールに正しく従っていない箇所を強調する、いわゆる「リンター」。
* コードファイルから空白を取り除き、ファイルサイズを小さくして、サーバーからのダウンロードをすばやく行えるようにするミニファイアー。
### サーバーサイドの言語とフレームワーク

HTML、CSS、JavaScriptは、フロントエンド（またはクライアントサイド）言語です。これは、ユーザーが使用できるウェブサイトのフロントエンドを生成するために、ブラウザーで使用されることを意味しています。

一方、バックエンド（サーバーサイド）言語と呼ばれるものもあります。これは、サーバー上で実行され、その結果をブラウザーに送って表示させる言語です。サーバーサイド言語の代表的な使用方法は、データベースからデータを取り出して、そのデータを含む HTML を生成し、その HTML をブラウザーに送信してユーザーに表示させることです。

サーバサイドフレームワークの例としては、ASP.NET（C# で）、Django（Python で）、Laravel（PHP で）、Next.js（JavaScript で）などが挙げられます。

ウェブの最善の手法
---------

これまで、ウェブサイトを構築するために使用する技術について簡単に説明してきました。次に、これらの技術を最善の方法で使用するために、採用すべき最善の手法について説明します。

ウェブ開発をするとき、不確実性の主な原因は、それぞれのユーザーがウェブサイトを見るためにどのような技術の組み合わせを使用するかわからないということから発生します。

* ユーザー 1 は、画面の内側が狭い iPhone で見ているかもしれません。
* ユーザー 2 は、ワイド画面のモニターを取り付けた Windows のノートパソコンで見ているかもしれません。
* ユーザー 3 は目が不自由で、ウェブページを読み上げるためにスクリーンリーダーを使用しているかもしれません。
* ユーザー 4 は、最新のブラウザーが動作しない、非常に古いデスクトップ機を使用している可能性があります。

ユーザーが何を使用するか正確には分からないので、防御的にデザインする必要があります。つまり、上記のユーザー全員が同じ経験を得られるとは限りませんが、上記のユーザー全員が使用できるように、可能な限り柔軟なウェブサイトを作成する必要があります。つまり、可能な限りすべての人のためにウェブが動作するようにしようということです。

勉強していると、このような概念にいつかは出会います。

* **ブラウザー間の互換性**とは、ウェブページが可能な限り多くの機器で動作するように努めることです。これには、すべてのブラウザーが対応している技術を使用すること、対応しているブラウザーでは、より良い使い勝手を提供すること（プログレッシブエンハンスメント）、古いブラウザーではより単純だが利用できる操作形態に戻るようコードを書くこと（グレイスフルデグラデーション）、などが含まれます。また、特定のブラウザーで何かがうまくいかないかどうかを確認するために多くのテストを行い、その失敗を修正するためにさらに多くの作業を行うことも必要です。
* **レスポンシブウェブデザイン**とは、機能やレイアウトを柔軟にして、さまざまなブラウザーでの表示に自動的に対応できるようにすることです。例えば、デスクトップの広い画面のブラウザーではある方法でレイアウトされたウェブサイトが、携帯電話のブラウザーではよりコンパクトな単一列のレイアウトで表示されるような方法です。今すぐブラウザーウィンドウの幅を調整して、試してみてください。
* **パフォーマンス**とは、ウェブサイトを可能な限りすばやく読み込むだけでなく、ユーザーがイライラして別の場所に行ってしまわないように、直感的で簡単に利用できるようにすることです。
* **アクセシビリティ**とは、できるだけ多くの種類の人々がウェブサイトを利用できるようにすることを意味しています（関連する概念として、多様性と包括性、インクルーシブデザインがあります）。これには、視覚障碍者、聴覚障碍者、認知障碍者、身体障碍者などを記載します。また、障碍を持った人だけでなく、若者やお年寄り、異なる文化圏の人、モバイル端末を使用する人、ネットワーク接続が不安定であったり遅かったりする人なども含まれます。
* **国際化**とは、自身の言語とは異なる文化を持つ人々が、ウェブサイトを利用できるようにすることです。ここには、技術的な配慮（右から左、あるいは縦書きの言語でも問題なく動作するようにレイアウトを変更するなど）と、人間的な配慮（その言語を第 2、第 3 の言語とする人々がテキストを理解しやすいように、平易で俗語を避ける言葉遣いを使用するなど）があります。
* **プライバシーとセキュリティ**。この 2 つの概念は関連のあるものですが、異なるものです。プライバシーとは、人々が個人的にビジネスを行うことを許可することであり、スパイ行為や必要以上のデータ収集を行わないことを指します。セキュリティとは、悪意のあるユーザーがあなたやあなたのユーザーから情報を盗むことができないように、安全な方法であなたのウェブサイトを構築することを指します。
関連情報
----

* World Wide Web の歴史
* インターネットの仕組み


CSS の基本 - ウェブ開発を学ぶ

CSS の基本
=======

* 前のページ
* Overview: Getting started with the web
* 次のページ

CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「*CSS の基本*」では、始めるのに必要なものを紹介します。ここでは、テキストを赤くするにはどうすればいいのか？コンテンツを（ウェブページの）レイアウトの中で特定の場所に表示するにはどうすればいいのか？背景画像と色を使って ウェブページをどのように飾るのか？というような疑問に答えていきます。

CSS とは何か
--------

HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。**CSS はスタイルシート言語です**。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。

```css
p {
  color: red;
}
```

それでは試してみましょう。テキストエディターを使用して、（上記の） 3 行の CSS 新しいファイルに貼り付けてください。そのファイルを `style.css` として `styles` という名前のディレクトリーに保存してください。

コードを働かせるには、この（上記の） CSS を HTML 文書に適用する必要があります。そうしないと、このスタイルはブラウザーの HTML 文書の表示に影響しません。（今までのプロジェクトをやっていない場合は、ここでいったん止めてファイルの扱いと HTML の基本を読み、まず何をする必要があるのかを見てください。）

1. `index.html` ファイルを開き、先頭（`<head>` タグと `</head>` タグの間）に以下の行を貼り付けてください。

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

2. `index.html` を保存し、ブラウザーで読み込んでください。次のように表示されるはずです。

![Mozilla のロゴといくつかの段落です。段落のテキストは、 CSS によって赤くスタイル付けされています。](/ja/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-styled.png)段落のテキストが赤くなっていれば、おめでとう！ CSS が動作しています。

### CSS ルールセットの構造

赤い段落テキストの CSS コードを分解して、その仕組みを理解してみましょう。

![CSS の p の宣言で、color を red にする](/ja/docs/Learn/Getting_started_with_the_web/CSS_basics/css-declaration-small.png)

全体の構造は**ルールセット**と呼びます (*ルールセット*という語はよく、単に*ルール*とも呼ばれます)。それぞれの部分の名前にも注意してください。

セレクター (Selector)

これはルールセットの先頭にある HTML 要素名です。これはスタイルを設定する要素 (この例の場合は `<p>` 要素) を定義します。別の要素をスタイル付けするには、セレクターを変更してください。

宣言 (Declaration)

`color: red;` のような単一のルールです。これは要素の**プロパティ**のうち、スタイル付けしたいものを指定します。

プロパティ (Property)

これらは、 HTML 要素をスタイル付けするための方法です。 (この例では、 `color` は `<p>` 要素のプロパティです。) CSS では、ルールの中で影響を与えたいプロパティを選択します。

プロパティ値 (Property value)

プロパティの右側には—コロンの後に—**プロパティ値**があります。与えられたプロパティの多くの外観から 1 つを選択します。 (例えば、 `color` の値は `red` 以外にもたくさんあります。)

構文の他の重要な部分に注意してください。

* セレクターを除き、それぞれのルールセットは中括弧 (`{}`) で囲む必要があります。
* それぞれの宣言内では、コロン (`:`) を使用してプロパティと値を分離する必要があります。
* それぞれのルールセット内でセミコロン (`;`) を使用して、それぞれの宣言と次のルールを区切る必要があります。

一つのルールセットで複数のプロパティ値を変更するには、次のようにセミコロンで区切って書いてください。

```css
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}
```

### 複数の要素の選択

複数の要素を選択して、そのすべてに一つのルールセットを適用することもできます。複数のセレクターはカンマで区切ります。たとえば、以下のようになります。

```css
p,
li,
h1 {
  color: red;
}
```

### さまざまな種類のセレクター

セレクターにはさまざまな種類があります。上記の例では、**要素セレクター**を使用しており、特定の種類の要素をすべて選択しています。しかし、もっと特定の要素を選択することもできます。ここでは、より一般的なセレクターの種類を紹介します。

| セレクター名 | 選択するもの | 例 |
| --- | --- | --- |
| 要素セレクター（タグまたは型セレクターと呼ばれることもあります） | 指定された型のすべての HTML 要素。 | `p``
` を選択 |
| ID セレクター | 指定された ID を持つページ上の要素です。指定された HTML ページでは、各 id 値は一意でなければなりません。 | `#my-id``
` または
 `<a id="my-id">` を選択
  |
| クラスセレクター | 指定されたクラスを持つページ上の要素です。同じクラスの複数のインスタンスが 1 つのページに現れることがあります。 | `.my-class``
` および
 `<a class="my-class">` を選択
  |
| 属性セレクター | 指定された属性を持つページ上の要素です。 | `img[src]``` は選択するが
 `<img>` は選択しない
  |
| 擬似クラスセレクター | 指定された要素が指定された状態にあるとき。（例えば、マウスポインターが上に乗っている（ホバー）状態。） | `a:hover``` を、マウスポインターがリンク上にあるときのみ選択。 |

他にも様々なセレクターがあります。詳しくは、 MDN のセレクターガイドをご覧ください。

フォントとテキスト
---------

CSS の基本をいくつか勉強しましたので、`style.css` ファイルにいくつかのルールと情報を追加して、この例を見栄え良くしましょう。

1. まず、以前にウェブサイトをどんな外見にするかで保存した、 Google フォントの出力を探します。 `<link>` 要素を `index.html` の先頭のどこか（`<head>` タグと `</head>` タグの間）に追加します。それは次のようなものです。

```html
<link
 href="https://fonts.googleapis.com/css?family=Open+Sans"
 rel="stylesheet" />
```

このコードは、ウェブページに Open Sans フォントファミリーを読み込むスタイルシートにページをリンクします。
2. 次に `style.css` ファイルにある既存のルールを削除します。試験としては良いものでしたが、赤いテキストだらけにするのはもうやめましょう。
3. 以下の行（下記参照）を追加し、 `font-family` の割り当てをウェブサイトをどんな外見にするかで選択した `font-family` に置き換えます。 `font-family` というプロパティは、テキストに使用するフォントを指します。このルールでは、ページ全体の基本フォントとフォントの大きさを定義します。 `<html>` はページ全体の親要素なので、その中のすべての要素は同じ `font-size` と `font-family` を継承します。

```css
html {
  font-size: 10px; /\* px は「ピクセル」 (pixels) の意味。ベースフォントサイズは 10 ピクセルの高さになった \*/
  font-family: "Open Sans", sans-serif; /\* これが Google フォントから取得した残りの出力になるはず。 \*/
}
```

**メモ:** CSS の `/*` と `*/` の間にあるものは何でも **CSS コメント**になります。ブラウザーはコードをレンダリングするときにこれを無視します。 CSS コメントはコードや論理について役立つメモを書くための方法です。
4. 次に、 HTML 本文内にテキストを配置する要素 (h1, `<li>`, `<p>`) のフォントの大きさを設定します。また、見出しを中央揃えにします。最後に、 2 つ目のルールセット (下記) を展開して、行の高さや文字の間隔などの設定を行い、本文のコンテンツを読みやすくしましょう。

```css
h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
```

`px` の値はお好みで調整してください。進行中の作品は、このようになるはずです。

![Mozilla のロゴといくつかの段落。 sans-serif フォントが設定され、フォントの大きさ、行の高さ、文字の間隔が調整され、メインページの見出しが中央に配置されています。](/ja/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-font-small.png)

CSS: ボックスのすべて
-------------

CSS を書いていて気づくことがあります。それは、その多くがボックスに関するものだということです。これには、サイズ、色、位置の設定が含まれます。ページ上のほとんどの HTML 要素は、他の箱の上に置かれた箱と考えることができます。

![大きな箱や木箱が積み重なっている状態](/ja/docs/Learn/Getting_started_with_the_web/CSS_basics/boxes.jpg)

Photo from https://www.geograph.org.uk/photo/3418115 Copyright © Jim Barton cc-by-sa/2.0

CSS のレイアウトは、主に*ボックスモデル*に基づいています。ページ上のスペースを占める各ボックスには、次のようなプロパティがあります。

* `padding`: コンテンツの周囲のスペースです。以下の例では、段落テキストの周りのスペースです。
* `border`: `padding` のすぐ外側にある実線
* `margin`: 要素の外側の周りの空間

![3 つのボックスがお互いの内側に配置されています。外側から内側に向かって、 margin, border, padding と書かれています。](/ja/docs/Learn/Getting_started_with_the_web/CSS_basics/box-model.png)

この節では次のものを使用します。

* `width` (要素の)
* `background-color`: 要素の内容と padding の背後にある色
* `color`: 要素のコンテンツ (通常はテキスト) の色
* `text-shadow`: 要素内のテキストに影を設定します
* `display`: 要素の表示モードを設定します (これについてはまだ心配しないでください)

続けて、さらに CSS を追加していきましょう。 `style.css` の一番下に、これらの新しいルールを追加し続けます。値を変えてどうなるか実験してみましょう。

### ページの色を変更する

```css
html {
  background-color: #00539f;
}
```

このルールはページ全体の背景色に設定を行います。上記のカラーコードを、ウェブサイトをどんな外見にするかで選んだ色に変更しましょう。

### 本文のスタイル付け

```css
body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}
```

次は `<body>` 要素です。ここにはいくつかの宣言がありますので、 1 行ずつ見て行きましょう。

* `width: 600px;` — これにより body は常に 600 ピクセルの幅になります。
* `margin: 0 auto;` — `margin` や `padding` などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響します（この場合は `0` になります）。2 番目の値は左右に影響します（ここで `auto` は残った水平方向の余白を左右に均等に配分する特別な値です）。 margin の構文で説明しているように、 1 つ、2 つ、3 つ、4 つの値を使用することもできます。
* `background-color: #FF9500;` — これは要素の背景色を設定します。このプロジェクトでは body の背景色に明るいオレンジ色を使用して、 `<html>` 要素の暗い青とは対照的にしました。（気軽に試してみてください。）
* `padding: 0 20px 20px 20px;` — これはパディングに 4 つの値を設定します。これは、コンテンツの周りに少しのスペースを確保するためです。今回は body の上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。`margin` と同様、 padding の構文で説明されているように、 1 つ、 2 つ、または 3 つの値を使用することもできます。
* `border: 5px solid black;` — これは境界の太さ、スタイル、色の値を設定します。この場合は、 body の全側面に 5 ピクセルの太さの黒ベタの境界線を設定します。
### メインページのタイトルの配置とスタイル付け

```css
h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}
```

body の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザーが（他のものの中で） h1 要素に既定のスタイルを適用するためです。それは悪い考えのように見えるかもしれませんが、スタイルのないページにも一定の読みやすさを求めるためのものです。隙間をなくすために、 `margin: 0;` を設定して既定のスタイルを上書きします。

次に見出しの上下のパディングを 20 ピクセルに設定します。

続いて、見出しテキストが HTML の背景色と同じ色になるように設定します。

最後に、 `text-shadow` は要素のテキストコンテンツに影を適用します。 4 つの値は次のとおりです。

* 最初はピクセル値で、影のテキストからの**水平オフセット**、どれだけ横に移動するかを設定します。
* 2 番目はピクセル値で、影のテキストから**垂直オフセット**、どれだけ下に移動するかを設定します。
* 3 番目のピクセル値で、影を**ぼかす半径**を設定します。値が大きいほどぼやけた影を生成します。
* 4 番目の値は、影の基本色を設定します。

いろいろな値を試して、表示方法の変化を確認してみてください。

### 画像のセンタリング

```css
img {
  display: block;
  margin: 0 auto;
}
```

次に、画像を中央に配置して見栄えを良くします。本文のときと同じように、 `margin: 0 auto` のトリックを使うこともできます。しかし、 CSS を機能させるために追加の設定が必要になる違いがあります。

`<body>` は**ブロック**要素であるため、ページの中でスペースを占めます。ブロック要素は、マージンやその他の余白を開ける値を適用することができます。一方、画像は**インライン**要素です。インライン要素にマージンやその他の余白を開ける値を適用することはできません。画像にマージンを適用するには、`display: block;` を使用して画像にブロックレベルの動作を指定する必要があります。

**メモ:** 上記の手順は、本体に設定されている幅 (600 ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をあふれ、ページの残りの部分にはみ出します。これを修正するには、1) 画像編集ソフトを使用して画像の幅を縮小するか、2) CSS を使用して、 `width` プロパティでより小さな値を `<img>` 要素に設定し、画像の大きさを変更します。

**メモ:** `display: block;` や、ブロックレベル/インラインの区別がまだ理解できなくても心配しないでください。 CSS の勉強を続けていくうちに意味が分かってくるはずです。さまざまな display の値の違いについて詳しくは、 MDN の display のリファレンスページを参照してください。

まとめ
---

この記事のすべての手順に従っている場合は、次のようなページが表示されます。

![Mozilla のロゴを中央に配置し、ヘッダーと段落を配置しています。これで、ページ全体の背景が青くなり、中央に配置されたメインコンテンツストリップの背景がオレンジになるなど、きれいなスタイルになりました。](/ja/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-final.png)

(作成した結果はこちらから見ることができます。) もしわからなくなった場合、Github の完成したサンプルコードと作業内容を常に比較することができます。

ここでは、CSS の表面に少し触れただけです。詳細については、CSS の学習トピックをご覧ください。

* 前のページ
* Overview: Getting started with the web
* 次のページ


ウェブのしくみ - ウェブ開発を学ぶ

ウェブのしくみ
=======

* 前のページ
* Overview: Getting started with the web

*ウェブのしくみ*では、あなたがコンピューターや携帯電話のウェブブラウザーでウェブページを見るときに起こることを簡単に説明します。

この理論は、ウェブのコードを書く上ですぐにでも必要というわけではありませんが、背景で何が起きているのかを理解しておくと、いずれ役に立つでしょう。

クライアントとサーバー
-----------

インターネットに接続されたコンピューターは**クライアント** (client) と**サーバー** (server) と呼ばれます。これらがどのように相互作用するかを概略図で表すと次のようになります。

![クライアントとサーバーを表す 2 つの円。リクエストと書かれた矢印は、クライアントからサーバーへ、レスポンスと書かれた矢印は、サーバーからクライアントへと向かっている。](/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works/simple-client-server.png)

* クライアントは、一般的なウェブユーザーが使うインターネットに接続された端末 (例えば Wi-Fi に接続されているコンピューターや、モバイルネットワークに接続されているスマートフォン) と、これらの端末で利用できるウェブにアクセスするソフトウェア (ふつうは Firefox や Chrome などのウェブブラウザー) のことです。
* サーバーとは、ウェブページ、サイト、アプリを格納しているコンピューターのことです。クライアント端末がウェブページにアクセスしたいときは、ウェブページのコピーがサーバーからクライアントにダウンロードされ、ユーザーのウェブブラウザーに表示されます。
道具箱の他の部分
--------

もちろん上で説明したクライアントとサーバーだけでなく、これら二つ以外にも、他に多くのものが関わっています。以下では、それについて説明します。

いま、ウェブが道路であると想像してみましょう。道路の片端にクライアントがあり、そこは例えば、あなたの自宅のようなものです。反対の端はサーバーで、そこは例えば、あなたが何かを買うお店のようなものです。

![横断歩道で道路を渡っている人の白黒写真](/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works/road.jpg)

クライアントとサーバーに加えて、以下のものにも触れなければなりません。

* **インターネット接続**: ウェブ上でデータの送受信をできるようにします。あなたの自宅とお店との間の通りのようなものです。
* **TCP/IP**: Transmission Control Protocol と Internet Protocol は、どのようにウェブ上をデータが動くのか、を定義した通信プロトコルです。これは注文したり、店に行ったり、物を買ったりするための通信手段や交通機関のようなものです。身近な例では、車やバイク (またはその辺りにあるもの) のようなものです。
* **DNS**: Domain Name System はウェブサイトの住所録のようなものです。ブラウザーにウェブアドレスを入力すると、ブラウザーはウェブサイトを取得する前に DNS を見て、ウェブサイトの IP アドレスを探します。ブラウザーはウェブサイトがどのサーバーにいるかを探し出す必要があり、それで HTTP のメッセージを正しい場所（下記参照）に送ることができます。これはお店の所在地を探してからお店に行くようなものです。
* **HTTP**: Hypertext Transfer Protocol は、クライアントとサーバーが対話をする方法を定義するアプリケーションプロトコルです。これは商品を注文するための言語のようなものです。
* **コンポーネントファイル**: ウェブサイトは多くの異なるファイルで構成されます。これはお店で複数の部品を買うようなものです。これらのファイルは主に 2 種類に当てはまります。
    + **コードファイル**: ウェブサイトは主に HTML、CSS、JavaScript から作られます。しかし、ちょっと後で他の技術にも出会うことになるでしょう。
    + **資産** (Assets): これは画像、音楽、動画、Word 文書、PDF といったウェブサイトを構成するコード以外のすべての材料の集合的な名前です。
ならば何が起こるのか
----------

ブラウザーにウェブアドレスを打ち込んだ時に何が起こっているかというと（お店に歩いていく例えでは）、

1. ブラウザーは DNS サーバーにアクセスし、ウェブサイトのあるサーバーの実際のアドレスを探します（お店の住所を見つけます）。
2. ブラウザーはサーバーに HTTP リクエストメッセージを送信して、ウェブサイトのコピーをクライアントに送るよう求めます（お店に行ってものを注文します）。このメッセージ、およびクライアントとサーバーの間でやりとりされるその他すべてのデータは、TCP/IP を使用してインターネット経由で送信されます
3. サーバーがクライアントのリクエストを承認すると、サーバーはクライアントに "200 OK" というメッセージを送ります。これは「もちろんそのウェブサイトを見ることができます。どうぞ！」という意味です。そしてウェブサイトのファイルを、データパケットと呼ばれる一連の小さな塊 (chunk) としてブラウザーに送信し始めます（お店は商品を渡し、あなたは自宅に持って帰ります）。
4. ブラウザーは小さな塊を完全なウェブページに組み立て、表示します（玄関にものが到着しました — 新しいピカピカのものです、すばらしい！）
構成するファイルが解釈される順序
----------------

ブラウザーがサーバーに HTML ファイルのリクエストを送信するとき、こうした HTML ファイルには `<link>` 要素が外部の CSS スタイルシートを参照していたり、 `<script>` 要素が外部の JavaScript のスクリプトを参照していたりすることがよくあります。ブラウザーがページを読み込むときに、これらのファイルがブラウザーによって解釈される順序を知ることが重要です。

* ブラウザーはまず HTML ファイルを解釈し、 `<link>` 要素による外部 CSS スタイルシートへの参照や、 `<script>` 要素によるスクリプトへの参照を認識するようになります。
* ブラウザーは HTML を解釈しながら、 `<link>` 要素から見つかった CSS ファイルと `<script>` 要素から見つかった JavaScript ファイルに対してサーバーにリクエストを送り返し、それらから CSS と JavaScript を解釈します。
* ブラウザーは解釈された HTML からメモリー内にある DOM ツリーを生成し、解釈された CSS からメモリー内に CSSOM 構造を生成し、解釈された JavaScript をコンパイルして実行します。
* ブラウザーが DOM ツリーを構築し、 CSSOM ツリーからスタイルを適用して JavaScript を実行すると、ページの視覚表現が画面に描かれ、ユーザーはページの内容を見て、それとの対話を始めることができます。
DNS の説明
-------

実際のウェブアドレスは、お気に入りのウェブサイトを見つけるためにアドレスバーに入力するような、すばらしい、覚えやすい文字列ではありません。実際のウェブアドレスは `63.245.215.20` のような特殊な数字です。

これは、 IP アドレスと呼ばれ、ウェブ上の一意の場所を表します。しかし、あまり覚えやすくはないですね。それが、ドメインネームシステムが発明された理由です。このシステムは、特別なサーバーを使用して、ブラウザーに入力されたウェブアドレス（"mozilla.org" など）とウェブサイトの実際の (IP) アドレスを対応させます。

ウェブサイトには、 IP アドレスを使用して直接アクセスできます。 DNS lookup ツールを使用して、ウェブサイトの IP アドレスを知ることができます。

パケットの説明
-------

先に、サーバーからクライアントへデータを送信する形式を説明するために「パケット」という用語を使用しました。これはどういう意味なのでしょうか。基本的に、ウェブ上でデータが送信されるときは、何千もの小さな塊で送信されます。データが小さなパケットで送信されるのには、複数の理由があります。パケットが消滅したり、破損したりすることがありますが、そのようなときに小さな塊を置き換えるのは簡単です。さらに、パケットを様々な経路でルーティングすることで、交換を高速化し、多くの異なるユーザーが同じウェブサイトを同時にダウンロードできるようになります。もし各ウェブサイトが単一の大きな塊として送信された場合、一度にダウンロードできるのは一人のユーザーだけとなり、明らかにウェブはとても効率が悪くなるので、使用してもあまり楽しくなくなるでしょう。

関連情報
----

* インターネットはどのように動くのか
* HTTP — an Application-Level Protocol
* HTTP: Let's GET It On!
* HTTP: Response Codes
クレジット表示
-------

道路の写真: Street composing, by kevin digga.

* 前のページ
* Overview: Getting started with the web


ウェブサイトをどんな外見にするか - ウェブ開発を学ぶ

ウェブサイトをどんな外見にするか
================

* 前のページ
* Overview: Getting started with the web
* 次のページ

「*ウェブサイトをどんな外見にするか*」では、コードを書き始める前に、このウェブサイトについて計画したりデザインしたりすべき事柄について説明します。例えば「どんな情報をウェブサイトで提供するのか」「どのフォントや色を使いたいのか」「このウェブサイトは何をするのか」などです。

まず最初に: 計画を立てる
-------------

始める前に、いくつか考えておかなければいけないことがあります。このウェブサイトは実際に何をすべきでしょうか？普通ウェブサイトは様々なことができます。しかし、はじめは単純なことにとどめておくべきでしょう。まずは、見出し一つ、画像一つ、そしていくつかの段落のある単純なウェブページを作ることから始めましょう。

まずはじめに、次の質問に答える必要があります。

1. **何についてのウェブサイトですか？** 犬、ニューヨーク、それともパックマン？
2. **主題についてどんな情報を表現しようとしていますか？** タイトルといくつかの段落、それからページに表示させたい画像を考えます。
3. **ウェブサイトをどんな外見にしますか？** 簡単で大まかな言葉で言うと？背景色は？適切なフォントはフォーマル？漫画？太字で派手？繊細？

**メモ:** 複雑なプロジェクトでは、色、フォント、ページのアイテム間の余白、適切な文体など、詳細なガイドラインが必要です。これは、デザインガイド、デザインシステム、ブランドブックなどと呼ばれます。一例として、 Firefox Photon Design Systemがあります。

デザインをスケッチする
-----------

次に、ペンと紙を取って、あなたのサイトの見た目をどういう風にしたいのか、大まかに描き出します。はじめてのシンプルなウェブページでは、描き出すものもあまりないですが、ウェブサイトを作るうえでの習慣として身につけるべきです。ヴァン・ゴッホのようになる必要はありませんので！

![紙に描いたウェブサイトのラフ画とスケッチ](/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/website-drawing-scan.png)

**メモ:** 現実の複雑なウェブサイトの場合でも、デザインチームは普通、ラフスケッチを描くことから始めます。その後、グラフィックエディターや Web の技術を使って、デジタルのモックアップを作るのです。

多くの場合、ウェブの開発チームには、グラフィックデザイナーとユーザーエクスペリエンス (UX) デザイナーがいます。グラフィックデザイナーは、ウェブサイトの見た目を作り上げます。 UX デザイナーは、もう少し抽象的な役割を持っていて、サイトを訪れるユーザーがウェブサイトでどういう経験をし、どのように操作するかということを考えます。

資産を選ぶ
-----

この時点で、ウェブページについて、将来どう表現したいかをまとめ始めるとよいでしょう。

### テキスト

先ほど考えたちょっとした文章やタイトルは、まだそのまま残しておきます。手近なところに置いておきましょう。

### テーマカラー

色を選ぶときは、色選択ツールへ行き、好みの色を見つけましょう。色をクリックすると、 `#660066` のような 6 桁の奇妙なコードが出てきます。これは*ヘキサコード*（16 進コード）と呼ばれ、選んだ色を表します。今はどこか安全なところにコピーしておきましょう。

![MDN Docs ウェブサイトのカラーピッカーツールで、RGB、HSL、HEX の色を利用できます](/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/color-picker.png)

### 画像

画像を探すには、Google 画像検索にアクセスし、ぴったりなものを探しましょう。

1. 欲しい画像が見つかったら、クリックして拡大表示にします。
2. 画像を右クリック（Mac では Ctrl +クリック）し、[名前を付けて画像を保存...] を選択して、画像を安全に保存する場所を選択します。または、後で使用するためにブラウザーのアドレスバーから画像のウェブアドレスをコピーします。

![Google 画像検索での検索語句の検索結果](/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images.png)

なお、ウェブ上のほとんどの画像には、 Google 画像検索にあるものも含め、著作権があります。あなたが著作権を侵害してし舞うことを防ぐために、 Google のライセンスフィルターを使うと良いでしょう。 [ツール] ボタンをクリックすると、 [ライセンス] オプションが下に表示されます。「クリエイティブ・コモンズ ライセンス」などの選択肢を選択してください。

![Google 画像検索でクリエイティブ・コモンズ ライセンスの画像を取得するための検索結果のフィルタリング](/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images-licensing.png)

### フォント

画像と同様に、多くのフォントはライセンスで保護されており、サイト内で自由に使用することはできません。Google フォントは、Google が自分自身で所有するウェブサービスであり、たくさんのフォントにアクセスすることができます。

フォントが見つかったら、そのフォントを使用する方法は大きく分けて 2 つあります。

1. Google のサーバーからフォントを読み込むために、コードに参照を追加する。
2. 自分のシステムにフォントファイルをダウンロードし、フォントをホスティングし、ウェブサイトのコードでホスティングしたコピーを使用する。

**メモ:** Google フォントでホスティングされているフォントを提供すると、フォントサービスがユーザーの IP アドレスを公開するため、EU のデータプライバシー規則である GDPR に抵触する可能性があります。これが問題になりそうな場合は、2 つ目の選択肢を選んでください。

また、Arial、Times New Roman、Courier New などのセーフウェブフォントを使用することもできます。

* 前のページ
* Overview: Getting started with the web
* 次のページ


HTML の基本 - ウェブ開発を学ぶ

HTML の基本
========

* 前のページ
* Overview: Getting started with the web
* 次のページ

HTML （**H**yper**T**ext **M**arkup **L**anguage、ハイパーテキスト・マークアップ・ランゲージ）は、ウェブサイトのコンテンツの構造を作るために使うコードです。例えば、コンテンツは段落、箇条書きのリスト、画像の使用、データテーブルなどの組み合わせで構成されています。タイトルが示すように、この記事では HTML とその機能の基本的な理解ができるように説明します。

HTML とは
-------

HTML は、コンテンツの構造を定義する*マークアップ言語*です。 HTML は一連の **要素** で構成されており、これらの要素がコンテンツのさまざまな部分を囲み、一定の表示や動作をさせることができます。タグで囲むと、単語や画像をどこかにハイパーリンクさせたり、単語を斜体にしたり、フォントを大きくしたり小さくしたりすることができます。 例えば、次のようなコンテンツがあるとします。
```

My cat is very grumpy
```

行を独立させたい場合は、段落タグで囲んで段落であることを指定することができます。

```html
<p>My cat is very grumpy</p>
```

### HTML 要素の中身

この段落要素についてもう少し詳しく見ていきましょう。

![開始タグ、 'my cat is very grumpy' と読めるコンテンツ、終了タグがある段落要素](/ja/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-small.png)

要素は主に以下のようなもので構成されています。

1. **開始タグ** (opening tag): これは、要素の名前（この場合は p）を**山括弧**で囲んだものです。どこから要素が始まっているのか、どこから効果が始まるのかを表します。 — 今回の場合どこから段落が始まるかを表しています。
2. **終了タグ** (closing tag): これは、要素名の前に**スラッシュ**が入っていることを除いて開始タグと同じです。どこで要素が終わるのかを表しています。 — この場合は、段落が終わる場所を表します。終了タグの書き忘れは、初心者のよくある間違いで、おかしな結果になることがあります。
3. **コンテンツ** (content): 要素の内容です。今回の場合はただのテキストです。
4. **要素** (element): 開始タグ、終了タグ、コンテンツで要素を構成します。

要素には属性 (attribute) を設定することができます。このような感じです。

![class 属性 class=editor-note が強調された段落の開始タグ](/ja/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-attribute-small.png)

 属性には、実際のコンテンツには表示させたくない、要素に関する追加情報が含まれています。ここでは、 `class` が属性の**名前**で、 `editor-note` が属性の**値**です。 `class` 属性では、要素に一意ではない識別子を与えることができ、それを使って要素（および同じ `class` 値を持つ他の要素）にスタイル情報などのターゲットを設定することができます。
 一部の属性、たとえば `required` には値がありません。

値を設定する属性は常に次のような形式になります。

1. 要素名（すでにいくつか属性がある場合はひとつ前の属性）との間の空白
2. 属性名とそれに続く等号
3. 引用符で囲まれた属性の値

**メモ:** ASCII のホワイトスペース（または `"` `'` ``` `=` `<` `>` のいずれかの文字）を含まない単純な属性値は引用符を省略することができますが、コードを一貫性のあるものにし、理解を容易にするため、すべての属性値を引用符で囲むことをお勧めします。

### 要素の入れ子

要素の中に他の要素を入れることもできます。これを**ネスト**（または入れ子）と言います。もしあなたの猫が「とっても」機嫌が悪いことを表したいとしたら、「とっても」という単語を `<strong>` 要素に入れて、単語の強調を表すことができます。

```html

My cat is very grumpy.

```

しかしながら要素は正しく入れ子にしなければなりません。上記の例では、まず始めに `<p>` 要素が開始され、その次に `<strong>` 要素が開始されています。その場合は、必ず `<strong>` 要素、 `<p>` 要素の順で終了しなければなりません。次の例は間違いです。

```html

My cat is very grumpy.

```

要素は確実に他の要素の中もしくは外で開始し、終了する必要があります。上記の例のように要素が重複してしまうと、ウェブブラウザーは言おうとしていることを推測してもっとも良いと思われる解釈をするため、予期せぬ結果になることがあります。そうならないよう気を付けましょう！

### 空要素

コンテンツを持たない要素もあります。そのような要素を **空要素** (void element) と呼びます。すでに HTML ページにある `<img>` 要素を例に見ていきましょう。

```html

```

この要素は 2 つの属性を持っていますが、終了タグ `</img>` がありませんし、内部にコンテンツもありません。これは画像要素は、その機能を果たすためにコンテンツを囲むものではないからです。画像要素の目的は、画像を HTML ページの表示させたいところに埋め込むことです。

### HTML 文書の構造

ここまでは HTML 要素について見てきましたが、しかし、要素単体ではあまり役には立ちません。ここからはどのようにしてそれぞれの要素を組み合わせ、 HTML ページ全体を作っていくのかを勉強していきましょう。ファイルの扱いで出てきた `index.html` に書いてあるコードをもう一度見てみましょう。

```html
<!doctype html>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>テストページ</title>

```

この中にあるものは以下の通りです。

* `<!DOCTYPE html>` — 文書型宣言です。これは必須の前置きです。昔々、 HTML がまだ出来たばかりの頃（1991 ～ 2 年）、文書型宣言は HTML ページが正しい HTML と見なされるために従わなければならない、一連のルールへのリンクとして機能することを意味していました。つまり、自動エラーチェックなどの有益なものを表すことができました。しかし、最近ではあまり機能しておらず、文書が正しく動作するために必要なだけです。今はこれだけ知っていれば大丈夫です。
* `<html></html>` — `<html>` 要素です。この要素は、このページのすべてのコンテンツを囲み、ルート要素と呼ばれることもあります。ここでは文書の主要な言語を設定する `lang` 属性も指定します。
* `<head></head>` — `<head>` 要素です。この要素は、ページの閲覧者に向けて表示するためのコンテンツではない、 HTML ページに含めたいものをすべて収めるための入れ物です。検索エンジン向けの キーワード やページのディスクリプション（説明書き）、ページの見た目を変更するための CSS、文字コードの宣言などを含みます。
* `<meta charset="utf-8">` — この要素は、大部分の書き言葉の文字のほとんどを含む UTF-8 を文書で使用するように設定しています。基本的には、文書はどんなテキストコンテンツでも扱えるようになります。これを設定しない理由はありませんし、後でいくつかの問題を回避するのに役立ちます。
* `<title></title>` — `<title>` 要素です。ページのタイトルを指定しています。このタイトルはページが読み込まれた時にブラウザーのタブに表示されます。また、ブックマークやお気に入りに登録した時の説明にも使われます。
* `<meta name="viewport" content="width=device-width">` — このビューポート属性は、このページがある幅のビューポートで描画されることを保証し、モバイルブラウザーがビューポートより広い幅でページを描画した上で縮小して表示するのを防止します。
* `<body></body>` — `<body>` 要素です。これには、テキスト、画像、ビデオ、ゲーム、再生可能な音声トラックなど、ページを訪れたウェブの利用者に表示したいすべてのコンテンツが含まれます。
画像
--

もう一度 `<img>` 要素について見ていくことにしましょう。

```html

```

前に説明したように、ページのこれが現れたところに画像を埋め込みます。画像ファイルのパスを値に持つ `src` (source) 属性を指定することによってその画像を表示できます。

また、 `alt` (alternative; 代替) 属性も指定しています。 `alt` 属性は、以下のような理由で画像を見られない人に向けて説明するテキストを指定するものです。

1. 目が不自由な人。著しく目の不自由な人はよくスクリーンリーダーと呼ばれるツールを使っていて、それが画像の `alt` 属性の内容を読み上げます。
2. 何らかの理由で画像の表示に失敗した場合。例えば、 `src` 属性の中のパスをわざと正しくないものに変更してみてください。ページを保存したり再読み込みしたりすると、画像の場所に下記のようなものが表示されるでしょう。

![テスト画像という言葉](/ja/docs/Learn/Getting_started_with_the_web/HTML_basics/alt-text-example.png)

alt テキストのキーワードは「説明文」です。 alt テキストは、その画像が何を伝えているのかを読者が十分に理解できるような情報を提供する必要があります。この例では、現在のテキストである「テスト画像」は全く意味がありません。 Firefox のロゴであれば、「Firefox のロゴ: 地球の周りを燃えるような狐が囲んでいる。」の方がずっと良いでしょう。

画像に良い代替文字列を付けてみましょう。

**メモ:** アクセシビリティについて詳しくは MDN のアクセシビリティのページを参照してください。

テキストのマークアップ
-----------

この節では、文字列をマークアップするために使用する基本的な HTML 要素をいくつか見ていきます。

### 見出し

見出し要素により、コンテンツの特定の部分を見出し、または小見出しとして指定することができます。本にメインタイトル、章立て、サブタイトルがあるように、 HTML 文書にも見出しがあります。 HTML には <h1> - <h6> の 6 段階の見出しがありますが、よく使うのはせいぜい 3 から 4 まででしょう。

```html

メインタイトル

最上位の見出し

小見出し

孫見出し

```

**メモ:** HTML の中で `<!--` と `-->` の間にあるものは、すべて **HTML コメント**です。ブラウザーは、コードを表示する際にコメントを無視します。つまり、コメントはページ上では表示されず、コードの中に表示されるだけです。 HTMLコメントは、コードやロジックに関する有用なメモを書き込むためのものです。

それでは、あなたの HTML の `<img>` 要素の上に適切なタイトルを付けてみましょう。

**メモ:** 見出しレベル 1 には、暗黙のスタイルがあることがわかりますね。テキストを大きくしたり、太くしたりするために見出し要素を使用しないでください。見出し要素はアクセシビリティや SEO などの理由で使用されているからです。段階を飛ばすことなく、意味のある見出しの並びをページ上に作るようにしてください。

### 段落

先に説明したように、 `<p>` 要素は段落を示しています。通常の文章を書くときにはこの要素を頻繁に使うことになるでしょう。

```html

This is a single paragraph

```

サンプルテキストを (「ウェブサイトをどんな外見にするか」から持ってきてください) 1 つまたは複数の段落に入れ、 `<img>` 要素のすぐ下に配置してください。

### リスト

ウェブのコンテンツの多くはリストであり、 HTML にはリストのための特別な要素があります。リストのマークアップは、常に 2 つ以上の要素で構成されています。最も一般的なリストの種類は、順序付きリストと順序なしリストです。

1. **順序なしリスト**は、お買い物リストのようにアイテムの順番が特に関係ない時に使います。順序なしリストは `<ul>` 要素で囲みます。
2. **順序付きリスト**は料理のレシピのようにアイテムの順番が関係ある時に使います。順序付きリストは `<ol>` 要素で囲みます。

リストの中に入るそれぞれのアイテムは `<li>` (list item) 要素の中に書きます。

例えば、次の段落の一部をリストにしたい場合、

```html

  At Mozilla, we're a global community of technologists, thinkers, and builders
  working together…

```

以下のようにマークアップします。

```html

At Mozilla, we're a global community of

technologists

thinkers

builders

working together…

```

ページに番号付きリストと番号なしリストを追加してみましょう。

リンク
---

リンクはとても重要です。これがウェブをウェブたらしめているものです。リンクを追加するには、シンプルな要素 `<a>` を使う必要があります。 `a` は "anchor" を省略したものです。段落中の文字をリンクにするには次の手順で行います。

1. リンクにしたい文字を選びます。今回は "Mozilla Manifesto" を選びました。
2. 選んだ文字を `<a>` 要素で囲みます。

```html
Mozilla Manifesto
```

3. このように `<a>` 要素に `href` 属性を追加します。

```html
Mozilla Manifesto
```

このリンクのリンク先になるウェブアドレスを、この属性の値に書き込みます。

```html

  Mozilla Manifesto

```

アドレスの先頭にある `https://` や `http://` の部分（*プロトコル*と言います）を書き忘れると、予期せぬ結果となってしまうかもしれません。リンクを作ったら、ちゃんとそれが遷移したいところに行ってくれるかを確かめましょう。

**メモ:** `href` は属性名として変に思うかもしれません。覚えにくかったら、 `href` は ***h**ypertext **ref**erence* を表しているということを覚えておきましょう。

もしまだやってないのなら、ページにリンクを追加してみましょう。

まとめ
---

ここまでの説明に沿ってやってきたのなら、以下のようなページができあがっているはずです（ここでも見られます）。

![ウェブページのスクリーンショットで、 Firefox のロゴ、「Mozilla is cool」という見出し、そして 2 段落のテキストが表示されています。](/ja/docs/Learn/Getting_started_with_the_web/HTML_basics/finished-test-page-small.png)

もし途中で行き詰まってしまったなら、 GitHub にある完成版のコード例と見比べてみてください。

この記事では HTML の表面的な部分だけを勉強しました。もっと知りたい場合は HTML を学ぶを読んでみてくだい。

* 前のページ
* Overview: Getting started with the web
* 次のページ


基本的なソフトウェアのインストール - ウェブ開発を学ぶ

基本的なソフトウェアのインストール
=================

* Overview: Getting started with the web
* 次のページ

*基本的なソフトウェアのインストール*では、簡単なウェブ開発をするのに必要なツールを紹介し、それらのツールを適切にインストールする方法を紹介します。

現時点で実際にどのようなツールが必要か
-------------------

この記事では、必要最小限のツールをセットアップしましょう。テキストエディターと最新のウェブブラウザーです。

### テキストエディターのインストール

コンピューターには、おそらくすでにテキストエディターが入っています。Windows にはメモ帳が、macOS にはテキストエディットが、Linux にはディストリビューションによっていろいろですが、Ubuntu 22.04 LTS リリースには GNOME Text Editor が初めからインストールされてされています。

ウェブ開発においては、おそらくメモ帳やテキストエディットより良いものがあります。おすすめは Visual Studio Code で、これは無料のエディターであり、ライブプレビューやコードヒントを提供しています。

### 最新のウェブブラウザーのインストール

次に、コードをテストするためのデスクトップウェブブラウザーをいくつかインストールしましょう。以下からオペレーティングシステムを選び、リンクから好きなブラウザーをインストールしてみてください。

* Linux: Firefox, Chrome, Opera, Brave.
* Windows: Firefox, Chrome, Opera, Microsoft Edge, Brave （Windows 10 には最初から Edge が付属しています。それ以外の場合は、他のブラウザーをインストールしてください。）
* macOS: Firefox, Chrome, Opera, Safari, Brave （macOS と iOS には最初から Safari が付属しています。）

次に進む前に、テストに使えるように最低でも 2 つのブラウザーをインストールするようにしてください。

### ローカルのウェブサーバーのインストール

いくつかの例では、正しく動作させるためにウェブサーバー上で実行する必要があるものもあります。ローカルテストサーバーのインストール方法にて、その方法が見つかります。

プロはどんなツールを使っている？
----------------

以下の一覧はいかにも怖そうですが、幸いなことに、これらのほとんどについて何も知らなくてもウェブ開発を始めることは可能です。

* **コンピューター**。当たり前のことだと思う人もいるかもしれませんが、携帯電話や図書館のコンピューターを使ってこの記事を読んでいる人もいるでしょう。しっかりとしたウェブ開発のためには、Windows、macOS、Linux などが動作するデスクトップやノートパソコンを使ってください。
* **テキストエディター**。コードを書くために必要です。テキストエディター（たとえば Visual Studio Code、Notepad++、Sublime Text、GNU Emacs、VIM）でも、複合的な機能を持つソフトウェア（Dreamweaver や WebStorm）でも構いません。 Office 文書のエディターは、ウェブブラウザーが使うレンダリングエンジンに干渉する隠し要素に依存しているため、この用途には適していません。
* **ウェブブラウザー**。自分が書いたコードをテストするために必要です。現在最も使われているブラウザーは、Firefox、ChromeSafari、Microsoft Edge などです。モバイル端末や、ウェブサイトを見る人たちが使うかもしれない古いブラウザー（IE 8-10 など）でもサイトがどう動くのかをテストしましょう。テキストベースの端末ウェブブラウザーである Lynx は、視覚障碍のあるユーザーがサイトをどのように体験しているかを見るのに適しています。
* **画像編集ソフト**（GIMP、Paint.NET、Photoshop、Sketch、XD など）。ウェブページの画像を作成するために必要になります。
* **バージョン管理システム**。複数の人とチームでサイトを作るときや、他の人とコードを共有するときに、誤って編集の衝突などが起こらないようにするために必要になります。現在では、 Git が最も有名なバージョン管理システムであり、これに基づいたコードホスティングサービスの GitHub や GitLab もとても有名です。
* **FTP プログラム**。ウェブページを公開する時にファイルをサーバーにアップロードするために必要です（この目的では、 FTP の代わりに Git が用いられつつあります）。(S)FTP の機能が含まれている、Cyberduck、Fetch、FileZilla などのプログラムを使うと良いでしょう。
* **自動化システム**、Webpack、Grunt、Gulp はコードの最小化やテストの実行などのような反復作業を自動的に実行することができます。
* ライブラリーやフレームワークなど、共通機能をすばやく書くためのものです。ライブラリーは、既存の JavaScript や CSS のファイルであり、コードで使用するために、すぐに使える機能を提供しています。フレームワークは、この考えをさらに進めて、ウェブアプリケーションを書くためのカスタム構文を持つ完全なシステムを提供する傾向があります。
* 他にも便利なツールがたくさんあります！
* Overview: Getting started with the web
* 次のページ


ウェブサイトの公開 - ウェブ開発を学ぶ

ウェブサイトの公開
=========

* 前のページ
* Overview: Getting started with the web
* 次のページ

ウェブサイトを構成するコードやファイルの整理が終わったら、それをオンラインで公開して、人々が見つけられるようにする必要があります。この記事では、簡単なサンプルコードを手軽にオンラインに公開する方法を説明します。

どんな選択肢があるのか
-----------

ウェブサイトの公開には、さまざまな方法があるため、複雑なテーマです。この記事では、すべての可能な方法を説明するつもりはありません。その代わりに、初心者にとって実用的な 3 つのアプローチのメリットとデメリットを説明します。そして、多くの読者がすぐに使える方法を紹介します。

### ホストとドメイン名を手に入れる

コンテンツやウェブサイトの外観をより自由にコントロールするために、多くの人はウェブホスティングとドメイン名の購入を選択します。

* ウェブホスティングとは、ホスティング会社のウェブサーバー上のファイルスペースを借りることです。ウェブサイトのファイルはウェブサーバー上に置きます。ウェブサーバーは、ウェブサイトのコンテンツをウェブサイトの訪問者に提供します。
* ドメイン名は、 `http://www.mozilla.org` や `http://www.bbc.co.uk` のように、お客様のウェブサイトを見つけるための固有のアドレスです。ドメイン名は、**ドメインレジストラー**から何年でも借りることができます。

多くのプロの手によるウェブサイトはこんな風にして、公開されているわけです。

さらに、ウェブサイトのファイルを実際にサーバーに転送するには、File Transfer Protocol (FTP、ファイル転送プロトコル) のプログラム（詳しくは、どのくらいコストがかかりますか: ソフトウェアを参照）が必要です。 FTP プログラムの種類は様々ですが、一般的には、ホスティング会社から提供された詳細情報（通常、ユーザー名、パスワード、ホスト名）を使ってウェブサーバーに接続する必要があります。その後、プログラムはローカルファイルとウェブサーバーのファイルを 2 つのウィンドウに表示し、ファイルのやり取りを行うことができます。

![ウェブサイトのすべてのファイルやフォルダーを表示し、サーバーにアップロードするFTPクライアント](/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website/ftp.jpg)

#### ホスティングとドメインを見つけるためのヒント

* MDN は、特定の商用ホスティング会社やドメイン名レジストラーを推奨してはいません。ホスティング会社やレジストラーを見つけるには、「ウェブホスティング」や「ドメイン名」で検索してください。どのレジストラーにも、希望するドメイン名が利用可能かどうかを確認する機能があります。
* 自宅やオフィスのインターネットサービスプロバイダーが、小規模なウェブサイトのための限定的なホスティングを提供している場合もあります。利用できる機能は限られていますが、初めての試みには最適かもしれません。
* Neocities、Google Sites、Blogger、WordPress のような無料のサービスもあります。有料のものもありますが、最初の実験にはこれらのリソースで十分な場合もあります。
* ホスティングをドメインの両方を提供している会社もたくさんあります。
### GitHub や Google App Engine のようなオンラインツールの利用

ウェブサイトをオンラインで公開できるツールもあります。

* GitHub は、「ソーシャルコーディング」サイトです。コードリポジトリーをアップロードして Git **バージョン管理システム**に保存することができます。このシステムは既定でオープンソースになっており、世界中の誰もが GitHub のコードを見つけ、それを使い、そこから学び、改良することができます。また、 GitHub には GitHub Pages という便利な機能があり、ウェブサイトのコードをウェブ上で公開することができます。
* Google App Engine Google のインフラ上でアプリケーションを構築・実行できる強力なプラットフォームです。複数階層のウェブアプリケーションをゼロから構築する場合も、静的なウェブサイトをホスティングする場合も同様です。詳細は、Google App Engine でウェブサイトをホスティングするにはを参照してください。

これらのオプションは通常無料ですが、限定された機能セットでしか成長させることができません。

### CodePen のようなウェブベースの IDE の利用

ウェブサイトの開発環境をエミュレートするウェブアプリは数多くあり、HTML、CSS、JavaScript を入力すると、そのコードの結果をウェブサイトとして表示することができます。一般的に、これらのツールは比較的簡単で、学習にも適しており、コードを共有するのにも適しています (例えば、別のオフィスにいる同僚とテクニックを共有したり、デバッグの助けを求めたりする場合など)。また、 (基本的な機能については) 無料です。レンダリングされたページを、固有のウェブアドレスでホスティングしてくれます。ただし、機能は限られており、通常はアセット (画像など) のホスティングスペースは提供されていません。

これらを試してみて、一番合ったものを見つけてみましょう。

* JSFiddle
* Glitch
* JS Bin
* CodePen

![JS Bin のウェブベースの IDE のスクリーンショット](/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website/jsbin-screen.png)

GitHub 経由での公開
-------------

では、GitHub Pages 経由でどれくらい簡単にサイトを公開できるかを実際にやってみましょう。

1. まず、 GitHub にサインアップして、メールアドレスの認証を受けましょう。
2. 次に ファイルを入れるためのリポジトリーを作成しましょう。
3. このページ上の、 *Repository name* ボックスに *ユーザー名*.github.io と入力してください。 *ユーザー名* はあなたのユーザー名です。例えば、私の友達の Bob Smith であれば *bobsmith.github.io* と入力します。
 さらに、"*Initialize this repository with a README"* ボックスをチェックし、 *Create repository* をクリックしてください。
 ![](/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website/github-create-repo.png)
4. ウェブサイトのフォルダーをリポジトリーの中にドラッグアンドドロップしたら、 *Commit changes* をクリックしましょう。

**メモ:** フォルダーの中に `index.html` ファイルがあるかを確認しましょう。
5. では、ウェブサイトをオンライン上で見るために、ブラウザーから username.github.io に移動しましょう。例えば、ユーザー名が chrisdavidmills なら、chrisdavidmills.github.io に移動しましょう。

**メモ:** ウェブサイトに使えるようになるには少し時間がかかるかもしれません。ウェブサイトがすぐに表示されない場合は、少し待ってみてください。そしてもう一度試してみましょう。

もっと詳しく知りたい人は GitHub Pages Help を見てください。

参考文献
----

* ウェブサーバーとは何か
* ドメイン名を理解する
* ウェブサイトで何かするのにいくらかかるか?
* Deploy a Website: Codecademy の良いチュートリアルで、もう少し詳しく追加のテクニック含めて示しています。
* Cheap or Free Static Website Hosting Scott Murray による利用できるサービスについての使えるアイデアがあります。
* 前のページ
* Overview: Getting started with the web
* 次のページ


JavaScript の基本 - ウェブ開発を学ぶ

JavaScript の基本
==============

* 前のページ
* Overview: Getting started with the web
* 次のページ

 JavaScript は、ウェブサイトに対話性を追加するプログラミング言語です。ゲーム、ボタンを押したときの反応、フォームへのデータ入力、動的なスタイル付け、アニメーションなどがこれにあたります。
 この記事は、 JavaScript を使い始め、何ができるのかについての理解を深めるのに役立ちます。

JavaScript とは何か
---------------

JavaScript は強力なプログラミング言語であり、ウェブサイトに対話操作を追加することができます。
 Brendan Eich によって考案されました。

JavaScript は汎用性が高く、初心者にもやさしいものです。経験を積めば、ゲーム、 2D や 3D のアニメーション、包括的なデータベース駆動型のアプリなどが作れるようになります。

JavaScript は比較的コンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。

* ブラウザーのアプリケーションプログラミングインターフェイス (API)。ウェブブラウザーに組み込まれた API により、動的な HTML の作成、 CSS スタイルの設定、ユーザーのウェブカメラからの動画ストリームの収集や操作、三次元グラフィックや音声サンプルの生成などの機能を提供します。
* 開発者が他のコンテンツプロバイダーのサイト（Twitter や Facebook など）から機能を組み込むことを可能にする、サードパーティの API。
* すばやくサイトやアプリケーションを構築することができ、 HTML に組み込み可能なサードパーティのフレームワークやライブラリー。

コアの JavaScript 言語が上記のツールとどのように違うのか、その詳細を紹介することは、 JavaScript の軽い入門者向けの書籍であるこの記事の範囲外です。詳細は MDN の JavaScript 学習領域や、 MDN の他の部分で詳しく学ぶことができます。

以下では、コア言語のいくつかの側面について紹介します。またブラウザーの API 機能についてもいくつか説明します。楽しみましょう！

"Hello world!" の例
-----------------

JavaScript は、最も人気のある現代のウェブ技術のひとつです。 JavaScript のスキルが上がれば、ウェブサイトのパワーと創造性は新たな次元に入るでしょう。

しかし、 JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、*"hello world!"* を表示する例（基本的なプログラミング例の標準）を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。

**警告:** これまでこのコースに沿って進めてきていない場合は、このサンプルコードをダウンロードして作業を進めてください。

1. 最初にテストサイトに行き、 `scripts` という名前の新しいフォルダーを作成してください。それから、この scripts フォルダーの中に `main.js` という新しいファイルを作成して保存してください。
2. `index.html` ファイルの `</body>` 終了タグの直前に新しい行で、以下の新しい要素を追加してください。

```html
<script src="scripts/main.js"></script>
```

3. これは CSS の `<link>` 要素の時の作業と基本的に同じです。これは JavaScript をページに適用するので、（CSS の時と同じく、ページ上の何に対しても） HTML に影響を与えることができます。
4. `main.js` ファイルに次のコードを追加してください。

```js
const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";
```

5. 最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザーで `index.html` を読み込んでください。

!["hello world" の見出しが firefox のロゴの上にある](/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics/hello-world.png)

**メモ:** 上記の説明で `<script>` 要素を HTML ファイルの末尾付近に置いたのは、**ブラウザーがファイルに現れる順番でコードを読み込むからです**。

JavaScript が先に読み込まれ、まだ読み込まれていない HTML に影響を与えることになると、問題が生じる可能性があります。 JavaScript を HTML ページの下部に配置することは、この依存関係に対応する一つの方法です。その他の方法については、スクリプトの読み込み方針をご覧ください。

### 何が起きたのか

JavaScript を使用して、見出しの文字列が *Hello world!* に変更されました。最初に `querySelector()` と呼ばれる関数を使用して見出しの参照を取得し、 `myHeading` と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。

その後、 `myHeading` 変数の `textContent` プロパティ（見出しの内容を表す）の値を *Hello world!* に設定します。

**メモ:** 上の例で使用した機能はどちらもドキュメントオブジェクトモデル (DOM) API の一部であり、これを使って文書を操作することができます。

言語の短期集中コース
----------

どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります！

**警告:** この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 ブラウザー開発ツールを探るを参照してください。

### 変数

変数は、値を格納できる入れ物です。まず、 `let` というキーワードと、その後に任意の名前を指定することで、変数を宣言します。

```js
let myVariable;
```

**メモ:** 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは Your Guide to Semicolons in JavaScript を参照してください。

**メモ:** 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(変数の命名規則についてはこの記事を参照してください)。自信がない場合は、有効かどうか変数名を調べることができます。

**メモ:** JavaScript は大文字と小文字を区別します。 `myVariable` は `myvariable` とは異なる変数です。コードで問題が発生している場合は、大文字・小文字をチェックしてください。

変数を宣言したら、以下のように値を割り当てることができます。

```js
myVariable = "Bob";
```

好みに応じて、両方の操作を同一の行で行うことができます。

```js
let myVariable = "Bob";
```

変数の値は、名前で呼び出すだけで取得することができます。

```js
myVariable;
```

変数に値を代入した後で、変更することもできます。

```js
let myVariable = "Bob";
myVariable = "Steve";
```

なお、変数は様々なデータ型の値を保持することもできます。

| 変数 | 説明 | 例 |
| --- | --- | --- |
| 文字列 | 一連のテキストで、文字列と呼ばれます。値が文字列であることを示すには、単一引用符または二重引用符で囲む必要があります。 | `let myVariable = 'Bob';` または`let myVariable = "Bob";` |
| 数値 | 数値です。数値は引用符で囲みません。 | `let myVariable = 10;` |
| 論理型 | 論理値です。これは真か偽かの値です。 `true` と `false` は特別なキーワードで、引用符は必要ありません。 | `let myVariable = true;` |
| 配列 | 単一の参照で複数の値を格納できる構造です。 | `let myVariable = [1,'Bob','Steve',10];`配列の各メンバーは次のように参照します。`myVariable[0]`,
 `myVariable[1]`, など。
  |
| オブジェクト | 基本的には何でも格納できます。 JavaScript のすべてがオブジェクトであり、変数に格納することができます。学ぶ際にはこれを覚えておいてください。 | `let myVariable = document.querySelector('h1');`上記のすべての例も同様です。 |

ではなぜ変数が必要なのでしょうか。何か面白いプログラミングをするには変数が必要です。値が変更できなければ、挨拶のメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなどの動的な操作ができないのです。

### コメント

コメントは、ブラウザーから無視される、コードの間に入れられた短いテキストスニペットです。CSS と同じように、JavaScript のコードではコメントを付けることができます。

```js
/\*
挟まれているすべてがコメントです。
\*/
```

コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です。

```js
// これはコメントです
```

### 演算子

演算子は、2 つの値 (または変数) に基づいて結果を生成する数学的な記号です。次の表では、JavaScript コンソールで試してみるいくつかの例とともに、最も単純な演算子をいくつか見ることができます。

| 演算子 | 説明 | 記号 | 例 |
| --- | --- | --- | --- |
| 加算 | 2 つの数値を足し合わせたり、 2 つの文字列を結合したりします。 | `+` | `6 + 9;'Hello ' + 'world!';` |
| 減算、乗算、除算 | 基本的な数学の計算を実施します。 | `-`, `*`, `/` | `9 - 3;8 * 2; // JS での乗算はアスタリスク9 / 3;` |
| 代入 | すでに出てきました。変数に値を割り当てます。 | `=` | `let myVariable = 'Bob';` |
| 厳密等価 |
 これは、2 つの値が等しく、かつデータ型が同じであるかどうかを調べます。
 `true`/`false` （論理値）の結果を返します。
  | `===` | `let myVariable = 3;myVariable === 4;` |
| 否定、非等価 | その後にあるものと論理的に反対の値を返します。たとえば `true` を `false` に換えます。等価演算子と一緒に使用されると、否定演算子は 2 つの値が等しくないかどうかを調べます。 | `!`, `!==` | 「否定」の場合は次の通りです。基本の式が `true` であれば、反転するので比較結果は `false` となります。
`let myVariable = 3;!(myVariable === 3);`
「非等価」は異なる構文ですが、基本的に同じ結果になります。ここでは「`myVariable` が 3 と等しくない」ことを調べます。次の例では `false` を返します。 `myVariable` は 3 と等しいからです。
`let myVariable = 3;myVariable !== 3;` |

他にも演算子はもっとたくさんありますが、今のところはこれで十分です。全体の一覧については、式と演算子を参照してください。

**メモ:** データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに `'35' + '25'` と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。 `35 + 25` を入力すれば、正しい結果が得られます。

### 条件文

条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造です。条件文のよくある形は `if...else` 文です。例えば以下の通りです。

```js
let iceCream = "チョコレート";
if (iceCream === "チョコレート") {
  alert("やった！チョコレートアイス大好き！");
} else {
  alert("あれれ、でもチョコレートが好きなのに......");
}
```

`if ()` の中の式が条件です。ここでは等価演算子を使用して、変数 `iceCream` と`チョコレート`という文字列を比較し、2 つが等しいかどうかを調べています。この比較が `true` を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、 `else` 文の後にある 2 番目のコードブロックが代わりに実行されます。

### 関数

関数は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば次のようなものです。

```js
let myVariable = document.querySelector("h1");
```

```js
alert("hello!");
```

これらの関数、 `document.querySelector` と `alert` は、必要なときにいつでも使えるようブラウザーに組み込まれています。

もし変数名に見えるものがあったとしても、その後に括弧 `()` が付いていれば、おそらくそれは関数です。関数は普通、仕事をするのに必要な小さなデータである引数を取ります。引数は括弧の中に入れ、複数の引数がある場合はカンマで区切ります。

例えば、 `alert()` 関数はブラウザーのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。

嬉しいことに、自分で関数を定義することができます。次の例では、引数として 2 つの数値をとり、それらを乗算するという単純な関数を記載します。

```js
function multiply(num1, num2) {
  let result = num1 \* num2;
  return result;
}
```

上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです。

```js
multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);
```

**メモ:** `return` 文は `result` の値を関数内から関数の外に戻すことをブラウザーに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数のスコープと呼ばれています(変数のスコープのより詳しい説明をお読みください)。

### イベント

ウェブサイトを本当にインタラクティブにするには、イベントが必要です。イベントは、ブラウザーの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例は click イベントで、マウスで何かをクリックするとブラウザーによって発行されるものです。これを実行するには、コンソールに以下のように入力してから、現在のウェブページ上をクリックしてください。

```js
document.querySelector("html").addEventListener("click", function () {
  alert("痛っ! つつかないで!");
});
```

要素にイベントハンドラーを取り付ける方法はいくつもあります。ここでは `<html>` 要素を選択しています。そして、`addEventListener()` 関数を呼び出し、待ち受けるイベントの名前 (`'click'`) とイベントが発生したときに実行する関数を渡します。

先ほど `addEventListener()` に渡した関数は、名前を持たないので**無名関数**と呼ばれます。無名関数の書き方として、**アロー関数**と呼ばれるものがあります。アロー関数は `() =>` を `function ()` の代わりに使用します。

```js
document.querySelector("html").addEventListener("click", () => {
  alert("痛っ! つつかないで!");
});
```

ウェブサイトの例を膨らませる
--------------

さて、 JavaScript の基本のおさらいが終わったところで、例題のサイトに新しい機能を追加してみましょう。

先に進む前に、 `main.js` ファイルの現在の内容を削除して、空のファイルを保存してください。そうしないと、 "Hello world!" の例で使用した既存のコードが、これから追加する新しいコードと衝突してしまいます。

### 画像の切り替えの追加

このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。

1. まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。
2. この画像を `images` フォルダーに保存してください。
3. この画像の名前を *firefox2.png* に変更してください。
4. `main.js` ファイルに次の JavaScript を入力してください。

```js
const myImage = document.querySelector("img");

myImage.onclick = () => {
  const mySrc = myImage.getAttribute("src");
  if (mySrc === "images/firefox-icon.png") {
    myImage.setAttribute("src", "images/firefox2.png");
  } else {
    myImage.setAttribute("src", "images/firefox-icon.png");
  }
};
```

5. `index.html` をブラウザーに読み込みます。画像をクリックすると、もう一方の画像に変わるでしょう。

何が起こったのでしょうか。`<img>` 要素への参照を変数 `myImage` に格納しました。次に、この変数の `onclick` イベントハンドラープロパティに、名前のない関数（「無名」関数）を代入しました。そうすれば、この要素がクリックされるたびに次の動きをします。

1. 画像の `src` 属性の値を取得します。
2. 条件文を使って、`src` の値が元の画像のパスと等しいかどうかをチェックします。
    1. そうであれば、`src` の値を 2 番目の画像へのパスに変更し、もう一方の画像が強制的に `<img>` 要素の中に読み込まれるようにします。
    2. そうでない（すでに変更されている）場合、`src` の値を元の画像のパスに戻して、元の状態に戻ります。
### パーソナライズされた挨拶メッセージの追加

次に、もう 1 つの小さなコードを追加し、ユーザーがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザーがサイトを離れて後で戻った時にも保存されるようにします。Web Storage API を使用して保存しましょう。したがって、必要な時にいつでもユーザーと挨拶メッセージを変更できるオプションも用意しましょう。

1. `index.html` では、 `<script>` 要素の直前に次の行を追加します。

```html
<button>ユーザーを変更</button>
```

2. `main.js` では、次のコードを下記のとおりにファイルの最後に配置します。これは新しいボタンと見出しへの参照を変数に格納します。

```js
let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");
```

3. パーソナライズされた挨拶を設定する以下の関数を追加しましょう。まだ何も起こりませんが、すぐに修正します。

```js
function setUserName() {
  const myName = prompt("あなたの名前を入力してください。");
  localStorage.setItem("name", myName);
  myHeading.textContent = `Mozilla はかっこいいよ、${myName} さん、Mozilla はかっこいいよ。`;
}
```

`setUserName()` 関数では、`prompt()` 関数を使用して、`alert()` のようにダイアログボックスを表示しています。しかし、`prompt()` は `alert()` とは異なり、ユーザーにデータを入力するよう求め、ユーザーが **OK** を押した後に変数にそのデータを格納します。この場合、ユーザーに名前を入力するよう求めます。次に、`localStorage` と呼ばれる API を呼び出すことで、ブラウザーにデータを格納して後で受け取ることができます。 localStorage の `setItem()` 関数を使って、`'name'` と呼ばれるデータを作成し、 `myName` に入っているユーザーから入力されたデータを格納します。最後に、見出しの `textContent` に文字列と新しく格納されたユーザーの名前を設定します。
4. 以下のような条件ブロックを追加します。最初に読み込んだときにアプリを構造化するので、これを初期化コードと呼ぶこともできます。

```js
if (!localStorage.getItem("name")) {
  setUserName();
} else {
  const storedName = localStorage.getItem("name");
  myHeading.textContent = `Mozilla はかっこいいよ、${storedName}`;
}
```

このブロックでは、最初に `name` のデータが存在しているかどうかをチェックするために否定演算子（`!` で表される論理否定）を使用しています。存在しない場合は、作成するために `setUserName()` 関数が実行されます。存在する場合は（つまり、以前の訪問時にユーザーが設定した場合）、 `getItem()` を使用して格納された名前を受け取り、 `setUserName()` の中で行ったのと同様に、見出しの `textContent` に文字列とユーザーの名前を設定します。
5. 最後に、以下の `onclick` イベントハンドラーをボタンに設定します。クリックすると、`setUserName()` 関数が実行されます。これでユーザーがボタンを押すことで、好きな時に新しい名前を設定できるようになります。

```js
myButton.onclick = () => {
  setUserName();
};
```

### ユーザー名か null か

この例を実行してユーザー名を入力するダイアログボックスが出たとき、*キャンセル*ボタンを押してみてください。結果として "Mozilla is cool, null" というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が `null`、つまり値がないことを示す JavaScript の特殊な値に設定されるためです。

また何も入れずに **OK** を押してみてください。結果として "Mozilla is cool," というタイトルが表示され、これは理由が明白です。

この問題を避けるには、ユーザーが `null` や空白の名前を入力していないかチェックするよう、`setUserName()` 関数を書き換えます。

```js
function setUserName() {
  const myName = prompt("あなたの名前を入力してください。");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = `${myName} さん、Mozilla はかっこいいよ。`;
  }
}
```

人間の言葉で言うと、 `myName` に値がない場合や、`null`の場合、 最初から `setUserName()` を実行します。値がない場合（上記の式が真でない場合）には、`localStorage` に値を設定して、見出しのテキストにも設定します。

まとめ
---

最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう（こちらで作成した版を表示することもできます）。

![ヘッダー、中央の大きなロゴ、内容、ボタンなどの要素を作成した後の HTML ページの最終的な外観](/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics/website-screen-scripted.png)

行き詰まったら、自分の作業を Github 上の完成したサンプルコードと比べてみてください。

私たちは JavaScript に少し触れただけです。楽しく遊んだり、もっと上達したい場合は、JavaScript の学習トピックに進んでください。

関連情報
----

JavaScript による動的なクライアント側スクリプト

もっと詳細な JavaScript に飛び込みましょう。

Learn JavaScript

ウェブ開発者を目指す方に最適な教材です! インタラクティブな環境で、短いレッスンとインタラクティブなテスト、自動評価によるガイドで、 JavaScript を学ぶことができます。最初の 40 レッスンは無料です。全コースは少額の一括払いでご利用いただけます。

* 前のページ
* Overview: Getting started with the web
* 次のページ


評価: アクセシビリティのトラブルシューティング - ウェブ開発を学ぶ

評価: アクセシビリティのトラブルシューティング
========================

* 前のページ
* Overview: Accessibility

このモジュールの評価では、あなたが診断、修正するべきいくつかのアクセシビリティの問題を持った簡単なサイトを表示します。

| 前提知識: | 基本的なコンピューターの知識、HTML、CSS、JavaScript に対する基本的な理解、このコースのこれまでの記事への理解。 |
| --- | --- |
| 学習目標: | アクセシビリティの基礎に対する基本的な知識をテストすること。 |

開始地点
----

評価を始めるために、例を含むファイルの ZIP を取得してください。あなたのコンピューターのいずれかのディレクトリーにそのコンテンツを解凍してください。

あるいは、JSBin や Glitch のようなサイトを使って試験できます。HTML, CSS, JavaScript をオンラインエディターのいずれかにペーストします。もし使っているオンラインエディターに個別の CSS/JS パネルがない場合、適当な `<style>` / `<script>` 要素内に置いて下さい。

解凍が完了した評価サイトは次のように見えるはずです:

![](/ja/docs/Learn/Accessibility/Accessibility_troubleshooting/assessment-site-finished.png)

この評価の開始時点であなたがサイトを表示したとき、いくつかの違いや問題を見つけることでしょう。これは主にマークアップ中の違いが原因であり、CSS が正しく適用されずにスタイリングの問題を引き起こしています。心配しないでください。以降の節でそれらの問題を修正します！

**メモ:** もし行き詰まって助けを求める場合 — ページ最下部の Assessment or further help セクションを見てください。

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

このプロジェクトでは、熊の「事実」に関する記事を表示する架空の自然のサイトが表示されます。現状では、これはいくつものアクセシビリティの問題を持っています。あなたの仕事は現状のサイトを見て、全力を尽くして修正し、以下の質問に答えることです。

### 色

テキストは現在のカラースキームのせいで読みづらくなっています。現状のカラーコントラスト (テキスト/背景) をテストして、テストの結果を報告し、割り当てられた色を変更して修正できますか？

### セマンティック HTML

1. コンテンツはまだあまりアクセシブルではありません。スクリーンリーダーを使ってナビゲートしようとしたとき、何が起こるか報告してください。
2. スクリーンリーダーのユーザーがナビゲートしやすいように、記事のテキストを変更できますか？
3. サイトのナビゲーションメニュー ( `<div class="nav"></div>` で囲まれた部分) は正しい HTML5 セマンティック要素の中に入れることでよりアクセシブルになったかもしれません。どれを変更する必要がありますか？変更してください。

**メモ:** タグをスタイル付けする CSS ルールセレクターは、セマンティック見出しのために適切に変更する必要があります。パラグラフ要素を加えると、スタイルもより良く見えることに気がつくでしょう。

### 画像

現状の画像はスクリーンリーダーのユーザーにとってアクセシブルではありません。修正できますか？

### オーディオプレイヤー

1. `<audio>` プレイヤーは聴覚障害者にとってアクセシブルではありません。それらのユーザーのために何らかのアクセシブルな代替手段を加えることができますか？
2. `<audio>` プレイヤーは、HTML5 をサポートしていない古いブラウザーを使用しているユーザーにとってアクセシブルではありません。彼らに対してどのようにオーディオにアクセスさせることができますか？
### フォーム

1. トップにある検索フォームの `<input>` 要素はラベルとともに使用できるかもしれませんが、表示されるテキストを追加するとデザインを悪化させる可能性がありますし、視覚に問題のないユーザーにとってはあまり必要ありません。スクリーンリーダーにのみアクセシブルなラベルをどうやって追加すればいいでしょう？
2. コメントフォームの中の 2 つの `<input>` 要素は表示されるテキストラベルを含んでいますが、それらのラベルと明確に関連付けられていません。どのように関連付けますか？いくつかの CSS ルールも修正しなければいけない点に注意してください。
### コメント show/hide 制御

現状のコメント show/hide 制御ボタンは、キーボードからアクセスすることができません。タブキーによるフォーカス、リターンキーによる有効化という形で、キーボードをアクセシブルにすることができますか？

### テーブル

現状のデータテーブルはあまりアクセシブルではありません。スクリーンリーダーのユーザーにとって行と列を関連付けることは難しく、またテーブルが何を示しているのかを明確にする概要もありません。この問題を解決するために何らかの機能を HTML に追加することはできますか？

### 他には？

このウェブサイトをよりアクセシブルにする 2 つ以上の改善アイデアを挙げることができますか？

評価とヒント
------

あなたの作業を教師やメンターに渡して採点してもらったり、行き詰まってヒントが欲しい場合は次のようにしてください:

1. 成果をオンラインで共有できるエディター、例えば CodePen, jsFiddle, Glitch に置きます。
2. 採点や手助けのための投稿を MDN Discourse forum Learning category に書いてください。投稿には次のものを(英語で)入れて下さい:
    * "Assessment wanted for Accessibility troubleshooting"のような説明的なタイトル。
    * 何を試して、どうしてほしいのかの詳細。つまり行き詰まって助けてほしいのか、採点評価してほしいのか。
    * オンラインで共有できるエディター (上記ステップ 1 で触れたもの)での例のリンク。これは身につけるとよい習慣です — コーティングの問題を、他の人がコードを見ずに助けるのは困難です。
    * 助けてもらいたい問題が見つかるような、タスクや評価のページのリンク
* 前のページ
* Overview: Accessibility


アクセシビリティとは - ウェブ開発を学ぶ

アクセシビリティとは
==========

* Overview: Accessibility
* 次のページ

この記事では実際アクセシビリティとは何かについてよく観察するモジュールから開始します — これには考慮が必要な人のグループや、いろいろな人がウェブとやり取りするのになぜ、どんなツールを使うのかや、アクセシビリティをウェブ開発のワークフローに取り組む方法が含まれます。

|  |  |
| --- | --- |
| 前提知識: | 基本的なコンピューターの知識、HTML と CSS に関する基本的な理解 |
| 目標: | アクセシビリティとは何か、そしてそれがウェブ開発者としてのあなたにどう関わってくるかを含め、アクセシビリティに詳しくなる |

それで、アクセシビリティとは
--------------

アクセシビリティというのはあなたのウェブサイトを可能な限り多くの人に利用してもらうようにすることです。かつては我々はアクセシビリティのことをハンディキャップを持つ人々のためのものだと考えていましたが、現在はモバイルデバイスや遅いネットワークを利用している人々のためのものでもあると考えられています。

アクセシビリティを、能力や環境にかかわらず全員を同一に扱い、同じ機会を与えることと考えることもあります。車椅子に乗っているために物理的な建物から誰かを除外するのは正しくないのと同様に(昨今一般的に公的な建物では、車椅子のスロープやエレベーターを備えています)、視覚障碍があるためにウェブサイトから特定のユーザーを除外するのも正しくありません。我々はみんな異なっていて、しかしみんな人間であり、ゆえに同じ人権を持っています。

アクセシビリティは正しい行為です。アクセシブルなサイトを提供することは、いくつかの国では法律の一部でもあり、そうしなければサービスを利用したり、製品を買ったりすることなどができなかったであろう、いくつかの重要な市場を開拓することができます。

アクセシブルなサイトを構築するのは、すべての人の利益になります。

* 意味論的 HTML （これはアクセシビリティを改良します）は SEO の改善にもなり、サイトがもっと発見しやすいものになります。
* アクセシビリティへの留意は倫理とモラルを誇示することになり、公的イメージが良くなります。
* その他のアクセシビリティ改良の事例は、例えば携帯電話のユーザーや、ネットワーク速度が遅い人といったその他のグループにとってより使いやすくなります。実際にすべての人がこうした改良で利益を得ます。
* ある場所では法律となっているって言いましたっけ？
私たちが考える"不利な条件"とは？
-----------------

障碍のある人は障碍のない人と同じくらい多様であり、よってその障碍も同じくらい多様です。ここでの重要な教訓は、あなたがコンピューターの向こうでウェブをどのように使うかを考え、他の人がどのように使っているかを学習し始めることです — あなたはユーザーとは違います。考慮すべき障碍の主な種類を、ウェブコンテンツにアクセスするために使う特別なツール（**支援技術**、**assistive technology** や **AT** として知られるもの）とともに以下に説明します。

**メモ:** 世界保健機構(WHO)の障碍と健康（英語）の報告によると、「10 億人以上の人(世界人口の約 15%)が何らかの障碍を持っています」し、「1 億～ 1 億 9000 万人の大人に目立った機能障碍があります」

### 視覚障碍者

視覚障碍者には全盲の人や、視覚が低レベルな人、色盲の人などが含まれます。これらの多くはスクリーン拡大鏡 (物理的な拡大鏡とソフトウェアズーム機能のいずれか — 大半のブラウザーと OS には今日ズーム機能があります) を使い、スクリーンリーダー、つまりデジタルテキストを読み上げるソフトウェアを使う人もいます。スクリーンリーダーの例はこれらです:

* 有償の商用製品、例えば JAWS (Windows) や Dolphin Screen Reader (Windows).
* 無償の製品、例えば NVDA (Windows), ChromeVox (Chrome, Windows Mac OS X), や Orca (Linux).
* OS に組み込まれたもの、例えば VoiceOver (Mac OS X と iPadOS と iOS), Narrator (Windows), ChromeVox (ChromeOS), や TalkBack (Android).

スクリーンリーダーに精通するのは良い考えです; スクリーンリーダーをセットアップして試してみて、その動作方法を理解するべきです。 クロスブラウザーテストのスクリーンリーダーのガイド を見ると詳しい使い方がわかります。下記の動画も、その体験がどのようなものかの簡単な例です。

統計では、WHO は「世界中で 2 億 8500 万人が視覚障碍者で、うち 3900 万人が全盲で 2 億 4600 万人がロービジョンです」と見積もっています(視覚障碍と盲目（英語）を参照)。これは単にサイトが適切にコーディングされていないために逃すユーザーとしては多くて重要です — 米国の人口とほぼ同じ大きさです。

### 聴覚障碍者

耳の障碍者や、ろう者とも知られて、このグループの人には聞こえにくい人と全く聞こえない人の両方がいます。聴覚障碍者は AT（聴覚、発声能力、発話能力、言語に障碍のある人のための補助装置（英語）を参照）を使いますが、コンピューターやウェブに特化した特別な AT はありません。

アクセシビリティを提供するためには、テキストによる代替手段を提供しなければなりません。動画には手動でキャプションをつけ、音声コンテンツには文字起こしを提供する必要があります。さらに、DHHの人々は[言語剥奪](https://www.therapytravelers.com/language-deprivation/#:~:text=Language%20deprivation%20is%20, therefore%20not%20exposed%20to%20language.)が高いため、テキストの簡略化を検討すべきとされています。

聴覚障碍者もまた重要なユーザー基盤を代表しています — 「世界中で 4 億 6,600 万人が日常生活に支障を来すほどの聴覚障碍を持っています」と WHO はろうと聴覚障碍（英語）で報告しています。

### 運動障碍のある人

これらの人々は、（四肢の喪失や麻痺のような）純粋に肉体的な問題や、四肢の衰弱や制御不能につながる神経学的障碍や遺伝子疾患を伴う可能性がある、運動に関する障碍を持っています。マウスを使うのに必要な正確な手の動きが難しい人もいれば、もっと深刻な影響を受けて、コンピューターと対話するためにヘッドポインター（英語）を使う必要があるところまで著しく麻痺している人もいます。

この種の障碍は、特定のトラウマや状態ではなく、老年期の結果であることもあります。それに、ハードウェアの制限から生じることもあります — 一部のユーザーはマウスを持っていないかもしれません。

これが通常ウェブ開発作業に影響するのは、コントロールがキーボードからアクセス可能であることという要件です — このモジュールの後の記事でキーボード・アクセシビリティを扱いますが、どのようにやるかを見るためにキーボードだけを使っていくつかのウェブサイトを試してみることは良い考えです。例えば、`Tab` キーを使ってウェブフォームのさまざまなコントロール間を移動できますか？ キーボードコントロールの詳細については、クロスブラウザーテストのネイティブなキーボードアクセシビリティを使うのセクションを参照してください。

統計では、有意な数の人が運動障碍を持っています。米国疾病管理予防センターの障碍と機能 (施設に入らない 18 歳以上の大人)（英語）の報告によると、米国では "肉体的な機能障碍のある大人の割合は、16.1%" です。

### 認知障碍者

認知障碍者とは最も広い範囲の障碍をいい、最も限定された能力をもつ知的障碍者からわれわれがみな加齢とともに考えたり記憶したりが困難になることまでがあります。この範囲には 鬱病（英語）や 統合失調症（英語）といった精神疾患のほか、ディスクレシア（英語）やADHD（注意欠陥多動性障碍）（英語）のような学習障碍も含みます。重要なこととして、認知障碍の臨床的な定義が広がっていても、そうした障碍をもつ人には共通の機能不全があります。それにはコンテンツを理解し難いこと、タスクを完了する方法を記憶すること、一貫性のないウェブページレイアウトによって混乱することがあります。

認知障碍者へのアクセシビリティの良い基本事項は、次のものです。

* コンテンツを 2 つ以上の方法で配信する、例えば文字スピーチや動画
* 簡単に理解できるコンテンツ、例えば簡潔な言語標準で書かれた文章など
* 重要なコンテンツに焦点があたっていること
* 気をそらすものを最小化する、例えば不要なコンテンツや広告
* ウェブページのレイアウトやナビゲーションに一貫性をもたせる
* なじみの要素、例えば未訪問のリンクは下線つきの青で、訪問済みは紫など
* 複数の処理を論理的で本質的な手順に分けて、進捗を指すものをつけること
* ウェブサイトの認証は、セキュリティに妥協しない範囲で、できる限り簡単にする
* フォーム完了までに必要な操作はできるだけ少ないこと、例えば明白なエラーメッセージと簡潔なエラー復帰
### 注記

* 認知的なアクセシビリティ (en-US)をもってデザインするのは良い習慣になります。どんな人にも利益になるでしょう。
* 知的障碍者の多くは身体的な障碍も持っています。ウェブサイトは W3C のウェブコンテンツアクセシビリティガイドラインと、その中の認知的アクセシビリティガイドライン (en-US)に従う必要があります。
* W3C の 認知と学習障碍者のアクセシビリティタスクフォースでは認知障碍者のためのウェブアクセシビリティガイドラインを制作しています。
* WebAIM の認知のページには関連する情報やリソースがあります
* アメリカ疾病予防管理センターの見積もりでは、2018 年以降、4 人に 1 人の米国市民には障碍があり、その中で、若い人には認知障碍が最もよく見られます。
* 米国では、知的障碍の一部は、過去には「精神遅滞」と参照されてきました。これで多くの人がこの言葉を軽蔑的だと考えるようになったので、使用するのは避けるべきでしょう。
* 英国では、一部の知的障碍は「学習障碍」または「学習困難」と呼ばれます。
プロジェクトにアクセシビリティを実装する
--------------------

よくあるアクセシビリティ神話は、アクセシビリティはプロジェクトに実装するための高価な「余分な追加」であるということです。この神話は、実際には次のいずれかの場合に当てはまります。

* 重大なアクセシビリティ問題を抱えている既存のウェブサイトにアクセシビリティを「組み込んで改良」しようとしています。
* プロジェクトの後期段階で、アクセシビリティとそれに関連する問題を検討し始めたばかりです。

ただし、プロジェクトの開始時からアクセシビリティを検討している場合は、ほとんどのコンテンツをアクセス可能にするためのコストはごくわずかなはずです。

プロジェクトを計画するときは、他の重要な対象観客セグメント（対象とするデスクトップやモバイルのブラウザーなど）のテストと同様に、アクセシビリティのテストをテスト体制に組み入れます。早期に頻繁にテストし、理想的にはプログラムで検出可能な欠けている機能（画像の代替テキストの欠落、リンクテキストの不良のような — 要素の関係とコンテキストを参照）を検出するための自動テストの実行し、より複雑なサイト機能が障碍のあるユーザーのグループに対してどの程度うまく機能するかを確認するために、それらのグループでいくつかのテストを行います。例えば、

* 私の日付選択ウィジェットをスクリーンリーダーを使う人が使用できますか？
* コンテンツが動的に更新される場合、視覚障碍者はそれについて知っていますか？
* UIのボタンは、キーボードとタッチインターフェイスの両方のユーザーからアクセスできるか？

コンテンツをアクセス可能にするための作業が必要なコンテンツの潜在的な問題領域をメモしておくことができ、またそうすべきで、徹底的にテストしていることを確認し、解決策や代替案について考えます。次の記事で見るように、テキストコンテンツは簡単ですが、マルチメディアコンテンツや、最先端の 3D グラフィックはどうでしょうか？ あなたはプロジェクトの予算を見て、現実的にそのようなコンテンツをアクセス可能にするために利用可能などんな解決策があるかついて考えるべきです。あなたはマルチメディアコンテンツすべてを転記するために支払うことができます。これは高価になることがありますが、行うことができます。

現実的にもなりましょう。「100% のアクセシビリティ」は達成不可能な理想です — あなたは常にある種の最先端のケースに出くわすことになり、その結果特定のユーザーが特定のコンテンツを使いにくいと感じることになります — しかしできる限りはするべきです。WebGL を使用して作成した最先端の 3D 円グラフのグラフィックを含めることを計画している場合は、データのアクセス可能な代替表現としてデータ表を含めることができます。あるいは、表だけを含めて 3D 円グラフを取り除くことをお勧めします — 表には誰でもアクセスでき、コード作成が早く、CPU 使用率が低く、保守が簡単です。

これに反して、興味深い 3D アートを展示したギャラリーのウェブサイトで作業している場合、それが完全に視覚的な媒体であることを考えると、すべてのアートが視覚障碍者にとって完全にアクセス可能であることを期待するのは不合理でしょう。

あなたがアクセシビリティに関心があり、考えていることを示すために、あなたのサイトに、アクセシビリティに向けた方針と、サイトをアクセス可能にするためにどのようなステップを踏んだかを詳しく記載した、アクセシビリティに関する声明を発表してください。あなたのサイトにアクセシビリティの問題があると誰かが文句を言ってきたら、彼らと対話を始め、共感し、そして問題を解決するために合理的なステップを踏みます。

**メモ:** よくあるアクセシビリティの問題を扱うの記事では、より詳細にテストするべきであるアクセシビリティの詳細について説明しています。

要約すると、

* プロジェクトの最初からアクセシビリティを考慮し、早期に頻繁にテストしてください。他のバグと同じように、アクセシビリティの問題は、後で発見されたものほど修正が高くつきます。
* アクセシビリティに関するベストプラクティスの多くは、障碍のあるユーザーだけではなく、すべてのユーザーに役立つことを念頭に置いてください。例えば、意味論に頼ったマークアップは、スクリーンリーダーに適しているだけでなく、読み込みや実行が高速であるため、すべての人、特にモバイルデバイスを使用している人、および/または遅い接続に適しています。
* あなたのサイトにアクセシビリティの声明を発表し、問題を抱えている人々と関わり合いましょう。
アクセシビリティのガイドラインと法律
------------------

アクセシビリティテストの基礎となる多数のチェックリストと一連のガイドラインがあります。これは、一見すると圧倒的に思われるかもしれません。アドバイスとしては、あなたが注意を払う必要がある基本的な分野に精通すること、そしてあなたにとって最も関連性のあるガイドラインの高いレベルの構造を理解することです。

* はじめに、W3C は、アクセシビリティ適合のための非常に正確な、技術に依存しない基準を含む、大きくて非常に詳細なドキュメントを公開しました。これらは Web Content Accessibility Guidelines (WCAG) と呼ばれていますが、決して短く読むことはできません。基準は 4 つの主なカテゴリに分けられます。これらは、実装を認識可能、操作可能、理解可能、そして堅牢にする方法を指定します。簡単に紹介して学習を開始するのに最適な場所は、WCAG の概要（英語）です。WCAG の全てを学ぶ必要はありません — 主な関心分野に注意し、WCAG の基準に適合していない分野をハイライトするために、さまざまなテクニックやツールを使用します（詳細は下記を参照）。
* あなたの国はまた、彼らの人口に役立つウェブサイトがアクセス可能であることを規定する特定の法律を持つかもしれません — 例えば、EU の EN 301 549（PDF、英語）、米国のリハビリテーション法のセクション 508（英語）、ドイツのバリアフリー情報技術に関する連邦条例（英語）、英国のアクセシビリティ規則 2018（英語）、イタリアのアクセシビリティ（イタリア語) 、オーストラリアの障碍者差別禁止法（英語）など。W3C は、国ごとのウェブアクセシビリティの法および政策（英語）のリストを保持しています。

そのため、WCAG は一連のガイドラインですが、あなたの国ではおそらくウェブアクセシビリティ、または少なくとも公的に利用可能なサービスのアクセシビリティ（ウェブサイト、テレビ、物理的な空間などを含む）を規制する法律があるでしょう。あなたの法律が何であるかを調べることは良い考えです。あなたのコンテンツがアクセス可能であることを確認しようと努力せずに、障碍を持つ人々が訴えた場合、法律な責任を負うこともあります。

これは深刻に思えますが、実際には、上で概説したように、アクセシビリティをウェブ開発の最優先事項として考慮する必要があります。疑問がある場合は、資格のある弁護士に相談してください。私たちは弁護士ではないので、これ以上のアドバイスは提供しません。

アクセシビリティの API 群
---------------

ウェブブラウザーは、支援技術（AT）に役立つ情報を公開する（基礎となる OS によって提供される）特別な**アクセシビリティ API** を利用します — AT は大抵は意味論的情報を利用する傾向があるので、この情報にはスタイル情報や JavaScript のようなものを含みません。この情報は、**アクセシビリティツリー**と呼ばれる情報のツリーで構成されています。

次のように、OS が異なれば、利用可能なアクセシビリティ API も異なります。

* Windows: MSAA/IAccessible, UIAExpress, IAccessible2
* macOS: NSAccessibility
* Linux: AT-SPI
* Android: Accessibility framework
* iOS: UIAccessibility

ウェブアプリにおいて HTML 要素によって提供されるネイティブな意味論的情報が足りない場合は、あなたは WAI-ARIA の仕様（英語）の機能でそれを補うことができます。これにより、アクセシビリティツリーに意味論的情報が追加され、アクセシビリティが向上します。WAI-ARIA の基本の記事で WAI-ARIA についてもっと多くを学ぶことができます。

まとめ
---

この記事では高いレベルでアクセシビリティの概要を説明し、それが重要である理由と、ワークフローに取り込む方法を見てきました。サイトをアクセシブルにするための実装の詳細について学ぶことを渇望する人もいるでしょう。それでは次の記事では、HTML がアクセシビリティの良い基礎である理由を見ていきます。

* Overview: Accessibility
* 次のページ
関連情報
----

* WCAG
    + 知覚可能
    + 操作可能
    + 理解可能
    + 堅牢
* Google Chrome released an auto-captioning extension


モバイルのアクセシビリティ - ウェブ開発を学ぶ

モバイルのアクセシビリティ
=============

* 前のページ
* Overview: Accessibility
* 次のページ

モバイルデバイスでのウェブアクセスは非常に人気があり、iOS や Android などの一般的なプラットフォームには本格的なアクセシビリティツールが備わっているため、これらのプラットフォームでのウェブコンテンツのアクセシビリティを考慮することが重要です。この記事では、モバイル固有のアクセシビリティについて検討します。

| 前提知識 | 基本的なコンピューターの知識、HTML、CSS、JavaScript の基本的な知識、前回までの記事の理解。 |
| --- | --- |
| 学習目標 | モバイルデバイスのアクセシビリティにどのような問題があるのか、またそれらを克服する方法を理解すること。 |

モバイルデバイスのアクセシビリティ
-----------------

アクセシビリティの現状と、ウェブ標準全般のサポートは、現代のモバイルデバイスでは優れています。モバイルデバイスがデスクトップブラウザーとはまったく異なるウェブ技術を実行し、開発者がブラウザースニッフィングを使用してそれらを完全に別々のサイトで提供することを余儀なくされた時代は終わりました（ただし、かなりの数の企業が依然としてモバイルデバイスの使用を検出し、それらに別のモバイルドメインを提供しています）。

最近の一般的なモバイルデバイスは、「脂肪分たっぷり」のウェブサイトを扱うことができ、主なプラットフォームには視覚障害のあるユーザーがそれらをうまく使えるようにスクリーンリーダーが組み込まれています。最近のモバイルブラウザーは WAI-ARIA もよくサポートしています。

ウェブサイトをモバイルでアクセス可能かつ使用可能にするには、一般的な優れたウェブデザインとアクセシビリティのベストプラクティスに従う必要があるだけです。

モバイルに特別な配慮が必要な例外がいくつかあります。主なものは次のとおりです。

* 制御機構 — ボタンのようなインターフェイスのコントロールが、デスクトップやラップトップ（主にマウスとキーボード）と同様に、モバイル（主にタッチスクリーン）でアクセス可能であることを確認する。
* ユーザー入力 — モバイルでのユーザー入力要件をできるだけ苦痛でないものにします（例えば、フォームでは、タイピングを最小限に抑えます）。
* レスポンシブデザイン — レイアウトがモバイルで機能することを確認し、画像のダウンロードサイズを節約し、高解像度画面用の画像の提供について検討します。
Android および iOS でのスクリーンリーダーテストの概要
---------------------------------

最も一般的なモバイルプラットフォームは完全に機能的なスクリーンリーダーを持っています。これらはデスクトップのスクリーンリーダーとほとんど同じように機能しますが、キーの組み合わせではなくタッチジェスチャーを使用して主に操作される点が異なります。

主な 2 つを見てみましょう: Android の TalkBack と iOS の VoiceOver です。

### Android TalkBack

TalkBack スクリーンリーダーは Android オペレーティングシステムに組み込まれています。

オンにするには、スマートフォンのモデルと Android バージョンを調べて、TalkBack メニューの場所を探します。これは Android のバージョンやスマートフォンのモデルによっても大きく違います。あるスマートフォンメーカー(Samusung など)では、最新の機種で TalkBack がなくて、代わりに独自のスクリーンリーダーを選んでいることもあります。

TalkBack メニューが見つかったら、スライダースイッチを押してオンにします。画面に表示される追加の指示に従います。

TalkBack がオンになっているとき、あなたの Android デバイスの基本的なコントロールは少し違います。例えば、

1. アプリをシングルタップするとそれが選択され、デバイスはそのアプリが何かを読み上げます。
2. 左右にスワイプすると、アプリ間、またはコントロールバーにいる場合はボタンやコントロールの間を移動します。デバイスは各オプションを読み上げます。
3. どこでもダブルタップするとアプリが開いたり、オプションが選択されたりします。
4. また、「タッチで探索」することもできます — ドラッグ（指を画面に置いたまま移動）すると、デバイスは移動先のさまざまなアプリや項目を読み上げます。

TalkBack をオフにしたい場合は、

1. 上記のジェスチャーを使用して [設定] アプリに移動します。
2. [ユーザー補助] > [TalkBack] に移動します。
3. スライダースイッチに移動してアクティブにすると、オフになります。

**メモ:** 連続した動きで上にスワイプしてから左にスワイプすると、いつでもホーム画面にアクセスできます。複数のホーム画面がある場合は、左右に 2 本指でスワイプすることでそれらの間を移動できます。

TalkBack ジェスチャーのより完全なリストについては、TalkBack ジェスチャーを利用するを参照してください。

#### 端末のロックを解除する

TalkBack がオンになっているとき、端末のロック解除は少し違います。

ロック画面の下から上に 2 本指でスワイプすることができます。デバイスのロックを解除するためのパスコードまたはパターンを設定している場合は、関連する入力画面に移動して入力します。

画面の中央下部にある [ロック解除] ボタンをタッチで探索してから、ダブルタップすることもできます。

#### グローバルメニューとローカルメニュー

TalkBack を使用すると、デバイス上のどこに移動しても、グローバルおよびローカルのコンテキストメニューにアクセスできます。前者はデバイス全体に関するグローバルオプションを提供し、後者は現在のアプリや画面だけに関するオプションを提供します。

これらのメニューにアクセスするには、

1. すばやく下にスワイプしてから右にスワイプしてグローバルメニューにアクセスします。
2. すばやく上にスワイプしてから右にスワイプしてローカルメニューにアクセスします。
3. 左右にスワイプしてさまざまなオプションを切り替えます。
4. 必要なオプションを選択したら、ダブルタップしてそのオプションを選択します。

グローバルおよびローカルのコンテキストメニューで使用可能なすべてのオプションの詳細については、グローバル コンテキストメニューとローカル コンテキスト メニューを使うを参照してください。

#### ウェブページのブラウジング

ウェブブラウザーでローカルコンテキストメニューを使用して、見出し、フォームコントロール、リンク、行単位の移動などウェブページを移動するためのオプションを見つけることができます。

例えば、TalkBack をオンにした場合、

1. ウェブブラウザーを開きます。
2. URL バーをアクティブにします。
3. Ebbc.co.uk のフロントページのように、見出しがたくさんあるウェブページを入力します。URL のテキストを入力するには、
    * URL バーが得られるまで左右にスワイプしてから、ダブルタップして URL バーを選択します。
    * 目的の文字が得られるまで仮想キーボードに指を置いたまま動かしてから、指を離して入力します。これを各文字について繰り返します。
    * 終わったら、
     `Enter`
     キーを見つけて押します。
4. 左右にスワイプすると、ページ上のさまざまな項目間を移動できます。
5. 連続した動きで上にスワイプしてから右にスワイプして、ローカルコンテキストメニューに入ります。
6. [見出しとランドマーク] オプションが見つかるまで右にスワイプします。
7. ダブルタップして選択します。これで、見出しと ARIA のランドマークの間を移動するために左右にスワイプすることができます。
8. デフォルトモードに戻るには、上にスワイプしてから右にスワイプしてローカルコンテキストメニューに再度入り、[デフォルト] を選択してからダブルタップしてアクティブにします。

**注**: より完全なドキュメントは Android で TalkBack を使ってみるをご覧ください。

### iOS VoiceOver

VoiceOver のモバイル版は iOS オペレーティングシステムに組み込まれています。

それをオンにするには、あなたの設定アプリに行き、[一般] > [アクセシビリティ] > [VoiceOver] を選択してください。VoiceOver スライダを押して有効にします（このページには VoiceOver に関連する他の多数のオプションも表示されます）。

**メモ:** 古い iOS 端末では VoiceOver メニューは *設定* > *一般* > *アクセシビリティ* > *VoiceOver*にあります。

VoiceOver が有効になると、iOS の基本的なコントロールジェスチャーは次のように少し違います。

1. シングルタップすると、タップした項目が選択されます。デバイスはあなたがタップした項目を読み上げるでしょう。
2. 左右にスワイプして項目間を移動したり、画面上で指をスライドさせてさまざまな項目間を移動したりして、画面上の項目を移動することもできます（必要な項目が見つかったら、指を離して選択できます）。
3. 選択した項目をアクティブにする（例えば、選択したアプリを開く）には、画面上のどこでもダブルタップします。
4. 3 本指でスワイプしてページをスクロールします。
5. カメラアプリで写真を撮るなど、状況に応じたアクションを実行するには、2 本指でタップします。

もう一度オフにするには、上記のジェスチャを使用して [設定] > [一般] > [アクセシビリティ] > [VoiceOver] に戻り、[VoiceOver] スライダをオフに切り替えます。

#### 端末のロック解除

端末のロックを解除するには、通常どおりホームボタンを押す（またはスワイプする）必要があります。パスコードが設定されている場合は、上で説明したようにスワイプ/スライドして各番号を選択し、次に正しい番号を見つけたらダブルタップして各番号を入力できます。

#### ローターを使用する

VoiceOver がオンになっているとき、ローターと呼ばれるナビゲーション機能を使えます。それは素早く多くの一般的で役に立つオプションから選ぶことを可能にします。それを使用するには、

1. ダイヤルを回すように、画面上で 2 本の指をひねります。あなたがさらにひねるにつれて、各オプションを読み上げるでしょう。あなたは行ったり来たりしてオプションを切り替えることができます。
2. あなたが望むオプションを見つけたら、
    * 指を離して選択します。
    * それが（音量や話す速度のような）値を反復できるオプションである場合は、選択した項目の値を増減するために上下にスワイプすることができます。

ローターで利用可能なオプションは状況依存型です — それらはどのアプリやビューにいるかによって異なります（例については下記を参照）。

#### ウェブページのブラウジング

VoiceOver を使ったウェブブラウジングを試してみましょう。

1. ウェブブラウザーを開きます。
2. URL バーをアクティブにします。
3. bbc.co.uk のフロントページのように、見出しがたくさんあるウェブページを入力します。URL のテキストを入力するには、
    * URL バーが得られるまで左右にスワイプしてダブルタップし、URL バーを選択します。
    * 各文字について、目的の文字が得られるまで仮想キーボードに指を置いたまま動かしてから、指を離して選択します。ダブルタップして入力します。
    * 終ったら、
     `Enter`
     キーを見つけて押します。
4. 左右にスワイプすると、ページ上の項目間を移動できます。項目をダブルタップして選択することができます（例えば、リンクをたどる）。
5. デフォルトでは、選択されたローターオプションは話す速度です。現在は上下にスワイプして話す速度を上げ下げできます。
6. 今、ダイヤルのように 2 本指で画面を回転させてローターを表示し、ローターのオプション間を移動します。利用可能なオプションの例をいくつか示します。
    * 話す速度: 話す速度を変更します。
    * コンテナ: ページ上のさまざまな意味論的コンテナ間を移動します。
    * 見出し: ページ上の見出し間を移動します。
    * リンク: ページ上のリンク間を移動します。
    * フォームコントロール: ページ上のフォームコントロール間を移動します。
    * 言語: 利用可能な場合は、さまざまな翻訳間を移動します。
7. 見出しを選択します。これで、上下にスワイプしてページ上の見出し間を移動できます。

注: 利用可能な VoiceOver ジェスチャおよび iOS でのアクセシビリティテストに関するその他のヒントを網羅した詳細なリファレンスについては、VoiceOver を使用してデバイスのアクセシビリティをテストする（英語）を参照してください。

制御機構
----

CSS および JavaScript のアクセシビリティの記事では、特定の種類の制御機構に固有のイベントの概念を調べました（マウスに特有のイベントを参照）。要約すると、他の制御機構は関連する機能をアクティブにできないため、これらはアクセシビリティの問題を引き起こします。

例えば、click イベントはアクセシビリティの点で優れています — 関連付けられているイベントハンドラは、ハンドラが設定されている要素をクリックするか、タブ移動して `Enter` / `Return` キーを押すか、タッチスクリーンデバイスでタップすることで起動できます。simple-button-example.html の例を試してみてください（ライブで動いているのを見る）。

あるいは、mousedown や mouseup のようなマウス固有のイベントは問題を引き起こします — それらのイベントハンドラはマウス以外の制御を使って呼び出すことはできません。

キーボードまたはタッチで、simple-box-drag.html の例を制御しようとすると、問題が発生します（ライブで例を見る）。これは、次のようなコードを使用しているために発生します。
```

div.onmousedown = function() {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  movePanel();
}

document.onmouseup = stopMove;
```

他の形式の制御を有効にするには、異なるが同等のイベントを使用する必要があります — 例えば、タッチイベントはタッチスクリーンデバイスで機能します。
```

div.ontouchstart = function(e) {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  positionHandler(e);
  movePanel();
}

panel.ontouchend = stopMove;
```

マウスイベントとタッチイベントを一緒に使用する方法を示す簡単な例を示しました — multi-control-box-drag.html を参照してください（この例もライブで見てください）。

**注**: ゲーム制御機構の実装では、さまざまな制御機構を実装する方法を示す完全に機能する例も見ることができます。

レスポンシブデザイン
----------

レスポンシブデザインは、画面のサイズや解像度などの要因に応じて、レイアウトやその他のアプリの機能を動的に変更することです。だから、さまざまなデバイスタイプのユーザーにとって使用可能でアクセス可能です。

特に、モバイルに関して対処する必要がある最も一般的な問題は次のとおりです。

* モバイルデバイス用のレイアウトの適合性。例えば、複数列のレイアウトは狭い画面ではうまくいきませんし、見やすくするためにテキストサイズを大きくする必要があるかもしれません。このような問題は、メディアクエリ、ビューポート、フレックスボックスなどの技術を使用してレスポンシブレイアウトを作成することで解決できます。
* ダウンロードした画像サイズを節約する。一般的に、小型画面のデバイスは、デスクトップと同等の大きさの画像を必要としませんし、低速のネットワーク接続上にある可能性が高くなります。したがって、必要に応じて狭い画面のデバイスに小さい画像を提供することが賢明です。レスポンシブ画像のテクニックを使用してこれを扱えます。
* 高解像度について考える。多くのモバイルデバイスは高解像度の画面を持っているため、ディスプレイがくっきりと鮮明に見えるようにするために、より高解像度の画像が必要です。ここでも、レスポンシブ画像テクニックを使用して、必要に応じて画像を提供できます。さらに、SVG ベクター画像フォーマットを使用して多くの画像要件を満たすことができます。これは今日のブラウザー間で十分にサポートされています。SVG はファイルサイズが小さく、表示されているサイズに関係なく鮮明に保たれます（詳細はウェブにベクターグラフィックスを追加するを参照）。

**注**: レスポンシブデザインのテクニックについては、MDN の他の場所で説明されているため、ここでは詳しく説明しません（上記のリンクを参照）。

### 特定のモバイルに関する考慮事項

モバイルでサイトにアクセスしやすくするために考慮すべき他の重要な問題があります。ここにその一部を列挙しましたが、私たちがそれらを考えるときにはさらに追加します。

#### ズームを無効にしない

ビューポートを使用すると、ズームを無効にすることができます。常にリサイズ可能にして、`<head>` で端末の幅にあわせるにはこうします:

```html
<meta name="viewport" content="width=device-width; user-scalable=yes" />
```

なるべく`user-scalable=no` とはセットしないでください — 多くの人があなたのウェブサイトのコンテンツを見るためにズームに頼るので、この機能を奪うことは本当に悪い考えです。ズーミングによって UI が壊れる場合があります。そのような場合、絶対にズームを無効にする必要があると感じる場合は、UI を壊さないようにテキストサイズを大きくするためのコントロールのような、他の同等の機能を提供するべきです。

#### メニューにアクセスしやすくする

モバイルデバイスでは画面が非常に狭いため、メディアクエリやその他の技術を使用して、ナビゲーションメニューをディスプレイ上部の小さなアイコンに縮小するのがとても一般的です — これは一般的に「3 本の水平線」アイコンで表され、デザインパターンでは「ハンバーガーメニュー」と呼ばれています — サイトがモバイルで表示されるときに必要です。

そのようなメニューを実装するときは、上記の制御機構で説明したように、それを明らかにするためのコントロールは適切な制御機構（通常はモバイル用タッチ）でアクセスできること確認する必要があります。また、メニューの操作中に混乱しないように、メニューにアクセスしている間はページの残りの部分が邪魔にならないように移動するか、何らかの方法で非表示にします。

良いハンバーガーメニューの例（ドイツ語）を参照してください。

ユーザー入力
------

モバイルデバイスでは、データを入力することは、デスクトップコンピューター上の同等の経験よりもユーザーにとってより面倒なことが多いです。タッチスクリーンの仮想キーボードや小型のモバイル物理キーボードよりも、デスクトップやラップトップのキーボードを使用してテキストをフォーム入力に入力する方が便利です。

このため、必要なタイピングの量を最小限に抑えることを試みる価値があります。例として、通常のテキスト入力を使用して毎回ユーザーに役職を記入させるのではなく、最も一般的な選択肢を含む <select> メニューを提供できます（データ入力の一貫性を保つのにも役立ちます）。そして、それ以外の値を入力するテキストフィールドを表示する「その他」選択肢を提供できます。common-job-types.html で、このアイデアの簡単な例を実際に見ることができます（一般的な仕事の例をライブで見る）。

モバイルプラットフォームでの日付などの HTML5 フォームの入力タイプを使用することも考慮する価値があります。例えば、Android と iOS の両方で、デバイスエクスペリエンスに適した使用可能なウィジェットが表示されます。いくつかの例については html5-form-examples.html を参照してください（HTML5 フォームの例をライブで見る） - これらをモバイルデバイスでロードして操作してみてください。例えば、

* 番号（`number`）、電話番号（`tel`）、電子メール（`email`）の入力では、番号や電話番号を入力するための適切な仮想キーボードを表示します。
* 日時（`date`, `time`）の入力では、日時を選択するための適切なピッカーを表示します。

デスクトップとは別の解決策を提供したい場合は、機能検出を使用して、モバイルデバイスに常に別のマークアップを提供できます。さまざまな入力タイプの検出に関する生の情報については入力タイプ（英語）を参照してください。また、より多くの情報については機能検出の記事をチェックしてください。

まとめ
---

この記事では、モバイルのアクセシビリティ固有の一般的な問題とその解決方法について詳しく説明しました。また、アクセシビリティテストを支援するために、最も一般的なスクリーンリーダーの使い方を紹介しました。

関連情報
----

* モバイルウェブ開発のためのガイドライン（英語） — モバイルウェブデザインのためのさまざまな技術を網羅した *Smashing Magazine* の記事のリスト。
* サイトをタッチデバイスで機能させる（英語） — タッチイベントを使用してモバイルデバイスで対話を機能させるための便利な記事。
* 前のページ
* Overview: Accessibility
* 次のページ


CSS と JavaScript のアクセシビリティの ベスト・プラクティス - ウェブ開発を学ぶ

CSS と JavaScript のアクセシビリティの ベスト・プラクティス
======================================

* 前のページ
* Overview: Accessibility
* 次のページ

CSS と JavaScript も、適切に使えばアクセシブルなウェブ体験を可能にしてくれる可能性がありますが、誤用すると、大幅にアクセシビリティを悪化させることがあります。本記事では、複雑なコンテンツでもできる限りアクセシブルにすることを保証するために考慮すべき、CSS と JavaScript のベスト・プラクティスのいくつかを概観します。

| 前提知識: | 基本的なコンピューターの知識、HTML と CSS と JavaScript に関する基本的な理解、アクセシビリティとは何かに関する理解。 |
| --- | --- |
| 学習目標: | アクセシビリティを損わず、最大化するように、自身のウェブドキュメントで CSS と JavaScript を適切に使うことに慣れること。 |

CSS と JavaScript はアクセシブルなの?
---------------------------

CSS と JavaScript は、アクセシビリティに関して HTML と同じだけの直接的重要性があるわけではありません。ですが、それでも使い方によっては、アクセシビリティを高めることも損うこともありえます。別の言葉で言うと、自分の CSS と JavaScript の使い方によってドキュメントのアクセシビリティを台無しにしていないと確認するために、いくつかのベスト・プラクティスを考慮することが重要です。

CSS
---

CSS を見ることから始めましょう。

### 正しいセマンティクスと、ユーザの予期すること

CSS を使って、どのような HTML 要素を*どのように*見せかけることも可能です。しかし、このことは、そうすべきだと意味しているわけではありません。「HTML: アクセシビリティの基礎」という記事でしばしば述べたように、可能な場合にはいつでも、役割にふさわしい意味の要素を使うべきです。そうしないと、混乱を巻き起こしかねませんし、あらゆる人にとっての——とりわけ障碍のあるユーザーにとっての——使い勝手の問題を引き起こしかねません。正しいセマンティクスを使うことは、ユーザーの予期することと大いに関係があります。つまり、要素とは、その機能にしたがって、特定の見かけをしており特定のふるまいをするものであり、こうした通常の慣習をユーザーは予期するものなのです。

一例として、開発者が見出し要素を適切に使ってコンテンツをマークアップしていなかった場合には、スクリーン・リーダーのユーザーは、見出し要素を通じてページの見通しを得ることができないでしょう。同様に、見出しのようには見えないように見出しにスタイルをつけた場合には、見出しは視覚的な目的を失ってしまいます。

大まかな目安はこうです。つまり、自分のデザインに合わせるように、ページ項目のスタイル付けを更新するのは構いません。しかし、その項目が予期されるのとは全然違う見かけになったり、予期されるのとは全然違うふるまいをしたりするほど大幅にスタイル付けを変えてはいけません。以下の節では、考慮すべき主な HTML 項目について概説します。

#### 「標準的」なテキストコンテンツ構造

見出し、段落、リスト——これらは、ページの中心的テキストコンテンツです。

```html
<h1>見出し</h1>

<p>段落</p>

<ul>
  <li>わたしのリストには</li>
  <li>二つの項目があるよ。</li>
</ul>
```

ある種の典型的な CSS は以下のようなものかもしれません。

```css
h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}
```

なすべきことは以下の通りです。

* 文章を筋道立っていて判読可能で心地よく読めるものにするために、フォントサイズや行高や文字間隔などは、分別のあるものを選びましょう。
* 見出しが本文と区別できる (典型的には、デフォルトのスタイル付けと同様に、大きくて太い文字になっている) ようにしましょう。リストは、リストであるように見えるべきです。
* テキストの色は、背景色と十分に異なっているべきです。

より詳しくは、HTML テキストの基礎とテキストのスタイリングを参照してください。

#### 強調したテキスト

囲んでいるテキストに対して特定の強調を与えるインライン・マークアップは、たとえば以下のようなものです。

```html
<p>そのお湯は<em>とても熱いよ</em>。</p>

<p>表面に集まる水滴は、<strong>結露</strong>と呼ばれます。</p>
```

強調したテキストに対して、なんらかの単純な色付けを加えたいかもしれません。

```css
strong,
em {
  color: #a60000;
}
```

けれども、なんらかの目立つ方法で強調要素をスタイル付けする必要はめったにないでしょう。太字とイタリック体のテキストという標準的慣習はとても認識しやすく、そのスタイルを変更することは混乱を招きかねません。強調についてのさらなる情報は、強調と重要性を参照してください。

#### 略語

略語、頭文字語、つまり頭文字で表したものを、その展開形と関連付けることを可能とする要素は、たとえば以下のようなものです。

```html
<p>
  ウェブ・コンテンツは、<abbr title="Hypertext Markup Language">HTML</abbr
 >を使ってマークアップされています。
</p>
```

この場合も、なんらかの単純な方法でスタイルを付けたいかもしれません。

```css
abbr {
  color: #a60000;
}
```

略語に対する公認のスタイル付けの慣習は、点線の下線です。そして、点線の下線から大きく逸脱するのは愚かしいことです。略語についてのさらなる情報は、略語を参照してください。

#### リンク

ハイパーリンク——ウェブ上の新たな場所に行く方法——は、たとえば以下のようなものです。

```html
<p>
  <a href="https://www.mozilla.org">Mozilla のホームページ</a>に来てくださいね。
</p>
```

ある種のとても簡単なリンクのスタイル付けを以下に示します。

```css
a {
  color: #ff0000;
}

a:hover,
a:visited,
a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}
```

標準的なリンクの慣習は、下線を引いた、標準状態とは異なる色 (デフォルトは青) と、そのリンクを以前にたどったことがある場合の別の色変化 (デフォルトは紫) と、そのリンクがアクティブになっている場合のさらに別の色 (デフォルトは赤) です。さらに、リンクにマウスオーバーした場合には、マウスポインターがポインターアイコンに変化しますし、リンクは、(たとえばタブキーを押して) フォーカスが当たったり、アクティブ化されたりすると、ハイライトされます。以下の画像は、Firefox でのハイライト (点線の輪郭線) と Chrome でのハイライト (青い輪郭線) の双方を示したものです。

![](/ja/docs/Learn/Accessibility/CSS_and_JavaScript/focus-highlight-firefox.png)

![](/ja/docs/Learn/Accessibility/CSS_and_JavaScript/focus-highlight-chrome.png)

ユーザーがリンクを対話的に操作する際にユーザーに対してフィードバックを与え続ける限りは、リンクのスタイルに関して創造性を発揮して構いません。状態が変化する際には何かが明確に生じるべきであり、かつ、ポインターカーソルも輪郭線も——この両者は、キーボード・コントロールを使う人々にとって非常に重要なアクセシビリティの助けなのです——除去するべきではありませんが。

#### フォーム要素

ユーザーがウェブサイトにデータを入力できるようにする要素であり、たとえば以下のようなものです。

```html
<div>
  <label for="name">お名前を入力してください</label>
  <input type="text" id="name" name="name" />
</div>
```

form-css.html の例 (ライブも見てください) において、ある種の適切な例示的 CSS が見られます。

フォーム用に書く CSS のほとんどは、要素のサイズを変更したり、ラベルと入力欄を整列したり、それらをすっきり整えたりするためのものでしょう。

ですが、フォーム要素にフォーカスが当たったときにそのフォーム要素が受けとる、予期された視覚的フィードバックからは、逸脱しすぎるべきではありません。そのことは、リンクの場合 (上記参照) と基本的に同様です。フォームのフォーカス / ホバー状態に対してスタイルを付けて、このふるまいがブラウザー間でより首尾一貫したものとなるようにしてもよいでしょうし、あるいは、自分のページ・デザインとより良く適合するようにしてもよいでしょう。しかし、予期される視覚的フィードバックをすべて捨て去ってはなりません。再び言いますが、これらの手がかりが、何が起きているのかを知る手助けになってくれるだろう、と人々は当てにしているのです。

#### テーブル

表データを提示するためのテーブルです。

table-css.html の例 (ライブも見てください) において、テーブルの HTML と CSS の、適切で簡潔な例を見られます。

テーブル CSS は一般に、テーブルを自分のデザインによりうまく適合させて、見苦しさを減らすのに役立ちます。テーブルの見出しが目立つようにすること (普通は太字を使います)、異なる行同士が見分けやすいようにシマウマ的配色を使うことは、良い考えです。

### 色とそのコントラスト

自分のウェブサイト用のカラー・スキームを選ぶときには、テキスト (前景) の色が背景色と十分に差があることを確認してください。あなたのデザインはかっこよく見えるかもしれませんが、もし色盲などの視覚障碍のある人々がコンテンツを読めなかったら、まったく良いデザインではありません。

問題を起こさない程度に十分にコントラストが大きいかどうかを調べる簡単な方法があります。前景色と背景色を入力して調べることができる、コントラストのチェック用ツールが、オンライン上にいくつもあります。たとえば、WebAIM の Color Contrast Checker は、簡単に使えますし、色のコントラストに関して WCAG の基準に適合するためには何を行えば良いのかについて、説明もしてくれます。

**メモ:** コントラスト比を高くすることによって、光沢のある画面のスマートフォンまたはタブレットを使う人が陽光のような明るい環境でページを読みやすくもなるでしょう。

もう一つ別のコツは、標識や案内について色だけに頼らないことです。というのも、色だけに頼るのは、色が見えない人々にとってまったく良くないからです。必須のフォーム・フィールドを赤でマークする代わりに、たとえば、アスタリスクと赤でマークしましょう。

### ものごとを隠す

すべてのコンテンツをいちどきに示さないことを視覚的デザインが求めているような、多くの事例があります。たとえば、Tabbed info box example の例 (ソースコードを参照) では、三つの情報パネルがありますが、それらをお互いの上に配置しており、クリックするとそれぞれの情報パネルを表示できるタブを設けています (これはキーボード・アクセシブルでもあります。つまり、情報パネルを選ぶのに、クリックする代わりに、タブキーとエンターキー / リターンキーとを使うこともできます)。

![](/ja/docs/Learn/Accessibility/CSS_and_JavaScript/tabbed-info-box.png)

スクリーン・リーダーのユーザーは、こうしたことは何も気にしません。ソースの順序が意味をなしている限りはコンテンツに満足しますし、コンテンツすべてに到達できます。(この例で使われているような) 絶対的な位置指定は、一般的に、視覚効果のためにコンテンツを隠す最善の仕組みの一つとして見られるものです。なぜなら、これは、スクリーン・リーダーがコンテンツに到達するの邪魔しないからです。

一方で、 `visibility``:hidden` も `display``:none` も、スクリーン・リーダーからコンテンツを隠してしまうので、使うべきではありません。もちろん、スクリーン・リーダーからこのコンテンツを隠したいと思う然るべき理由がない限りは、ということですが。

**メモ:** Invisible Content Just for Screen Reader Users には、この話題をめぐる多くのさらに有用な詳細があります。

### ユーザーがスタイルを上書きできることを受け入れる

#### ユーザーがスタイルを上書きできることを受け入れる

ユーザーは、自分のカスタム・スタイルでスタイルを上書きできます。たとえば以下のとおりです。

* Firefox において手動でスタイルを上書きする方法を含む有用なガイドとしては、 Sarah Maddox の How to use a custom style sheet (CSS) with Firefox を参照のこと。同等な IE の命令については、Adrian Gordon による How to use a custom style sheet (CSS) with Internet Explorer を参照のこと。
* 拡張機能を使ってスタイルを上書きするのは、おそらくもっと簡単です。たとえば、Firefox 用、Safari 用、Opera 用、Chrome 用の Stylish という拡張機能が利用できます。

ユーザーは様々な理由から、スタイルの上書きを行うかもしれません。視覚障碍のあるユーザーは、すべての訪問先のウェブサイトでテキストを大きくしたいかもしれませんし、あるいは、重度の色覚障碍のあるユーザーは、すべてのウェブサイトを自分でも見やすい高コントラストの色にしたいかもしれません。その必要性がいかなるものであるにせよ、(スタイルの上書きという) この事態にはなじんでおくべきですし、そうした変更が自分のデザインにおいてうまく機能するように、自分のデザインを十分に柔軟なものとしておくべきです。例として、主なコンテンツ領域がより大きいテキストを扱えて (その領域は、全体を見られるようにスクロールし始めるかもしれません)、ただ隠したり完全に破綻したりしないように、気をつけると良いでしょう。

JavaScript
----------

JavaScript も、その使い方によっては、アクセシビリティをぶち壊しにする可能性があります。

モダンな JavaScript は強力な言語です。簡単なコンテンツと UI の更新から、本格的な 2D ゲームや 3D ゲームに至るまで、近頃では JavaScript を使ってとても多くのことができます。すべてのコンテンツがすべての人々にとって 100% アクセシブルであるべきだ、といった決まりはありません。自分にできることをし、自分のアプリをできる限りアクセシブルにする必要があるだけなのです。

単純なコンテンツと機能——たとえば、テキスト、画像、テーブル、フォーム、関数を起動する押しボタン——は、まず間違いなく、アクセシブルにするのが簡単です。HTML: アクセシビリティの基礎 の記事で見たように、考慮すべき重要な事項は以下のとおりです。

* 良いセマンティクス: ふさわしい要素をふさわしい役割に使うこと。たとえば、見出しと段落を使い、`<button>` 要素と `<a>` 要素を使うようにします。
* コンテンツを、テキストとして利用可能にすること——テキスト・コンテンツや、フォーム要素に対する適切なテキスト・ラベルの形で、直接的に利用可能とするか、あるいは、たとえば画像に対する alt テキストのような代替テキストとして、利用可能にすること。

機能が欠けているところに機能を盛り込むように JavaScript を使う方法の例も見ました (キーボードアクセシビリティを呼び戻すように盛り込む を参照)。この例は理想的ではありません。実際、ただふさわしい要素をふさわしい役割に使うべきなのです。が、この例は、使われるマークアップを何らかの理由で統制できない状況においては、こうしたこともあり得るのだと示しています。非意味的な、JavaScript で実装されたウィジェットについて、アクセシビリティを向上させる別の方法は、WAI-ARIA を用いて追加的なセマンティクスをスクリーン・リーダーのユーザーに提供することです。次の記事では、このことも詳しく扱います。

3D ゲームのような複雑な機能は、アクセシブルにするのがそう簡単ではありません。WebGL を使って作られた複雑な 3D ゲームは `<canvas>` 要素上に描画されるでしょうが、今のところ `<canvas>` 要素には、重度の視覚障碍のあるユーザーが利用できるように代替テキストもしくは他の情報を提供する手段がないのです。 そうしたゲームは、こうした人々のグループを実際に主要な対象者の一部としてはいないのだ、というのはもっともです。それに、そのゲームを、目の見えない人々にとって 100% アクセシブルにせよ、と期待するのも不合理でしょう。しかし、マウスを使わないユーザーにとって利用可能なようにキーボード・コントロール (en-US)を実装することや、 色覚障碍のある人々にとって利用可能なようにカラー・スキームに十分なコントラストを持たせることならできるでしょう。

### 過度の JavaScript にともなう問題

JavaScript に頼りすぎると、しばしば問題が起きます。ときどき、何でもかんでも JavaScript で行われたウェブサイト—— HTML が JavaScript により生成され、CSS が JavaScript により生成され、といった調子のもの——を見るでしょう。これには、あらゆる種類のアクセシビリティの問題および付随するその他の問題があり、お勧めできません。

ふさわしい役割にふさわしい要素を使うのと同様に、ふさわしい役割にふさわしい技術を使っていることも確認しておくべきです! JavaScript で実装されたキラキラの 3D 情報ボックスが必要なのか、あるいは、プレーンな古めかしいテキストでも用が足りそうか、ということについて注意深く考えてください。複雑で非標準的なフォーム・ウィジェットが必要なのか、あるいは、テキスト入力でも用が足りそうか、ということについて注意深く考えてください。そして、とにかく可能な場合に JavaScript を使ってすべての HTML コンテンツを生成する、などということはしないでください。

### ひかえめに保つこと

コンテンツを作るときには、**ひかえめな (unobtrusive) JavaScript** を心に留めておくべきです。ひかえめな JavaScript という考え方は、次のようなものです。すなわち、機能を拡張できるところならどこでも使うべきだけれども、機能を盛り込むためにはまったく使うべきではない——基本的機能は JavaScript なしでも理想的には動くはずなのだから。もっとも、これが常に選択できるとは限らないことはよく理解されているのですが。しかし再び言いますが、この考えの大部分を占めるのは、可能な箇所ではブラウザーの組み込み機能を使うということです。

ひかえめな JavaScript の適切な使用例には、次のものが含まれます。

* クライアントサイドのフォーム検査を提供すること。これは、サーバーがデータを調べるのを待つ必要なしに、フォーム入力にともなう問題をユーザーに対して素早く警告してくれます。もしクライアントサイドのフォーム検査が利用できなくても、フォームは依然として動作するでしょうが、検査は遅くなるかもしれません。
* キーボードのみのユーザーにとってアクセシブルな 、HTML5 `<video>` 用のカスタム・コントロールを提供すること。それとともに、JavaScript が利用できない場合にその動画にアクセスするのに使える、動画への直接リンクも提供すること (ほとんどのブラウザーでは、デフォルトの `<video>` ブラウザー・コントロールは、キーボード・アクセシブルではありません)。

一例として、やっつけ仕事のクライアントサイドのフォーム検査の例を書きました。form-validation.html を参照してください (demo live も参照してください). ここでは、単純なフォームが見えます。一方または双方のフィールドを空にしたままフォームを送信しようとすると、送信が失敗し、エラーメッセージ・ボックスが現れて、何が間違っているのかを教えてくれます。

この種のフォーム検査はひかえめです。JavaScript が利用できなくても、依然としてまったく申し分なくフォームを使えます。それに、分別のあるフォームの実装なら何であれ、サーバーサイドの検査も作動させておくことでしょう。なぜなら、悪意のあるユーザーがクライアントサイドの検査を (たとえば、ブラウザーで JavaScript をオフにしておくことによって) 迂回することは、あまりに容易だからです。クライアントサイドの検査は、それでも実際に、エラーを報告するためには有用なのです。ユーザーは、自分のおかした間違いについて、サーバーまでのラウンドトリップおよびページリロードを待つ必要なしに、すぐに知ることができます。これは使い勝手の上での明らかな利点です。

**メモ:** この単純なデモではサーバーサイドの検査を実装しませんでした。

このフォーム検査も、とてもアクセシブルにしておきました。`<label>` 要素を用いて、フォーム・ラベルがそのラベルの入力欄に曖昧な点なしに紐付けられるようにして、それによってスクリーン・リーダーがラベルを一緒に読み上げられるようにしました。

```html
<label for="name">お名前を入力してください (Enter your name):</label>
<input type="text" name="name" id="name" />
```

フォームが送信されるときにだけ検査をしています。これは、UI をあまりに頻繁に更新しないようにするため、そして、スクリーン・リーダーのユーザーを (また、おそらくは他のユーザーも) 潜在的に混乱させることがないようにするためです。

```js
form.onsubmit = validate;

function validate(e) {
  errorList.innerHTML = "";
  for (var i = 0; i < formItems.length; i++) {
    var testItem = formItems[i];
    if (testItem.input.value === "") {
      errorField.style.left = "360px";
      createLink(testItem);
    }
  }

  if (errorList.innerHTML !== "") {
    e.preventDefault();
  }
}
```

**メモ:** この例では、絶対的な位置指定を用いてエラーメッセージ・ボックスを隠したり見せたりしています。visibility や display などの他の方法を使っているわけではありません。なぜなら、絶対的な位置指定は、スクリーン・リーダーがコンテンツを読めるようにしておくことを妨げないからです。

現実のフォーム検査は、これよりもっと複雑でしょう。入力された名前が実際に名前のようであることを確認したいかもしれませんし、入力された年齢が実際に数であり、かつ現実的である (たとえば、負数ではなく、4 桁でもない、など) ということを確認したいかもしれません。ここでは、各入力フィールドに値が入れられたことを確認する (`if(testItem.input.value === '')` という) 簡単な検査を実装しただけです。

検査が実行された際に、もしテストに通れば、フォームが送信されます。もしエラーがあれば (つまり `if(errorList.innerHTML !== '')` であれば)、 (`preventDefault()` を用いて) フォームの送信を中止し、生成されたエラーメッセージをすべて表示します (下記参照)。この仕組みは、エラーが存在するときにだけエラーが表示される、ということを意味します。そしてそのことは、使い勝手のうえで、より良いことなのです。

フォームが送信される際に値が入れられていない入力それぞれについて、リンクを有するリスト項目を作って、それを `errorList` に挿入しています。

```js
function createLink(testItem) {
  var listItem = document.createElement("li");
  var anchor = document.createElement("a");
  anchor.textContent =
    testItem.input.name +
    " field is empty: fill in your " +
    testItem.input.name +
    ".";
  anchor.href = "#" + testItem.input.name;
  anchor.onclick = function () {
    testItem.input.focus();
  };
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
}
```

各リンクは二つの役割を果たします。つまり、何のエラーなのかを教えてくれますし、さらに、そのリンクをクリックする / アクティブにすると問題の入力要素へ直接ジャンプして入力を訂正できるようになっています。

**メモ:** この例の `focus()` の部分は少し手が込んでいます。Chrome と Edge (と、IE の新しいバージョン) は、リンクがクリックされたときに要素にフォーカスを当てるので、`onclick`/`focus()` ブロックを必要としません。Safari はリンク自体とともにフォーム要素をハイライトするだけであり、そのため、実際にフォーム要素にフォーカスを当てるには `onclick`/`focus()` ブロックが必要です。Firefox は、こうした状況において入力要素に適切にフォーカスを当てることはまったくありません。よって、Firefox のユーザーは、現時点ではこの `onclick`/`focus()` ブロックの利益を享受できません (それ以外のすべてはうまく機能するのですが)。Firefox の問題はすぐに修正されるはずです。というのも、他のブラウザーと同等のふるまいを Firefox にさせるための作業が、今なされている最中ですから (Firefox バグ 277178 を参照).

さらに、ソース順における先頭に `errorField` を置いてあります (CSS を使って、UI 上では別のところに配置してありますが)。これが意味することは、ユーザーが、ページの最初に戻ることで、自分のフォーム送信でまさに何が間違っているのかも分かるし、問題の入力要素にも行ける、ということです。

最後の注記ですが、このデモではいくつか WAI-ARIA 属性を使いました。ページリロードをともなわずに絶えず更新するコンテンツの領域が引き起こすアクセシビリティの問題を、解決する手助けとするためです (スクリーン・リーダーは、デフォルトでは、こうしたコンテンツを拾い上げたり、ユーザーにこうしたコンテンツを警告したりはしないでしょう)。
```

<div class="errors" role="alert" aria-relevant="all">
  <ul>
  </ul>
</div>
```

もっと詳細に WAI-ARIA を扱う次の記事で、これらの属性について説明します。

**メモ:** HTML5 フォームには `required` 属性や `min`/`minlength` 属性や `max`/`maxlength` 属性のような組み込みの検査の仕組みがあること (より詳しくは、`<input>` 要素のリファレンスを参照) について考える読者もおそらくいることでしょう。このデモでは、結局これらの属性は使いませんでした。なぜなら、これらの属性についてのクロスブラウザー・サポートが当てにならないからです (たとえば IE10 以上のみでのサポートだったり、Safari ではサポートされていなかったりします)。

**メモ:** WebAIM の Usable and Accessible Form Validation and Error Recovery は、アクセシブルなフォーム検査についてのさらに有用な情報をいくつか教えてくれます。

### JavaScript のアクセシビリティのその他の問題

JavaScript で実装しつつアクセシビリティについて考えるときに意識すべきことは他にもあります。見つけ次第、さらなる事項を追加するつもりです。

#### マウスに特有のイベント

お気づきのとおり、ユーザーとの対話的動作のほとんどは、イベントハンドラーを使ってクライアントサイドの JavaScript で実装されます。イベントハンドラーによって、特定のイベントが起きるのに応じて関数を実行できるようになります。ある種のイベントには、アクセシビリティの問題があるかもしれません。読者が見つけることになるであろう主な例は、mouseover (en-US) や mouseout (en-US) や dblclick (en-US) などの、マウスに特有のイベントです。これらのイベントに応じて動作する機能は、キーボード・コントロールのような他の仕組みを用いていると、アクセシブルではなくなります。

こうした問題を軽減するには、これらのイベントと、他の手段によってアクティブにできるような類似のイベントとの二重化をすべきです (いわゆるデバイスとは独立なイベントハンドラーです)。focus (en-US) と blur は、キーボードのユーザーに対するアクセシビリティを提供してくれることでしょう。

これが有用になりうる場合においてハイライトを行う事例を見てみましょう。ときにはサムネイル画像を設けたいことがあります。そのサムネイル画像にマウスオーバーした場合またはフォーカスが当たった場合に、その画像の、より大きなバージョンを表示するものです (電子商取引の商品カタログ上で見受けられるようなものです)。

とても簡単な例を作りました。これは、mouse-and-keyboard-events.html で見られます (ソースコード も参照)。このコードは、ズームインした画像を表示する関数と隠す関数という、二つの関数を特徴としています。これらの関数は、これらの関数をイベントハンドラーとして設定する以下の行により実行されます。

```js
imgThumb.onmouseover = showImg;
imgThumb.onmouseout = hideImg;

imgThumb.onfocus = showImg;
imgThumb.onblur = hideImg;
```

最初の 2 行は、それぞれ、マウスポインターがサムネイル上にホバーしたときと、マウスポインターがサムネイル上にホバーするのをやめたときに、関数を動作させます。しかしこれだと、ズームしたビューにキーボードを通じてアクセスすることはできません。それをできるようにするために、後ろの方の 2 行を含めました。この 2 行は、画像にフォーカスが当たったときと、画像からフォーカスが外れた (フォーカスが停止した) ときに、関数を動作させます。こうしたことは、タブキーで画像上に移動することでできることです。なぜなら、画像に `tabindex="0"` を含めておいたからです。

click クリックイベントは興味深いものです。マウス依存のように聞こえる名前ですが、ほとんどのブラウザーは、フォーカスの当たっているリンクまたはフォーム要素上でエンター / リターンが押された後に、あるいは、そうした要素がタッチスクリーン装置上でタップされたときに、onclick イベントハンドラーをアクティブにすることでしょう。しかしこれは、tabindex を用いて、デフォルトではフォーカス可能ではないイベントがフォーカスを持つようにしていると、デフォルトのままではうまく機能しません。そうした場合では、まさにそのキーが具体的にはいつ押されたのかを検出する必要があります (キーボードアクセシビリティを呼び戻すように盛り込む を参照)。

まとめ
---

ウェブページ上での CSS と JavaScript の使用にまつわるアクセシビリティの問題について、このページが適切な量の細部と理解をもたらしたのであれば幸いです。

次は WAI-ARIA の番です!

* 前のページ
* Overview: Accessibility
* 次のページ