normalize.cssを最新バージョンで使おう

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのソースコードの冒頭付近にnormalize.cssが付いている。

normalize.cssはCSSの標準化を意味していてブラウザ毎のサイトのHTMLのデフォルトのデザインの互換性を保つためのCSSの独自のソースコードなんだ。

normalize.cssはデフォルトのHTML要素のスタイルにクロスブラウザを一貫して良く供給する小さなCSSファイルです。それは従来型のCSSリセットへの現代的でHTML5に対応した代替です。

原文

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

About normalize.css｜Nicolas Gallagher（訳出）

開発者の一人がニコラス・ギャラガーという。昨年からモバイルで使い易くなったウェブアプリのTwitter Liteの制作にも参加したらしい。世界有数のソーシャルメディアのTwitterに関与するとは相当な経歴の持ち主だろう。しかしプロフィールによれば人類学や哲学や自然科学を背景に活動しているようで、Ｔ・Ｓ・エリオットの詩：リトル・ギディングの一節を銘として引用していたり、一介の開発者、プログラマー以上の存在というか、只者ではないと畏怖を覚えさえもする。

私たちは探索を停止しないだろう
そしてあらゆる探索の終了は
開始した地点に私たちが到着し
そして最初の場所を知るためにある。

原文

We shall not cease from exploration
And the end of all our exploring
Will be to arrive where we started
And know the place for the first time.

Little Gidding by T. S. Eliot（訳出）

人間として素晴らしいという印象を与える。どんなブラウザで閲覧してもサイトのデザインが同等になるように仕向けるnormalize.cssには一つの思想が込められているに違いなさそうだ。自己批判の精神に共感するし、誰もが平等に暮らせる世界観や人道主義が反映してこそ生み出された方法がnormalize.cssではないか。ニコラス・ギャラガーの優れた性格、心惹かれた詩人の好きな言葉から捉えるとサイト作成で使わないわけには行かないくらい良いと思う。Bloggerの公式テーマに入っているのはバージョンが3.0.1で、古いのではないかと調べてみると確かに数年前のソースコードだった。現在では8.0.0までバージョンアップされている。ブラウザが絶えず、進化するので、normalize.cssはサイトに取り入れて十分に機能するために更新される必要があるわけだ。利用者も一回の導入で終わりではなくて、適宜、最新バージョンを使わないと勿体ない。サイトでのnormalize.cssの二つの使い方

外部ファイルを読み込む（CDNから）

ソースコードを記載する（Downloadから）

normalize.cssの更新履歴は提供元のメインサイトのChange to normalize.cssやGitHubの「CHANGELOG.md」などで確認できる。そして最新バージョンはCDNとDownloadの二つのタイプが現行はMITライセンスによって著作者や使用許諾を明記すれば無料で自由に使用できる。前者は最適接続（訪問者に近いサーバーを使ってサイトの表示速度を高める）のCDN（Content Delivery Network）の外部ファイルを読み込んで、後者はダウンロードしたソースコードを記載して取り入れられる。それぞれに利点があってCDNは外部ファイルのリンクを貼るだけだから手軽に、Downloadはサイトの他のCSSに合わせてカスタマイズ（不要な部分を削除して軽量化など）して設定できるのが大きな違いだ。サイトにCDNのnormalize.cssを導入する場合normalize.cssのメインサイトやGitHubのCDNのリンク先から所定の「normalize.css」のURLを選んで使う。幾つかのCDNの提供元が用意している。他にもサイト作成のためのライブラリーのcdnjsがnormalizeで出していて通常の「normalize.css」だけではなくてソースコードのデザインに不要な部分を削除して諸々の隙間を詰めて完全に軽量化された「normalize.min.css」を使えるのが相当に便利だろう。CDNのnormalize.cssは外部サイトのサービスだからたとえサイトに設定しても打ち切られて使えなくなる恐れが全くないわけではないのを予め注意しておきたい。HTMLのhead内にlinkタグで記述する

