みなさんこんにちは。takato(@enjoying_free)です!
この記事を読んでいる方はおそらくリセットcssについて知りたいのではないかと思います。
リセットcssについての基礎知識とコードの書き方を紹介したいと思います。
・本記事でリセットcssとコードの書き方がわかります!
リセットcssとは何か?
リセットcssとは、ブラウザのデフォルト設定されているcssをリセットすることです。
ブラウザにはそれぞれ異なるcssコードが既に記入されています。そのため作成したサイトを他のブラウザで見た際に、cssが崩れてしまうという現象が生じてしまいます。
そうならないために各ブラウザの既存のcssを削除することをリセットcssといいます。
リセットcssを行うことで、どのブラウザで見ても作成した通りのcssが反映されるようになります。
ではどのようにリセットcssを行うかというと、リセットcss用のコードを<head>内に入力すれば出来ます。
ここで気をつけて頂きたいのが、リセットcssコードはstyle.cssコードの前に配置してください。
先にリセットしてからcssファイルを読み込む順番なので、style.cssの上にリセットcssコードを配置してください。
リセットcssのコード
リセットcssは複数種類があります。
僕はress.cssのリセットcssコードをしようしています。
ress.cssはファイルをダウンロードして読み込む必要がなく、下記のコードを<head>内に記載することでcssのリセットが実装されます。
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
先ほども伝えた通り、リセットcssはstyle.cssコードの前に記入してください。
なので下記のように記入するのが正解となります。
<head>
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
最後に
以上がリセットcssとコードの書き方についてでした。
webデザインやプログラミングの勉強をする際リセットcssが必要になってくるので、この知識は忘れずにいてくださいね!
コーディングの勉強方法について書いた記事があるので、こちらも合わせて読んでみてください!