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

チュートリアル

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

CSS 入門

このモジュールは、 CSS がどのように機能するのかの基本から始めます。セレクターやプロパティ、 CSS の書き方のルール、 HTML への CSS の適用、 CSS における長さ、色、その他の単位を指定する方法、カスケードと継承、ボックスモデルの基本、 CSS のデバッグ方法を学びます。

テキストの装飾

このモジュールでは、テキスト装飾の基礎を学びます。内容はフォントの設定、太字、イタリック体、行間隔と文字間隔、影の付け方などです。それから、カスタマイズされたフォントをページに適用する方法や、リストやリンクを装飾する方法を学びます。

ボックスの装飾

このモジュールでは、ボックスの装飾について見ていきます。ウェブページのレイアウトに向けた基本的なステップです。このパートでは、ボックスモデルについて簡単におさらいしてから、ボックスをレイアウトする方法を学びます。内容は、パディングや境界線、マージン、背景色、画像の指定などです。またボックスへの影の落とし方やフィルターなど、ちょっとおしゃれな機能についても学びます。

CSS レイアウト

ここまででテキストの装飾にやボックスの装飾と CSS の基礎を学びました。ボックスをページの表示部分や他のボックスに対してどうレイアウトするのかを学ぶ準備が整いました。既に必要な知識は学び終えているので、より深く CSS レイアウトについて見ていきます。学ぶ内容は表示の設定や、float と position を利用した昔からあるレイアウト方法、そしてフレックスボックスのような新しいレイアウトツールを利用したレイアウト法についてです。

リファレンス

• CSS リファレンス: CSS のすべてのプロパティや概念について記述された、熟練のウェブ開発者向けの CSS リファレンスです。
• CSS の主要な概念:
  • 言語の構文と書式
  • 詳細度と継承 と カスケード
  • CSS 単位と値
  • ボックスモデルとマージンの相殺
  • 包含ブロック
  • 重ね合わせとブロック整形コンテキスト
  • 初期値、計算値、使用値、実効値
  • CSS 一括指定プロパティ
  • CSS フレックスボックスレイアウト
  • CSS グリッドレイアウト
  • メディアクエリ

料理帳

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

CSS 開発のためのツール

• W3C CSS Validation Service は CSS が正しく書かれているかを判定するために利用できます。デバッグのために重宝するツールです。
• Firefox Developer Tools はインスペクターとスタイルエディターツールを通じて、ページの CSS をライブでの閲覧や編集を可能にします。
• Firefox の Web Developer 拡張機能では、表示しているサイトをその場で追跡したり編集したりすることができます。
• ウェブコミュニティは、利用できるその他の様々な CSS のためのツールを開発しています。

メタバグ

• Firefox: バグ 1323667