12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【Guide】スマホサイトの作成・基本編
こんにちは（・∀・）
スマホサイトを作ると言ってもいろいろとあります。
例えば、既にあるWebサイトをPCサイト・スマホサイトに対応させる、一からPCサイト・スマホサイトを作る、PCサイトはすでにあるので、スマホサイトを別に作ってPCサイトとJavaScriptなどを利用して振り分けるなどなど...
ここではHTML5+CSS3を使って、一からPCサイト・スマホサイト(iPhone・Android)を作る方法についてご紹介していきたいと思います。
HTML5でスマホサイトを作るときの基本
HTML5でページを作成していきます。HTML5についての詳しい解説はHTML5・ページ作成の基本をご覧ください。
今回はPCサイト・スマホサイトを一つのHTMLで作りますのでPCサイトも考慮してHTMLを組んでいきます。
なお、スマホサイトの横幅はリキッドレイアウトで指定して可変レイアウトにします。スマホは縦でも横でもユーザーの好みでどちらでも閲覧することができ、横幅の表示解像度が変わるので、横幅のサイズ指定は可変になるよう%等の相対指定をします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<title>スマホサイトの作成・基本編 - Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>ヘッダーH1</h1>
<p>ヘッダー内容</p>
</header>
<div id="contents">
<article>
<h1>タイトル</h1>
<section>
<h2>セクションタイトル</h2>
<p>コンテント</p>
</section>
</article>
</div>
<footer>
<p>フッター内容</p>
</footer>
</body>
</html>
viewportの指定
初めにmeta要素でviewportを指定します。head要素内に以下の内容を記述します。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
viewport
viewportで表示領域を制御します。デバイスの縦画面のことをportraitと言い横幅は320pxになります。同じく横画面のことはlandscapeと言い横幅は480pxになります。しかしMobileSafariではデフォルトの解像度を仮想で横幅980pxにして表示しますので、縦画面の横幅を320pxでサイトのデザインをすると小さく表示されてしまいます。なのでその制御をviewportで調整します。
width
widthで表示領域(横幅)を指定します。指定できる値は数値(200px〜10000px)かdevice-widthと指定します。device-widthにすれば縦横問わず横幅320pxになります。
height
heightで表示領域(縦幅)を指定します。指定できる値は数値(200px〜10000px)かdevice-heightと指定します。初期値は横幅とのアスペスト比で計算された値になります。
initial-scale
initial-scaleで初期サイズを指定します。1.0でwidthを980に設定していたら980pxで表示されます。2.0でwidthを980に設定していたら1960pxで表示されます。
user-scalable
user-scalableでユーザーが画面の拡大・縮小の操作ができるかをどうかを指定します。yes(数字で指定する場合は1)またはno(数字で指定する場合は0)で指定します。
minimum-scale
minimum-scaleで最小サイズを指定します。user-scalableで画面の操作を許可している場合の最小サイズです。初期値は0.25、範囲は0から10までの値です。
maximum-scale
maximum-scaleで最大サイズを指定します。user-scalableで画面の操作を許可している場合の最大サイズです。初期値は1.6、範囲は0から10までの値です。
viewport以外の機能
viewport以外のWebKit系スマートフォン用ブラウザでサポートされるその他の機能です。
apple-mobile-web-app-capable
iPhoneでWebページをアプリっぽく見せる機能です。yesまたは1を指定するとアプリのように表示されます。noまたは0を指定すると普通のWebページの状態で表示されます。
<meta name="apple-mobile-web-app-capable" content="no">
format-detection
iPhoneで電話番号っぽい数字があると自動的に電話番号として認識してくれて、yesまたは1を指定するとタップして電話が掛けられるようになる機能です。必要なければnoまたは0を指定します。
<meta name="format-detection" content="telephone=no">
apple-touch-icon
Webページをホーム画面に追加した時に画面上に表示されるアイコンのURLを指定します。
<link rel="apple-touch-icon" href="apple-touch-icon.png">
rel属性のapple-touch-iconをapple-touch-icon-precomposedにすると光沢効果がなくなります。
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">
スマホ向けサイト作成ですが、今回はPCサイトとスマホサイトのHTMLを一つで作りますのでPCで必要なコードも入れていきます。IE8以下用にGoogle Codeで公開されているhtml5shivスクリプトを記述します。詳しくはHTML5・ページ作成の基本をご覧ください。
head要素内に以下の内容を記述します。
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
JavaScriptをオフにしている環境では適用されませんのでIE8以下では表示が崩れるおそれがあります。
また、CSSもHTML5で正しく表示されるよう設定しておきます。HTML5の新要素でブロックボックスとしてレンダリングさせる要素に対してプロパティdisplayに値blockを指定します。
article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
display: block;
}
iPhoneサファリの初期設定では縦画面から横画面に変更すると文字の大きさが自動で調整されるように設定されています。1行の文字サイズが多くなると読みづらくなるだろうというユーザビリティから来ているのだと思います。必要なければ下記CSSを設定して自動で調整しないようにします。
body {
-webkit-text-size-adjust: 100%;
}
以上がスマホサイト作成の基本になります。横幅は可変サイズにするのが基本！です^^