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

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …

no image

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

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

no image

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

アーカイブ