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

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

CSS はオープンウェブの核となる言語の 1 つで、 W3C 標準仕様によってウェブブラウザー間で標準化されています。仕様の策定はバージョンに分けて進められており、 CSS1 が既に廃止、 CSS2.1 が勧告の段階、 CSS3 が (より小さなモジュールに分割された上で) 標準化の手続中の状態にあります。

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

リファレンス

料理帳

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

CSS 開発のためのツール

メタバグ

関連情報