これだけは知っておきたい！Web制作の効率を倍速にするためのCSSテクニック10選

◼︎iPhone6sに乗り換えて3万円以上のMNPキャッシュバックを貰う5つの方法
◼︎ソフトバンク「スマ放題」の料金を3000円安くする5つの方法
◼︎iPhone6sに機種変更するなら絶対公式サイトを利用すべき理由８選

ホームページをデザインする際、HTMLには気を遣うのに、CSSは適当にコーディングされる方は多いのではないでしょか？

あまり普段は意識しませんし、人に見られる部分ではありませんが、CSSも美しく記述してあげることで、後で見直した時にも分かりやすくなります。

 

また、CSSを変えるだけでホームページの見栄えをガラリと変えることもできるため、体裁の良い記述をしておくことで効率化できます。

そこで今回は、Web制作を倍速し効率を上げるCSSテクニックをご紹介します。

 

リセットCSS

出典：リセットCSSやNormalize.cssを使ってブラウザのスタイルを整えてからコーディングする方法

IEやChromeなどの各ブラウザには、タグごとにデフォルトのスタイルをもっています。そのため、同じタグでもそれを表示するブラウザが違えば、見え方も違ってきます。

そうしたブラウザ間の差異をなくすためにリセットCSSがあります。リセットCSSを利用することで各ブラウザでの表示の違いを小さくすることができます。ただし、CSSの記述が長くなってしまうというデメリットもあるので注意。
【CSS】決定版！リセットCSS総まとめ

ネーミングの仕方を統一する

出典：コーディング規約（HTML・CSS）を作ってみた（公開済）

CSSでは画像ファイル名やid名、class名をよく使います。全く関係のないネーミングにするよりも、ヘッダ部分なら「header」、記事部分なら「entryBody」や「contentBody」という風に、想像しやすいネーミングにしましょう。
また、左サイドバーだから「left」を使った場合、右サイドバーに変更したい時に面倒になります。
見た目上からネーミングするのは避けましょう。
新人コーダーに知っておいて欲しい命名規則の考え方

モジュール化

出典：カンプが出来上がるまでにフロントエンド構築としてできること

1つのCSSファイルに全て書くのではなく、いつかのCSSファイルに分けて管理します。こうすることで、複数人で担当している大規模プロジェクトであっても管理が効率的にできますし、例え1人であっても管理がしやすくなります。

CSSメタ言語