リセットcssとは何か?webデザイナーが説明します!※コピペ可能なコードあり!

PCcoding

みなさんこんにちは。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が必要になってくるので、この知識は忘れずにいてくださいね!

コーディングの勉強方法について書いた記事があるので、こちらも合わせて読んでみてください!