menu
menu

スマホサイトの作成・基本編 | Webデザインラボ

キーワード検索

12月のアクセストップ10

  1. ( 2↑) CSSだけでドロップダウンメニュー
  2. ( 1↓) スマホサイトの作成・基本編
  3. ( 3-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 7↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) jQueryでドロップダウンメニュー
  7. (10↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 6↓) スマホ・タブレット・PCの振り分けいろいろ
  9. ( 8↓) Windows 10にApache2.4 VC11をインストール
  10. ( -↑) jQueryで日時を表示【実践でjQuery入門】
  • facebook31
  • はてなブックマーク39
  • Google+3
  • Pocket0
  • Twitter0

スマホサイトの作成・基本編

  • Guide

HTML5

こんにちは(・∀・)

 スマホサイトを作ると言ってもいろいろとあります。
 例えば、
 既にあるWebサイトをPC・スマホサイトに対応する、
 一からPC・スマホサイトを作る、
 スマホサイトを別に作って(HTMLも別)PCサイトと振り分ける。
 などなど…

 ここでは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で表示領域を制御します。デバイスの縦画面のことをportraitと言い横幅は320pxになります。同じく横画面のことはlandscapeと言い横幅は480pxになります。しかしMobileSafariではデフォルトの解像度を仮想で横幅980pxにして表示しますので、縦画面の横幅を320pxでサイトのデザインをすると小さく表示されてしまいます。なのでその制御をviewportで調整します。


 widthで表示領域(横幅)を指定します。指定できる値は数値(200px〜10000px)かdevice-widthと指定します。device-widthにすれば縦横問わず横幅320pxになります。


 heightで表示領域(縦幅)を指定します。指定できる値は数値(200px〜10000px)かdevice-heightと指定します。初期値は横幅とのアスペスト比で計算された値になります。


 initial-scaleで初期サイズを指定します。1.0でwidthを980に設定していたら980pxで表示されます。2.0でwidthを980に設定していたら1960pxで表示されます。


 user-scalableでユーザーが画面の拡大・縮小の操作ができるかをどうかを指定します。yes(数字で指定する場合は1)またはno(数字で指定する場合は0)で指定します。


 minimum-scaleで最小サイズを指定します。user-scalableで画面の操作を許可している場合の最小サイズです。初期値は0.25、範囲は0から10までの値。


 maximum-scaleで最大サイズを指定します。user-scalableで画面の操作を許可している場合の最大サイズです。初期値は1.6、範囲は0から10までの値。

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%;
}

 以上がスマホサイト作成の基本になります。横幅は可変サイズにするのがポイント!です^^


関連リンク

 スマホサイトの作成・レスポンシブデザイン


 サイドバーがスライドするドロワーナビ(レスポンシブ)

 コンテンツがスライドするドロワーナビ(レスポンシブ)

 HTML5でレスポンシブ3カラムレイアウト

 HTML5でレスポンシブ2カラムレイアウト

 ユーザーエージェントでCSSを振り分ける(クッキーを使用する)

  • カテゴリー:Guide
  • facebook31
  • はてなブックマーク39
  • Google+3
  • Pocket0
  • Twitter0