【脱初心者】Web制作の制作効率を上げる！CSSの記述ルールを解説

CSSはWebサイトの見た目や配置を指定するための言語です。Webサイトの見た目や配置はユーザビリティの観点から近年非常に重要な役割を持っています。そのため、CSSのコードは長くなる傾向があります。

コードが長くなる上で記述ルールが重要になります。記述ルールはコードを動かすためのルールとプロジェクトの制作効率を上げるためのルールがあります。本記事ではCSSの制作効率を上げるための記述ルールを解説します。

CSSの記述ルール

必ず守るべきCSSの記述ルール

CSSで必ず守るべき記述ルールはCSSの基本構文です。基本構文の通りに書かなければ、Webページの見た目は変わりません。CSSの基本構文の記述ルールは以下の通りです。

セレクタ {
  プロパティ: 値;
}

セレクタはCSSを反映させたい要素のことです。例えばh1タグにCSSを反映させたい場合はh1がセレクタになります。また、セレクタはclassやidも指定できます。それぞれセレクタを指定する時にはルールがあります。classを指定する場合は「.(ピリオド)」をclass名に前に、idを指定する場合は「#(シャープ）」をid名の前につけます。

プロパティはセレクタに対して何をしたいかを指定します。例えば文字色を変えたい場合は「color」、余白をつけたい場合には「padding」または「margin」を使います。それぞれのプロパティに対してどうしたいかを値に入れます。色を指定したいなら「red」やカラーコードの「#ff0000」を指定します。余白や文字サイズ、幅、高さを指定するなら「px」や「%」を使います。

CSSを記述する際には指定するセレクタのプロパティと値を「｛｝」で囲います。プロパティの後には「:（コロン）」、値の後には「;（セミコロン）」を入れます。どれか一つが抜けてもCSSは動作しないので気をつけて下さい。

記述ルールをプロジェクト毎に設ける

基本的なCSSの書き方以外にも記述ルールを設ける場合があります。例えば、複数人で作成するような大規模なWebページの場合、記述ルールがないと制作効率が下がります。また、1人で制作する場合にもルールがないとコードが読みにくく、メンテナンス性が低くなります。

よくあるルールはclass名のつけ方やプロパティの順番、フォントサイズの指定方法です。他にもプロジェクトやWebサイト毎にルールが設けられている場合があります。大切なのは制作のルールをしっかりと理解し、破らないことです。

CSSの設計規則

CSSのルールとして設計規則というものがあります。CSSの記述に方法をルール化してclass名のつけ方や、コードの管理方法をまとめたものです。大規模なサイトを制作する際にはCSSの設計規則が用いられる場合があります。

よく使われる設計規則は以下の通りです。

• BEM
• OOCSS
• SMACSS

それぞれの詳細は下記の記事にまとめているので、参考にしてみてください。

CSSの記述ルールを守らないとどうなるのか

コードが動かない

CSSの記述ルールを守らないとコードが動かない場合があります。コードが動かないのは基本構文が崩れた場合です。独自に作ったルールではコードが動くことがほとんどなので気にしなくても問題ありません。

ブラウザ上にHTMLファイルを表示させたとき、CSSが効いていない場合は基本構文が崩れている場合がほとんどです。コロンがセミコロンになっている、セレクタをclass名にしているがピリオドが抜けている、スペルが間違っているなどを疑うことをおすすめします。

メンテナンスしにくい

ルールが守られていないとメンテナンスがしにくいです。Webサイトは一度作ったら終わりでなく、更新や改修などのメンテナンスが必要になります。もし、適当に作ってルールがない場合はコードが何を示しているのかやどこに効いているかが分からなくなります。

ルールのないコーディングは乱雑なコードになりやすいです。そのため、メンテナンスに時間がかかり、最悪の場合イチから作り直しに近くなります。メンテナンスに時間をかけすぎるとコンテンツの質も下がってしまいます。

そのため、制作の段階でルールを決めて、整ったコードにすることをおすすめします。できれば、ルールはテキストファイルに残して下さい。簡単なルールはCSSファイルの中にコメントとして記述してもＯＫです。

複数人で作りにくい

大規模なWebサイトとなると複数人で制作することがあります。もし、ルールを守らずに適当なコードを書くと、他の人が手を出せなくなり、制作効率が下がります。せっかく人数を欠けて短時間化を図っても、効果がありません。

そのため、共有しているルールは必ず守るようにしましょう。守らなければ、制作効率が落ちるだけでなく、他のエンジニアやクライアントからの信用も下がります。今後の仕事にも影響が出るため、ルールを確認しながらのコーディングを心掛けることが大切です。

CSSの記述ルールを作る上で気を付けること

メンテナンス性を重視する

コーディング前にルールを作ることもあると思います。ルールは適当に作っても、機能しません。そのため、ルールを作る上での注意点を紹介します。

まず、最も大切なのはメンテナンス性を重視することです。メンテナンス性とはコードの読みやすさやわかりやすさです。例えば、CSSの順番がHTMLの順番と同じにすると分かりやすいです。反対に適当な順番で作るとどこになんのコードがあるのか分からなくなります。

他にもプロパティの前にはインデントを入れたり、セレクタとセレクタの感覚には空行を一列いれるなどがおすすめです。後から見たときに読みときやすいコードを重視することで、メンテナンスが楽になります。

class名やid名はわかりやすいものにする

class名やid名は分かりやすいものにします。class名やid名はHTMLでつけますが、CSSで使うことを意識することでコーディングの効率が上がります。全く関係のない名前だとCSSをつける際にどこのことか分かりにくくなります。

例えば、ボタンにクclass名を指定する場合、「abc」とつけるよりも「btn」とした方がわかりやすいです。また、ルールの中にボタンに関するルールがあれば、btnにつけるべきCSSも決まります。

わざわざイチから確認する必要がなくなるので、コーディング時間の短縮も可能です。

まとめ

CSSの記述ルールは制作を効率的にするために必要なものです。記述の間違いや乱雑なコードはレイアウト崩れを起こしたり、メンテナンス性が悪いなど制作効率を下げます。そのため、基本構文をしっかり理解し、読みやすいコードを書くことが大切です。

Webページだけでなく、ファイル内のコードも可読性を意識することをおすすめします。ユーザーだけでなく、クライアント目線でコーディングができれば、Web制作の仕事も多く受注できると思います。