CSS を用いた HTML のスタイル設定を学ぶ

Cascading Style Sheets — CSS — は HTML を学んだ後に勉強すべき技術です。 HTML はコンテンツの構造と意味づけを定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばコンテンツのフォント、色、サイズ、余白を変更したり、段組みに分割したり、アニメーションやその他の装飾機能を追加するのに利用できます。

前提知識

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

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

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

特にウェブ開発に完全に初めて取り組む場合は、このトピックに進む前に、「ウェブ入門」を一通り作業しておくことをお勧めします。ただし、その「CSS の基本」の記事で取り上げていることの多くは、より詳細な説明ではありますが、この「CSS の第一歩」モジュールでも取り上げています。

モジュール

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

CSS の第一歩

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

CSS の構成要素

このモジュールでは CSS の第一歩で取り上げられなかった部分を取り上げます。これまでに、言語や構文に慣れることや、それらを使用する基本的な経験を積んできました。これで、もう少し深く掘り下げていく準備ができました。このモジュールでは、カスケードと継承、利用できるすべての種類のセレクター、単位、サイズ指定、背景と境界線のスタイル設定、デバッグなど、多数のトピックを取り上げます。

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

テキストの装飾

CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で最もよく使うことの一つです。ここでは、フォント、太字、イタリック、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。

CSS レイアウト

ここまでで既に CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートを基準にしてボックスを適切な場所に配置する方法、および互いの配置方法を検討します。 必要な前提知識はカバーされているので、奥深い CSS レイアウトの世界に飛び込むことができます。さまざまな display の設定、flexbox のようなモダンなやり方から、CSS grid、positioning、そしてまだまだ知っておきたいと思うかもしれないレガシーなテクニックまでを概観していきます。

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

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

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

"CSS は奇妙です"

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

関連情報

MDN での CSS

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