この翻訳は不完全です。英語から この記事を翻訳 してください。

このページには、さまざまなチュートリアルとトレーニング用教材へのリンクがあります。これから始める初心者の方や基礎を勉強中の方、そして Web 開発のベテランの方にとっても、ベスト プラクティスを学習するのに役に立つ教材が見つかります。これらの教材は、オープン標準や Web 開発のベスト プラクティスを支持する、将来を見据えた先見の明のある企業や Web 開発者が、クリエティブ コモンズなどのオープン コンテント ライセンスに準じて作成したもので、翻訳物が提供されています。もしそうでない場合は、他の人が翻訳することが許可されています。

Webについて全くの初心者の人たちへ

ウェブ入門
ウェブ入門は、実用的なウェブ開発の入門シリーズです。まずはじめに、簡単なウェブページを作るのに必要なツールを準備します。そして、簡単なコードを書いたら、それを実際にウェブに公開します。

HTML チュートリアル

入門レベル

HTML 入門
HTML とは何か、HTML がどのように動くか、HTML の簡単な歴史について、HTML ドキュメントの構造がどのようなものかを解説します。次に、HTML の構成部分をそれぞれ詳細に見ていきます。
MDN HTML 要素リファレンス
HTML 要素の包括的なリファレンスです。ブラウザーごとのサポート状況も分かります。
HTML を使用したシンプルなウェブページの作成 (The Blog Starter)
この HTML ガイドは、初心者向けに HTML5 タグを含めた、一般的なタグを紹介しています。また、段階ごとに基本的なウェブページを作成するためのコード例を載せています。
HTML チャレンジ (Wikiversity)
問題に挑戦し HTML スキル (例:  <h2> か <strong> のどちらをを使うべきか) を磨いて下さい。マークアップが意味のあるものになっているかがポイントです。

中級レベル

マルチメディアとその埋め込み方
このモジュールでは、あなたのウェブページに、HTMLをどのようにして用いればマルチメディアを含むことができるかについて学びます。また、画像を挿入するためのさまざまな方法や、どのようにして動画・音声、そして他のウェブページ全体を挿入するのかについても触れています。
 
HTML tables
表の形のデータをウェブページにおいて、理解可能な形式、そしてアクセシビリティに配慮した形式で表現することは少し難しいでしょう。このモジュールは、基本的なtableのマークアップ、そしてさらに複雑な機能(たとえば注や要約を付加したり)を扱います。

上級レベル

HTML フォームガイド
HTML フォームは、ウェブの重要な部品です。フォームは多くの機能を提供し、ユーザーがウェブサイトとやり取りする際に必要なものとなっています。例えば登録、ログイン、フィードバックの送信、商品の購入、などなど。このモジュールではフォームのクライアント側の部分を作成するところから始めます。
読み込みが速い HTML ページを作成するヒント
ウェブページを最適化することでサイト表示の待ち時間を短くし、サーバーとインターネット接続経路の負荷を軽減する方法を学ぶことができます。

CSS チュートリアル

入門レベル

CSS の基本

CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。 CSS の基本ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます:テキストを黒または赤にするにはどうすればいいですか? そのような場所でコンテンツを画面に表示させるにはどうすればよいですか? 背景画像と色を使ってウェブページをどのように飾るのですか?

