CSS

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

学習の道のり

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

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

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

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

モジュール

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

CSS 入門
このモジュールは、CSS の動作の基本についてから始めます。 セレクターとプロパティの使用、CSS 規則の記述、CSS の HTML への適用、長さ、色、その他の CSS の単位の指定、カスケードと継承の制御、ボックスモデルの基本の理解、CSS のデバッグ方法が含まれています。
テキストの装飾
テキストの装飾の基礎を確認できます。 フォント、太さ、イタリック体の設定、ラインと文字の間隔、ドロップシャドウとその他のテキストの機能が含まれています。 カスタムフォントをページに適用し、リストとリンクのスタイルを設定することで締めくくっています。
ボックスの装飾
次に、ウェブページをレイアウトするための基本的な手順の一つである、ボックスの装飾を確認します。 このモジュールでは、ボックスモデルについて復習してから、パディング、ボーダー(境界線)、マージンの設定や、カスタムの背景色、画像、およびボックスのドロップシャドウやフィルタなどの派手な機能の設定によるボックスレイアウトの制御を確認します。
CSS レイアウト
現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな display の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。
Responsive design (未定)
近頃は、多くの異なるデバイスでウェブを閲覧できるため、レスポンシブウェブデザイン (RWD) が、ウェブ開発の重要なスキルになりました。 このモジュールでは、基本原理や RWD のツールを紹介し、画面の幅、方向、解像度のようなデバイスの機能に応じてドキュメントに異なる CSS を適用する方法を説明します。 そして、そのような機能に応じて異なる動画や画像を提供できる技術も紹介します。

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

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

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

関連情報

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