[CSS]モバイルデバイス用のスタイルを初期化するフレームワーク -CSS Mobile Reset

サイト構築 -CSS

Post on:2010年11月19日

sponsorsr

iPhoneなどのモバイルデバイスを対象とした、スタイルを初期化するCSSのフレームワークを紹介します。

CSS Mobile Reset
キャプチャ：Demo 2（Demo 1もあります）

[ad#ad-2]

下記は各ポイントを意訳したものです。

CSS Mobile Resetの指針
CSS Mobile Resetのスタイルシート
Media Queriesを併用

CSS Mobile Resetの指針

このフレームワークは下記を指針として、現在もプロジェクトとして進行中のものです。

軽量にすること。
必要なHTML要素のみリセットすること。
必要なHTML要素のみを用意すること。
より良いタイポグラフィを提供すること。

軽量にすること

モバイルデバイスでのインターネット接続はスピードが遅く、そして高価です。そのため、CSSファイルをより軽量にし、速いダウンロードを提供することが良いユーザエクスペリエンスを提供することになります。

必要なHTML要素のみリセットすること

全てのHTML要素をリセットすることがスマートであるとは思いません。最低限必要な要素のみに絞って、リセットするのが良いでしょう。

必要なHTML要素のみを用意すること

いくつかのHTML要素をリセットした上で、モバイル用に最適化した設定をすることは良いことです。例えば、画像のサイズはモバイルのスクリーンより大きくないようにします、また一行がスクリーンを超えてしまうようであれば、収まるようにします。

より良いタイポグラフィを提供すること

ズーム機能無しでも読みやすいように、大きいフォントサイズを提案します。デフォルトで16pxでしょうか。もちろん、それを変更することを遠慮しないでください。

CSS Mobile Resetのスタイルシート

上記の指針をふまえて、現状は下記のようになります。

CSS

※日本語環境の場合は「font-family」など適切に変更してください。

/* CSS Mobile Reset */
html, body
{
 margin: 0;
 padding: 0; 
 border: 0;
}

body 
{
 font-family:Arial,  sans-serif;
 line-height:1.5;
 font-size:16px;
 background: #fff;
 padding:5px;
 color: #000;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
}

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

p img { float: left; margin: 0 10px 5px 0; padding: 0; }

img { border: 0; max-width: 100%; }

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

[ad#ad-2]