GAMURATWIST.JP BLOG

ブラウザの初期スタイルを再定義する

  • CSS

ウェブブラウザごとに微妙に異なっている初期の表示スタイル。これを無視してCSSデザインを進めると、後で、各ブラウザで発生する表示ズレの修正に時間を費やすはめに。その厄介な作業を軽減するため、最初に全ブラウザの初期スタイルをリセットします。

Yahoo! UI Libraryの利用
いろんな方法を試したり、独自のリセットCSSを作ってみたりしましたが、以下のようなスタイルシートに落ち着きました。Yahoo! UI Libraryで公開しているReset CSSを基本（ほぼそのまま）にしています。このスタイルを「reset.css」など任意保存し、HTMLに読み込ませることで再定義完了です。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td { 
  margin:0;
  padding:0;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
  font-style:normal;
  font-weight:normal;
}

fieldset,img {  border:0; }
ol,ul { list-style:none; }
caption,th { text-align:left; }

h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}

q:before,q:after { content:''; }
acronym, abbr, span.caps { cursor: help; }
abbr,acronym { border-bottom: 1px dashed #999; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * This Stylesheet was based on Yahoo! UI Library's Reset CSS.
 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
 * http://developer.yahoo.com/yui/reset/
 * http://developer.yahoo.net/yui/license.txt
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
UP