reset.cssの設定
自分が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のスキルを高めて自由にレイアウトできるようになりましょう!