制作記事 Web制作マークアップCSSデフォルトで設定すべき事項

デフォルトで設定すべき事項

下記に示す全称セレクタを用いた初期化方法の流行りは影を潜め始め、現在は「必要な要素のみに適切なスタイルを示す」方法が流行りはじめているらしいことを聞いた。ただ、ブラウザによる初期設定の違いなども考慮しなければならないので、より高度になると思う。
ここで示すのは、もはや廃り気味の手法であるが、まだまだ現役ってことで紹介しておく。

*{
margin:0;
padding:0;
}
body{
font-size:;
font-family:;
line-height:;
color:;
background:;
}
html>body{
font-size:;
}
a{
outline:none;
}
a:visited{
}
a:hover{
}
img{
border:none;
vertical-align:top;
}

  • 「html>body」はbodyのfont-sizeが相対指定の場合、html>bodyを設置しIE以外用の絶対指定を設定する(印刷用のフォントは絶対指定(推奨10px)のみ、ページの内容が切り捨てられないようにwidthを相対指定する)。
  • imgのvertical-align:top;はディセンタに配慮する。

    参考:imgのvertical-align

  • line-heightは単位をつけず設定する方がよい(単位をつけてしまうと画面からはみ出す原因になる)。
  • 「outline;none;」はクリックした状態に点線の枠が表示されないようにする(IE未対応)。