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 の
border-imageの値を生成します。 - 境界角丸作成ツール
-
CSS の
border-radius効果を生成します。 - ボックスの影作成ツール
-
CSS のオブジェクトに
box-shadow効果を追加します。 - 色形式コンバーター
-
色を入力または選択し、任意の CSS の色形式でその色に対応する値をコピーします。
- カラーミキサー
-
color-mix()関数を使用して、任意の色空間で 2 つの色を混在させ、その結果得られた色を任意の CSS カラー書式でコピーします。 - シェイプジェネレーター
-
<basic-shape>の機能について、座標と構文を定義します。
同時に、以下のリソースも使用することができます。
- W3C CSS Validation Service は CSS が正しく書かれているかを判定するために利用できます。デバッグのために重宝するツールです。
- Firefox Developer Tools はインスペクターとスタイルエディターツールを通じて、ページの CSS をライブでの閲覧や編集を可能にします。
- Firefox のウェブ開発者拡張機能では、表示しているサイトをその場で追跡したり編集したりすることができます。
リファレンス
完全な CSS リファレンスのドキュメントをご覧ください。