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

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

tableでのヘッダー固定に関して+borderを描く時のコツ

Contents1 tableでのヘッダー固定について2 borderを描く時のコツ tableでのヘッダー固定について 超小ネタですが、tableのヘッダー固定に関して。 ソースは下記リンクに。 h …