--- title: チュートリアル slug: Web/Tutorials tags: - CSS - GitHub - HTML - JavaScript - MDN - ウェブ記事 - ウェブ開発 - ガイド - コード - チュートリアル - ブラウザー - 初心者 translation_of: Web/Tutorials --- <p>このページには、さまざまなチュートリアルとトレーニング用教材へのリンクがあります。これからウェブ開発を始めようとしている方、基礎を学ぼうとしている方、ウェブ開発に慣れている方など、ベストプラクティスを学習するのに役立つ教材をここで見つけることができます。</p> <p>これらの教材は、先見の明のある企業やウェブ開発者が、オープン標準やウェブ開発のベストプラクティスを支持して、クリエティブ・コモンズなどのオープンコンテンツライセンスに準じて提供や翻訳を許可しています。</p> <h2 id="For_complete_beginners_to_the_Web">ウェブについて全くの初心者の人たちへ</h2> <dl> <dt><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></dt> <dd><em>ウェブ入門</em>は、実用的なウェブ開発の入門シリーズです。まずはじめに、簡単なウェブページを作るのに必要なツールを準備します。そして、簡単なコードを書いたら、それを実際にウェブに公開します。</dd> </dl> <h2 class="Documentation" id="HTML-Tutorials">HTML チュートリアル</h2> <h3 id="Introductory_level">入門レベル</h3> <dl> <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a></dt> <dd>HTML とは何か、HTML がどのように動くか、HTML の簡単な歴史について、HTML 文書の構造がどのようなものかを解説します。次に、HTML の構成部分をそれぞれ詳細に見ていきます。</dd> <dt><strong><a href="/ja/docs/Web/HTML/Element">MDN HTML 要素リファレンス</a></strong></dt> <dd>HTML 要素の包括的なリファレンスです。ブラウザーごとの対応状況も分かります。</dd> </dl> <dl> <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">Creating a Simple Web Page with HTML</a> (英語)</strong></dt> <dd>この HTML ガイドは、初心者向けに HTML5 タグを含めた、よくあるタグを紹介しています。また、段階ごとに基本的なウェブページを作成するためのコード例を載せています。</dd> <dt><strong><a href="https://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Challenges</a> (英語)</strong></dt> <dd>問題に挑戦し HTML のスキルを磨きましょう。マークアップが意味のあるものになっているか (例: <h2> か <strong> のどちらをを使うべきか) がポイントです。</dd> </dl> <h3 id="Intermediate_level">中級レベル</h3> <dl> <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt> <dd>このモジュールでは、ウェブページに、HTML をどのようにして用いればマルチメディアを含むことができるかについて学びます。また、画像を挿入するためのさまざまな方法や、どのようにして動画・音声、そして他のウェブページ全体を挿入するのかについても触れています。</dd> </dl> <dl> <dt><a href="/ja/docs/Learn/HTML/Tables">HTML 表</a></dt> <dd>ウェブページにおいて、表の形のデータを理解可能な形、そしてアクセシビリティに配慮した形で表現することは少し難しいでしょう。このモジュールは、基本的な表のマークアップ、そしてさらに注や要約を付加など、もっと複雑な機能を扱います。</dd> </dl> <h3 id="Advanced_level">上級レベル</h3> <dl> <dt><a href="/ja/docs/Learn/Forms">HTML フォーム</a></dt> <dd>HTML フォームは、ウェブの重要な部品です。フォームは多くの機能を提供し、ユーザーがウェブサイトとやり取りする際に必要なものとなっています。例えば登録、ログイン、フィードバックの送信、商品の購入、などなど。このモジュールではフォームのクライアント側の部分を作成するところから始めます。</dd> </dl> <dl> <dt><strong><a href="/ja/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">読み込みが速い HTML ページを作成するヒント</a></strong></dt> <dd>ウェブページを最適化することでサイト表示の待ち時間を短くし、サーバーとインターネット接続経路の負荷を軽減する方法を学ぶことができます。</dd> </dl> <h2 class="Documentation" id="CSS-Tutorials">CSS チュートリアル</h2> <h3 id="Introductory_level_2">入門レベル</h3> <dl> <dt><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></dt> <dd>CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。CSS の基本ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます：テキストを黒または赤にするにはどうすればいいですか？ そのような場所でコンテンツを画面に表示させるにはどうすればよいですか？ 背景画像と色を使ってウェブページをどのように飾るのですか？</dd> <dt><a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a></dt> <dd>CSS (Cascading Style Sheets) は、ウェブページのスタイルづけやレイアウトに使用されます。例えば、コンテンツのフォント、色、サイズ、間隔を変更したり、複数の段に分割したり、アニメーションやその他の装飾機能を追加したりすることができます。このモジュールでは、 CSS がどのように機能するか、どのような構文になっているか、そして HTML にスタイルを追加するためにどのように使い始めるか、といった基本的な内容で、 CSS マスターへの道を順番に始めます。</dd> </dl> <dl> <dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt> <dd> <p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a>の続きです。言語とその構文に慣れ、基本的な使用方法を身につけたところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターの種類、単位、サイズ調整、背景や境界線のスタイル、デバッグなどについて学びます。</p> <p class="summary">このモジュールの目的は、有能な CSS を書くためのツールキットを提供し、<dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイル付け</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、すべての基本的な理論を理解してもらうことです。</p> </dd> <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイル付け</a></dt> <dd>ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストのスタイル付けの基礎を確認します。ページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。</dd> <dt><a href="/ja/docs/Learn/CSS/Howto/CSS_FAQ">CSS に関するよくある質問</a></dt> <dd>初心者から寄せられるよくある質問とその回答です。</dd> </dl> <h3 id="Intermediate_level_2">中級レベル</h3> <dl> <dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt> <dd>この時点で、 CSS の基本、テキストスタイルの設定方法、コンテンツが内部にあるボックスのスタイルと操作方法については説明を終えています。今度は、ボックスを表示領域に関連して適切な場所に配置する方法を見てみましょう。必要な堰堤条件についてはすでに終えているので、 CSS のレイアウト、様々な display の設定、浮動 (float) と位置指定 (positioning) を含む従来のレイアウト方法、フレックスボックスのような新しいレイアウトツールなどについて詳しく調べることができます。</dd> <dt><strong><a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a></strong></dt> <dd>CSS の完全なリファレンスです。Firefox やその他のブラウザーの対応の詳細もあります。</dd> </dl> <dl> <dt><strong><a href="https://www.alistapart.com/articles/fluidgrids/" rel="external">流動グリッド</a></strong></dt> <dd>前からある植字用のグリッドを使いながら、ブラウザーのウィンドウに合わせて可変的にリサイズするレイアウトを設計することができます。</dd> <dt><strong><a href="https://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (英語)</strong></dt> <dd>CSS スキルを確認し、何を勉強すべきかを知ることができます。</dd> </dl> <h3 id="Advanced_level_2">上級レベル</h3> <dl> <dt><strong><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変換の使用</a></strong></dt> <dd>CSS を使って、回転、傾き、拡大、縮小、移動を行います。</dd> <dt><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a></dt> <dd>CSS3 草稿の仕様の一部である CSS トランジションでは、即時に変化させるのではなく、CSS のプロパティで時間的に連続して変化させることができます。</dd> </dl> <dl> <dt><a href="https://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face によるウェブフォント指定のクイックガイド</a></dt> <dd>CSS3 の @font-face 機能を使うと、ウェブ上にある独自の書体を使うことができます。使いやすく、フォントの操作、拡大縮小が可能です。</dd> <dt><a href="https://davidwalsh.name/starting-css" rel="external">CSS を書き始める</a></dt> <dd>簡潔で保守が容易、スケーラブルな CSS を書くためのツールや方法論の紹介です。</dd> </dl> <dl> <dt><a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas チュートリアル</a></dt> <dd>canvas 要素を使用するスクリプトを書いてグラフィックを描く方法を学ぶことができます。</dd> <dt><strong><a href="https://html5doctor.com/" rel="external">HTML5 Doctor</a></strong></dt> <dd>HTML5 をすぐに使うための記事があります。</dd> </dl> <h2 class="Documentation" id="JavaScript-Tutorials">Javascript チュートリアル</h2> <h3 id="Introductory_level_3">入門レベル</h3> <dl> <dt><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a></dt> <dd>最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な体験をしていただく前に「JavaScript とは何？」や「どのように見える？」や「何ができる？」といったような基本的な質問に答えます。その後 JavaScript を理解する重要な特徴、たとえば変数や文字列、数値、配列などについてお話します。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a></dt> <dd>このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでの勉強で詰め込み、とおりすぎてしまっているかもしれませんが、ここではすべて明示的に説明を行います。</dd> </dl> <dl> <dt><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript を始める</a></dt> <dd>JavaScript とは何か? 何の役に立つのかを学べます。</dd> <dt><strong><a href="https://www.codecademy.com/">Codecademy</a> </strong> (英語)</dt> <dd>Codecademy では簡単に JavaScript コーディングの方法を学べます。対話形式で学習でき、友人と一緒に進めることができます。</dd> <dt><a href="https://learn.freecodecamp.org/">freeCodeCamp</a> (英語)</dt> <dd>では、ウェブ開発のための様々な言語やフレームワークを教えています。<a href="https://freecodecamp.org/forum">フォーラム</a>、<a href="https://coderadio.freecodecamp.org">インターネットラジオ局</a>、<a href="https://freecodecamp.org/news">ブログ</a>もあります。</dd> </dl> <h3 id="Intermediate_level_3">中級レベル</h3> <dl> <dt><a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクトの紹介</a></dt> <dd>JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の上に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化する独自のオブジェクトを作成することもできます。 JavaScript のオブジェクト指向の性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、このモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見て、JSON のデータとその使い方を説明します。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアント側 Web API</a></dt> <dd>ウェブサイトやアプリケーションのためにクライアント側 JavaScript を書くとき、API (様々なブラウザーやサイトを動かしている OS 、さらに他のウェブサイトやサービスのデータを操作するインターフェイス) の使用が不可欠です。このモジュールでは、API とはどういったものかや開発の多くで使われる最もよくある API の使い方を調べられます。</dd> </dl> <dl> <dt><strong><a href="/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript">JavaScript 「再」入門</a></strong></dt> <dd>中級レベルの開発者向けの JavaScript プログラム言語復習用まとめです。</dd> <dt><strong><a href="https://eloquentjavascript.net/" rel="external">Eloquent JavaScript</a></strong> (英語)</dt> <dd>JavaScript の中級・上級の方法論への包括的ガイドです。</dd> <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (英語)</strong></dt> <dd>JavaScript の学習をすばやく正確に学びたいプログラマーや特定のトピックスを探したり、スキルを上げたいプログラマーのためのサイトです。</dd> <dt><a href="https://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (英語)</dt> <dd>JavaScript デザイン パターンの真髄に触れてみましょう。</dd> </dl> <h3 id="Advanced_level_3">上級レベル</h3> <dl> <dt><a href="/ja/docs/Web/JavaScript/Guide">JavaScript ガイド</a></dt> <dd>初心者から上級者まですべてのレベル向けの分かりやすい JavaScript ガイドです。定期的に更新されています。</dd> <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (英語)</strong></dt> <dd>このシリーズは、JavaScript のコアなメカニズムを深める本です。</dd> <dt><strong><a href="https://bonsaiden.github.io/JavaScript-Garden/" rel="external">JavaScript Garden</a> (英語)</strong></dt> <dd>JavaScript で最もはまりやすい部分をドキュメント化したものです。</dd> <dt><strong><a href="https://exploringjs.com/es6/" rel="external">Exploring ES6</a> (英語)</strong></dt> <dd>ECMAScript 2015 の信頼できる詳しい情報元です。</dd> </dl> <dl> <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">JavaScript Patterns</a> (英語)</strong></dt> <dd>Javascript のパターンと不適切な例であるアンチパターンを集めたものです。関数パターン、jQuery パターン、jQuery プラグイン パターン、デザイン パターン、よくあるパターン、リテラルおよびコンストラクター パターン、オブジェクト生成パターン、コード再利用パターン、DOM をカバーしています。</dd> <dt><strong><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></strong> (英語)</dt> <dd>モダンブラウザーのエンジンやページレンダリングなどの違いが詳しく研究され、説明された論文です。</dd> <dt><a href="https://github.com/bolshchikov/js-must-watch">JavaScript Videos</a> (GitHub)</dt> <dd>見ておきたい JavaScript についての映像を集めたものです。</dd> </dl> <h3 id="Extension_Development">拡張機能の開発</h3> <dl> <dt><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a></dt> <dd>WebExtensions は、ブラウザーのアドオンを開発するための、ブラウザー間互換システムです。多くの部分において、このシステムは Google Chrome や Opera が対応している<a class="external-icon external" href="https://developer.chrome.com/extensions">拡張機能 API</a> と大体において互換性があります。これらのブラウザー用に書かれたアドオンは大抵の場合、 Firefox や <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> でも <a href="https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/">ほんの少し変更を加えるだけで</a>、動かすことができます。この API は<a href="/ja/docs/Mozilla/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> とも完全な互換性があります。</dd> </dl>