CSS の構成要素

このモジュールは CSS の第一歩から派生しています。CSS の基本と経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。

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

前提知識

このモジュールを始めるまえに、つぎの状態になっておくべきです。

  1. コンピューターの使い方と(ウェブを見たりコンテンツを消費したりといった)ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。
  2. 基本的なソフトウェアのインストールで説明されている基本的な作業環境と、ファイルの扱い方で説明されているファイルの作り方や管理の仕方について理解していること。
  3. HTML 入門で説明されている HTML についての基礎知識に慣れ親しんでいること。
  4. CSS の第一歩で説明されている CSS の基本について理解していること。

: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、 (ほとんどの) コードサンプルは JSBinThimble といったオンラインコーディングプログラムで試すことが可能です

ガイド

このモジュールは CSS のもっとも重要な部分をカバーする以下の記事で構成されます。各記事には理解度を試すエクササイズも含まれます。

カスケードと継承
このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念(カスケード・詳細度・継承)の理解を深めていくことです。
CSS セレクター
CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。
ボックスモデル
CSS にはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することでより複雑なレイアウトができるようにします。
背景と枠線
このレッスンでは、CSS の背景と境界線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや画像による背景や、角丸と境界線といったものを施していくなかで、CSS のスタイリングに関する多くの疑問を解消していきます。
テキスト方向の操作
近年では、右から左へだけでなく上から下へのコンテンツ(日本語など)を含むコンテンツのさまざまな向きの CSS サポートが進化しています。これらの向きの考え方については "writing modes" と呼ばれます。レイアウトの学習を進めて進めていくと "writing modes" の理解がとても役に立ちますので、この記事ではそれらを紹介していきます。
要素のはみ出し(オーバーフロー)
このレッスンでは、CSS のもう1つの重要な概念である オーバーフロー(overflow)を見ていきますオーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。
CSS の値と単位
CSS で使用されるすべてのプロパティには、特定の値または組み合わせのみが許可されます。このレッスンでは、もっとも一般的な値と単位について見ていきます。
CSS によるサイズ設定
これまでのさまざまなレッスンで、CSS を使用してウェブページ上のアイテムのサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大事かを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。
画像・メディア・フォーム要素
このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能かを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことのをいくつかを取り上げます。
表のスタイリング
HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでに説明した機能のいくつかとともに、HTML 表を見栄え良くするためのガイドを提供します。
CSS のデバッグ
CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに各モダンブラウザーのデベロッパーツールはどう役立つかを示します。
CSS の整理
スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、CSS を書いていくのと保守していくのをやりやすくするためのベストプラクティスと、保守性を向上させるための解決策の一部を紹介します。

評価

CSS スキルをテストしたいですか?以下の各評価では上記のガイドで説明されている CSS の理解度をテストできます。

基本的な CSS の理解
この評価では基本的な構文・セレクター・詳細度・ボックスモデル・その他の理解度をテストします。
装飾的なレターヘッド付きの便箋の作成
好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。
かっこいいボックス
ここでは背景と枠線のスタイリングを使った人目を引くボックスの作り方を実践します。

関連情報

ボックスの高度なエフェクト
この記事はトリックの箱として機能し、ボックスの影・ブレンドモード・フィルタのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。