スマートフォンサイト制作に役立つCSS

CSSでスマートフォンらしくする
制作時に気をつける事（imgやコンテンツwidthについて）

について解説しています。

ＣＳＳ３でスマホサイトをスマホらしく

CSS3を記述するのって結構大変です。そんな時の為に簡単にコードを書き出してくれるWEBサービスをご紹介します。下記のブログ記事をご覧ください。楽に出来ると思います。

ここでは、ＣＳＳ３を利用して、スマホらしいスマホサイト？の作り方をご紹介します。
ＣＳＳ３で記述するとボタンやグラデーションなんかも簡単に実装できるので、いちいち画像を作らなくてもいいんです。

便利なＣＳＳ３ですが、ＰＣサイトにはまだ使うにはもう少し時間がかかりそうです。近年ＣＳＳ３に対応した
モダンブラウザ（IE9,Chrome,Firefox,Operaなど）が普及してきていますが、まだまだ対応していないブラウザが多いのも事実です。
~~なので、今のところスマホサイトだけに使うことにしましょう。（2012/4）スマホのブラウザはＨＴＭＬ５，ＣＳＳ３に対応してますので。~~

現時点（2014/8/20）ではIE6,7を利用しているユーザーは数％第まで減ってきています。また、IEに関してもまだ使われていますが、今後さらにユーザー数は減ると思いますので、これからはCSS3のテクニックをPC・スマートフォンに利用していきたいと思います。

※下記のボタンイメージはモダンブラウザIE9以上でなければ、正常に表示されません。

ボックス角を丸める border-radius
背景にグラデーションを施す -webkit-gradient
テキストに縁どりする text-shadow

ボックス角を丸める border-radius

webkit,moz,msはＰＣブラウザ対策の記述です。スマホはwebkitなので、こちらを入れてください。
ピクセルを調整すると角丸の角度調整ができます。

.boxSample{
-webkit-border-radius:8px;/*Chrome,Safari*/
-moz-border-radius:8px;/*Firefox*/
-ms-border-radius:8px;/*IE*/
border-radius:8px; /*角を丸める設定*/
border:1px solid gray;
}

ボタン

背景にグラデーションを施す -webkit-gradient

対応していないブラウザもありますが、最新のブラウザに合わせる書き方を紹介します。IE10以降、Firefox、Chrome、Safari、Android2系統に対応します。結構複雑な書き方なので、ジェネレーターを使ったほうがいいかもしれません。

.boxSample{
background: linear-gradient(to top, #c3fb00, #9cc900 ); //IE10以降
background:-moz-linear-gradient(to top, #c3fb00, #9cc900 ); //Firefox
background:-webkit-gradient(linear,left top, left bottom, from(#c3fb00),to(#9cc900)); //Chrome/Safari
}

ボタン

テキストに縁どりする text-shadow

テキストにシャドウをかけて浮かび上がったような文字を作ることができます。
設定方法（右方向位置の指定、下方向位置の指定、大きさの指定、色の指定）となります。

.boxSample{
text-shadow:1px 1px 2px #8F3030;
}

ボタン

スマートフォンの制作のポイント

1カラムにすること
widthを100％にすること
imgタグにheight,widthを入れないこと

1カラムにすること

ポイント！まずは1カラムにすることです。スマホの画面は小さいので、サイドバーなどを入れずに表示させます。
ＰＣサイトが複数のカラムで成り立っているなら、メインからむだけを表示するようにします。
重要度の低いカラムはメインコンテンツの下に表示させる。もしくはＣＳＳの{display:none;}で完全に非表示にします。

widthを100％にすること

ポイント！カラムを構成するボックスのwidthを100％にして、スマホの画面サイズの変化に自動的に合うようにします。
ボックスエリア(wrapper,header,content,primary,seconderなど)のwidth指定を変えてください。

スマートフォンには様々なサイズがあります。全てに個別対応をするのは非常に大変な作業です。
width100％にしておけば、ほぼ対応してくれますので、おっけーです。※100％でなければ反映されないという訳ではなく、90％などでも大丈夫です。コンテンツと相談して決めましょう。

imgタグにheight,widthを入れないこと

ポイント！画像の横幅指定をせずに、imgを記述し、スマホの画面に合わせるようにします。
もちろん、ＰＣ用画像のサイズは画像編集ソフトでしておいてください。
スマホの画面で画像サイズが固定されているとうまく表示されないので、ＣＳＳに下記コードを記述しておきます。※100％以下の指定でも反映されます。

※ちなみに私はもう、古いIEに対応する必要がなくなったと判断し、「width:100%」を外すようにしています。これを入れると、不必要なところで画像が拡大してしまうからです。「max-width:100%」であれば、画像本来の大きさ以上に拡大される事がありません。

img,iframe,object{
width:100%; //IE対策
max-width:100%;
height:auto;
}

box-shadowについて詳しく記事を書きました。↓
box-shadowについてはこちらの記事をご覧ください。

ソフトやサービスで作りたい方はこちらの記事もありますよ。
スマートフォンサイト作成ソフト