CSS(スタイルシート)を使うときにやったほうがいいこと3選

CSSでhtmlのデザインをするときにやった方がいいことを3つだけ紹介しよう。

• デフォルトの設定をリセットする

各ブラウザはデフォルト値というものを設定している。例えば、h1タグを使うと自動的に文字が大きくなっていたり、太字になっていたりする。これは、デザインをしていくうえで邪魔になることが多い。特に、マージンやパディングが自動的に設定されていると、CSSを書いていくときにわかりにくい。そこで、デフォルト値をリセットしておこう。

* {
    margin: 0px;
    padding: 0px;
    font-size: 1em;
}

いわゆるリセットCSSというものがネット上で配布されているが、わざわざダウンロードしなくても、この3要素をリセットしておけば事足りるだろう。

• 各要素に境界線を引いておく

デザインするときは、各要素の位置がはっきりと目に見えた方がわかりやすい。そこで、各要素に枠線を引いておこう。。

*{
    border-style: solid;
    border-width: 1px;
    border-color: rgb(156, 156, 200);
  }

枠線があるだけで、設定がきちんと反映されているか視認しやすくなる。特に、慣れないうちは枠線があることで、マージンとパディングの違いなどが理解しやすくなるだろう

• 文字の大きさはemで設定する

文字の大きさの設定方法はいくつかある。その中で、emを勧める。emは大きさが一文字分の長さになる。閲覧者が各自のブラウザで設定した文字の大きさが基準になるので、emで指定しておけば、各自それぞれにとって見やすい大きさが基準になるのが長所である。