Cascading Stylesheets — CSS — は、HTML の次に学習を始めるべき第 1 の技術です。HTML は、コンテンツの構造とセマンティクス決定するのに使用されるのに対し、CSS は、スタイルとレイアウトのために使用されます。例えば、コンテンツのフォント、色、サイズ、余白を変更したり、複数の列に分割したり、アニメーションやその他の装飾機能を追加するのに CSS は使用できます。

学習の道のり

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

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

このトピックを開始する前に、コンピューターの基本的な使用と、ウェブを受動的に使用すること (つまり、単に見て、コンテンツを消費すること) に慣れているべきです。基本的なソフトウェアをインストールする に詳しく書かれている基本的な環境を持っており、 Dealing with files に詳しく書かれているファイルを作成、管理する方法を理解しているべきです — 初心者向けのモジュールであるウェブ入門にこれらの両方がそろっています。

このトピックに取り組む前に ウェブ入門 を読むことを推奨します。しかしながら、必須ではありません; CSS の基本の記事で記載されていることの多くは、「Introduction to CSS」 のモジュールにも記載されています。

モジュール

このトピックは、以下のモジュールで構成されており、取り組む順番に記載しています。最初から始めるとよいでしょう。

Introduction to CSS
このモジュールは、CSS の動作の基本についてから始めます。セレクター、プロパティ、CSS 記述ルール、CSS を HTML に適用する、長さ、色、その他の CSS の単位を指定する方法、カスケードや継承、ボックスモデルの基本、CSS のデバッグ方法が含まれています。
テキストのスタイリング
テキストのスタイル基礎を確認できます。フォントの設定、太さ、斜体、線、文字間のスペース、影やその他のテキストの機能が含まれています。カスタムフォントをページに適用し、リストとリンクのスタイルを設定することで締めくくっています。
Styling boxes
次に、ウェブページをレイアウトするのに基礎的な手順の一つである、ボックスのスタイルを確認します。このモジュールでは、ボックスモデルについて要約してから、padding、border、margin の設定、拝啓色、画像、その他の機能で背景をカスタマイズする設定、影やフィルターをボックスに使用するような、派手な機能を確認します。
CSS layout
ここまでは、CSS の基礎についてテキストのスタイルの方法、コンテンツが含まれているボックスをスタイルしたり操作したりする方法を確認します。ボックスを正しい位置に配置する方法を確認します。必須条件について説明したので、異なるディスプレイの設定、fload や position を使用した昔のレイアウト方法、flexbox のような新しいレイアウトツールを含めた CSS レイアウトの深層部分まで理解できるはずです。
Responsive design (TBD)
近頃は、多くの異なるデバイスでウェブを閲覧できるため、レスポンシブウェブデザイン (RWD) が、ウェブ開発の重要なスキルになりました。このモジュールでは、基本原理や RWD のツールを紹介し、画面の幅、方向、解像度のような端末の機能に依存してドキュメントに異なる CSS を適用する方法を説明します。そして、異なる動画や画像を表示できる技術も紹介します。

CSS のよくある問題を解決する

Use CSS to solve common problems では、ウェブページを作成するときに、よくある問題を解決するために CSS を使用する方法を説明するコンテンツのセクションへのリンクを提供します。

最初から、HTML 要素と背景に色を適用したり、要素の大きさや形や位置を変えたり、要素の枠を定義することがもっとも多かったでしょう。 しかし CSS の基本をしっかり理解してしまったら、できないことはそこまで多くありません。CSSを学習するのに良いことは、いったん基礎を理解したら、やり方が実際にわからなくても、できることとできないことに対して良い感触を得ることです!

関連情報

MDN での CSS
MDN での CSS ドキュメントの主な出発点です。CSS 言語のすべての機能を詳しく説明したリファレンスドキュメントがあります。プロパティがとりうるすべての値を知りたいですか?ここは良い場所です。

ドキュメントのタグと貢献者

 このページの貢献者: Uemmra3, dskmori, chrisdavidmills
 最終更新者: Uemmra3,