ワードプレステーマ制作において、リセットCSSは必要?

ワードプレステーマ制作を始めるにあたって、最初にぶつかる壁が「ワードプレスもリセットCSSが必要なの?」

ということではないでしょうか。

普通のHTML/CSSサイトはリセットCSSが必要ですが、ワードプレスにおいても必要なのでしょうか?

このことについて、実際にテーマを作ってみた私が書いていきます。

ワードプレステーマ制作、リセットCSSは必要?

結論からいうと、ワードプレステーマ制作においてもリセットCSSは必要です。

ワードプレスといえど、結局のところHTML/CSSサイトをPHPでコントロールしているだけなので、

テーマ制作においてリセットCSSは必要です。

なので、ワードプレステーマ制作をする際、まずはHTMLCSSでサイトを作ると思いますが、リセットCSSを読み込んでください。

【2024年4月19日追記】

ワードプレステーマ制作の場合、リセットCSSではなくサニタイズCSSを使うことをおすすめします。理由はこちら↓

ワードプレスでリセットCSSがブロックエディタで出力した部分に効いてしまう。

おすすめのリセットCSS

リセットCSSはたくさんの種類があります。

有名どころだと

  • Eric Meyer’s “Reset CSS”2.0
  • HTML5 Doctor CSS Reset
  • destyle.css

おすすめはHTML5 Doctor CSS Resetです。ひと昔前に多く使われていた「Eric Meyer’s “Reset CSS”2.0」をHTML5に対応させたもので、個人的には使いやすいです。

ただbox-sizing:border-box;ではないので、これを追加するとよいでしょう。

destyle.cssはbox-sizing:border-box;だしいいのですが、inputタグなども全てリセットされてしまい、私にはちょっとリセットされすぎな感じがします。

ワードプレスでリセットCSSの読み込み方。

ワードプレステーマ制作においてリセットCSSの読み込み方を解説します。

まずは普通にHTML/CSSでサイトを作ると思いますが、その際は普通にheadタグで読み込んでください。

必ず最初にリセットCSSを読み込んでから通常のCSSを読み込んでください。当然ですよね。後でリセットCSSを読み込んだら通常のCSSが全てリセットされてしまいますから(^^;)

HTML/CSSサイトが完成したら、次はワードプレステーマ化ですよね。

その際はheadタグでCSSを読み込むのではなく、functions.phpというファイルで読み込みます。

なのでheadタグ内のこのコードは削除しちゃいます↓

ではどうやってfunctions.phpでCSSを読み込むかというと、

例えば最初にreset.css、次にstyle.css、最後にresponsive.cssを読み込むとすると、このように書きます(style.cssだけcssフォルダから出してます)↓

これでCSSが読み込まれ、見た目もちゃんと変わります。

なぜワードプレスではheadタグ内ではなくfunctions.phpファイルでCSSを読み込むかというと、

テーマやプラグインで複数のCSSファイルを読み込む際に、正しい順番で読み込まれるようコントロールしたり、重複して読み込まれるのを防ぐためです。

以上です。

【2024年4月19日追記】

ワードプレステーマ制作の場合、リセットCSSではなくサニタイズCSSを使うことをおすすめします。理由はこちら↓

ワードプレスでリセットCSSがブロックエディタで出力した部分に効いてしまう。

タイトルとURLをコピーしました