From 705e0145550a773b5d1bea95b8c2b0e490b6766a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 12 Aug 2021 12:25:55 +0900 Subject: Web/Tutorials を更新 (#1883) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/03 時点の英語版に同期 --- files/ja/web/tutorials/index.html | 213 +++++++++++++++----------------------- 1 file changed, 82 insertions(+), 131 deletions(-) (limited to 'files') diff --git a/files/ja/web/tutorials/index.html b/files/ja/web/tutorials/index.html index 16f3ae2e10..4cd2d73e47 100644 --- a/files/ja/web/tutorials/index.html +++ b/files/ja/web/tutorials/index.html @@ -7,245 +7,196 @@ tags: - HTML - JavaScript - MDN - - Web 記事 - - Web 開発 + - ウェブ記事 + - ウェブ開発 - ガイド - コード - チュートリアル - - ブラウザ + - ブラウザー - 初心者 translation_of: Web/Tutorials --- -

このページには、さまざまなチュートリアルとトレーニング用教材へのリンクがあります。これから始める初心者の方や基礎を勉強中の方、そして Web 開発のベテランの方にとっても、ベストプラクティスを学習するのに役に立つ教材が見つかります。

+

このページには、さまざまなチュートリアルとトレーニング用教材へのリンクがあります。これからウェブ開発を始めようとしている方、基礎を学ぼうとしている方、ウェブ開発に慣れている方など、ベストプラクティスを学習するのに役立つ教材をここで見つけることができます。

-

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

+

これらの教材は、先見の明のある企業やウェブ開発者が、オープン標準やウェブ開発のベストプラクティスを支持して、クリエティブ・コモンズなどのオープンコンテンツライセンスに準じて提供や翻訳を許可しています。

-

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

+

ウェブについて全くの初心者の人たちへ

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

HTML チュートリアル

+

HTML チュートリアル

-

入門レベル

+

入門レベル

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

中級レベル

+

中級レベル

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

上級レベル

+

上級レベル

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

CSS チュートリアル

+
+
読み込みが速い HTML ページを作成するヒント
+
ウェブページを最適化することでサイト表示の待ち時間を短くし、サーバーとインターネット接続経路の負荷を軽減する方法を学ぶことができます。
+
-

入門レベル

+

CSS チュートリアル

+ +

入門レベル

-
-
CSS の基本
-
CSS (Cascading Style Sheets) は、Web ページのスタイルを設定するコードです。CSS の基本ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます：テキストを黒または赤にするにはどうすればいいですか？ そのような場所でコンテンツを画面に表示させるにはどうすればよいですか？ 背景画像と色を使って Web ページをどのように飾るのですか？
-
CSS 入門
-
このモジュールで、CSS 習得の道のりを開始できます。セレクター、プロパティ、CSS の記述ルール、CSS を HTML に適用する方法、CSS で長さや色やその他の単位を指定する方法、カスケードと継承、ボックスモデルの基本、CSS のデバッグが含まれています。
+
CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。CSS の基本ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます：テキストを黒または赤にするにはどうすればいいですか？ そのような場所でコンテンツを画面に表示させるにはどうすればよいですか？ 背景画像と色を使ってウェブページをどのように飾るのですか？
+
CSS 入門
+
CSS (Cascading Style Sheets) は、ウェブページのスタイルづけやレイアウトに使用されます。例えば、コンテンツのフォント、色、サイズ、間隔を変更したり、複数の段に分割したり、アニメーションやその他の装飾機能を追加したりすることができます。このモジュールでは、 CSS がどのように機能するか、どのような構文になっているか、そして HTML にスタイルを追加するためにどのように使い始めるか、といった基本的な内容で、 CSS マスターへの道を順番に始めます。
-
-
-
ボックスのスタイリング
-
次に、ボックスのスタイリングを見てみましょう。これは Web ページのレイアウトを行う基本的なステップの 1 つです。このモジュールでは、ボックスモデルの padding、border、margin の設定や、カスタム背景色や画像や柄、ボックスのフィルターや影を描くなどの装飾機能による、ボックスレイアウトの制御をおさらいします。
-
テキストのスタイリング
-
ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストスタイリングの基礎を確認します。あなたのページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。
-
CSS に関する一般的な質問
-
初心者から寄せられる一般的な質問とその回答です。
+
CSS の構成要素
+
+

このモジュールは CSS 入門の続きです。言語とその構文に慣れ、基本的な使用方法を身につけたところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターの種類、単位、サイズ調整、背景や境界線のスタイル、デバッグなどについて学びます。

+ +

このモジュールの目的は、有能な CSS を書くためのツールキットを提供し、

テキストのスタイル付けや CSS レイアウトなどのより具体的な分野に進む前に、すべての基本的な理論を理解してもらうことです。

+ +
テキストのスタイル付け
+
ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストのスタイル付けの基礎を確認します。ページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。
+
CSS に関するよくある質問
+
初心者から寄せられるよくある質問とその回答です。
-
-
-

中級レベル

+

中級レベル

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

上級レベル

+

上級レベル

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

Javascript チュートリアル

+

Javascript チュートリアル

-

入門レベル

+

入門レベル

-
-
JavaScript の第一歩
最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な体験をしていただく前に「JavaScript とは何？」や「どのように見える？」や「何ができる？」といったような基本的な質問に答えます。その後 JavaScript を理解する重要な特徴、たとえば変数や文字列、数値、配列などについてお話します。
JavaScript の構成要素
-
このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでの勉強で詰め込み、とおりすぎてしまっているかもしれませんが、ここではすべて明示的に説明を行います。
+
このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでの勉強で詰め込み、とおりすぎてしまっているかもしれませんが、ここではすべて明示的に説明を行います。
-
-
JavaScript を始める
JavaScript とは何か? 何の役に立つのかを学べます。
-
コードアカデミー (Codecademy)
+
Codecademy  (英語)
Codecademy では簡単に JavaScript コーディングの方法を学べます。対話形式で学習でき、友人と一緒に進めることができます。
+
freeCodeCamp (英語)
+
では、ウェブ開発のための様々な言語やフレームワークを教えています。フォーラム、インターネットラジオ局、ブログもあります。
-
-
-

中級レベル

+

中級レベル

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

上級レベル

+

上級レベル

-
-
-
JavaScript ガイド
+
JavaScript ガイド
初心者から上級者まですべてのレベル向けの分かりやすい JavaScript ガイドです。定期的に更新されています。
-
You Don't Know JS (Kyle Simpson)
+
You Don't Know JS (英語)
このシリーズは、JavaScript のコアなメカニズムを深める本です。
-
JavaScript Garden
+
JavaScript Garden (英語)
JavaScript で最もはまりやすい部分をドキュメント化したものです。
-
Exploring ES6 (Dr. Axel Rauschmayer)
+
Exploring ES6 (英語)
ECMAScript 2015 の信頼できる詳しい情報元です。
-
-
-
JavaScript Patterns
-
Javascript のパターンと不適切な例であるアンチパターンを集めたものです。関数パターン、jQuery パターン、jQuery プラグイン パターン、デザイン パターン、一般的なパターン、リテラルおよびコンストラクター パターン、オブジェクト生成パターン、コード再利用パターン、DOM をカバーしています。
-
How browsers work
+
JavaScript Patterns (英語)
+
Javascript のパターンと不適切な例であるアンチパターンを集めたものです。関数パターン、jQuery パターン、jQuery プラグイン パターン、デザイン パターン、よくあるパターン、リテラルおよびコンストラクター パターン、オブジェクト生成パターン、コード再利用パターン、DOM をカバーしています。
+
How browsers work (英語)
モダンブラウザーのエンジンやページレンダリングなどの違いが詳しく研究され、説明された論文です。
JavaScript Videos (GitHub)
見ておきたい JavaScript についての映像を集めたものです。
-
-
-

拡張機能の開発

+

拡張機能の開発

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