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

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …