低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

ブラウザスタイルの初期化

世の中には多種多様なブラウザが存在しますが、それぞれのブラウザごとに、デフォルトのスタイルが異なる場合があります。特に、CSSでデザインしていく上で、この異なるスタイルのせいで困ってしまうことがあります。代表的なものとしては、body要素が持つデフォルトの余白を、FireFoxやIEはmargin属性で再現しているのに対し、Operaはpadding属性で再現しているという点などが挙げられます。

そこで、あらかじめすべての要素に対してデフォルトのスタイルを指定しておくことにより、これらの違いを平坦化することが出来ます。

CSS

1* {
2    margin: 0;
3    padding: 0;
4    font-style: normal;
5    font-weight: normal;
6    font-size : 100%;
7}

このようにユニバーサルセレクタを使い、CSSの一番はじめに記述することで、各ブラウザのデフォルトスタイルの違いを気にすることなく、コーディングを行うことが出来ます。

ただし、ユニバーサルセレクタを用いた指定は、多少なりとも処理に負荷がかかるため、よく使う要素にのみデフォルトスタイルを指定した方がよいと思われます。そこで、当社で使用しているデフォルトスタイルをご紹介します。

クロノドライブで使用しているデフォルトスタイル

01html, body, div, span, applet, object, iframe,
02h1, h2, h3, h4, h5, h6, p, blockquote, pre,
03a, abbr, acronym, address, big, cite, code,
04del, dfn, em, font, img, ins, kbd, q, s, samp,
05small, strike, strong, sub, sup, tt, var,
06b, u, i, center,
07dl, dt, dd, ol, ul, li,
08fieldset, form, label, legend,
09table, caption, tbody, tfoot, thead, tr, th, td {
10    margin: 0;
11    padding: 0;
12    background: transparent;
13    border: 0;
14    outline: 0;
15 
16    font-size: 1em;
17}
18 
19body {
20    font-size: 16px;
21}
22 
23body,
24table,
25input, textarea, select, option {
26    font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
27    font-size: 1em;
28    line-height: 1em;
29}
30 
31ol, ul {
32    list-style: none;
33}
34 
35blockquote, q {
36    quotes: none;
37}
38 
39:focus {
40    outline: 0;
41}
42 
43ins {
44    text-decoration: none;
45}
46 
47del {
48    text-decoration: line-through;
49}
50 
51a:link {
52 
53}
54 
55a:visited {
56 
57}
58 
59a:hover {
60 
61}
62 
63a:active {
64 
65}

ぜひ参考にしてみてください。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