path: root/files/ja/web/tutorials/index.html

---
title: チュートリアル
slug: Web/Tutorials
tags:
  - CSS
  - GitHub
  - HTML
  - JavaScript
  - MDN
  - Web 記事
  - Web 開発
  - ガイド
  - コード
  - チュートリアル
  - ブラウザ
  - 初心者
translation_of: Web/Tutorials
---
<p>このページには、さまざまなチュートリアルとトレーニング用教材へのリンクがあります。これから始める初心者の方や基礎を勉強中の方、そして Web 開発のベテランの方にとっても、ベストプラクティスを学習するのに役に立つ教材が見つかります。</p>

<p>これらの教材は、オープン標準や Web 開発のベストプラクティスを支持する、将来を見据えた先見の明のある企業やWeb 開発者が、クリエティブ・コモンズなどのオープンコンテントライセンスに準じて作成したもので、翻訳物が提供されています。もしそうでない場合は、他の人が翻訳することが許可されています。</p>

<h2 id="For_complete_beginners_to_the_Web" name="For_complete_beginners_to_the_Web">Web について全くの初心者の人たちへ</h2>

<dl>
 <dt><a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a></dt>
 <dd><em>Web 入門</em>は、実用的な Web 開発の入門シリーズです。まずはじめに、簡単な Web ページを作るのに必要なツールを準備します。そして、簡単なコードを書いたら、それを実際に Web に公開します。</dd>
</dl>

<h2 class="Documentation" id="Documentation" name="Documentation">HTML チュートリアル</h2>

<h3 id="Introductory_level" name="Introductory_level">入門レベル</h3>

<div class="row topicpage-table">
<div class="section">
<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/HTML/Element">MDN HTML 要素リファレンス</a></strong></dt>
 <dd>HTML 要素の包括的なリファレンスです。ブラウザーごとのサポート状況も分かります。</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">HTML を使用したシンプルなWeb ページの作成</a> (The Blog Starter)</strong></dt>
 <dd>この HTML ガイドは、初心者向けに HTML5 タグを含めた、一般的なタグを紹介しています。また、段階ごとに基本的なWeb ページを作成するためのコード例を載せています。</dd>
 <dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML チャレンジ</a> (Wikiversity)</strong></dt>
 <dd>問題に挑戦し HTML スキル (例: &lt;h2&gt; か &lt;strong&gt; のどちらをを使うべきか) を磨いて下さい。マークアップが意味のあるものになっているかがポイントです。</dd>
</dl>
</div>
</div>

<h3 id="Intermediate_level" name="Intermediate_level">中級レベル</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt>
 <dd>このモジュールでは、Web ページに、HTML をどのようにして用いればマルチメディアを含むことができるかについて学びます。また、画像を挿入するためのさまざまな方法や、どのようにして動画・音声、そして他のWeb ページ全体を挿入するのかについても触れています。</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><a href="/ja/docs/Learn/HTML/Tables">HTML 表</a></dt>
 <dd>表の形のデータを Web ページにおいて、理解可能な形式、そしてアクセシビリティに配慮した形式で表現することは少し難しいでしょう。このモジュールは、基本的な table のマークアップ、そしてさらに複雑な機能(たとえば注や要約を付加したり)を扱います。</dd>
</dl>
</div>
</div>

<h3 id="Advanced_level" name="Advanced_level">上級レベル</h3>

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

<h2 class="Documentation" id="Documentation" name="Documentation">CSS チュートリアル</h2>

<h3 id="Introductory_level_2" name="Introductory_level_2">入門レベル</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></dt>
 <dd>CSS (Cascading Style Sheets) は、Web ページのスタイルを設定するコードです。CSS の基本ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます：テキストを黒または赤にするにはどうすればいいですか？ そのような場所でコンテンツを画面に表示させるにはどうすればよいですか？ 背景画像と色を使って Web ページをどのように飾るのですか？</dd>
 <dt><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a></dt>
 <dd>このモジュールで、CSS 習得の道のりを開始できます。セレクター、プロパティ、CSS の記述ルール、CSS を HTML に適用する方法、CSS で長さや色やその他の単位を指定する方法、カスケードと継承、ボックスモデルの基本、CSS のデバッグが含まれています。</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスのスタイリング</a></dt>
 <dd>次に、ボックスのスタイリングを見てみましょう。これは Web ページのレイアウトを行う基本的なステップの 1 つです。このモジュールでは、ボックスモデルの padding、border、margin の設定や、カスタム背景色や画像や柄、ボックスのフィルターや影を描くなどの装飾機能による、ボックスレイアウトの制御をおさらいします。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイリング</a></dt>
 <dd>ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストスタイリングの基礎を確認します。あなたのページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。</dd>
 <dt><a href="/ja/docs/Web/CSS/Common_CSS_Questions">CSS に関する一般的な質問</a></dt>
 <dd>初心者から寄せられる一般的な質問とその回答です。</dd>
</dl>
</div>
</div>

<h3 id="Intermediate_level_2" name="Intermediate_level_2">中級レベル</h3>

