Movatterモバイル変換

[0]ホーム
URL:

コリス

古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset

サイト構築 -CSS

  • Xでシェアする
  • Facebookでシェアする
  • はてなでブックマークする
  • Raindropに保存する

Post on:2023年10月5日

sponsorsr

モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。

現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！

モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset

A (more) Modern CSS Reset
by Andy Bell

他のリセットCSSが気になる人は、こちらも注目です。
A (more) Modern CSS Resetの前のバージョンも解説しています。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

私は4年ほど前に「A Modern CSS Reset（日本語翻訳版）」を書きましたが、あまり古びていないと思います。数日前に再びリンクされているのを見つけ、アップデート版を公開するのは良い考えだと思いました。

オープンソースのメンテナンスに関してひどいことがあるのを知っているので、オリジナルをアーカイブして、代わりにこの記事を公開します。

はっきり言っておきますが、このリセットCSSは私個人にとってもそして会社のわたし達にとっても効果的なリセットCSSです。この記事で「わたし達」と言うときは常にその人達のことを指します。

モダンブラウザに適切なデフォルトのリセットCSS

私が使用しているデフォルトのリセットCSSの内容とその理由を説明します。その前に、全体をお見せします。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* box-sizing: border-box;を設定 */
*,
*::before,
*::after{
  box-sizing:border-box;
}
 
/* フォントサイズの拡大を防ぐ */
html{
  -moz-text-size-adjust:none;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}
 
/* デフォルトのマージンを削除、作成するCSSの制御を改善するため */
body,h1,h2,h3,h4,p,
figure,blockquote,dl,dd{
  margin:0;
}
 
/* リストのスタイルを削除、これはデフォルトのスタイルが削除されることを示唆します */
ul[role='list'],
ol[role='list']{
  list-style:none;
}
 
/* bodyのデフォルトを設定 */
body{
  min-height:100vh;
  line-height:1.5;
}
 
/* 見出しやインタラクティブ要素のline-heightを設定 */
h1,h2,h3,h4,
button,input,label{
  line-height:1.1;
}
 
/* 見出しのテキスト折り返しをbalanceに設定 */
h1,h2,
h3,h4{
  text-wrap:balance;
}
 
/* classを持たないa要素はデフォルトのスタイルを継承 */
a:not([class]){
  text-decoration-skip-ink:auto;
  color:currentColor;
}
 
/* 画像の扱いを簡単にする */
img,
picture{
  max-width:100%;
  display:block;
}
 
/* inputやbuttonなどのfontは継承 */
input,button,
textarea,select{
  font:inherit;
}
 
/* rows属性のないtextareasが小さくならないようにする */
textarea:not([rows]){
  min-height:10em;
}
 
/* アンカーされている要素には余分なスクロールマージンが必要 */
:target{
  scroll-margin-block:5ex;
}

各リセットCSSの解説

私が使用しているリセットCSSのそれぞれの理由を解説します。
まずは、box-sizingの設定からです。

CSS
1
2
3
4
5
6
/* box-sizing: border-box;を設定 */
*,
*::before,
*::after{
  box-sizing:border-box;
}

このルールは一目瞭然だと思いますが、すべての要素と疑似要素に対してデフォルトのcontent-boxではなく、border-boxを設定します。現在、わたし達はブラウザが流動的なタイプとスペースを備えた柔軟なレイアウトでより多くの作業をすることに重点を置いているため、このルールは以前ほど有用ではありません。しかし、プロジェクトのどこかに明示的なbox-sizingの設定がないことはまれなので、リセットCSSに記述します。

CSS
1
2
3
4
5
6
/* フォントサイズの拡大を防ぐ */
html{
  -moz-text-size-adjust:none;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}

このルールについてもっとも詳しく解説しているのはKilianの記事です。記事ではなぜこれらの酷い接頭辞がまだ必要な理由についても解説しています。

CSS
1
2
3
4
5
/* デフォルトのマージンを削除、作成するCSSの制御を改善するため */
body,h1,h2,h3,h4,p,
figure,blockquote,dl,dd{
  margin:0;
}

私は常に、よりマクロなレベルでフローとスペースを設定することを優先して、マージンに関する各ブラウザごとのデフォルトのスタイルシートを削除することを支持しています。論理プロパティを使用して、古いリセットではすべての側面の代わりにendのマージンを削除しています。本番環境でうまく機能しています。

CSS
1
2
3
4
5
6
/* 画像を扱いやすくする */
img,
picture{
  max-width:100%;
  display:block;
}

画像のimgとpicture要素をブロック要素に設定するのは、率直に言って、下にできる隙間をなくすためです。また、私が制作するページでは、画像はブロック要素のように振る舞う傾向があります。

CSS
1
2
3
4
5
/* リストのスタイルを削除、これはデフォルトのスタイルが削除されることを示唆します */
ul[role='list'],
ol[role='list']{
  list-style:none;
}

