reset.cssの設定

2024.09.26

自分がWeb業界で仕事をするようになって15年。この間、とにかく進化したのがCSSではないだろうか。というのもまずCSSがサポートされていないブラウザも多かったし、なんせブラウザ依存というのがあり、コーダーを相当悩ませた。
floatとかけたら、なぜかmarginが2倍になってしまうとか。頭で理解したコーディングだけでは解決しない問題もありましたね。

今となっては楽しい思い出です。

ブラウザの設定をリセット

では、そろそろ本題に！
まず最初に考えないといけないのは、各ブラウザ（Edge、GoogleChrome、Safariなど）はデフォルトでstyleが効いてしまいます。marginとかfont-sizeとか。全てが同じ値なら良いのですが、微妙に違っていたりするのです。
リセットをしないで、ページの構築をすると、記述が増えてしまうのと、予期せぬ崩れがブラウザごとで起きてしまう可能性があります。
そこで、reset.cssを作ってブラウザのデフォルト値を同じにすることから始めます！

以下が私が作ったreset.cssです。コピーしてお使いください！

reset.css

個人的に色々経験を積み重ねて作り上げたreset.cssです。

※2024年9月1日現在

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas {
  display: block;
}

img {
  width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
  word-break: keep-all;
}

p {
  line-height: 1.9;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

a,
button {
  cursor: pointer;
  transition: all 0.3s ease-out;
}

button {
  color: inherit;
  background: none;
  border: none;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

現在のCSS事情

2021年の後半からくらいからWeb業界もだいぶ変わってきました。UI/UXの時代が到来しましたね。そこで出てきたのが、CSSフレームワークです。BootstrapやBulmaが登場して読み込むだけでUIが完成します。
Webアプリケーションを開発する場合には最適な方法だと思います。

フレームワークの課題

CSSフレームワークで効率化が測れる一方、CSSの知識は絶対に必要となってきます。CSSフレームワークを導入する場合はコーダーだけではなくデザイナーにもCSSスキルは必須になります。
仕様に関しては調べてから導入しましょう！

まとめ

CSSはブラウザによって大きく変わってしまうことがあり、デフォルト値をすべて同じにして制作をすることを推奨します。まず、reset.cssは何をやっているかを上記コードを理解するのも良いと思います。CSSのスキルを高めて自由にレイアウトできるようになりましょう！

US Design

BLOGブログ