リセットCSSについて（html5reset.css）
現在のブラウザ（ユーザーエージェント）には、最初から色々なCSS（デフォルトスタイルシート）が埋め込まれています。
これらのデザインは、20年以上前の名残りのようなもので、現在のようなきれいなデザインを作成する時、邪魔になる事があります。
また、ブラウザによってこのデフォルトスタイルシート（CSS）が若干違う為に見る環境によってデザイン崩れや表示の違いを引き起こすことがあります。
そこで、これらのデフォルトスタイルシートを打ち消す為、一度リセットし、（何も無い）クリーンな状態からデザインを作成するケースが一般的になり、リセットCSSが生まれましたが、現在ではいくつかの種類がありますので、その中の一つを組み込む手法を説明します。
リセットCSSの入手
俗にリセットCSSと言われてるものは世の中にいくつかあります。
【参考サイト】
→リセットCSSは何を使う？ 比較と使い方
→【2022年版】おすすめのリセットCSSまとめ！基本知識と使い方を解説 | Web Design Trends
→2023年、現在の環境に適したリセットCSSのまとめ | コリス
この中から今回は使いやすい「HTML5 Doctor CSS Reset」を組み込む方法を説明してみます。
html5reset.css
上記参考サイトのうち、1つ目のリンクをクリックし、ページが表示されたら、検索機能などを使って「HTML5 Doctor CSS Reset」の文字を見つけます。
html5reset.css
画像のすぐ下に「HTML5 Doctor CSS Reset」のソースコードがあるので、ドラッグしてコピーします。
ご自分のパソコン内に、新しいファイル「html5reset.css」を作成し、先ほどの内容を貼り付け、保存します。
上述のファイルをHTMLに組み込みたい時は、次のように記述します。
|
1 |
<link rel="stylesheet" href="./css/html5reset.css"> |
※ファイルパスは、ご自分のサイトに合わせて変更してください。
注意点は、どのCSSファイルよりも先に記述する事です。
そうしないと、この「html5reset.css」がここまでのCSSの設定を、リセットしてしまいます。
