iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう

iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。

スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。

今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。

iPhoneサイト制作（スマートフォンサイト制作）にreset.cssは必要？

そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。

PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、reset.cssを読み込むことはコーディングの効率化やブラウザ検証の際の誤差を防ぐために有効です。

ですが、スマートフォンサイトの場合は主にiPhone用のsafariやAndroid向けブラウザが主流であり、ブラウザ間でのデフォルトスタイルの違いがそれほどありません。

なので、スマートフォンサイト用のスタイルを制作する場合、必ずしも詳細なreset.cssは必要ないと思われます。

reset.cssの記述を減らすことでスタイルを最適化

reset.cssでタグごとにリセットの記述をした場合、後から同じタグに別の命令をかけたり、それを打ち消すような命令をかけることは、結果として読み込みスピードを落とすことになってしまいます。

例えば、reset.cssであらかじめ<a>タグのpaddingを0にした場合、その後から特定のclassの<a>タグにpaddingを10pxに指定すれば、padding:0; ＜ padding:10px; というような二重の打ち消しの命令がかかっていることになります。

こういった打消しの命令を重ねることは、PCブラウザほどの処理スピードがないスマートフォンのブラウザにとっては、あまり理想的ではありません。

できるだけブラウザのデフォルトスタイルを有効に使い、すべてのタグにかけるようなreset.cssの記述は必要最低限に減らして、スタイルの読み込みスピードを上げることが、スマートフォンサイトとして最適化されたスタイルへとつながります。

iPhoneサイト制作（スマートフォンサイト制作）に最低限必要なreset.css

以前紹介したHTML5でのreset.cssをもとに、その中でもスマートフォンサイトに最低限必要と思われる記述に絞ったものが以下のものです。

※使用するスタイルやサイトによって必要な記述が変わる可能性があります。実際に検証しながら、reset.cssをカスタマイズして最適化することをおすすめします。

/*行の高さをフォントサイズと同じにして余白をリセットしています
（※padding:0;は省略しても違いが見られなかったためmargin:0;のみ）*/
body {
    line-height:1;
    margin:0;
}

/*ブロックレベル要素の余白をリセットしています
（※padding:0;は省略しても違いが見られなかったためmargin:0;のみ）*/
h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

/*HTML5での新規追加要素のデフォルトをブロック要素へ変更しています
（※Android2.1以前のブラウザではインライン要素となっているようでした）*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています
（※罫線の色を変える場合は#ccccccの部分を変更）*/
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*リスト要素のリストスタイルと余白をリセットする
（※margin:0;は省略しても違いが見られなかったためpadding:0;のみ）*/
ul {
	list-style:none;
	padding:0;
}
li {
	padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

以上のような記述をした上で、それぞれのタグにidやclassごとにスタイルをかけていけば、重複した打消しの命令を防ぐことができます。

※要素のフォントサイズや余白のリセットの大半を削っておりますが、これは自分の制作の際に検証してみて、省略しても影響がなかったためです。制作するサイトによっては影響があるかもしれませんので、ご注意ください。

ここでは省略しましたが、テキストの打ち消し線やmark要素などを使用する場合は、以前紹介したHTML5でのreset.cssをもとに追加してカスタマイズしてみてください。

その他に、スマートフォンサイト特有の共通したスタイルなど、最初にかけておくとよいと思ったものを以下にまとめます。

iPhoneサイト制作（スマートフォンサイト制作）用にかけておくとよいスタイル

/*スマートフォンサイトではタップしやすいようにaタグはあらかじめブロックレベルとしておくとよい*/
a {
    display: block;
}

/*スマートフォンサイトでaタグをタップしたときにでるハイライトの色を消す*/
a {
    -webkit-tap-highlight-color:transparent;
}

スマートフォンサイトを制作していく上で、reset.cssに限らず、スマートフォンサイトに共通して読み込んでおくと便利な記述や、読み込まなくてもよい記述があると思います。

そういったCSSを自分なりのスマートフォンCSSのテンプレートとして改良していくことがスマートフォンサイトの最適化へとつながります。

もちろんreset.cssというどのサイトにも使う共通ファイルは使用せずに、案件毎に該当する箇所を記述してくという方法が良い場合もあるかもしれませんので、今後、勉強していくうちにどんどん改良して、またご紹介できればと思います。

今回作成したreset.css

見やすいように改行を入れましたが、改行を取ることも軽量化になるかとおもいます。

body {
    line-height:1;
    margin:0;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

ul {
	list-style:none;
	padding:0;
}
li {
	padding:0;
}

input, select {
    vertical-align:middle;
}

a {
    display: block;
}

a {
    -webkit-tap-highlight-color:transparent;
}

他にもこれをしたほうが効率がよい！などありましたら是非教えてください。