リセットCSSについて

現在のブラウザ(ユーザーエージェント)には、HTMLに対し、様々なCSSが埋め込まれています。(デフォルトスタイルシート
これらのデザインは、現在のようなきれいなデザインを求めなかった、20年以上前の名残りのようなもので、CSSのバージョンも古く、ブラウザの機能も低かった為、それほど気にもなりませんでした。
逆に有り難いとさえ思ったものです。

ところが今ではCSSもかなり機能強化され、様々なデザインを作る事ができるようになりました。
さすがに、20年以上前の味気の無いデザインのまま使っている人は、ほぼいないと思います。

そこで、これらのデフォルトスタイルシートを打ち消す為、一度リセットし、デザインを作成するケースも多くなってきました。
そのような理由からリセットCSSが生まれましたが、現在ではいくつかの種類がありますので、その中の一つを組み込む手法を説明します。

リセットCSSの入手

俗にリセットCSSと言われてるものは世の中にいくつかあります。
リセットCSS は何を使う? おすすめ8選

この中から今回は「HTML5 Doctor CSS Reset」を組み込む方法を説明してみます。

リセットCSSの入手

上記サイトを表示し、左の画像を参考にしながら「HTML5 Doctor CSS Reset」のタイトルを探します。

リセットCSSの入手

左の画像を参考にして、CSSのソースコードをコピーした後、「reset.css」という名前のファイルを作成して張り付ける。

上述のファイルをHTMLに組み込みたい時は、次のように記述します。

ファイルパスは、ご自分のサイトに合わせて変更してください。

注意点は、どのCSSファイルよりも先に記述する事です。
そうしないと、この「reset.css」がここまでのCSSの設定を、リセットしてしまいます。

前の記事

open-iconicについて