トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

HTML/HTML 5

Last-modified: 2018-11-14 (水) 15:23:52 (2153d)
Top / HTML / HTML 5

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

↑

色々省略した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にはセミコロンで区切って他にも設定できます。

設定項目範囲デフォルト値内容
width200〜10000980viewport幅のピクセル値
height223〜10000widthから比例した高さviewport高さのピクセル値
user-scalableyesまたはnoyes見た目を拡大できるかどうか
initial-scale1.0拡大率初期値
minimum-scale0〜10.00.25最小拡大率
maximum-scale0〜10.01.60最大拡大率
↑

サンプル２：iPhone用の拡大率を考慮したhtml5記述例

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=320">
<title>ラッキーナンバー</title>
<p>ラッキーナンバーは？7</p>
↑

良さげ

↑

テンプレート

↑

リンク