CSSリセット、2019年におすすめのカスタマイズ方法
Post on:2019年1月11日
sponsors
Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。
Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセットを紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- CSSリセットについて
- margin, padding, borderのCSSリセット
- フォントのCSSリセット
- レイアウトとbox-sizingのCSSリセット
- 特定要素のCSSリセット
- 属性と状態のCSSリセット
- スクリーンリーダー専用のユーティリティ
- あなたのCSSリセット
CSSリセットについて
A look at CSS Resets in 2018（翻訳記事: CSSリセットの現状）を公開した後、何人かの人から私が具体的にどのようにCSSリセットを変更して使用しているか質問されました。私のCSSリセットでベースになるのは、ブラウザのデフォルトのスタイルをいくつかリセットすることに加えて、使用するプロジェクトに必要なユーティリティを加えています。
私がベースにしているCSSリセットをGitHubにアップロードしました。
- base.scss -GitHub
※ここで紹介しているすべてのコードが含まれています。
このCSSリセットは、完全に自分用として作成しています。個人的な好みを共有するために公開したもので、他の誰かが私のやり方を真似るべきであると主張するものではありません。
とは言っても、他の人がどう思うか、どのようなCSSリセットを使用しているか気になります。よろしければ、コメントをください。
以下、私が使用しているCSSリセットについてセクションごとに解説します。
margin, padding, borderの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 |
html, body, h1, h2, h3, h4, h5, h6, a, p, span, em, small, strong, sub, sup, mark, del, ins, strike, abbr, dfn, blockquote, q, cite, code, pre, ol, ul, li, dl, dt, dd, div, section, article, main, aside, nav, header, hgroup, footer, img, figure, figcaption, address, time, audio, video, canvas, iframe, details, summary, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; } |
私がいつも最初にすることは、フォームのフィールド以外のすべての要素からmargin, padding, borderを取り除くことです。これは主に、MeyerのCSS Resetから2つ変更しています。
1つ目の変更は、使用する可能性が高い要素のみにしたことです。
例えば、menuなどの廃止予定の要素を削除し、また有効な要素でもrubyなどの使用する可能性がない要素も含めていません。
2つ目の変更は次にあるように、フォントスタイルのリセットは別のセクションに移動したことです。
フォントのCSSリセット
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
html { font-size: 62.5%; } body { font-size: 1.6rem; line-height: 1.4; } * { font-family: inherit; font-size: inherit; line-height: inherit; } a, a:visited { color: inherit; } |
私はhtml要素に62.5%のfont-sizeを定義し、remの単位を使用する方法を好んでいます。特別な理由はないのですが、私にとって現時点では惰性となっています。
また、すべての要素のfont-family, font-size, line-heightをその親から継承するようにリセットしています。これには強いこだわりがあり、実際に私のCSSリセットファイルへの新しい追加です。
通常の場合、段落要素とは異なるフォントスタイルを設定する時は積極的にしたいと思います。inputやbuttonのようなフォーム要素が、デフォルトの本文のように既にスタイルされているのも本当に便利です。デフォルトのMeyerのCSS Resetを使うと、私はいつもこれらの要素のフォントを別々にスタイルしなければなりませんでした。
最後に、私はリンクのカラーを本文と同じにしたいと思うので、それを継承するように設定します。
レイアウトとbox-sizingのCSSリセット
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
article, aside, footer, header, nav, section, main { display: block; } * { box-sizing: border-box; } *:before, *:after { box-sizing: inherit; } |
ここでは、HTML5の各要素に正しいdisplayを定義し、すべての要素のbox-sizingをborder-boxに定義します。
特定要素の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 |
table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } img, video { max-width: 100%; } img { border-style: none; } blockquote, q { quotes: none; } blockquote:after, blockquote:before, q:after, q:before { content: ""; cont |
ここでは特定の要素をターゲットにして、ブラウザがデフォルトで追加したスタイル設定の一部を元に戻します。この大部分はCSSリセットにおいてスタンダードだと思います。
属性と状態のCSSリセット
|
1 2 3 4 5 6 7 8 9 10 11 |
[hidden] { display: none !important; } [disabled] { cursor: not-allowed; } :focus:not(:focus-visible) { outline: none; } |
私はHTMLの特定の属性や状態のスタイルもCSSリセットで扱います。
hidden属性を持つ要素は見えてはいけません。
disabledの要素に対してcursorをnot-allowedに定義することは、個人的にすべてのプロジェクトに追加したいスタイルです。
:focus:not(:focus-visible)セレクタを使うと、ブラウザがフォーカスを表示する必要がないと判断した場合にoutlineを削除することができます。:focus-visible擬似クラスをまだサポートしていないブラウザの場合はルール全体は無視され、outlineは通常通りです。
スクリーンリーダー専用のユーティリティ
|
1 2 3 4 5 6 |
.sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); left: -9999px; top: -9999px; } |
CSSリセットの最後に、この.sr-onlyのユーティリティを加えます。このclassはドキュメント内に残るべきであるが視覚的には隠されるべきであるHTML要素に追加します。
あなたのCSSリセット
あなたが使用しているCSSリセットがカスタマイズされたものなら、私はあなたのCSSリセットまたはベースに何を含んでいるか見るのが本当に好きです。よろしければ、教えてください。
sponsors
