デザイナーの勉強ブログ

ブラウザごとで、divなどで囲った領域に対するwidth/margin/paddingの
要素のがどこに反映されるのかが違うので、cssを組むときは複数のブラウザで
チェックすることが必要だ。

だが、それ以前にブラウザには自動でリンクされる「デフォルトcss」
というものがあって、ページ自体のマージンや、画像の周囲の余白など、
cssをリンクさせていないhtmldeでも、実はある程度のcss設定が施されている。


今回は、それを初期化するcssを紹介したい。
設定方法は特に難しくなく、下の記述を.cssで保存し

@import

で外部で読み込ませればＯＫ。
これで各ブラウザのデフォルトCSSが均一化され、
ブラウザの解釈のみを注意して組み立てていけば良くなる。
-----------------------------------------------------------------------

@charset "UTF-8";

/* ------------------------------------------- CSS Information
File Name: default.css
Author: honjo
Style Info: ブラウザスタイルのリセットと基本設定
----------------------------------------------------------- */

/* ----------------------- Browser Default Initialization */
html { overflow-y: scroll;}
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;}
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal;}
table { border-collapse: collapse; border-spacing: 0;}
caption, th { text-align: left;}
q:before ,q:after { content: '';}
object, embed { vertical-align: top;}
hr, legend { display: none;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
img, abbr, acronym, fieldset { border: 0;}
li { list-style-type: none;}
-----------------------------------------------------------------------

@charsetなどは、対応するxhtmlやhtmlの文字コードに書き換える必要があるが
このcssを外部から読み込むだけで、作成環境の基礎が構築される。