Corredor

ウェブ、プログラミングの勉強メモ。

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

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

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

動作デモはコチラ。

作った経緯

自分のメインサイト 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 にならい、下方向にだけ付ける方針とする。
    • コレがけっこう分かりやすくなるのでよさげ。
  • マージンやパディングなどのサイズ指定は remem で指定する。

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

主な機能・定義

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

  • html 要素
    • フォントを「パーフェクト設定」なサンセリフ系に変更。
      neos21.hatenablog.com
    • iOS 向けのフォントサイズ調整や慣性スクロールなど。
  • body 要素
    • ページ全体の余白をなくす : これまで padding も指定したりしていたけど、どうも margin だけで良いみたい。
    • line-height1.7 に指定 : 個人的にこのぐらいの行間で落ち着けた。
    • overflow-wrap (word-wrap) を指定 : IE11 は overflow-wrap に対応していないようだったので両方指定。
  • detailsmaindisplay: block を指定 : IE11 向け
  • よく使うブロック要素の margin-top0 に、margin-bottom1rem に統一。
  • ddliblockquotefigure 要素は左マージンに 2.5rem 開けるようにした。
    • ol 要素で3桁の箇条書き項番が出てきても大丈夫なように 2.5rem とした。
    • li 要素については、olulpadding-left を持っているので、コレを解除しておいた。
  • 見出しサイズを調整 : h1 要素を 2em とし、h5h6 は小さくなりすぎるので 1em にした。
  • addressem など、斜体になる要素をリセット。
    • 元々イタリックにするために生まれた i 要素だけは未指定で。
  • table 要素内の captionth と、dtem 要素あたりを太字にした。
  • 等幅フォントを使用する要素には「パーフェクト設定」な等幅フォントを指定。
  • codekbdsampvar に改めて font-size: 1em と指定 : IE11 向け。
  • フォーム部品のマージンをなくし、フォントと文字サイズを継承させるようにした。
  • blockquote は緑枠、precode などは灰色枠にスタイリング。figure は左に太枠線を置いてスタイリングした。
  • hr 要素は border-bottom で罫線を引いた。
  • fieldsethrtable などで使う罫線の色を灰色に統一。
  • summary 要素は開閉できる UI になるので cursor: pointer を指定。

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