CSSの書く順番【セレクタ、プロパティごとに解説】マンガでわかるホームページ作成ホームへCSSの書く順番【セレクタ、プロパティごとに解説】2022年03月08日CSSはホームページにおいてデザインを指定する言語(要素)です。CSSは1行書けば終わりというものではなく、たくさん書く必要があります。ときには数千行に及ぶこともあるでしょう。「CSSってどんな順に書けばいいの?テキトーでいいの?注意点は?」CSSの書く順番をセレクタ、プロパティごとに解説します。li」のようにかかるhtmlを指定する要素です。CSSセレクタを書く順としては、上に書くものほど優先順位が低く、下に書くものほど優先順位が高い、が原則です。よって先に基本の指定をして、それを上書きするものを後述するようにしましょう。疑似クラス、属性セレクタなど含めたCSSセレクタの優先順位と点数計算方法を解説します。この記事を読むまた、CSSに追記または修正するときわかりやすいようにヘッダー、メイン、フッターのように場所ごとにまとめておきましょう。コメントアウトでメモしておくとより見つけやすくなります。下層ページを上から順に指定スマホ版(またはPC版)のメディアクエリを指定1.aやbodyなどhtmlそのままのセレクタ指定まずはaやbodyなどclassを特に指定していない状態のhtmlそのもののセレクタを調整しましょう。これらはブラウザ側で初期のCSSが指定されているため、任意でCSSを上書きする必要があります。あとあと上書きすることも多いため、最低限のCSSや共通のCSSだけ指定しておきましょう。2.共通で使うclass続いてあちこちで共通で使うclassを指定しておきます。具体的には以下のようなかんじです。both」はfloatのあとに使うCSSです。both"」でもいいのですが、「class="clear"」のほうがスマートです。.spや.pcはスマホ版、PC版でだけ表示されたい要素に付けます。これもあちこちに出現することがあるためclassを指定しておきます。これらを先述しておくことでCSSを上書きしやすいメリットもあります。3.トップページを上から順に指定トップページはサイトの顔、会社の顔となる重要なページです。クライアントが一番気にするところです。最初に作ってクライアントに見てもらい安心してもらいましょう。いうことで単純に作る順にCSSを書いていきます。ヘッダー、メイン、フッターなどパーツごとにわけて、コメントアウトでメモしておくとよりよいでしょう。下層ページのヘッダーやフッターはトップページと共通になっている場合が多いです。よって下層ページはそれ以外の部分のCSSを書いたり、ヘッダーやフッターのうち違う部分を上書きする形で書いていきましょう。5.スマホ版(またはPC版)のメディアクエリを指定いまどきスマホ版があるのは当たり前です。CSS内でメディアクエリを使うことでレスポンシブ対応できます。このメディアクエリですが、CSS内のあちこちにあるとCSSが効かない(間違える)原因になります。CSSの下部にまとめて書いておくと間違いを減らすことができます。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むCSSセレクタ内のCSSプロパティ単位の書く順番CSSプロパティとは「margin」や「width」のようにhtmlの変化させたい要素です。CSSセレクタ内のCSSプロパティを書く順は基本的に自由です。以下のように順番を変えてもどちらもOKです。10px;}CSSプロパティを書く順番が必要な例ただし、CSSセレクタ内に同じCSSプロパティが複数ある場合、後述されたほうが優先されます。CSSが効かないときはCSSプロパティが重複していないかチェックしましょう。10px;}また、一行で書けるCSSとその一部を上書きするCSSを指定するときは、一部を上書きするCSSを後述しましょう。一部を上書きするCSSを先述すると、一行で書けるCSSに上書きされ、効かなくなります。0;}オススメのCSSプロパティを書く順番DevToolsに従う大きさ、位置、文字など固めるDevToolsに従うF12を押すとDevToolsが表示されます。これは選択したhtmlに何のCSSがかかっているか確認できるツールです。CSSが効かないときの原因特定方法【DevToolsの使い方】CSSの一部が効かない!何が悪いのかわからない!という方へ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セレクタを書く順は、上に書くものほど優先順位が低く、下に書くものほど優先順位が高い、が原則であり、先に基本の指定をして、それを上書きするものを後述する。下層ページを上から順に指定スマホ版(またはPC版)のメディアクエリを指定CSSセレクタ内のCSSプロパティを書く順は基本的に自由。例外CSSセレクタ内に同じCSSプロパティが複数ある場合、後述されたほうが優先。一行で書けるCSSとその一部を上書きするCSSを指定するときは、一部を上書きするCSSを後述。オススメ大きさ、位置、文字など似たCSSプロパティで固める以上、CSSの書く順番をセレクタ、プロパティごとに解説しました。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。