skillup

技術ブログ

デザイン

CSSの概要 主に適用ルールについて

投稿日:

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。

本日からは正しいCSSについてみていこうと。

CSSとは?

CSSはWebページのレイアウトや装飾のために使用されている言語です。当初は簡単なレイアウトと装飾のみでしたが、現在では複雑で柔軟なレイアウトやシャドウ、グラデーションやアニメーションなども表現可能です。

CSSの書き方

基本的にはスタイルと適用する対象のXMLやHTMLノードをセレクタで指定し、プロパティ宣言を記述します。

CSSの挙動

CSSはある要素に指定されているプロパティ宣言が複数存在するとき、宣言の強さの関係から1つの宣言のみが有効になります。CSS書いたのに有効にならない・・・というのはこのルールを正確に理解していないからです。

挙動のルールに関しては後程。

プロパティの詳細

CSSのプロパティはそのスタイルが適用された要素の子要素にもスタイルを引き継ぐプロパティがあります。

HTML

CSS

上記のようなHTMLとCSSを記述した場合、sectionのcolorプロパティはh1,pにも引き継がれることになります。

また親のプロパティを引き継ぎたい場合は、inheritという書き方自体が存在します。

http://zero.css-happylife.com/basic/inherit.shtml

セレクタ詳細度

次に大事になってくるのがセレクタ詳細度です。これはどのCSSが適用されるかを決めるうえでしっかり理解しておかないといけません。

この場合、h1に適用されるのは20pxではなく24pxになります。各セレクタには詳細度という概念が存在し、より詳細度の高いセレクタ内のプロパティが生き残ります。

セレクタの種類

セレクタの種類は下記のようなものがあります

それ以外にもマウスカーソルがその要素の上に乗った時に適用される:hoverなどの疑似クラスセレクタ、子要素や孫要素などを指定する子孫セレクタなども存在します。

セレクタの詳細な種類は下記リンクを参考に。

http://www.htmq.com/selector/type.shtml

セレクタの優先度

CSSのセレクタには下記のように詳細度を決定します。

  • A idセレクタの数
  • B classセレクタ、属性セレクタ、疑似クラスセレクタの合計数
  • C 要素セレクタ、疑似要素セレクタの合計数

この3つの数字をもとに次の条件で詳細度を計算し、該当するプロパティが適用されます。

  • Aの値が大きいほう
  • Aが同じ場合は、Bの値が大きいほう
  • Bの値が同じときはCの値が大きいほう
  • Cの値も同じときはより下に記述されているほう

また例外系のルールとして下記のようなものも覚えておきましょう。

  • HTMLのタグに書かれた場合は、上記の詳細度を無視して適用される
  • !importantを使った上書きはすべてのCSSの中で最優先になる

このような基本を踏まえたうえで次回以降正しいCSSの書き方を学んでいきたいと思います。

参考文献

WEb+DB vol93

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …