skillup

技術ブログ

デザイン

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

投稿日:2016年7月13日 更新日:

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

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

CSSとは?

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

CSSの書き方

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

CSSの挙動

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

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

プロパティの詳細

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

HTML

CSS

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

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

CSS HappyLife ZERO inherit値

セレクタ詳細度

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

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

セレクタの種類

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

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

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

★スタイルシートリファレンス 要素型セレクタ(タイプセレクタ)

セレクタの優先度

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

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

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

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

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

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

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

参考文献

WEb+DB vol93

-デザイン
-,

執筆者:


comment

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

関連記事

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

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

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

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …

アーカイブ