CSS

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

学習の道のり

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

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

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

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

モジュール

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

CSS の第一歩
CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。
CSS の構成要素

このモジュールは CSS の第一歩から派生しています。CSS の基本と経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。

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

テキストの装飾
CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。
CSS レイアウト
現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートを基準にしてボックスを適切な場所に配置する方法、および互いの配置方法を検討します。 必要な前提知識をカバーしているので、さまざまな display の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。

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

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

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

関連情報

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