Safariはいくかひどいことをします。その中の一つに、リストのスタイルを削除するとVoiceOverのセマンティクスが削除されるというものがあります。これは機能だと言う人もいれば、バグだと言う人もいます。馬鹿げているとは思いますが、roleが確実に追加されるように、ちょっとしたご褒美としてデフォルトでリストのスタイルを削除しています。

CSS
1
2
3
4
5
/* bodyのデフォルトを設定 */
body{
  min-height:100vh;
  line-height:1.5;
}

私はbodyのデフォルトのスタイルは、シンプルにしています。コンテンツが空の場合でもビューポートを満たすのに役立つので、min-heightに100vhを設定しています。また、line-heightを1.5にしているのは、デフォルトの1.2ではアクセシブルで読みやすいテキストを表示できないためです。

dvhのような新しい単位を使いたくなるかもしれませんが、解決策よりも多くの問題を引き起こす可能性があるため、リセットCSSには使用しないほうがよいです。svhの方がdvhよりも優れているようですが、私はvhで満足しています。新しい単位は使用する前にその新しい単位について深く理解していることを確認してください。すでにうまく機能しているものであれば、新しいものに変更する必要はありません。

参考:CSSの新しい単位（lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決

CSS
1
2
3
4
5
/* 見出しやインタラクティブ要素のline-heightを設定 */
h1,h2,h3,h4,
button,input,label{
  line-height:1.1;
}

全体的にline-heightの値に余裕を持たせると便利なように、見出しやボタンなどのテキストでは短くすると便利です。ただし、使用するフォントに大きなアセンダやディセンダがある場合はこのルールを削除または修正する必要があります。ルールが違いに衝突してアクセシビリティの問題を引き起こすことはもっとも避けたいものです。

CSS
1
2
3
4
5
/* 見出しのテキスト折り返しをbalanceに設定 */
h1,h2,
h3,h4{
  text-wrap:balance;
}

このルールはわたし達のプロジェクト特有のものですが、text-wrapプロパティの新しい値は見出しを美しく表示してくれます。これが適切ではないと思う人もいると思いますので、その時は削除してください。

CSS
1
2
3
4
5
/* classを持たないa要素はデフォルトのスタイルを継承 */
a:not([class]){
  text-decoration-skip-ink:auto;
  color:currentColor;
}

このルールは、まずテキストの装飾がアセンダやディセンダの邪魔にならないようにすることです。現在、これはほとんどのブラウザのデフォルトになっていると思いますが、このルールを設定しておくことは良い保険になります。会社ではデフォルトでテキストのcurrentColorも継承するようにリンクを設定したいと考えていますが、そうでない場合は削除した方がよいでしょう。

CSS
1
2
3
4
5
6
7
/* inputやbuttonなどのfontは継承 */
input,
button,
textarea,
select{
  font:inherit;
}

font: inherit;というショートハンドはとても便利で、フォームの要素でもそれがよく分かります。これは主にtextarea要素に影響されるものですが、他のフォーム要素に設定しても問題はありません。これによりプロジェクトの後半で一部のCSSが節約されます。

CSS
1
2
3
4
/* rows属性のないtextareasが小さくならないようにする */
textarea:not([rows]){
  min-height:10em
}

textarea要素に関して言えば、このルールを設定しておくと便利です。デフォルトではrow属性を追加しないと、textarea要素が小さくなってしまう可能性があります。これは指でタッチするなどのようなポイントでは理想的ではありませんが、textarea要素は複数行のテキストに使用される傾向があるからです。それを簡単にすることを理にかなっています。

CSS
1
2
3
4
/* アンカーされている要素には余分なスクロールマージンが必要 */
:target{
  scroll-margin-block:5ex;
}

最後は、要素がアンカーで固定されている場合です。その要素の上にscroll-marginで少しスペースを追加することは理にかなっています。ちょっとした微調整をすることで、ユーザーエクスペリエンスを向上させることができます。ただし、固定ヘッダを使用する場合は、調整する必要があります。

終わりに

このリセットCSSも4年間現役でいられるでしょうか？ おそらく大丈夫です！前回のリセットCSSは何一つ問題を起こしていません。

いずれにせよ、プロジェクトをスタートさせるときのベースとして、私そしてわたし達にとってかなり重宝しているリセットCSSです。もちろん、クライアントのプロジェクトでももう一つのリセットCSSに遡ってアップデートすることはありません。このリセットCSSは完全に正常に機能するからです。

リセットCSSは、人々が頭を悩ませることの一つですが、実際のところブラウザが非常に良くなっている今日、そもそもリセットする必要すらないでしょう。私のアドバイスとしては、Webで見つけたもの中から気に入ったものを選んで、あなたやあなた達のチームにとって適した独自のリセットCSSを作成することです。

sponsors

Related Posts

関連記事が見つかりませんでした。

  • Xでシェアする
  • Facebookでシェアする
  • はてなでブックマークする
  • Raindropに保存する

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • 1Password ソースネクストだけの3年版
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp