【HTML/CSS】リセットCSS

ふら

reset.cssについて学ぼう！

リセットCSSとは

各ブラウザはデフォルトでmarginやpaddingなどの値を持っています。

そのため、HPを作成した際に、自分が意図していない箇所にブラウザデフォルトのCSSが適用され、思うような配置にならないということが起きてしまいます。

このような事態を防ぐために、デフォルトの値を打ち消すリセットCSS を使用します。

ふら

「よくわからないよ」という方、大丈夫です。リセットCSSがなくてもHTML/CSSは書けます。

最悪スキップしてしまっても問題ありません。

今後CSSを触っていて、どうしてもうまく配置できなくなったときに「ブラウザデフォルトのCSSが邪魔をしているのかな」と思い出してあげてください。

今回は下記のサイトより、最新版をインストールします。

※他にも有名なreset.cssが存在します。慣れてきたら自分好みのものを探してみてもいいでしょう。

インストールしたファイルの名前をreset.cssに変更して、cssフォルダに格納しましょう。

最後に、HTMLでreset.cssを読み込む設定をすれば、完了です。

<head>
    <!-- ヘッドタグの中に下記を記載する -->
    <link rel="stylesheet" href="css/reset.css" />
</head>

これで、自分の思い通りのHPを作成することができます。

素敵なCSSライフを！

以上