長野県長野市・松本市ウェブ制作事業部 コンサルティングFIRM

Reset CSS使ってますか?

Picture of ATFコンサルティングFIRM

ATFコンサルティングFIRM

マーケティングがあなたのビジネスの目標達成を支援します。

HubSPot+ ATFC担当に相談する

目次

WEB制作を行う上で、誰もがブラウザによる表示の違いに四苦八苦する。
忌わしのIE6もMicrosoftのサポート終了によりシェアが落ちてきた。ひとつのブラウザ(かつひとつのバージョン)がシェアを専有し続けることは今後そうはないだろうが、IE6があまりにも市場に居座り続けていた時代は本当に苦労したものだ。
HTML5+CSS3が浸透してきた今が、そうした悩みもあまり大きく感じる事もない穴場の時期かもしれない。

各主要ブラウザがHTML5+CSS3に対応し始め、WEB制作がしやすい環境になってきてはいるが、ブラウザによるHTML+CSSの解釈の違いは間違いなくある。CSSハックや条件分岐で特定の環境下にCSSを適用しブラウザ間の差異を巧みに埋める達人たちもいるが、私は「Reset CSS」をおすすめする。

Reset CSSとは?

ブラウザはデフォルトでそれぞれスタイルを持っており、例えば多くのブラウザではゴシック体のフォントを採用しているが、明朝体のフォントをデフォルトで採用しているブラウザも存在する。その他にもマージンや余白、罫線の微妙な違いなどマークアップをしていると気付かされる違いが多くある。
Reset CSSとは、そういったブラウザのデフォルトスタイルを初期化をするためのCSSだ。

ユニバーサルセレクタ

一昔前は私もユニバーサルセレクタ、すなわち全称セレクタで手軽にそういったスタイルをリセットしていた。

* { margin:0; padding:0; }

上記の様な手法だ。
アスタリスクはHTMLの全ての要素を意味しており、先頭にこれを記述することで全ての要素をリセットできる。(下手すりゃborderも0!)思い起こせば随分長い間使っていた気がする。
しかし、デメリットもある。まずブラウザのレンダリングが遅くなる。意図しないスタイルもリセットされ逆に工数がかかってしまう場合もある。特にフォーム関連の要素はデザインし直すのに苦労する。
では、全ての要素に個々にリセットをかけるCSSを準備しなければならないことになるのか?実はそうではなく、一般に公開されている、ルールさえ守れば商用利用可能なReset CSSを使うことで誰でも簡単に実装することができる。

世界の代表的なReset CSS

Yahoo! User Interface Library

Yahoo! User Interface Libraryの提供するReset CSS。私の手持ちのReset CSSもYUIのCSSを参考に作成したものだ。

Eric Meyer’s Reset

Eric Meyer氏によるReset CSS。一般に配布されているWordPressのテーマを見ると、私はこの手法を一番よく見かける気がする。

導入は計画的に

実際WEB制作で毎回Reset CSSを実装するかというとそうではなく、大体制作期間により決める。リセットをかけてそこからオリジナルデザインを構築することを考えると、適用することができない時もある。(早くデモサイトをリリースしなければならない時とか)
しかしいつでも使えるよう独自のCSSを備えてはいる。HTML5に対応したReset CSSも今後登場することだろうが、またそれを参考に独自に構築していくことは、おそらく私にとって楽しい作業だろう。

SNS
Webサイト 長野県
WEBATF 長野閉鎖のお知らせ

WebATFNAGANOOFFICEは。2024年10.30日をもって閉鎖いたします。新型コロナ移行リモートが進行し長野松本市オフィスに増員し事業拠点を集約いたしました。Webサイト制作・Webサポートは松本OFFICE

ブログを読む »
AI
生成AIを使ったブログコンテンツの作成

生成AIを使ってブログ記事を作成する方法はいくつかあります。以下にその一般的な手順を示します トピックの選定: まず、ブログ記事のトピックを決めます。トピックは、読者が興味を持ちそうなテーマや、あなたの専門知識に関連する

ブログを読む »
インタビュー一覧
人材採用のキーポイントはWebサイトだった。

今年度こそ人材採用の成果を出す! 街には、新入社員らしき若者が目立つシーズになった。毎年、人材採用に苦戦している人事部人材採用担当は、今年も悔し涙を流しているのか? そこで、成果を毎年あげている企業は、Webサイト(コー

ブログを読む »
集客か?ブランディングか?Webリニューアル。
Webリニューアル:集客 vs ブランディング

Webサイトリニューアルの目的は集客か?ブランディングか? Webサイトのリニューアルを検討する際、多くの方が「集客」と「ブランディング」のどちらを優先すべきか悩むのではないでしょうか。結論から言うと、どちらを優先すべき

ブログを読む »