意外と知らないcssの使い方のコツ!

記述を省略してスマートに

CSSを書いていると、気づけばだらだらと冗長なコードになっていたり、意外に容量が大きくなっていることはありませんか。長過ぎるCSSはホームページの表示速度を遅くさせてしまいます。今回は、CSSを使い方のコツを紹介します。
ひとつ目のコツは「記述の省略」です。余白を指定する際に、margin-right:10px、margin-top:20pxをひとつひとつ記述してはいませんか。これらの記述は省略可能です。記述方法は「margin:全て」、「margin:上下 左右」、「margin:上 左右 下」の3つのパターンがあります。たとえば、全ての余白を10pxとする場合は「margin:10px」。上は10px、左右はなし、下は30pxとしたい場合は「margin:10px 0 30px」と書きます。
marginの他にもbackgroundなど省略できる要素は多々あります。一度調べてみる良いですよ。

クラスの付け方を考えよう

CSSを書く際に、考えるべきはクラスやIDの付け方です。CSSが冗長になってしまう時、「.content #title h2 span a {...}」とクラス指定も長くなっているのかもしれません。
クラス指定の整理するためにはCSSの優先順位を学びましょう。基本的には、「要素(h2、p、divなど)」<「クラス(.で指定するもの)」<「ID(#で指定するもの)」です。たとえば、<h2 ID="midashi">見出し<h2>と指定された要素に、h2{color:red}と#midashi{color:blue}の2つの記述がされた時は、IDが優先され、見出しの色は青(blue)になります。
また、CSSは基本的にコードの下に書かれているものを優先します。これらを踏まえ、適切なクラス・IDの付け方を考えましょう。

HP作成を行うには、ウェブデザインやプログラミングなどのコンピュータに関連するスキルが必要となることがあります。