リセットCSSについて

現在のブラウザ(ユーザーエージェント)には、最初から色々なCSS(デフォルトスタイルシート)が埋め込まれています。
これらのデザインは、20年以上前の名残りのようなもので、現在のようなきれいなデザインを作成する時、邪魔になる事があります。
また、ブラウザによってこのデフォルトスタイルシート(CSS)が若干違う為に見る環境によってデザイン崩れや表示の違いを引き起こすことがあります。

そこで、これらのデフォルトスタイルシートを打ち消す為、一度リセットし、(何も無い)クリーンな状態からデザインを作成するケースが一般的になり、リセットCSSが生まれましたが、現在ではいくつかの種類がありますので、その中の一つを組み込む手法を説明します。

リセットCSSの入手

俗にリセットCSSと言われてるものは世の中にいくつかあります。
【参考サイト】
【2022年版】おすすめのリセットCSSまとめ!基本知識と使い方を解説 | Web Design Trends
リセットCSSは何を使う? 比較と使い方
CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css | コリス

この中から今回は「デフォルトスタイルが無いタイプ」のThe New CSS Reset」を組み込む方法を説明してみます。

reset_css

上記参考サイトのうち、1つ目のリンクをクリックし、ページが表示されたら、検索機能などを使って「The New CSS Reset」のリンクを探し、クリックします。

reset_css

表示されたページの「css」フォルダをクリックします。

reset_css

表示されたページの「reset.css」ファイルを右クリックし、「名前を付けてリンク先を保存…」をクリックし、ご自分のパソコンにファイルを保存します。

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

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

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

前の記事

open-iconicについて