<div class="row topicpage-table" style="width: 100%;">
<div class="section">
<dl>
 <dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt>
 <dd>この時点で、CSS の基本、テキストスタイルの設定方法、コンテンツが内部にあるボックスのスタイルと操作方法については説明を終えています。今度は、ボックスを表示領域に関連して適切な場所に配置する方法を見てみましょう。必要な堰堤条件についてはすでに終えているので、CSS のレイアウト、様々なディスプレイ設定、float と positioning を含む従来のレイアウト方法、flexbox のような新しいレイアウトツールなどについて詳しく調べることができます。</dd>
 <dt><strong><a href="/ja/docs/CSS/CSS_Reference">CSS リファレンス</a></strong></dt>
 <dd>CSS の完全なリファレンス。Firefox やその他のブラウザーの対応の詳細もあります。</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">流動グリッド</a> (A List Apart)</strong></dt>
 <dd>前からある印刷用のグリッドを使いながら、ブラウザーのウィンドウに合わせて可変的にリサイズするレイアウトを設計することができます。</dd>
 <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS チャレンジ</a> (Wikiversity)</strong></dt>
 <dd>CSS スキルを確認し、何を勉強すべきかを知ることができます。</dd>
</dl>
</div>
</div>

<h3 id="Advanced_level_2" name="Advanced_level_2">上級レベル</h3>

<div class="row topicpage-table" style="width: 100%;">
<div class="section">
<dl>
 <dt><a href="/ja/docs/CSS/Using_CSS_transforms">CSS による変形処理を使う</a></dt>
 <dd>CSS を使って、回転、傾き、拡大、縮小、移動を行います。</dd>
 <dt><a href="/ja/docs/CSS/CSS_transitions">CSS トランジション</a></dt>
 <dd>CSS3 ドラフトの仕様の一部である CSS トランジションでは、即時に変化させるのではなく、CSS のプロパティで時間的に連続して変化させることができます。</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face による Web フォント指定のクイックガイド</a> (HTML5 Rocks)</dt>
 <dd>CSS3 の @font-face 機能を使うとWeb 上にあるカスタム字体を使うことができます。使いやすく、フォントの操作、拡大縮小が可能です。</dd>
 <dt><a href="http://davidwalsh.name/starting-css" rel="external">CSS を書き初める</a> (David Walsh)</dt>
 <dd>簡潔で保守が容易、スケーラブルな CSS を書くためのツールや方法論の紹介です。</dd>
</dl>
</div>
</div>

<div class="section">
<dl>
 <dt><a href="/ja/docs/Canvas_tutorial">Canvas チュートリアル</a></dt>
 <dd>canvas 要素を使用するスクリプトを書いてグラフィックを描く方法を学ぶことができます。</dd>
 <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt>
 <dd>HTML5 をすぐに使うための記事があります。</dd>
</dl>
</div>

<h2 class="Documentation" id="Documentation" name="Documentation">Javascript チュートリアル</h2>

<h3 id="Introductory_level_3" name="Introductory_level_3">入門レベル</h3>

<div class="row topicpage-table">
<div class="section">
<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><span id="result_box" lang="ja"><span>このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでの勉強で詰め込み、とおりすぎてしまっているかもしれませんが、ここではすべて明示的に説明を行います。</span></span></dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript を始める</a></dt>
 <dd>JavaScript とは何か? 何の役に立つのかを学べます。</dd>
 <dt><a href="http://www.codecademy.com/">コードアカデミー</a> (Codecademy)</dt>
 <dd>Codecademy では簡単に JavaScript コーディングの方法を学べます。対話形式で学習でき、友人と一緒に進めることができます。</dd>
</dl>
</div>
</div>

<h3 id="Intermediate_level_3" name="Intermediate_level_3">中級レベル</h3>

<div class="row topicpage-table">
<div class="section">
<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>Web サイトやアプリケーションのためにクライアント側 JavaScript を書くとき、API (異なるブラウザーやサイトを動かしている OS 、さらに他の Web サイトやサービスのデータを操作するインターフェイス) の使用が不可欠です。このモジュールでは、API とはどういったものかや開発の多くで使われる最も一般的な API の使い方を調べられます。</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="/ja/docs/A_re-introduction_to_JavaScript">JavaScript 再入門</a></strong></dt>
 <dd>中級レベルの開発者向けの JavaScript プログラム言語復習用まとめです。</dd>
 <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">表現力のある JavaScript</a></dt>
 <dd>中級・上級 JavaScript 方法論への包括的ガイドです。</dd>
 <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd>JavaScript の学習をすばやく正確に学びたいプログラマーや特定のトピックスを探したり、スキルを上げたいプログラマーのためのサイトです。</dd>
 <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt>
 <dd>JavaScript デザイン パターンの真髄に触れてみましょう。</dd>
</dl>
</div>
</div>

<h3 id="Advanced_level_3" name="Advanced_level_3">上級レベル</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="/ja/docs/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> (Kyle Simpson)</strong></dt>
 <dd>このシリーズは、JavaScript のコアなメカニズムを深める本です。</dd>
 <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt>
 <dd>JavaScript で最もはまりやすい部分をドキュメント化したものです。</dd>
 <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd>ECMAScript 2015 の信頼できる詳しい情報元です。</dd>
</dl>
</div>

<div class="section">
<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="http://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>
</div>
</div>

<h3 id="Extension_Development" name="Extension_Development">拡張機能の開発</h3>

<div class="row topicpage-table" style="width: 100%;">
<div class="section">
<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">extension API</a> と互換性があります。これらのブラウザー用に書かれたアドオンは、大抵の場合、<a href="/ja/Add-ons/WebExtensions/Porting_from_Google_Chrome">ほんの少し変更を加えるだけで</a>、Firefox や <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> でも動かすことができます。この API は<a href="/ja/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> とも完全な互換性があります。</dd>
</dl>
</div>
</div>