A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

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

   

費用:0円 時間:5分

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

それは面倒でしょう?

 

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

 

それがnormalize.cssなのです。

 

sponsored link

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の場合はそのページ上で右クリックして名前を付けて保存をクリックしましょう。

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

 

そして、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に初期化されてしまうからです。

 

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

 

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

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

adsen

adsen

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事