1.リセットCSSとは?
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
きなこ
リセットCSSってどういうものなの?
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
簡単に言うと
- ブラウザ間の表示の違いをリセットしてくれるもの
- デフォルトで設定されている余白などを消す事ができる
という感じだよ
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
深く考えず「こんなものだ」という考えで心を無にして書けば良いと思うよ
以下はさまざまなブラウザで同じHTMLを打ち込んだ時の差です。
chrome
適用前
![chromeでのリセットCSS適用前](https://kbyt-programming.com/wp-content/uploads/2020/12/f3335f630aa24803618c0f9f7a20c96c.png)
適用後
![chromeでのリセットCSS適用後](https://kbyt-programming.com/wp-content/uploads/2020/12/5372a9f48d35ae9d002b5ac5a96334d3-1-e1608029159713.png)
safari
適用前
![safariでのリセットCSS適用前](https://kbyt-programming.com/wp-content/uploads/2020/12/eca8aadb81d37f49b609d1e662adc81d.png)
適用後
![safariでのリセットCSS適用後](https://kbyt-programming.com/wp-content/uploads/2020/12/65b4082ff9b89881e1636e39eb664a37-e1608029309130.png)
Microsoft Edge
適用前
![EdgeでのリセットCSS適用前](https://kbyt-programming.com/wp-content/uploads/2020/12/ac93799105697562d88607f433fd676d.jpeg)
適用後
![EdgeでのリセットCSS適用後](https://kbyt-programming.com/wp-content/uploads/2020/12/23ab1b0a1fd1dd18acc14f1f80aa5132.jpeg)
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
チャッピー
確かにブラウザごとに多少違いがあるね
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
きなこ
リセットCSSを使うと余白が消えていて作成がしやすいかも!
2.リセットCSSの使い方
2-1.リセットCSSをWebから読み込む
使い方は簡単でheadタグ内にlinkタグを入れて読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--ここでリセットCSSを読み込む-->
<link rel="stylesheet" href="css/styles.css"> <!-- 自作のCSS -->
<title>Sample Site</title>
</head>
...略
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
例としてこちらのリセットCSSを使わせてもらいました
こちらはあのyahoo!が開発したものです
CSS Reset - YUI Library
↓これをheadタグ内のCSSファイルの上に記述します。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="css/styles.css"> <!-- 自作のCSS -->
<title>Sample Site</title>
</head>
...略
使用前
![リセットCSS適用前](https://kbyt-programming.com/wp-content/uploads/2020/12/f3335f630aa24803618c0f9f7a20c96c-1.png)
使用後
![リセットCSS適用後](https://kbyt-programming.com/wp-content/uploads/2020/12/7aa9195ad6cff3d6c34abdc3e98c3824-1024x940.png)
こんな感じで変わっています。
ちなみに読み込む場所が自作のCSSファイルよりも後ろで読み込むとリセットCSSで上書きされてしまうので注意です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css"><!-- 自作のCSS -->
<!--ここで読み込むと自分のCSSが上書きされてしまう-->
<title>Sample Site</title>
</head>
また紹介されているCSSをコピペして、自分のCSSファイルに貼って使うことももちろんできます。
その分CSSの記述量が多くなりますが…。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
その場合は別にCSSファイルを作るのが管理の面からも良いかもです
2-2.リセットCSSを作る
もちろん既存のリセットCSSファイルをベースにいらないものを削ったり、その逆に必要なものを加えて自分なりのリセットCSSを作るのもおkです。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
ちなみに僕は読み込まずに自分好みのリセットCSSを作って使用しています
3.リセットCSSについてさらに詳しく知りたい方は…
こちらの記事様が参考になります。(投げっぱなし)
![](https://kbyt-programming.com/wp-content/uploads/cocoon-resources/blog-card-cache/f096bbe6f133477298f1666207100fcd.png)
【2023年版】おすすめのリセットCSSまとめ!基本知識と使い方を解説 | Web Design Trends
リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。 分かりやすい例だと、inputタグなどはSafariとChrom...
![](https://kbyt-programming.com/wp-content/uploads/cocoon-resources/blog-card-cache/821eaeff4247370e628582df855465c2.jpg)
リセットCSSは何を使う? 比較と使い方
リセットCSSはブラウザごとの表示の違いをリセットしてくれるCSSです。今回はそれぞれのリセットCSSの比較と使い方を紹介します。
4.まとめ
リセットCSSまとめ
- リセットCSSは
- ブラウザ間の表示の違いをリセットしてくれるもの
- デフォルトで設定されている余白などを消す事ができる
- 読み込む際はheadタグ内にlinkタグを作り読み込む
- リンクアドレスで読み込む
- 使う際は自作のCSSより前で読み込む
- リセットCSS用のファイルを元のページからコピペで作る
コメント