<head>
<link href="CDNのnormalize.cssのURL" rel="stylesheet">
</head>

Bloggerではエラーになるから幾らか修正する

<head>
<link href='CDNのnormalize.cssのURL' rel='stylesheet'/>
</head>

※html4以前のサイトはlinkタグに「type="text/css"」も追加する。Bloggerの公式テーマならば今はHTML5だから不要だ。記載する位置がサイトのCSS：styleタグのマークアップの前か後でデザインが変わる。ソースコードの指定先が同じところは後から上書きされて解除されるためだ。normalize.cssの基本的な使い方としてはサイトのCSSの先に記載して、適宜、上書きされるようにする。さもないとサイトのCSSは後から上書きされてnormalize.cssに同じところが解除されるので、最初から記載しておく必要がなくなる。反対に記載するとサイトのCSSを編集しなくてもnormalize.cssに含まれるデザインの同じところを解除して元に戻せる。サイトにDownloadのnormalize.cssを導入する場合normalize.cssのメインサイトやGitHubのDownloadから所定のファイルを受け取って使う。サイトのサーバーにアップロードして読み込むならばlinkタグでCDNと同じようにファイルのURLを記載すれば大丈夫で、それ以外は全文のマークアップを通常のCSSと同じように行う。HTMLのstyle内にソースコードを記載する

<style>
/*! normalize.cssのライセンス表記 */
normalize.cssのソースコード
</style>

Bloggerの場合は独自タグのskin内に記載する

<b:skin version='バージョンの番号'>
<![CDATA[
/*! normalize.cssのライセンス表記 */
normalize.cssのソースコード
]]>
</b:skin>

※独自タグのskin内のCDATAのソースコードはブログのマークアップのstyle内に自動的に置き換えられる。※HTML4以前のサイトはstyleタグに「type="text/css"」も追加する。Bloggerの公式テーマならば今はhtml5だから不要だ。サイトのCSSの前に置くか、後に置くかでnormalize.cssのデザインへの影響が変わるのはCDNの場合と同じで、基本的に前に置いて必要なところだけを上書きするように、そして元に戻すなどの特定の目的があれば後に置いて反対に上書きするようにマークアップを行うと良いと思う。ソースコードを編集して軽量化するnormalize.cssをDownloadから使うとマークアップの時点で、当該のソースコードを編集できるようになる。サイトのCSSの前に置いてデフォルトとしてデザインを一般的に整えるために必要ならば後で上書きされる部分とそれ自体の説明文や要素間の隙間は不要だから削除するとデータを減らすし、サイトを軽量化して表示速度を高めるのに役立つ。編集前の通常版のソースコードの一部

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document

========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections 

========================================================================== */

/**
 * Remove the margin in all browsers. 
 */

body {
  margin: 0;
}

編集後の軽量版のソースコードの一部

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}

ライセンスのコメント（/*! ～内容～ */）からソースコードは説明用のコメントやCSSの属性値の終わりの半角セミコロン（;）を削除すると共に必要な属性値の区切りの半角スペース（）だけ残して全て隙間なしにくっ付けてコードを並べる。サイトのCSSで後から上書きされるコードがあれば削除して構わない。注意すると指定先については同じでも属性が違うは場合は残しておく。例えばnormalize.cssで指定先のh1（大見出し）に二つの属性のfont-size（文字サイズ）とmargin（外側の余白）があって二つの属性がサイトのCSSで両方とも後から上書きされるならばh1を含めてfont-sizeとmarginを削除して大丈夫だけど、片方のfont-sizeならばそれだけを削除してh1ともう片方のmarginは残しておかないと必要なh1のmarginに反映しなくなってしまう。サイトにnormalize.cssを導入した後はメインサイトやGitHubを定期的にチェックしてバージョンアップしているかぎりは最新版へ速やかに付け替えるようにしながらソースコードに無駄なく使うのが気持ち良い。