ホームへ

CSSの書く順番【セレクタ、プロパティごとに解説】

CSSはホームページにおいてデザインを指定する言語(要素)です。

ただ、CSSは1行書けば終わりというものではなく、たくさん書く必要があります。

ときには数千行に及ぶこともあるでしょう。

「CSSってどんな順に書けばいいの?テキトーでいいの?注意点は?」

CSSの書く順番をセレクタ、プロパティごとに解説します。

CSSセレクタ単位の書く順番

CSSセレクタとは「.example」とか「#header li」のようにかかるhtmlを指定する要素です。

CSSセレクタを書く順としては、上に書くものほど優先順位が低く、下に書くものほど優先順位が高い、が原則です。

よって先に基本の指定をして、それを上書きするものを後述するようにしましょう。

また、CSSに追記または修正するときわかりやすいようにヘッダー、メイン、フッターのように場所ごとにまとめておきましょう。

コメントアウトでメモしておくとより見つけやすくなります。

オススメのCSSセレクタ単位の書く順番

  1. aやbodyなどhtmlそのままのセレクタ指定
  2. 共通で使うclass
  3. トップページを上から順に指定
  4. 下層ページを上から順に指定
  5. スマホ版(またはPC版)のメディアクエリを指定

1.aやbodyなどhtmlそのままのセレクタ指定

まずはaやbodyなどclassを特に指定していない状態のhtmlそのもののセレクタを調整しましょう。

これらはブラウザ側で初期のCSSが指定されているため、任意でCSSを上書きする必要があります。

あとあと上書きすることも多いため、最低限のCSSや共通のCSSだけ指定しておきましょう。

2.共通で使うclass

続いてあちこちで共通で使うclassを指定しておきます。

具体的には以下のようなかんじです。

.clear{
    clear: both;
}
.sp{
    display: none;
}
@media(max-width:750px){
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
}

「clear: both」はfloatのあとに使うCSSです。「style="clear: both"」でもいいのですが、「class="clear"」のほうがスマートです。

.spや.pcはスマホ版、PC版でだけ表示されたい要素に付けます。

これもあちこちに出現することがあるためclassを指定しておきます。

また、これらを先述しておくことでCSSを上書きしやすいメリットもあります。

3.トップページを上から順に指定

トップページはサイトの顔、会社の顔となる重要なページです。

クライアントが一番気にするところです。

最初に作ってクライアントに見てもらい安心してもらいましょう。

ということで単純に作る順にCSSを書いていきます。

ヘッダー、メイン、フッターなどパーツごとにわけて、コメントアウトでメモしておくとよりよいでしょう。

4.下層ページを上から順に指定

下層ページのヘッダーやフッターはトップページと共通になっている場合が多いです。

よって下層ページはそれ以外の部分のCSSを書いたり、ヘッダーやフッターのうち違う部分を上書きする形で書いていきましょう。

5.スマホ版(またはPC版)のメディアクエリを指定

いまどきスマホ版があるのは当たり前です。

CSS内でメディアクエリを使うことでレスポンシブ対応できます。

このメディアクエリですが、CSS内のあちこちにあるとCSSが効かない(間違える)原因になります。

CSSの下部にまとめて書いておくと間違いを減らすことができます。

CSSセレクタ内のCSSプロパティ単位の書く順番

CSSプロパティとは「margin」や「width」のようにhtmlの変化させたい要素です。

CSSセレクタ内のCSSプロパティを書く順は基本的に自由です。

以下のように順番を変えてもどちらもOKです。

div{
    margin: 10px;
    padding: 20px;
}
div{
    padding: 20px;
    margin: 10px;
}

CSSプロパティを書く順番が必要な例

ただし、CSSセレクタ内に同じCSSプロパティが複数ある場合、後述されたほうが優先されます。

CSSが効かないときはCSSプロパティが重複していないかチェックしましょう。

div{
    /*効かない*/margin: 10px;
    /*効く  */margin: 20px;
}
div{
    /*効かない*/margin: 20px;
    /*効く  */margin: 10px;
}

また、一行で書けるCSSとその一部を上書きするCSSを指定するときは、一部を上書きするCSSを後述しましょう。

一部を上書きするCSSを先述すると、一行で書けるCSSに上書きされ、効かなくなります。

div{
    margin: 0;
    /*効く*/margin-left: 10px;
}
div{
    /*効かない*/margin-left: 10px;
    margin: 0;
}

オススメのCSSプロパティを書く順番

  • DevToolsに従う
  • 大きさ、位置、文字など固める

DevToolsに従う

F12を押すとDevToolsが表示されます。これは選択したhtmlに何のCSSがかかっているか確認できるツールです。

これでCSSを確認すると自分の書いた順ではなく、DevTools独自の順で記載されています。

これをそのままコピペすることも多いため、DevToolsに従うのもアリです。

DevToolsを使い慣れると順番もわかってきますが、始めのうちはわかりません。

ということで下記の方法をおススメします。

大きさ、位置、文字など固める

たとえば「width」「height」「padding」「margin」「border」は大きさや形を決めるCSS、「position」「left」などは位置を決めるCSS、「font-size」「line-height」などは文字を決めるCSSです。

これらをまとめて書くことで、CSSを見つけやすく、重複させにくいメリットがあります。

例えばmarginを探すとき「marginはwidthやpadding付近に書いてある」と決めていればmarginをすぐ見つけることができます。

CSSを見つけやすくすれば値を直すときすぐに直せます。

また、見つけやすいことでCSSを間違えて重複させることも減ります。

【まとめ】CSSの書く順番

CSSセレクタを書く順は、上に書くものほど優先順位が低く、下に書くものほど優先順位が高い、が原則であり、先に基本の指定をして、それを上書きするものを後述する。

オススメ

  1. aやbodyなどhtmlそのままのセレクタ指定
  2. 共通で使うclass
  3. トップページを上から順に指定
  4. 下層ページを上から順に指定
  5. スマホ版(またはPC版)のメディアクエリを指定

CSSセレクタ内のCSSプロパティを書く順は基本的に自由

例外

  • CSSセレクタ内に同じCSSプロパティが複数ある場合、後述されたほうが優先。
  • 一行で書けるCSSとその一部を上書きするCSSを指定するときは、一部を上書きするCSSを後述。

オススメ

大きさ、位置、文字など似たCSSプロパティで固める

以上、CSSの書く順番をセレクタ、プロパティごとに解説しました。

マンガで読める関連記事