PapuuWiki
HTML/HTML 5
をテンプレートにして作成
開始行:
[[HTML]] | [[HTML/HTML 4.01]] | [[HTML/XHTML 1.0]]
下記のサンプルプログラムを中心にHTML 5で色々試した内容を...
『はじめて作る人のためのiPhoneウェブ・アプリケーションfor...
佐藤信正著 Rutles刊
*シンプルなスマートフォン対応HTML 5フォーマット
#pre{{
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initia...
<meta name="description" content="">
<meta name="keywords" content="">
<title>シンプルなスマートフォン対応HTML 5フォーマット</ti...
</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, initia...
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv...
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/...
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>
<!-- Place your content here -->
<!-- SCRIPTS -->
<!-- Example: <script src="//ajax.googleapis.com/ajax/lib...
</body>
</html>
}}
-[[HTML5でWebページを作成する時用の必要最小限をまとめたシ...
*色々省略した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> 内に書くタグの順番にも気を遣い...
*テンプレート
-[[サイト設計の手間を大幅に削減する、実用HTMLテンプレート...
-[[商用利用無料、最近のUIデザインが分かるレスポンシブ対応...
-[[HTML5でWebページを作成する時用の必要最小限をまとめたシ...
-[[Web制作が楽になる！すごい無料HTML＆PSDテンプレート素材...
*リンク
-[[Googleが推薦するHTMLとCSSのコーディング方法>http://det...
-[[スマホ向け HTML5 ウェブゲームを作るために必要な 5 つの...
-[[スマートフォン対応でよく使うhtml、css、javascriptのま...
-[[これがスマートフォン向けサイトを作るときの viewport 設...
-[[HTML5で追加されたinput typeのブラウザ対応について検証...
-[[モバイルブラウザでの画像アップロードについて覚え書き |...
-[[HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっ...
-[[デザイン力で勝負！ユニークすぎるiOSアプリ用アイコンま...
-[[iPhone/Androidブラウザで動画を再生するときのハマりポイ...
-[[スマートフォン対応、気をつけたいトラブル スライドショ...
-[[スマートフォンサイトのコーディング Tips あれこれ | バ...
-[[スクリプト無し、動画をページの背景いっぱいに表示する方...
-[[たった1行！スマホサイトのコーディング時に役立つ小技8（...
-[[iOS - ただのWebエンジニアがスマホサイトを開発するにあ...
-[[iPhoneでもiframeを使ってスクロールさせて、かつ、PCとも...
終了行:
[[HTML]] | [[HTML/HTML 4.01]] | [[HTML/XHTML 1.0]]
下記のサンプルプログラムを中心にHTML 5で色々試した内容を...
『はじめて作る人のためのiPhoneウェブ・アプリケーションfor...
佐藤信正著 Rutles刊
*シンプルなスマートフォン対応HTML 5フォーマット
#pre{{
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initia...
<meta name="description" content="">
<meta name="keywords" content="">
<title>シンプルなスマートフォン対応HTML 5フォーマット</ti...
</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, initia...
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv...
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/...
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>
<!-- Place your content here -->
<!-- SCRIPTS -->
<!-- Example: <script src="//ajax.googleapis.com/ajax/lib...
</body>
</html>
}}
-[[HTML5でWebページを作成する時用の必要最小限をまとめたシ...
*色々省略した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> 内に書くタグの順番にも気を遣い...
*テンプレート
-[[サイト設計の手間を大幅に削減する、実用HTMLテンプレート...
-[[商用利用無料、最近のUIデザインが分かるレスポンシブ対応...
-[[HTML5でWebページを作成する時用の必要最小限をまとめたシ...
-[[Web制作が楽になる！すごい無料HTML＆PSDテンプレート素材...
*リンク
-[[Googleが推薦するHTMLとCSSのコーディング方法>http://det...
-[[スマホ向け HTML5 ウェブゲームを作るために必要な 5 つの...
-[[スマートフォン対応でよく使うhtml、css、javascriptのま...
-[[これがスマートフォン向けサイトを作るときの viewport 設...
-[[HTML5で追加されたinput typeのブラウザ対応について検証...
-[[モバイルブラウザでの画像アップロードについて覚え書き |...
-[[HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっ...
-[[デザイン力で勝負！ユニークすぎるiOSアプリ用アイコンま...
-[[iPhone/Androidブラウザで動画を再生するときのハマりポイ...
-[[スマートフォン対応、気をつけたいトラブル スライドショ...
-[[スマートフォンサイトのコーディング Tips あれこれ | バ...
-[[スクリプト無し、動画をページの背景いっぱいに表示する方...
-[[たった1行！スマホサイトのコーディング時に役立つ小技8（...
-[[iOS - ただのWebエンジニアがスマホサイトを開発するにあ...
-[[iPhoneでもiframeを使ってスクロールさせて、かつ、PCとも...
ページ名:
