Web制作者は要チェック!現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css

現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。

Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。

現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css

Reseter.css
Reseter.css -GitHub

Reseter.cssの特徴

Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。

サイトのキャプチャ

Reseter.css

  • バグやブラウザの不整合を修正
  • さまざまな要素のスタイルをリブート
  • .css, .min.cssの他に4つの異なるフォーマット(.sass, .scss, .less, .js)
  • ファイルサイズは、2.6Kb
  • 全要素のノーマライズが含まれます
  • box-sizing: border-box;を設定
  • すべてのブラウザで検証済み、最後から5つ前までのバージョンをサポート
人気が高いCSSリセットとの比較

人気が高いCSSリセットとの比較

各CSSリセットについては、以前の記事をご覧ください。

下記は、Chrome, IEのデフォルトとReseter.cssを使用した同じHTMLファイルの表示結果です。Chromeでは見出しが太字になり(Firefoxも同じ)、IEはさらに太くなりすぎています。IEでは本文のフォントも太字で、ボタンの境界線はブルーです。Firefoxではボタンの境界線は少し少なくなっています。

下記ではたった5種類のタグですが、実際には多くのHTMLのタグがあり、ブラウザも数多くの種類があります。これらのブラウザに対応するためにどうすればよいか、その答えがReseter.cssです。

各ブラウザでの表示の差異

5種類のHTMLタグによる各ブラウザでの表示の差異

Reseter.cssの使い方

通常のCSSリセットと同様に、HTMLに外部ファイルとして記述するだけです。

CDNはUnpkg, CDNJS, Githubなどでも提供されています。もちろん、ファイルはダウンロードして利用することもでき、NPMやYarnなどのパッケージマネージャのも用意されています。

CodePenにreseter.cssを適用したHTMLが用意されているので、試せます。

See the Pen
Reseter.css Quick Start For CodePen
by Krish Dev DB (@krishdevdb)
on CodePen.

Reseter.cssの中身

2021年4月現在、Reseter.cssの最新版は下記の通りです。
Webページの実装によく使用する要素のスタイルをはじめ、role="button"cursor: pointer;を適用したり、input::placeholderの不透明度をノーマライズしたり、アクセシビリティにも配慮されています。

reseter.css: 2021/4/10のバージョン

sponsors

top of page

©2024 coliss