CSS: カスケーディングスタイルシート

カスケーディングスタイルシート (Cascading Style Sheets、CSS) はスタイルシート言語であり、HTML や XML（派生言語である SVG、MathML、XHTML などを含む）で記述された文書の体裁や見栄えを表現するために用いられます。CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。

CSS はオープンウェブの核となる言語に含まれており、W3C 標準仕様によってウェブブラウザー間で標準化されています。以前は CSS 仕様書の様々な部分が同時に開発されており、最新勧告の版数付けができていました。皆さんも CSS1、CSS2.1、また CSS3 についても聞いたことがあるでしょう。CSS3 や CSS4 にはなりません。すべて単なる "CSS" と、バージョン番号を持つ個々の CSS モジュールとなりました。

CSS 2.1 以降、仕様の範囲が大幅に拡大し、CSS モジュールごとに進捗状況が大きく異なるようになったため、モジュールごとに勧告を開発して公開することがより効果的になりました。W3C では、CSS 仕様のバージョン管理の代わりに、最新の CSS 仕様の安定した状態のスナップショットと独立したモジュールの進捗を定期的に取得するようになりました。CSS のモジュールは、CSS Color Module Level 5 のように、バージョン番号またはレベルを持つようになりました。

主なリソース

CSS 入門

ウェブ開発が初めての人は、CSS の基本の記事を読んで、CSS とは何か、どのように使用するかを学習しましょう。

CSS チュートリアル

CSS 学習領域は、初心者から中級者になるための、すべての基本事項を網羅した豊富なコンテンツがあります。

CSS リファレンス

CSS の個々のプロパティや概念について記述された CSS リファレンスです。

チュートリアル

CSS 学習領域 は基礎から CSS を教える複数のモジュールにスポットを当てています — 事前の知識は必要ありません。

CSS の第一歩

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

CSS の構成要素

このモジュールは CSS の第一歩が終わったところを引き継いでいます。言語とその構文に慣れてきて、基本的な使用経験を積んだところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターのタイプ、単位、寸法の調整、背景や境界のスタイル付け、デバッグなど多くのことを見ていきます。

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

CSS テキスト装飾

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

CSS レイアウト

現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートからの相対でボックスを適切な場所に配置する方法、および互いの配置方法を検討します。必要な前提知識をカバーしているので、さまざまな表示の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。

CSS を使ってよくある問題を解決する

このモジュールは、ウェブページを作成する際の一般的な問題を解決するための CSS の使用方法を説明するコンテンツの節へのリンクを提供しています。

リファレンス

CSS リファレンスは、経験豊富なウェブ開発者向けの包括的なリファレンスであり、CSS のすべてのプロパティと概念を記述しています。

料理帳

CSS レイアウト料理帳は、よくあるレイアウトパターンや、サイトに実装する必要がある可能性がある事柄のレシピを共有するためのものです。プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。

CSS 開発のためのツール

メタバグ

関連情報