2023/07/18 時点の英語版に基づき新規翻訳

files/ja/web/css/tutorials/index.md

@@ -0,0 +1,63 @@
+---
+title: CSS チュートリアル
+slug: Web/CSS/Tutorials
+l10n:
+  sourceCommit: fab1f9cef824066b3ce6a5b25f6c6db539f5d042
+---
+
+{{CSSRef}}
+
+CSS を学ぶのは大変な作業かもしれません。
+そんなあなたのために、私たちは CSS に関する**チュートリアル**を多数用意しています。
+完全な初心者を対象としたものもあれば、経験豊富なユーザーが使えるような複雑な機能を紹介したものもあります。
+
+このページでは、簡単な説明とともに、すべてのリストを掲載しています。
+レベルに最も適したものを選べるように、複雑さによってグループ分けされています。
+
+## 初心者レベルの CSS チュートリアル
+
+- [CSS の基本](/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)
+  - : このガイドは全くの初心者を対象としています。 CSS を 1 行も書いたことがない？- そんなあなたのためのガイドです。
+    この本では、この言語の基本的な概念を説明し、基本的なスタイルシートの書き方を解説しています。
+- [複数の背景画像の利用](/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds)
+  - : 背景はスタイル設定の基本です。 CSS では、各ボックスに複数の背景を設定することができます。このチュートリアルでは、背景がどのように作用し、どのように素敵な効果を得るかを説明します。
+- [背景画像の拡大縮小](/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images)
+  - : CSS では、要素の背景として使用する画像のサイズを変更することができます。
+    このチュートリアルでは、単純な方法でこれを実現する方法を記述しています。
+- [メディアクエリーの使用](/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+  - : 画面の大きさ、タッチ画面や印刷物など、現在では機器の種類は実にさまざまです。
+    メディアクエリーは、あらゆる場所を最高の品質でレンダリングするウェブサイトを構築するための基本的な構成要素です。
+- [CSS の z-index を理解する](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index)
+  - : ボックスの重ね合わせを制御することは、ウェブ開発者がとてもすばやく必要とする基本的な機能です。
+    それほど難しくはありませんが、 CSS の基本的な知識が要求されます。
+
+## 中級者レベルの CSS チュートリアル
+
+CSS 2 (Level 1) のリリース後、 CSS に新しい機能が追加されました。
+その中には、奇抜なものもあれば、かなり自己完結的なものもあります。
+基本的な概念の知識があれば、誰でも簡単に使用することができます。
+
+- [CSS カウンタースタイル](/ja/docs/Web/API/CSS_Counter_Styles)
+  - : CSS でアイテムやページをカウントするのは簡単な作業です。 {{cssxref("counter-reset")}}、{{cssxref("counter-increment")}}、{{cssxref("counters", "counters()")}}、{{cssxref("counter", "counter()")}} の使用方法を学びましょう。
+- [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+  - : CSSアニメーションでは、スタイル設定を[キーフレーム](/ja/docs/Web/CSS/@keyframes)として定義し、その間をアニメーションで遷移させることができます。
+- [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
+  - : CSS トランジションを使用すると、複数のスタイル設定間のアニメーションを定義し、この移行の方法を制御することができます。
+- [CSS 座標変換](/ja/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)
+  - : 座標変換は、要素の座標空間を変更することによって、要素の位置を変更することができます。 2D または 3D 空間でそれらを平行移動、回転、変形することができます。
+- [CSS グラデーション](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients)
+  - : グラデーションとは、ある色から別の色へと滑らかに変化する画像のことです。
+    CSS で使用できるグラデーションには、直線的か放射状か、繰り返しがあるかないかなど、いくつかの種類があります。
+    このチュートリアルでは、それらを使用する方法について記述します。
+
+## 上級レベルの CSS チュートリアル
+
+CSS も新しい機能を取得し、複雑なレイアウトを作成することができるようになりました。
+このようなレイアウトを実現する最も簡単な方法ですが、あまり経験のない人が使用するには複雑です。
+
+- [CSS 段組みレイアウト](/ja/docs/Web/CSS/CSS_multicol_layout)
+  - : CSS3 では新しいレイアウトが導入され、要素の中に複数の段組みを簡単に定義することができるようになりました。
+    段組みのテキストは画面のような機器ではそれほど一般的ではありませんが、これは出力されるページやインデックスでは具体的な有益な機能です。
+- [CSS flexible boxes layouts](/ja/docs/Web/CSS/CSS_flexible_box_layout)
+  - : この新しいレイアウトは、ボックスに柔軟性を与え、サイズをスムーズに変更できるようにします。
+    複雑なインターフェイスを記述するための強力な方法です。