CSSはパーツ別にclass名を分けよう！

CSSはデザインやレイアウトを統一するために使われる

CSSでホームページを装飾するとき、class名を付けてそれぞれ記述していきます。
写真一覧用のCSS、お知らせ表示のCSSといった具合にたくさんのCSSが必要になってきますよね。
コンテンツの配置が変わればCSSが増えるのは仕方ないかもしれませんが、配置を修正したいと思ったときに複雑化していたり、余白を均等に分けたいと思っていても、指定している箇所がたくさんあって探すのが大変・・・なんて経験はありませんか？

そもそもCSSは、ホームページのデザイン性を統一したり、レイアウト修正を簡単にするために作られたものです。
レイアウトを変えたい。余白を変えたい。と思ったときに素早く作業できる事がCSSの魅力なのに、都度CSSを新規で書いていてはあまり意味がありませんね・・・
どうやったら特定のページ専用のCSSを書かなくて済むのかを考えていくと、汎用性の高い物ができあがります。
また、作業にかかる負担も少しは軽減できるようになります。

指定を小分けにしてみる

ではどうやったらいいのか・・・CSSを使いまわすことを前提として、CSS指定を小分け、パーツ化してみましょう。

例えば3列並びのCSSを書くときですが

こんな感じでしょうか。
でもホームページを作っていると、3列並びの他に、2列や4列、5列並びなどなど、パターンが増える事はよくありますよね。
その都度CSSを書くことになるわけですが、かなりの部分が同じ記述になる事に気が付きませんか？
特に「margin」での余白の指定は、変更があった時に変更箇所が増えるだけなので大変そうです。
そこでこうしてみましょう

どうでしょう。
複数列並びを指定する箇所と、それぞれの割り振りの指定を別々にしてみました。
これなら余白を変更したい場合、widthの指定は個別になりますが、marginの指定は一か所なので変更忘れがなくなりそうですね。
こういった場合にはclass・id名の先頭に数字を使いたくなりますが、数字から始めてしまうとCSSが動作しないので、注意が必要です。

他にも左寄せ・右寄せを分けて
.fl{float:left;}
.fr{float:right;}
などと用意しておいたり、ページ幅を指定するCSSを
.pageWidth{
　　width:1100px;
　　margin:0 auto;
}
と作成しておくのもいいでしょう。
付けたい効果を細分化しパーツ化して置く事で、HTMLだけを見て「どんな装飾をしているのか」がわかるようになると、HTMLとCSSの行き来が減るので効率が上がります。
また全体の文字数を減らすこともできているので、若干ではありますがデータ容量のダイエットもできています。
Webページのデータ容量で一番多くなるのは動画、次いで画像です。文字は半角1文字1byte、全角なら1文字2byteと少量なのであまり気になりませんが、積み重ねれば大きな数字になってしまいます。細かな違いですが、圧縮できるところは圧縮してしまいましょう。

CSSを使いまわし過ぎて逆に複雑になりすぎないように注意

CSSでの指定をパーツ化して作り込むと、HTMLに付けたい動作のclass名を設定してあげればレイアウト配置が簡単にできます。
レイアウト変更も一か所の指定にまとめておけば、デザインが変わったり並びを変えたりしたときに簡単にできます。
ですがやりすぎには注意が必要です。
細分化しすぎる事で逆に扱いにくくなってしまう場合もあるので、どうしてもCSSを使いまわせない、専用で設ける必要がある、そんな場合には都度CSSを書いてホームページを構築していきましょう。

まとめ

・付けたい装飾をパーツ化してみよう
・装飾をパーツ化することでレイアウトの変更が容易になる
・パーツ化することで、HTML側に付けたclass名だけで何をしているかわかるようになる