Last Updated 2021.02.06
WEB制作の基礎リセットCSSとは何か
WEB制作のデザインの現場では当たり前ですが、WordPressで初めてWEBサイトを開設したばかりの方は馴染みがないと思われるのがCSSのデザインのリセットという考え方です。CSSとはWEBサイトのページのデザインの部分をカスタマイズできるコードなのですが、HTML 5およびCSS 2.0規格が制定された頃からどのブラウザ・どのPCやモバイル端末でも見た目を統一するため、デフォルトのHTML要素のデザインをリセットするという考え方が広まりました。これがリセットCSSというものの考え方・概念です。
CSSのリセットとは何か
ブラウザで表示するWEBサイトのページには、HTMLのタグによってどう表示するか例えばH1タグでしたら文字は大きく太字にする、inputタグではブラウザによってボタンのデザインが違うなど、ブラウザによってHTMLを解釈した時デフォルトのデザイン・レイアウトが設定されています。このデフォルトのデザイン・レイアウトは、WEBデザインをしていく過程でChromeでは意図した通りのデザイン・レイアウトで表示されていますが、FireFoxやSafariではボタンのデザインが違う、H1タグのフォントのデザイン・レイアウトが崩れている等、WEBデザインをしていく上でクロスブラウザで意図した通りに表示するという前提が崩れる要因となりやすいです。このクロスブラウザで意図した通りにWEBデザインを表示させるために、CSSで各HTMLタグのデザイン・レイアウトをリセットするというところから名付けられたのがリセットCSSというものです。
リセットCSSは世界中で公開されています
リセットCSSは世界中で開発されていて、無償で公開されているものが多いです。
その中でもWEB制作の現場で、メインとして使われている有名なものを紹介します。
HTML5 Doctor Reset CSS
現在のHTML規格、HTML規格 5に対応したリセットCSSです。
WEB制作の現場で数多く採用されているリセットCSSだと言われています。
特に癖が無く、こだわりが無ければこのリセットCSSをベースにしてCSSのデザインを構築していくのがおすすです。
リセットCSSのダウンロードページは下記リンクにあります。
YUI yahoo CSS RESET
Yahoo!が開発したリセットCSSで、上記のHTML5 Doctor Reset CSSなどと並ぶくらい有名なものです。
コードはWEB上には公開されておらず、WEBサーバーに置いてあるCSSファイルを読み込むように公式では推奨しています。
しかし、公開されているWEBサーバーがhttpなため、httpsが主流となっているWEBサイトではブラウザ上でセキュリティの警告が出る可能性があり、おすすめできるものではありません。
できれば、hrefで読み込まれているCSSファイルを開いてソースをコピーして自サイトのCSSに組み込むのがいいでしょう。
その他のリセットCSS
- Universal Selector Reset
- Normalize.css
- ress.css
- Reboot.css
上記のリセットCSSは、CSSで各要素をリセットしつつもデフォルトでデザイン・レイアウトを少し追加しているものです。
シンプルにCSSでHTML要素のデザイン・レイアウトをリセットしているものでは無いことに注意が必要です。
リセットCSSの使い方
WEB制作の現場では、上記で紹介したHTML5 Doctor Reset CSSを採用してWEBデザインの案件毎に追加でリセットする要素を加えてアレンジして使用している場合が多いようです。当サイトのテーマでもリセットCSSは採用されていて、各HTML要素の初めにリセットCSSのコードの記述があります。
リセットCSSを理解することで、各種ブラウザの個性を知ることができWEBデザインの幅が広がることでしょう。WEBデザインの幅を広げるため、HTMLコーディングの効率化のため、色々と用途はありますがリセットCSSを知っておくと余計なCSSコードを書く必要がなくなり便利です。気になった方はHTML5 Doctor Reset CSSを使って各HTML要素のデザイン・レイアウトを、Chrome・FireFox・Safari等クロスブラウザでの挙動をテストしてみるといいと思います。
