normalize.cssを最新バージョンで使おう 結城永人 - 2018年7月17日 (火) 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に関与するとは相当な経歴の持ち主だろう。 しかしプロフィールによれば人類学や哲学や自然科学を背景に活動しているようで、T・S・エリオットの詩:リトル・ギディングの一節を銘として引用していたり、一介の開発者、プログラマー以上の存在というか、只者ではないと畏怖を覚えさえもする。 私たちは探索を停止しないだろう そしてあらゆる探索の終了は 開始した地点に私たちが到着し そして最初の場所を知るためにある。 原文 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を定期的にチェックしてバージョンアップしているかぎりは最新版へ速やかに付け替えるようにしながらソースコードに無駄なく使うのが気持ち良い。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
Googleの誕生祝いでプロフィールアイコンに風船と紙吹雪が飛んで来た サイトを見ていたら妙な感じがするので、良く見てみるとGoogleサービスで、ログインして右上のプロフィールアイコンが出ているときに風船と紙吹雪が飛んで来ていることに気付いた。 Googleから久し振りに受け取った誕生祝い サマリー|Search Console| Goog...
コメント