normalize.cssって何？WordPress自作テーマを作るなら入れておきたい理由とは？

2017/04/12 Author:BOR

費用：0円　時間：5分

自分でWordpressのテーマを作成する。

通常、公開されている無料テーマをカスタマイズして利用していく人が多いと思います。

しかし、公開されているテーマでは満足できない場合は自作するほかないでしょう。

ということで、phpとcss、javascriptを書いていくわけであります。

しかし、そこで意外に難しいのがCSS（スタイルシート）です。

CSSはブラウザによって挙動が違います。また、初期値・既定値が異なっています。

つまり、開発の時に一々すべてのブラウザで確認する必要があるのです。

当然すべてのブラウザには、すべてのversionという意味も含まれています(>_<)

それは面倒でしょう？

ということで、すべてのブラウザでCSSを標準化（まあ、これならサイトに見えるよね？っていうライン）を最初に設定してやる必要があるのです。

それがnormalize.cssなのです。

normalize.cssとは

それぞれのブラウザ、バージョンごとに異なる初期値を、なるべく一般化し同じ表示となるように規定されたCSSファイルのことを言います。

2017年4月12日現在はver6.0.0で、Chrome, Firefox, Opera, Safari 6+, IE 8+に対応しています。まあ、ほとんどのブラウザに対応していますね。

適用するためには、ファイルをダウンロードしてheaderにリンクを張ります。

ということで使い方を紹介いたします。

使い方

まず、normalize.cssをダウンロードします。

githubのnormalize.cssページにてダウンロードをクリックします。

すると、normalize.cssのコードが表示されます。

Google chromeの場合はそのページ上で右クリックして名前を付けて保存をクリックしましょう。

これで保存ができました。名前は規定のままでおｋです。

そして、Wordpressにアップロードしましょう。

アップロード先ですが、wp-conent/themes/利用したいテーマ/　にcssというフォルダを作成し、そのcssフォルダ内にnormalize.cssをアップロードするとよいでしょう。

そしてheaderタグの中にリンクを書いていきます。


<head>

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); //使用中テーマディレクトリのURLを出力 ?>/css/normalize.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); //使用中テーマのスタイルシートURLを出力 ?>">

</head>

ここで注意したいのは、Wordpressのデフォルトのスタイルシートの前にnormalize.cssを読み込む必要があるということ。

normalize.cssが後に読み込むと、デフォルトのスタイルシートで規定したスタイルがnormalize.cssに初期化されてしまうからです。

これでおｋです(*^^)v

複数ブラウザに対応したサイトを作りましょう(^^)/

- サイト作成, プログラミング wordpress