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

Reset CSS使ってますか?

ATFコンサルティングFARM

ATFコンサルティングFARM

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

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

Share on facebook
Share on twitter
Share on linkedin

Webの活用が上手な企業が勝ち組になる時代

Webサイトはマーケティングの最強ツールです! 購買プロセスに沿ってWebサイトを制作する必要があります。まず、①ユーザに自社を知ってもらう。もちろん「どんなベネフィットをどんな人へ」提供しているのかをターゲットユーザに

ブログを読む »
松本市ホームページ制作

「知らなければ損というよりも知ってれば得」最大限の成果が得られるウェブサイトの作り方。

成果が得られるウェブサイトの作り方 ビジネスに効果的なWebサイト、いわゆるホームページを作る時の比較的小規模の事業社から中規模の事業社まで対応できる最大限のWebからの効果の得るためのホームページの作り方を描いてみよう

ブログを読む »

HubSpotのすべて

ダウンロード