リセットCSS

以前お話させて頂きましたが、現在私はサイトのテンプレートを作成する仕事を請け負っております。
その際にいくつか構成ファイルを用意するのですが、その中のリセットCSSについて今回は触れていこうと思います。
絶対必要というわけではないのですが、こういったものもあるという辺りで読んで頂けたらと思います。

リセットCSSとは？

リセットCSSとは、Webサイトのデザインを統一するために、すべての要素のCSSを初期状態に戻すためのCSSです。
WordPressにおいてリセットCSSは、ウェブサイトを作成する際にデフォルトで適用されるブラウザのスタイルをリセットまたは正規化するためのスタイルシートのことを指します。
通常、異なるブラウザやデバイスによってデフォルトのスタイルが異なるため、一貫性を持たせるためにリセットCSSが利用されます。
（言い換えるとブラウザによってデフォルトでmarginやpaddingなどCSSでスタイルが設定されています。）
デフォルトで適用されているCSSを全て0にするのがリセットCSSの役目です。

一般的に、テーマ作成やプラグイン作成でない場合、WordPressのテーマが十分にスタイルをリセットまたは正規化していると、追加のリセットCSSは必要ないことが多いです。
ただその他以下のような目的で使用する場面もあるかもしれません。

1. プラグインのスタイルとの競合：インストールしたプラグインが、テーマのスタイルと競合して表示が崩れる場合、リセットCSSを追加して競合を解消することができます。
2. 特定の要素のスタイルを完全にカスタマイズする場合：デフォルトのスタイルをすべてリセットして、自分で要素のスタイルを完全にカスタマイズしたい場合、リセットCSSを利用すると便利です。

リセットCSSのメリット

リセットCSSを使用すると、各ブラウザでのデフォルトスタイルをリセットすることにより次のメリットがあります。（かといって、必ずこれがないと以下が実現できないというわけではありません）

• 自分のデザインを自由にカスタマイズできる
• 自分のデザインを追加できる
• 簡単に修正できる

リセットCSSの使い方

リセットCSSを使用するには、次の手順に従います。（ちなみに私がよく作成で関わるのは、「destyle.css」ファイルです。）

1. テキストエディターで、リセットCSSファイルを作成します。
2. リセットCSSファイルに、次のCSSを記述します。
   githubに載っているものを参考にする時には、いらない指定を省くことに注意ください。（ファイルが大変重くなります）
   イメージがつきにくいかと思いますので、
   以下は私が作成しているテンプレートの一つのファイル・destyle.cssの一部分を載せておきます。
   　例えばで内容に触れますと、リスト表示の際黒丸が入らない様にする設定や、文字の設定が入っています。

body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
  margin: 0;
  padding: 0;
}

li,ul,ol { 
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,img { border: 0; }

address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}

ol,ul,li { list-style: none; }

caption,th { text-align: left; }

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,q:after { content:''; }

abbr,acronym { border: 0; }

a:focus{ outline: none; }


/*表示フォントの調整*/
html {
	font-size: 100%; 
}

body {
  font-family: "メイリオ", arial, helvetica, clean, sans-serif;
  font-size: 15px;
  line-height: 1.7;
	color: #3B3B3B;
	-webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 780px){
body {
    min-width: 100%;
    font-size: 68.5%;
    line-height: 180%;
}
}
select, input, button, textarea, button {
  font-family: "メイリオ", arial, helvetica, clean, sans-serif;
}
table {
  font-size: inherit;
  font: 100%;
}

3. リセットCSSファイルを、適用したいフォルダ内へアップロードします。（CMSによって違いますのでそれぞれの方法でアップロードします。）WordPressのテーマ作成ならテーマフォルダ内にFTPソフトなどを利用して保存します。そちらをhtmlファイルのheadタグ内に読み込むコードを記述することで使用できます。CDNコードを利用する場合は、headタグ内に読み込むコードを記述するのみでオッケーです。
   ※ここで注意したいのが、メインのスタイルシート（style.css）よりも前に記述しましょう。後に読み込んでしまうと、自分で作ったデザインがリセットされてしまいます。
4. そちらをhtmlファイルに読み込むコードを記述することで使用できます。メインのスタイルシートよりも前に記述しましょう。後に読み込んでしまうと、自分で作ったデザインがリセットされてしまいますので注意が必要です。

これで、リセットCSSが適用されます。

リセットCSSは、WordPressでデザインをカスタマイズする際に非常に役立つツールです。ぜひ、ご活用ください。