2024/03/05 時点の英語版に基づき更新

files/ja/learn/css/index.md

@@ -1,33 +1,23 @@
 ---
-title: CSS
+title: CSS を用いた HTML のスタイル設定を学ぶ
 slug: Learn/CSS
+l10n:
+  sourceCommit: 26e2f9883e0e73def04c0e86fec6da3ec42e66b3
 ---
 
 {{LearnSidebar}}
 
-Cascading Style Sheets — {{glossary("CSS")}} — は{{glossary("HTML")}} を学んだら、まず次に勉強すべき技術です。HTML はコンテンツの構造と{{glossary("Semantics","意味論")}}を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。
+Cascading Style Sheets — {{glossary("CSS")}} — は {{glossary("HTML")}} を学んだ後に勉強すべき技術です。 HTML はコンテンツの構造と{{glossary("Semantics","意味づけ")}}を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばコンテンツのフォント、色、サイズ、余白を変更したり、段組みに分割したり、アニメーションやその他の装飾機能を追加するのに利用できます。
 
-> [!CALLOUT]
->
-> #### フロントエンドのウェブ開発者になりたいですか？
->
-> ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。
->
-> [**始めましょう**](/ja/docs/Learn/Front-end_web_developer)
-
-## 学習の道のり
+## 前提知識
 
 CSS に挑戦する前に HTML の基礎を学習しておくべきです。まず、[HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML) に取り組むことを推奨します — その後に、以下のことについて学んでください:
 
-- [CSS 入門](/ja/docs/Learn/CSS/First_steps) から始まる CSS モジュール
-- より高度な [HTML モジュール](/ja/docs/Learn/HTML#Modules)
-- [JavaScript](/ja/docs/Learn/JavaScript) と、動的な機能をウェブページに追加する方法
-
-HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。なぜなら、CSS を理解すると HTML を勉強するのが更に興味深くまたもっと楽しくなり、また HTML を知ることなくして CSS を学習することはできないからです。
+HTML の基本が理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを並行して学習することを推奨します。なぜなら、CSS を理解すると HTML を勉強するのが更に興味深くまたもっと楽しくなり、また HTML を知ることなくして CSS を学習することはできないからです。
 
 またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 [基本的なソフトウェアをインストールする](/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software) に詳しく書かれているような基本的な環境を持っており、 [ファイルの扱い](/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files) に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集である[ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web)のなかに入っています。
 
-このトピックに取り組む前に [ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web) を読むと良いでしょう。ただ、このウェブ入門のなかの[CSS basics](/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)の記事で紹介されていることの多くは、[CSS 入門](/ja/docs/Learn/CSS/Introduction_to_CSS) でもカバーされているのでこれは必須ではありません。
+特にウェブ開発に完全に初めて取り組む場合は、このトピックに進む前に、「[ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web)」を一通り作業しておくことをお勧めします。ただし、その「[CSS の基本](/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)」の記事で取り上げていることの多くは、より詳細な説明ではありますが、この「[CSS の第一歩](/ja/docs/Learn/CSS/First_steps)」モジュールでも取り上げています。
 
 ## モジュール
 
@@ -39,12 +29,14 @@ HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピッ
 
 - [CSS の構成要素](/ja/docs/Learn/CSS/Building_blocks)
 
-  - : このモジュールは [CSS の第一歩](/ja/docs/Learn/CSS/First_steps)から派生しています。CSS にちょっと慣れて簡単な経験も積んだところで、それをもう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線についてやデバッグの方法などを見ていきます。
+  - : このモジュールでは [CSS の第一歩](/ja/docs/Learn/CSS/First_steps)で取り上げられなかった部分を取り上げます。これまでに、言語や構文に慣れることや、それらを使用する基本的な経験を積んできました。これで、もう少し深く掘り下げていく準備ができました。このモジュールでは、カスケードと継承、利用できるすべての種類のセレクター、単位、サイズ指定、背景と境界線のスタイル設定、デバッグなど、多数のトピックを取り上げます。
 
     ここでの目的は、[テキストの装飾](/ja/docs/Learn/CSS/Styling_text)や [CSS レイアウト](/ja/docs/Learn/CSS/CSS_layout)などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。
 
 - [テキストの装飾](/ja/docs/Learn/CSS/Styling_text)
+
   - : CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で最もよく使うことの一つです。ここでは、フォント、太字、イタリック、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。
+
 - [CSS レイアウト](/ja/docs/Learn/CSS/CSS_layout)
   - : ここまでで既に CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートを基準にしてボックスを適切な場所に配置する方法、および互いの配置方法を検討します。 必要な前提知識はカバーされているので、奥深い CSS レイアウトの世界に飛び込むことができます。さまざまな `display` の設定、flexbox のようなモダンなやり方から、CSS grid、positioning、そしてまだまだ知っておきたいと思うかもしれないレガシーなテクニックまでを概観していきます。
 
@@ -56,7 +48,7 @@ HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピッ
 
 ## "CSS は奇妙です"
 
-CSS は、ほとんどのプログラミング言語や設計ツールとは少し異なる動作をします。なぜ、それがそのように動作するのか？　次のビデオでは、CSS がそのように動作する理由と、そのように進化した理由について、Miriam Suzanne が役に立つ説明をしています。
+CSS は、ほとんどのプログラミング言語や設計ツールとは少し異なる動作をします。なぜ、それがそのように動作するのか？ 次の動画では、CSS がそのように動作する理由と、そのように進化した理由について、 Miriam Suzanne が役に立つ説明をしています。
 
 {{EmbedYouTube("aHUtMbJw8iA")}}