CSSで要素の既定値設定と記載順序の基本

CSS
おはようございます。今日、全社のホームページのデザイン一斉更新で心臓がバクバクヒクヒクのBenです。

昨日、別の支社の担当者から「現ページはtableタグをレイアウトに多用しているのだけれど、スマホのような狭い画面幅では全幅で、PCの広い画面幅では全体の80%くらいで左右に均等の余白を設けたいけど、いちいちwidthやmarginの設定をするのが大変」とのコメントがありました。

なのでCSSでtableタグの既定値を設定して手間を省こうと考えたのですが、そういえばCSSの順序とかもまともにノートしてなかったなあと思い、自分の復習も兼ねて今回記載します。

以前にも載せましたが、CSSはカスケーディング・スタイル・シートの略で、カスケーディングは羅列されたとか滝のように流れるとかの意味です。CSSは上から順番に実行されて、下のほうに同じ内容があると上書きされます。つまり、下の方が優先順位が高いことになります。

20160225a.PNG
例として、このようなCSSがあったとします。通常のtableタグはwidth:100%なので幅が100%、text-align:centerなのでコンテンツは中央揃えとなります。でも、tableのclass="menu"だったら、menuクラスの設定はtable要素の後にあるので、上書きされてしまいます

今回上書きされるのがwidth:50%なので幅が最大可能幅の半分にする、ということ。もともとのtableタグの幅は100%なので半分になります。text-alignはmenuクラスの設定にないので、table内のcenterがそのまま生きます。このようにCSSは上から順番に適用されて、該当する項目が適用され次第、前の設定は上書きされて消えるものです。

ちなみに、HTML内に複数設置できるclassはドット(.)で、HTML内に基本的に一つだけ指定するidは(#)で指定します。HTML内でclas="kore"と指定したらcss内は.kore{…}でスタイルを記述します。既定とことなるtableスタイルでclass指定したい場合、CSSの順番はtable要素名のスタイル指定より下にclassの指定をするのが大事です。この性質を理解したうえで、うまく活用していきましょう。

ちなみに、CSSの設定値の後ろに半角スペースを挟んで!importantと記載するとそれ以降で指定したものは無効となり上書きされません。でも、これは何かしらの制限等でやむを得ない緊急用と考えて、普段は正しい順序で記載するのが基本ですね。

この記事へのコメント


この記事へのトラックバック