[[HTML]] | [[HTML/HTML 4.01]] | [[HTML/XHTML 1.0]]
下記のサンプルプログラムを中心にHTML 5で色々試した内容をまとめています。
『はじめて作る人のためのiPhoneウェブ・アプリケーションfor Windows』~
佐藤信正著 Rutles刊
*シンプルなスマートフォン対応HTML 5フォーマット
#pre{{
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<title>シンプルなスマートフォン対応HTML 5フォーマット</title>
</head>
<body>
<h1>シンプルなスマートフォン対応HTML 5フォーマット</h1>
</body>
</html>
}}
*IE8以下にも配慮したHTML 5フォーマット
#pre{{
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>
<!-- Place your content here -->
<!-- SCRIPTS -->
<!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>
}}
-[[HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート（IE8以下も配慮） | コリス>http://coliss.com/articles/build-websites/operation/work/generic-html5-template-by-sixrevisions.html?scid=social30987536]]
*色々省略したHTML 5フォーマット
<!DOCTYPE html>
<meta charset="UTF-8">
<title>色々省略したHTML 5フォーマット</title>
<p>Hello!</p>
**結果
第１世代のiPod touch、iPad供に画面左上にとても小さく表示されました。~
特にiPod touchは画面が小さいので、文字が潰れて見えないくらいでした。~
画面サイズが980x1470と見なして表示されているそうです。~
**その他の特徴
-画面全体に対する文字のバランスはどちらの端末でも同じ比率
-ピッチで画面を拡大・縮小可能
-傾き可能な設定のとき、画面を横長に傾けると画面が横長
-画面を横長にすると１行目の横幅が広くなるが、これに合わせて文字が１行全体長さとの比率を保って拡大
これではiPhoneで見たとき文字が小さすぎます。viewportを使うと表示する画面サイズを指定できます。~
設定方法は２種類あります。~
~
***大きさがiPhoneの端末で画面設計し、iPadではそれを拡大する場合
<meta name="viewport" content="width=320">
iPod touchでは画面が横幅に対してほどよく文字が拡大しました。~
iPadではその画面が拡大された、大きめの文字の画面となりました。
***大きさがiPhoneの端末で画面設計し、iPadでは高解像度で情報量を多くする場合
<meta name="viewport" content="width=device-width">
iPod touchでは画面が横幅に対してほどよく文字が拡大しました。~
iPadでは指定しない場合と同じく小さい文字サイズでした。~
~
viewportにはセミコロンで区切って他にも設定できます。
|設定項目|範囲|デフォルト値|内容|
|width|200〜10000|980|viewport幅のピクセル値|
|height|223〜10000|widthから比例した高さ|viewport高さのピクセル値|
|user-scalable|yesまたはno|yes|見た目を拡大できるかどうか|
|initial-scale||1.0|拡大率初期値|
|minimum-scale|0〜10.0|0.25|最小拡大率|
|maximum-scale|0〜10.0|1.60|最大拡大率|
*サンプル２：iPhone用の拡大率を考慮したhtml5記述例
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=320">
<title>ラッキーナンバー</title>
<p>ラッキーナンバーは？7</p>
*良さげ
-[[HTML の <head>〜</head> 内に書くタグの順番にも気を遣いましょう。 | ONZE>http://on-ze.com/archives/4831]]
*テンプレート
-[[サイト設計の手間を大幅に削減する、実用HTMLテンプレート素材30個まとめ 2016年10月度 | PhotoshopVIP>http://photoshopvip.net/95451?utm_medium=twitter]]
-[[商用利用無料、最近のUIデザインが分かるレスポンシブ対応の高品質なHTMLのテンプレートのまとめ | コリス>http://coliss.com/articles/build-websites/operation/work/free-html-templates-for-responsive-2016-autumn.html]]
-[[HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート（IE8以下も配慮） | コリス>http://coliss.com/articles/build-websites/operation/work/generic-html5-template-by-sixrevisions.html]]
-[[Web制作が楽になる！すごい無料HTML＆PSDテンプレート素材35個まとめ 2014年7月度 | Photoshop VIP>http://photoshopvip.net/archives/66155]]
*リンク
-[[Googleが推薦するHTMLとCSSのコーディング方法>http://detarame.moo.jp/2012/08/07/googleが推薦するhtmlとcssのコーディング方法/]]
-[[スマホ向け HTML5 ウェブゲームを作るために必要な 5 つのこと | feb19.jp/blog>http://feb19.jp/blog/archives/000260.php]] ☆☆☆
-[[スマートフォン対応でよく使うhtml、css、javascriptのまとめ>http://kazu69.net/blog/memo/1023]] ☆☆☆
-[[これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ | てっく煮ブログ>http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/]]
-[[HTML5で追加されたinput typeのブラウザ対応について検証してみた。 | 株式会社LIG>http://liginc.co.jp/web/html-css/html/42756]]
-[[モバイルブラウザでの画像アップロードについて覚え書き | havelog>http://havelog.ayumusato.com/develop/others/e567-mobile_image_resize.html?utm_source=twitterfeed&utm_medium=twitter]]
-[[HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた | Publickey>http://www.publickey1.jp/blog/11/html5ipodiphone.html]] ... manifestファイルを使って、オフラインでも地図画像ファイルを扱う方法の解説
-[[デザイン力で勝負！ユニークすぎるiOSアプリ用アイコンまとめ + ファビコン設定方法 | PhotoshopVIP>http://photoshopvip.net/archives/60265]]
-[[iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 | U | NOTE【ユーノート】>http://u-note.me/note/47491557?utm_source=twitterfeed&utm_medium=twitter]]
-[[スマートフォン対応、気をつけたいトラブル スライドショー>http://www.slideshare.net/HiroakiWakamatsu/ss-14011485]]
-[[スマートフォンサイトのコーディング Tips あれこれ | バシャログ。>http://c-brains.jp/blog/wsg/14/04/23-150014.php]]
-[[スクリプト無し、動画をページの背景いっぱいに表示する方法 | コリス>http://coliss.com/articles/build-websites/operation/work/basic-fullscreen-video-background-by-mattgrosswork.html]]
-[[たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） | Design Color>http://designcolor-web.com/2014/06/09/smartphone-site-tips8/]]
-[[iOS - ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと | Qiita>http://qiita.com/kt_Biz/items/4ab05ed89e41254dc932?utm_source=dlvr.it&utm_medium=twitter]]
-[[iPhoneでもiframeを使ってスクロールさせて、かつ、PCとも外観を揃える方法>http://qiita.com/Shoesk/items/9f81ef1fd7b3a0b516b7]]
