今日はスタイルシートの適用方法の変更と、ブラウザのデフォルトスタイルシートをリセットします。

まずデフォルトのスタイルシートの適用方法は以下のようになっています。

この適用方法を次のように変えます。

cssfilemap.jpg(11488 byte)

  1. link要素でCSSファイルを読み込む。その際、「media="screen,projection,tv"」でNetscape 4を排除する。
  2. 上記で読み込んだstyle.cssで、さらに「@import url("～.css");」により個別のスタイルシートを読み込みMac IE 4.5を排除する。

この方法で、Mac IE 4.5、Netscape 4を排除するとともに（ Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト 参照）、CSSファイルを管理しやすくします。

さて、まずheader.phpの9～11行目を次のように変えます。

次に、style.cssのすべての内容を次のように書き換えます。

続いて、customizeフォルダに「css」というフォルダを作成します。
/wp-content/themes/customize/css

作成したcssフォルダの中に、ブラウザのデフォルトスタイルをリセットするための「reset.css」というファイルを作成します。内容についてはケースバイケースですが、僕は「Yahoo! UI Library」のreset.cssを参考にして作り、次のようになりました。

これをサーバーにアップするとCSSがリセットされました。

ブラウザのデフォルトスタイルをリセットした状態

今日はここまで。