9

【初心者向け】リセットCSSが必要なのはなぜか?どうやって使うのか?


ホームページを作成している時にいつも課題としてあがる、文字サイズ。Webブラウザ(IE、Chrome、Firefox、Opera、Safariなど)によって、デフォルトの文字サイズや行間等が違って表示されます。

これは、ブラウザごとにCSSのタグごとにデフォルトの値を持っているからです。逆のことを言えば、コードで記述しなくとも一定の文字サイズ、行間で表示されるのはこのことである。

デザインによっては、文字サイズや行間が違うことによって、決めた枠の中に収まりきらなくはみ出てしまうといった状況が出てきます。

これを解決するために、そもそもデフォルトの値をリセット(リセットCSS)し、コードで設定していくことでブラウザ間で統一されたホームページが作成できるのです。

リセットCSSのメリット・デメリット

Webブラウザ間での表示の差異がなくなるということは、かなりメリットがあるんじゃないの??って感じます。コーダー側で必要なところだけスタイル設定することができるのは確かにメリットではありますが、逆にデメリットも存在します。

デフォルトの値をすべて設定しなくてはならないこと。そのため、CSSの記述が通常以上になってしまいます。再定義をするハメになるので、無駄とも思えるような記述が増えてしまうこと、そして、再設定を忘れてしまうことも考えられます。

導入するかどうかは、あらかじめしっかりとしたチームでの方針が必要ですね。

チームワーク

リセットCSSの導入

リセットCSSの方法はいくつかあります。特徴がありますので、それを抑え自分にとっていいものを採用してみてください。

ユニバーサルセレクタで一括リセット

=======
* {
margin: 0;
padding: 0;
}
=======

ひと昔前によく行われていた記述です。ユニバーサルセレクタを使用して、すべての要素を一括でリセットするという方法です。

これだけを見るとコードが簡潔でいいように思えますが、全てにおいて自分で設定しなおさなくてはなりません。全要素のスタイルを適用するため、表示速度に関しても影響が出る可能性があります。

現在では、リセットCSSにおいても様々なライブラリがあるので、そちらを活用したりカスタマイズすることが一般的です。

Yahoo!CSS Reset(YUI 3)

==========
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-
spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}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:”}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
==========

Yahoo! User Interface Library の reset.css を使った方法を紹介します。
こちらはBSD Licenseですので、ライセンス表記を残せば、改変することや商用利用も可能なので気軽に使えますね。

以下を記述してリンクを埋め込んでも使用できます。

CSS Tools: Reset CSS

Eric Meyer氏作のCSSリセットです。制作するサイトごとに細かな設定をすることが推奨されます。

============
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
============

HTML5 Reset Stylesheet HTML5Doctor

Eric Meyer氏のCSSリセットをHTML5向けに調整したものです。
CSS5が主流になってからは、使われる頻度も増えているようです。

これをそのまま記述することで使用可能です。

============
/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark – http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:”; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
============

まとめ

CSSリセットは、使用する大元のライブラリによっては、カスタマイズが必要になります。そのため、よくわからなくとも使用することはできますが、内容を理解すればそのページにあったカスタマイズのために、必要な箇所を記述し直すことも可能です。

Webブラウザ間の表記の誤差に時間を割くのであれば、逆にCSSリセットを利用して設計したほうが時間短縮になる場合もあります。
しかし、すべての要素を書きなおさなければならないこともあるので、使用する際はしっかり考えながらやるべきですね。

何も考えずにCSSリセットを行った場合、余計にコードの記述が増えてしまった…。
ということもあり得ますので、あらかじめの綿密な設計が大事ですね。

image03

リセットCSSはすべきか、どうかというのはプロジェクト単位によってする必要があるのかをあらかじめ考えておく必要がありますね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Photoshop】曇の日の写真をパッと明るく補正する方法