CSSの書く順番【セレクタ、プロパティごとに解説】
CSSはホームページにおいてデザインを指定する言語（要素）です。
ただ、CSSは1行書けば終わりというものではなく、たくさん書く必要があります。
ときには数千行に及ぶこともあるでしょう。
「CSSってどんな順に書けばいいの？テキトーでいいの？注意点は？」
CSSの書く順番をセレクタ、プロパティごとに解説します。
目次
CSSセレクタ単位の書く順番
CSSセレクタとは「.example」とか「#header li」のようにかかるhtmlを指定する要素です。
CSSセレクタを書く順としては、上に書くものほど優先順位が低く、下に書くものほど優先順位が高い、が原則です。
よって先に基本の指定をして、それを上書きするものを後述するようにしましょう。
また、CSSに追記または修正するときわかりやすいようにヘッダー、メイン、フッターのように場所ごとにまとめておきましょう。
コメントアウトでメモしておくとより見つけやすくなります。
オススメのCSSセレクタ単位の書く順番
- aやbodyなどhtmlそのままのセレクタ指定
- 共通で使うclass
- トップページを上から順に指定
- 下層ページを上から順に指定
- スマホ版（または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やhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
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セレクタを書く順は、上に書くものほど優先順位が低く、下に書くものほど優先順位が高い、が原則であり、先に基本の指定をして、それを上書きするものを後述する。
オススメ
- aやbodyなどhtmlそのままのセレクタ指定
- 共通で使うclass
- トップページを上から順に指定
- 下層ページを上から順に指定
- スマホ版（またはPC版）のメディアクエリを指定
CSSセレクタ内のCSSプロパティを書く順は基本的に自由。
例外
- CSSセレクタ内に同じCSSプロパティが複数ある場合、後述されたほうが優先。
- 一行で書けるCSSとその一部を上書きするCSSを指定するときは、一部を上書きするCSSを後述。
オススメ
大きさ、位置、文字など似たCSSプロパティで固める
以上、CSSの書く順番をセレクタ、プロパティごとに解説しました。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
