オレオレノーマライズ CSS「Neo's Normalize」を作った

Normalize.css や、Bootstrap 4 から採用されている Reboot などの思想を基に、オレオレノーマライズ CSS を作った。その名も「Neo's Normalize」。

• GitHub - Neos21/neos-normalize: Neo's Normalize

動作デモはコチラ。

• Neo's Normalize

作った経緯

自分のメインサイト Neo's World では、古くは全称セレクタによる Reset.css、最近は Normalize.css をカスタムしたものを使っていた。また、はてなブログ類でも Normalize.css が組み込まれたテーマを基にカスタマイズして使っていた。

Normalize.css は大変優秀なのだが、個人的にはレガシーブラウザをサポートしなくていいかなーとか、フォーム部品のノーマライズが多くてファイルサイズがかさばるな〜とか思って、軽量版を作りたい、と思ったのがきっかけ。

そうしているうちに Bootstrap 4 が正式リリースされ、中身を見ていると Reboot という独自のノーマライズ CSS が用意されていることに気付いた。Normalize.css よりももう少しスタイリングされていて、特に「margin は bottom にだけ付ける」というルールが良いなと思った。

そこで、Normalize.css と Reboot のいいとこ取りをして、自分のサイト群のベースデザインに使えるスタイル定義をブチ込んで、独自のノーマライズ CSS を作ることにした。

方針

Neo's Normalize の製作方針は次のとおり。

• 自分が使うモダンブラウザで「大体」平仄が取れていれば OK とする。
  • レガシーブラウザは崩れようが認識されなかろうが無視。
  • iOS 端末のことは若干考慮するが、Android 端末は持っていないので無視。
  • 全部をキッチリ揃えきろうとも思っていない。ガチガチにしたいところはサイトを作る時に固定すればいい。
• 自分があまり使わない要素のノーマライズは入れない。
  • フォーム部品とか多用しないし、HTML5 から登場した新要素もあれやこれや使うことはないので、そういうモノのノーマライズは対象外。
• 自分がサイトを作る時、必ず入れる指定を入れておく。
  • html 要素に overflow-y: scroll を入れて、スクロールバーの有無で画面幅が変わらないようにするとか。
• 自分が作るサイトのベースデザインを予め取り入れておく。ノーマライズというよりは基礎的なスタイリングも兼ねる感じ。
  • そのため、フォントやカラーリングも指定している。
• マージンのとり方は Reboot にならい、下方向にだけ付ける方針とする。
  • コレがけっこう分かりやすくなるのでよさげ。
• マージンやパディングなどのサイズ指定は rem か em で指定する。

こんな感じで、完全にオレオレ用のノーマライズを作った。

主な機能・定義

主な機能、というか、主にスタイル定義したものを紹介しておく。

• html 要素
  • フォントを「パーフェクト設定」なサンセリフ系に変更。
    2018年以降はコレで決まり！Web サイトで指定するゴシック体・明朝体・等幅の font-family 設定
  • iOS 向けのフォントサイズ調整や慣性スクロールなど。
• body 要素
  • ページ全体の余白をなくす : これまで padding も指定したりしていたけど、どうも margin だけで良いみたい。
  • line-height を 1.7 に指定 : 個人的にこのぐらいの行間で落ち着けた。
  • overflow-wrap (word-wrap) を指定 : IE11 は overflow-wrap に対応していないようだったので両方指定。
• details・main に display: block を指定 : IE11 向け
• よく使うブロック要素の margin-top を 0 に、margin-bottom を 1rem に統一。
• dd・li・blockquote・figure 要素は左マージンに 2.5rem 開けるようにした。
  • ol 要素で3桁の箇条書き項番が出てきても大丈夫なように 2.5rem とした。
  • li 要素については、ol・ul が padding-left を持っているので、コレを解除しておいた。
• 見出しサイズを調整 : h1 要素を 2em とし、h5・h6 は小さくなりすぎるので 1em にした。
• address や em など、斜体になる要素をリセット。
  • 元々イタリックにするために生まれた i 要素だけは未指定で。
• table 要素内の caption・th と、dt・em 要素あたりを太字にした。
• 等幅フォントを使用する要素には「パーフェクト設定」な等幅フォントを指定。
• code・kbd・samp・var に改めて font-size: 1em と指定 : IE11 向け。
• フォーム部品のマージンをなくし、フォントと文字サイズを継承させるようにした。
• blockquote は緑枠、pre や code などは灰色枠にスタイリング。figure は左に太枠線を置いてスタイリングした。
• hr 要素は border-bottom で罫線を引いた。
• fieldset・hr・table などで使う罫線の色を灰色に統一。
• summary 要素は開閉できる UI になるので cursor: pointer を指定。

こんなところか。何か気付き次第ちょこちょこ直していこうと思うので、よかったら使ってみてほしい。