Home > モバイル > 必見！携帯サイトをお手軽にiPhoneやスマートフォンに対応させる方法

必見！携帯サイトをお手軽にiPhoneやスマートフォンに対応させる方法

2008-11-08 (土) 19:54
モバイル
css | html | iphone | mobile | smart phone | xhtml

iPhoneの登場でスマートフォンで閲覧しやすいサイトの需要が高まってきたようです。
でもわざわざiPhoneやスマートフォン向けにサイトを作るのは大変・・・。
そんな方に、今までに制作したモバイルサイトをスマートフォン対応させる方法があります。
しかも5分でお手軽にできます！
htmlとCSSで解決する方法なのですが、実はこの方法を使うだけで開発もしやすくなる優れものです。

論より証拠ということで、まずはこちらをご覧ください。
（PCからでもオッケーです。htmlはこちらの記事で作成したものを使ってます。）
まず、こちらが普通に作成したモバイルサイト→before
そしてこれがその方法を使ったもの→after

やっていることは閲覧しているブラウザに応じて、3つのスタイルシートを読み込ませていることと、
iPhone用のmeta要素viewportを指定しているということ。

具体的には以下のような感じです。

１．viewportの指定

htmlソース

<meta name="viewport" content="width=320;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;" />

<head>内に書きます。見えている画面の横幅を320とするという意味ですね。
その他は、このあたりが参考になるかと。
http://d.hatena.ne.jp/zebevogue/20070820/1187604126

２．CSSの出し分け

htmlソース

<link media="only screen and (max-device-width:480px)" href="css/smart.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="css/pc.css" type="text/css" rel="stylesheet" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

これも<head>内に書きます。「media="only screen and～」というのはあまり見かけないかもしれませんが、
上は横幅が480px以下ならsmart.cssを参照しなさい。
下は横幅が481px以上ならpc.cssを参照しなさい。という意味。
そしてIEにはこのタグが効かないのでIE用のスタイルシートをあてています。
あともう1つ、全体を囲むdivタグにid="ie"を指定してあげてください。

<body>
<div id="ie">
<!--ここにコンテンツのソース-->
</div>
</body>

てなぐあいの作業で完了です。
ちなみに三種類のCSSですが、記事の下に貼っておくので使ってください。
適当にカスタマイズしてもらってもいいと思います。

お手軽ですが、キレイに見えるようになるので是非試してみてください。
開発するときも携帯に近い横幅で固定できるので非常にやりやすいですよ！

smart.css

a {text-decoration:none;}
body,div,span,font,input {
font-size:20px;
}
div {display:block;}
dl {margin:0;}
dd {margin:0 0 0 20px;}
form {margin:0;}
input[type=text] {width:180px;}
#pad {padding:5px 0px;}

pc.css

a {text-decoration:none;}
body {width:230px;}
div {display:block;}
dl {margin:0;}
dd {margin:0 0 0 18px;}
form {margin:0;}
input[type=text] {width:140px;}
div,input {font-size:small;}
#pad {padding:2px 0px;}

ie.css

a {text-decoration:none;}
body {width:230px;}
div {display:block;}
dl {margin:0;}
dd {margin:0 0 0 18px;}
form {margin:0;}
input[type=text] {width:140px;}
div,input {font-size:small;}
#pad {padding:2px 0px;}
#ie {width:230px;}