--- title: 'CSS: カスケーディングスタイルシート' slug: Web/CSS tags: - CSS - Cascading Style Sheets - Design - Guide - Landing - Layout - Reference - Style Sheets - Styles - Stylesheets - 'l10n:priority' translation_of: Web/CSS ---
{{CSSRef}}

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

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

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

主なリソース

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 開発のためのツール

メタバグ

関連情報