CSS 入門
このモジュールで、CSS 習得の道のりを開始できます。セレクター、プロパティ、CSS の記述ルール、CSS を HTML に適用する方法、CSS で長さや色やその他の単位を指定する方法、カスケードと継承、ボックスモデルの基本、CSS のデバッグが含まれています。
ボックスのスタイリング
次に、ボックスのスタイリングを見てみましょう。これはウェブページのレイアウトを行う基本的なステップの1つです。このモジュールでは、ボックスモデルの padding、border、margin の設定や、カスタム背景色や画像や柄、ボックスのフィルターや影を描くなどの装飾機能による、ボックスレイアウトの制御をおさらいします。
テキストのスタイリング
ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストスタイリングの基礎を確認します。あなたのページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。
CSS に関する一般的な質問
初心者から寄せられる一般的な質問とその回答です。
(以下の4つは過去の和訳から。原文からは削除されています)
CSS Selector Classes (Wikiversity)
CSS のクラスについての説明です。
External CSS (Wikiversity)
外部のスタイル シートから CSS を利用する方法です。
Adding a Touch of Style (W3C)
CSS を使ってウェブページのスタイルを整える、初心者向けの簡潔なガイドです。
CSS Selectors (TechStream.org)
CSS セレクターの紹介です。

中級レベル

CSS レイアウト
この時点で、CSS の基本、テキストスタイルの設定方法、コンテンツが内部にあるボックスのスタイルと操作方法については説明を終えています。今度は、ボックスを表示領域に関連して適切な場所に配置する方法を見てみましょう。必要な堰堤条件についてはすでに終えているので、CSS のレイアウト、様々なディスプレイ設定、float と positioning を含む従来のレイアウト方法、flexbox のような新しいレイアウトツールなどについて詳しく調べることができます。
CSS リファレンス
CSS の完全なリファレンス。Firefox などのブラウザーのサポート状況の詳細もあります。
流動グリッド (A List Apart)
前からある印刷用のグリッドを使いながら、ブラウザーのウィンドウに合わせて可変的にリサイズするレイアウトを設計することができます。
CSS チャレンジ (Wikiversity)
CSS スキルを確認し、何を勉強すべきかを知ることができます。

上級レベル

CSS による変形処理を使う
CSS を使って、回転、傾き、拡大、縮小、移動を行います。
CSS トランジション
CSS3 ドラフトの仕様の一部である CSS トランジションでは、即時に変化させるのではなく、CSS のプロパティで時間的に連続して変化させることができます。
@font-face によるウェブフォント指定のクイックガイド (HTML5 Rocks)
CSS3 の @font-face 機能を使うと Web 上にあるカスタム字体を使うことができます。使いやすく、フォントの操作、拡大縮小が可能です。
CSS を書き初める (David Walsh)
簡潔で保守が容易、スケーラブルな CSS を書くためのツールや方法論の紹介です。
Canvas チュートリアル
canvas 要素を使用するスクリプトを書いてグラフィックを描く方法を学ぶことができます。
HTML5 Doctor
HTML5 をすぐに使うための記事があります。

Javascript チュートリアル

入門レベル

JavaScript の第一歩
最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な体験をしていただく前に「JavaScript とは何?」や「どのように見える?」や「何ができる?」といったような基本的な質問に答えます。その後 JavaScript を理解する重要な特徴、たとえば変数や文字列、 数値、配列などについてお話します。
JavaScript の構成要素
このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでの勉強で詰め込み、とおりすぎてしまっているかもしれませんが、ここではすべて明示的に説明を行います。
JavaScript を始めましょう 
JavaScript とは何か? 何の役に立つのかを学べます。
コードアカデミー (Codecademy)
Codecademy では簡単に JavaScript コーディングの方法を学べます。対話形式で学習でき、友人と一緒に進めることができます。
(以下の3つは過去版の和訳から。原文では削除されています)
JavaScript Best Practices (WebPlatform.org)
JavaScript を書くときの分かりやすい (一部少し分かりにくいものもあります) ベスト プラクティスをいくつか学ぶことができます。
CodeAvengers (CodeAvengers.com)
Code Avengers では楽しく無駄なく、HTML、CSS と JavaScript を使って Web アプリやゲームをコーディングする方法を学習できます。
CodeCombat (codecombat.com)
CodeCombat は、プレイして JavaScript を学ぶゲームです。オープンソースです。

中級レベル

