From 3c2908eafe5aacd2b98c1b4e23a8da28a120dbeb Mon Sep 17 00:00:00 2001 From: x270 <42441861+x270@users.noreply.github.com> Date: Thu, 22 Apr 2021 00:11:56 +0900 Subject: /Learn/CSS の更新と付随する修正 (#601) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Docs/Learn/CSS の更新・修正 英語版 Last modified: Apr 14, 2021 と同期。 ・未翻訳箇所の追加。 「フロントエンドのウェブ開発者になりたいですか?」はdocs/Learn/index.htmlの同項目をコピーし、 「Web 開発者」を「ウェブ開発者」に修正したもの。 ・「デバック」を「デバッグ」に修正。 ・アルファベット前後の半角スペースを見直し。 * Update index.html Web 開発者 → ウェブ開発者 https://developer.mozilla.org/ja/docs/Learn/CSS への同項目追加時の修正と同期。 * Update index.html Web開発者→ウェブ開発者への修正。 英数字前後の半角スペース調整。 * Update index.html デバックをデバッグに修正 --- files/ja/learn/css/index.html | 34 ++++++++---- files/ja/learn/front-end_web_developer/index.html | 60 +++++++++++----------- files/ja/learn/index.html | 2 +- .../javascript/objects/inheritance/index.html | 2 +- 4 files changed, 56 insertions(+), 42 deletions(-) diff --git a/files/ja/learn/css/index.html b/files/ja/learn/css/index.html index 58897d3289..9c04c66285 100644 --- a/files/ja/learn/css/index.html +++ b/files/ja/learn/css/index.html @@ -15,11 +15,19 @@ translation_of: Learn/CSS ---
{{LearnSidebar}}
-

Cascading Style Sheets — {{glossary("CSS")}} — は{{glossary("HTML")}} を学んだら、まず次に勉強すべき技術です。 HTML はコンテンツの構造と{{glossary("Semantics","意味論")}}を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。 例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。

+

Cascading Style Sheets — {{glossary("CSS")}} — は{{glossary("HTML")}} を学んだら、まず次に勉強すべき技術です。HTML はコンテンツの構造と{{glossary("Semantics","意味論")}}を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。

+ +
+

フロントエンドのウェブ開発者になりたいですか?

+ +

目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。

+ +

開始する

+

学習の道のり

-

CSS に挑戦する前に HTML の基礎を学習しておくべきです。 まず、HTML 入門 に取り組むことを推奨します — その後に、以下のことについて学んでください:

+

CSS に挑戦する前に HTML の基礎を学習しておくべきです。まず、HTML 入門 に取り組むことを推奨します — その後に、以下のことについて学んでください:

-

HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。 なぜなら、CSS を理解すると HTMLを勉強するのが更に興味深くまたもっと楽しくなり、またHTML を知ることなくして CSS を学習することはできないからです。

+

HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。なぜなら、CSS を理解すると HTML を勉強するのが更に興味深くまたもっと楽しくなり、また HTML を知ることなくして CSS を学習することはできないからです。

またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 基本的なソフトウェアをインストールする に詳しく書かれているような基本的な環境を持っており、 ファイルの扱い に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集であるウェブ入門のなかに入っています。

-

このトピックに取り組む前に ウェブ入門 を読むと良いでしょう。 ただ、このウェブ入門のなかのCSS basicsの記事で紹介されていることの多くは、CSS 入門 でもカバーされているのでこれは必須ではありません。

+

このトピックに取り組む前に ウェブ入門 を読むと良いでしょう。ただ、このウェブ入門のなかのCSS basicsの記事で紹介されていることの多くは、CSS 入門 でもカバーされているのでこれは必須ではありません。

モジュール

@@ -40,29 +48,35 @@ translation_of: Learn/CSS
CSS の第一歩
-
CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは、CSSのはたらきからCSSの構文、そしてそれを使ってHTMLをどうデザインしていくのかといったCSSをマスターするための入門編を丁寧に解説します。
+
CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは、CSS のはたらきから CSS の構文、そしてそれを使ってHTMLをどうデザインしていくのかといった CSS をマスターするための入門編を丁寧に解説します。
CSS の構成要素
-

このモジュールは CSS の第一歩から派生しています。CSSにちょっと慣れて簡単な経験も積んだところで、それをもう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線についてやデバックの方法などを見ていきます。

+

このモジュールは CSS の第一歩から派生しています。CSS にちょっと慣れて簡単な経験も積んだところで、それをもう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線についてやデバッグの方法などを見ていきます。

ここでの目的は、テキストの装飾や CSS レイアウトなどのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。

テキストの装飾
-
CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で最もよく使うことの一つです。 ここでは、フォント、太字、イタリック、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。
+
CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で最もよく使うことの一つです。ここでは、フォント、太字、イタリック、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。
CSS レイアウト
-
ここまでで既に CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートを基準にしてボックスを適切な場所に配置する方法、および互いの配置方法を検討します。 必要な前提知識はカバーされているので、奥深いCSSレイアウトの世界に飛び込むことができます。さまざまな display の設定、flexboxのようなモダンなやり方から、CSS grid、positioning、そしてまだまだ知っておきたいと思うかもしれないレガシーなテクニックまでを概観していきます。
+
ここまでで既に CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートを基準にしてボックスを適切な場所に配置する方法、および互いの配置方法を検討します。 必要な前提知識はカバーされているので、奥深い CSS レイアウトの世界に飛び込むことができます。さまざまな display の設定、flexboxのようなモダンなやり方から、CSS grid、positioning、そしてまだまだ知っておきたいと思うかもしれないレガシーなテクニックまでを概観していきます。

CSS でよくある問題を解決するには

CSS を使ってよくある問題を解決する には、ウェブページを作成する際よく発生する問題を CSS を使って解決する方法へのリンクがまとめられています。

-

最初から、HTML 要素とその背景に色を付けたり、要素の大きさや形や位置を変えたり、要素のボーダー(境界線)を定義することがもっとも多かったでしょう。 しかし CSS の基本をしっかり理解していれば、できないことはそれほど多くありません。 CSS学習のなかで最も嬉しいことの1つは、一度基礎を理解してしまうと、やり方が実はまだよくわかっていなくても、できることとできないことに対して大抵はかなり良い感触が得られることです!

+

最初から、HTML 要素とその背景に色を付けたり、要素の大きさや形や位置を変えたり、要素のボーダー(境界線)を定義することがもっとも多かったでしょう。 しかし CSS の基本をしっかり理解していれば、できないことはそれほど多くありません。 CSS 学習のなかで最も嬉しいことの 1 つは、一度基礎を理解してしまうと、やり方が実はまだよくわかっていなくても、できることとできないことに対して大抵はかなり良い感触が得られることです!

+ +

"CSS は奇妙です"

+ +

CSS は、ほとんどのプログラミング言語や設計ツールとは少し異なる動作をします。なぜ、それがそのように動作するのか? 次のビデオでは、CSS がそのように動作する理由と、そのように進化した理由について、Miriam Suzanne が役に立つ説明をしています。

+ +

{{EmbedYouTube("aHUtMbJw8iA")}}

関連情報

MDN での CSS
-
MDN での CSS ドキュメントの主な出発点です。 CSS 言語のすべての機能を詳しく説明したリファレンスドキュメントがあります。 プロパティがとりうるすべての値を知りたいですか? ここは良い場所です。
+
MDN での CSS ドキュメントの主な出発点です。 CSS 言語のすべての機能を詳しく説明したリファレンスドキュメントがあります。プロパティがとりうるすべての値を知りたいですか? ここは良い場所です。
diff --git a/files/ja/learn/front-end_web_developer/index.html b/files/ja/learn/front-end_web_developer/index.html index 4b0649573a..4889d72df8 100644 --- a/files/ja/learn/front-end_web_developer/index.html +++ b/files/ja/learn/front-end_web_developer/index.html @@ -1,13 +1,13 @@ --- -title: フロントエンド Web 開発者 +title: フロントエンドウェブ開発者 slug: Learn/Front-end_web_developer translation_of: Learn/Front-end_web_developer ---

{{learnsidebar}}

-

フロントエンドWeb開発パスへようこそ!

+

フロントエンドウェブ開発パスへようこそ!

-

このパスでは、フロントエンドWeb開発者になるために理解すべき全ての事を体系的なコースとして提供しています。 それぞれのセクションに取り組み、どんどん新しいスキルを習得(または、既存のスキルをより磨いて)して下さい。それぞれのセクションには、練習とテストがあり理解を確かめてから次のセクションに進んで下さい。

+

このパスでは、フロントエンドウェブ開発者になるために理解すべき全ての事を体系的なコースとして提供しています。 それぞれのセクションに取り組み、どんどん新しいスキルを習得(または、既存のスキルをより磨いて)して下さい。それぞれのセクションには、練習とテストがあり理解を確かめてから次のセクションに進んで下さい。

扱っているトピック

@@ -15,24 +15,24 @@ translation_of: Learn/Front-end_web_developer -

それそれのセクションに順番どおり取り組んでも良いですが、 内容が独立しているため、もしHTMLを既に知っているのであれば、一つ飛ばしてCSSのセクションに取り組んでも良いでしょう。

+

それそれのセクションに順番どおり取り組んでも良いですが、 内容が独立しているため、もし HTML を既に知っているのであれば、1 つ飛ばして CSS のセクションに取り組んでも良いでしょう。

前提知識

-

このコースを始めるにあたり前提知識は必要ありません。必要なのはモダンなブラウザが動作するコンピュータ、インターネット接続 、学びたいという意欲だけです。

+

このコースを始めるにあたり前提知識は必要ありません。必要なのはモダンなブラウザが動作するコンピュータ、インターネット接続、学びたいという意欲だけです。

-

フロントエンドWeb開発が自分に適しているかわからなく、易しい説明が必要な場合はこの時間がかかる完全なコースを始める前に、Webサイト学習の最初のステップを読んでください。

+

フロントエンドウェブ開発が自分に適しているかわからなく、易しい説明が必要な場合はこの時間がかかる完全なコースを始める前に、ウェブサイト学習の最初のステップを読んでください。

学習につまずいたら

-

私たちは、フロントエンドWeb開発の学習が少しでもやさしくなるよう努力してきました。それでも、何か理解できないことあったり、コードが動かなかったりして、学習につまずくことがあるでしょう。

+

私たちは、フロントエンドウェブ開発の学習が少しでもやさしくなるよう努力してきました。それでも、何か理解できないことあったり、コードが動かなかったりして、学習につまずくことがあるでしょう。

落ち着いて下さい。プロの開発者でも初心者でも、誰にだって学習でつまづくことはあります。学習とヘルプ(English) では情報を検索する際のヒントなど一連の有益な情報を提供しています。依然として学習につまずいているなら Discourse forum で気軽に質問して見て下さい。

@@ -50,14 +50,14 @@ translation_of: Learn/Front-end_web_developer

学習を進めるための条件

-

コースのこの部分には評価はありません。 ただし、スキップしないように注意してください。 コースの後半で演習を行う準備を整えておくことが重要です。

+

コースのこの部分には評価はありません。ただし、スキップしないように注意してください。コースの後半で演習を行う準備を整えておくことが重要です。

中心となるモジュール

HTML(意味付けと構造)

@@ -66,18 +66,18 @@ translation_of: Learn/Front-end_web_developer

前提知識

-

基本的なコンピュータリテラシーと基本的なWeb開発環境以外は何もありません。

+

基本的なコンピュータリテラシーと基本的なウェブ開発環境以外は何もありません。

学習を進めるための条件

-

それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです。

+

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです。

中心となるモジュール

CSS(スタイルとレイアウト)

@@ -86,11 +86,11 @@ translation_of: Learn/Front-end_web_developer

前提知識

-

CSSの学習を始める前にHTMLの基本的な知識を身につけておくことを推奨します。少なくともHTMLの紹介は読んでおきましょう。

+

CSS の学習を始める前に HTML の基本的な知識を身につけておくことを推奨します。少なくとも HTML の紹介 は読んでおきましょう。

学習を進めるための条件

-

それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです。

+

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです。

中心となるモジュール

@@ -117,53 +117,53 @@ translation_of: Learn/Front-end_web_developer

学習を進めるための条件

-

それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです。

+

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです。

中心となるモジュール

-

Web フォーム(ユーザーのデータを扱う)

+

ウェブフォーム(ユーザーのデータを扱う)

所要時間: 40–50 時間

前提知識

-

フォームを作るにはHTML、CSS、JavaScriptの知識が必要です。フォームの操作は複雑であるため、これは専用のトピックです。

+

フォームを作るには HTML、CSS、JavaScript の知識が必要です。フォームの操作は複雑であるため、これは専用のトピックです。

学習を進めるための条件

-

それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです。

+

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです。

中心となるモジュール

-

すべての人のためにWebを作る

+

すべての人のためにウェブを作る

所要時間: 60–75 時間

前提知識

-

このセクションを実行する前に、HTML、CSS、およびJavaScriptを理解しておくことをお勧めします。 テクニックと最善慣行の多くは、複数のテクノロジーに触れています。

+

このセクションを実行する前に、HTML、CSS、および JavaScript を理解しておくことをお勧めします。テクニックと最善の慣行の多くは、複数のテクノロジーに触れています。

学習を進めるための条件

-

それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです。

+

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです。

中心となるモジュール

モダンなツール

@@ -172,7 +172,7 @@ translation_of: Learn/Front-end_web_developer

前提知識

-

説明したツールはこれらのテクノロジーの多くと連携して機能するため、このセクションを実行する前にHTML、CSS、およびJavaScriptを理解しておくことをお勧めします。

+

説明したツールはこれらのテクノロジーの多くと連携して機能するため、このセクションを実行する前にHTML、CSS、および JavaScript を理解しておくことをお勧めします。

学習を進めるための条件

diff --git a/files/ja/learn/index.html b/files/ja/learn/index.html index c5f49319a8..8980815a61 100644 --- a/files/ja/learn/index.html +++ b/files/ja/learn/index.html @@ -25,7 +25,7 @@ translation_of: Learn

カバーしてほしいトピックや不足していると感じたトピックについて質問がある場合は、Discourse フォーラムにメッセージを送ってください。

-

フロントエンドの Web 開発者になりたいですか?

+

フロントエンドのウェブ開発者になりたいですか?

目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。

diff --git a/files/ja/learn/javascript/objects/inheritance/index.html b/files/ja/learn/javascript/objects/inheritance/index.html index fefcbaa131..c408100d19 100644 --- a/files/ja/learn/javascript/objects/inheritance/index.html +++ b/files/ja/learn/javascript/objects/inheritance/index.html @@ -371,7 +371,7 @@ console.log<

注記: プロトタイプチェーンなどを使って JavaScript が動作する方法のために、オブジェクト間での機能の共有をしばしば 移譲 と呼ぶ事があります。特化オブジェクトは汎化オブジェクトタイプから機能的に移譲されています。

-

継承を使用している時、継承をやたら多いレベルに行わないように、メソッドとプロパティをどこに定義したかを注意深く追跡し続けるようにアドバイスされるでしょう。組み込みブラウザーのオブジェクトのプロトタイプを一時的に変更するコードを書き始めることは可能ですが、実際に良い理由がないのであれば、そうすべきではありません。過剰な継承は終わりない混乱や、そんなコードをデバックする時は終わりない痛みに繋がりかねません。

+

継承を使用している時、継承をやたら多いレベルに行わないように、メソッドとプロパティをどこに定義したかを注意深く追跡し続けるようにアドバイスされるでしょう。組み込みブラウザーのオブジェクトのプロトタイプを一時的に変更するコードを書き始めることは可能ですが、実際に良い理由がないのであれば、そうすべきではありません。過剰な継承は終わりない混乱や、そんなコードをデバッグする時は終わりない痛みに繋がりかねません。

究極的には、オブジェクトは関数やループのような、自身の固有の役割や長所を活かした、コードの再利用の単なる別の形でもあります。もし関連のある変数や関数の一団を作成していることに気付き、それらすべてを追跡して適切にパッケージ化したいのであれば、オブジェクトは良いアイデアです。オブジェクトはまた、ある所から別の所にデータの集合を渡したい場合にも大変便利です。これらの事柄の両方がコンストラクタや継承を使用する事なく達成できます。もしオブジェクトの単一のインスタンスが必要なだけであれば、オブジェクトリテラルを使用するのが多分より良く、確実に継承は必要ないでしょう。

-- cgit v1.2.3-54-g00ecf