Perlゼミ Webデザイン入門 - Webシステム開発者のWebデザイン

デフォルトCSSの設定のサンプル - CSS入門【CSS3対応】

デフォルトCSSの設定のサンプルです。

よく使うデフォルトCSS

パディングとマージンのデフォルトは0

すべての要素のパディングとマージンのデフォルトを0に。ブラウザ間の違いをなくすことができます。「*」は、全称セレクタです。

* {
  margin:0;
  padding:0;
}

ボーダーボックスの有効化

すべての要素に、ブロック要素の周囲の枠線を含めて、サイズ計算をしてくれる設定を入れます。これがないと、ボーダーを設定した場合に、サイズ調整がぴったりにならないです。

* {
  box-sizing: border-box;
}

iphone/safariでテキストフィールドやボタンのデフォルトデザイン適用を回避

iphone/safariで、テキストフィールドやボタンのデフォルトデザインが適用されてしまうのを解決するには、「-webkit-appearance:none;」を指定します。

* {
  -webkit-appearance:none;
}

iphone/safariでフォーム入力時に自動的に拡大するのを防ぐ

iphone/safariでは、フォーム入力時に、フォントが16pxより小さいと自動的に拡大します。ですので、デフォルトの文字サイズを16pxにしておくと、拡大を防げます。

* {
  font-size:16px;
}

場合に応じて使用するデフォルトCSS

リンクの下線を消す

リンクの下線を消す。デフォルトは、リンクの下線をなしにして、必要な場合に下線を設定するに使います。

a, a:hover, a:visited {
  text-decoration:none;
}