JavaScript オブジェクトの紹介
JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の上に構築されたブラウザ API まで、ほとんどのものがオブジェクトです。 関連する関数や変数を効率的なパッケージにカプセル化する独自のオブジェクトを作成することもできます。 JavaScript のオブジェクト指向の性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、このモジュールを用意しました。 ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見て、JSON のデータとその使い方を説明します。
クライアント側 Web API
ウェブサイトやアプリケーションのためにクライアント側 JavaScript を書くとき、API (異なるブラウザやサイトを動かしている OS 、さらに他のウェブサイトやサービスのデータを操作するインターフェイス)の使用が不可欠です。このモジュールでは、API とはどういったものかや開発の多くで使われる最も一般的な API の使い方を調べられます。
JavaScript 再入門
中級レベルの開発者向けの JavaScript プログラム言語復習用まとめです。
表現力のある JavaScript
中級・上級 JavaScript 方法論への包括的ガイドです。
Speaking JavaScript (Dr. Axel Rauschmayer)
JavaScript の学習をすばやく正確に学びたいプログラマーや特定のトピックスを探したり、スキルを上げたいプログラマーのためのサイトです。
Essential JavaScript Design Patterns (Addy Osmani)
JavaScript デザイン パターンの真髄に触れてみましょう。
(以下の2つは過去版の和訳から。原文では削除されています)
The JavaScript Programming Language (YUI Blog)
Douglas Crockford 氏が、最新の JavaScript とそこに至るまでの経緯を探求しています。
Introduction to Object-Oriented JavaScript
JavaScript オブジェクトモデルについて学ぶことができます。

上級レベル

JavaScript ガイド
初心者から上級者まですべてのレベル向けの分かりやすい JavaScript ガイドです。定期的に更新されています。
You Don't Know JS (Kyle Simpson)
このシリーズは、JavaScript のコアなメカニズムを深める本です。
JavaScript Garden
JavaScript で最もはまりやすい部分をドキュメント化したものです。
Exploring ES6 (Dr. Axel Rauschmayer)
ECMAScript 2015 の信頼できる詳しい情報元です。
Javascipt Patterns
Javascript のパターンと不適切な例であるアンチパターンを集めたものです。関数パターン、jQueryパターン、jQuery プラグイン パターン、デザイン パターン、一般的なパターン、リテラルおよびコンストラクター パターン、オブジェクト生成パターン、コード再利用パターン、DOM をカバーしています。
How browsers work
モダンブラウザのエンジンやページレンダリングなどの違いが詳しく研究され、説明された論文です。
JavaScript Videos (GitHub)
見ておきたい JavaScript についての映像を集めたものです。
(以下の5つは過去版の和訳から。原文では削除されています)
Introducing the JavaScript DOM (Elated)
ドキュメントオブジェクトモデル (DOM) について、これが役に立つ理由と JavaScript の強力な機能である DOM について優しく紹介されています。
An Inconvenient API: The Theory of the DOM (YUI Blog)
Douglas Crockford 氏が DOM を解説しています。
Advanced JavaScript (YUI Blog)
JavaScript プログラマーがアプリケーションを作成する際に選択できるコード パターンを、Douglas Crockford 氏がレビューしています。
Non-Blocking JavaScript Downloads (YUI Blog)
JavaScript を含むページの読込パフォーマンスを改善するヒントです。
Learning Advanced JavaScript (John Resig)
John Resig 氏による上級 JavaScript ガイドです。

拡張機能の開発

WebExtensions
WebExtensions は、ブラウザのアドオンを開発するための、ブラウザ間互換システムです。このシステムの大半は Google ChromeやOperaでサポートされている extension API と互換性があります。 これらのブラウザ用に書かれたアドオンは、大抵の場合、ほんの少し変更を加えるだけで、Firefox やMicrosoft Edgeでも動かすことができます。 このAPIはマルチプロセスFirefoxとも完全な互換性があります。

ドキュメントのタグと貢献者

最終更新者: silverskyvicto,