■iphone/android対応HTML
・HTML4.01
・XHTML1.0
・HTML5（ドラフト）
※HTML5がおすすめ
■画面サイズの最適化
●viewportの設定
viewportとは、iphone/androidのブラウザが採用している仮想ウインドウサイズ
⇒スマートフォンには画面サイズが複数あるため、以下のようにhead内に記述
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
・width
横幅の指定
※deviece-widthを指定すると端末の横幅に合わせてくれるので基本はdeviece-widthを使用。
・initial-scale
表示した時の倍率、「1」で1倍、「2」で2倍、指定を省略するとwidthで指定した倍率に自動調整。
・maximum-scale
iphoneでのダブルタップ、androidでの拡大ボタンを押した時に拡大される倍率。
・user-scale
ユーザーによる拡大縮小の許可をしていする。
・minimum-scale
最小倍率を指定する。
※iphone4のdevice-widthは640pxではなく、3G/3GSと同様の320pxになる。
参考：
●レスポンシブWebデザイン
メリット：
・ワンソースなので画像やテキストの変更などのメンテナンスが容易なこと
・CSSだけで実装するのでフロントエンドで開発が完結すること
・他のデバイスへの拡張性が高いこと
・スマートフォン非対応のCMSでもCSSの調整だけで対応できること
手順：
1.ピクセル単位でデザインしてパーセント単位に変換
2.画像サイズを指定する（Fluid Image）
3.respond.js の読み込み
※
CSS3で新たに定義されたメディアクエリーを利用して、デザインを変更する基準サイズを設定する。画面サイズ基準が一般的だが、レスポンシブWebデザインは「デバイス」ではなく「ウィンドウサイズ」を基準に判断するので、判断基準はこれ以外にもあり得る。
1. ピクセルでデザインして%に変換する
レスポンシブWebデザインは、width, padding, margin を%単位で指定するリキッドデザインの一種だ。
width, padding, marginを%単位で指定してレイアウトを組めればいいのだが、実際には非常に難しい。
そこで、一度ピクセル単位でレイアウトを指定してから、width, padding, margin を % に変更していこう。
たとえば、Webページ全体の幅であるbody要素が960px、その子要素であるheader要素が940pxの場合、
940÷960×100 = 97.916667%
となり、スタイルシートには header {width : 97.916667%} と指定する。
同様にすべてのwidth, margin, padding を%に換算していく。
2. 画像サイズを指定する（Fluid Image）
レスポンシブWebデザインでは、ウィンドウサイズが小さくなると画像を縮小させる。画像のサイズを変更するには、スタイルシートへ widthを追加する。このテクニックを「Fluid Image」という。
/*モダンブラウザ用*/
img, iframe, object { max-width : 100%; }
/*IE7用*/
.ie7 img, .ie7 object/ { width : 100%; }
/*IE8用*/
.ie8 img, .ie8 object { width:auto\9}
※imgsizer.js による画像の調整
Fluid Image を適用すると、Internet Explorer 7（IE7） 以下では画像の縮小時に粗く表示されてしまう。この現象を修正するスクリプトが「imgsizer.js」だ。head要素内にコンディショナル・コメントを利用して記述し、IE7以下の場合にだけimgsizer.jsを有効にする。
<head>
<!--[if lte IE 7.0]>
<script src=”assets/js/imgsizer.js” ></script> <![endif]-->
</head>
3. respond.jsの読み込み
「respond.js」は、メディアクエリーに対応していないIE8以下のブラウザーでもメディアクエリーを利用できるようにするスクリプトだ。非常に軽量なライブラリーで、古いIEでも簡単にメディアクエリーに対応できる。
**XHTMLの場合*******
画像を合わせる場合、
1.画像をアス比を変えず大きいものを準備
2.画像サイズのwidth=100%" hight=""
でviewportを設定するとうまくいく場合あり。
*******************
■reset css
文字サイズ・マージンなどのスタイルがブラウザによって異なるため、
ブラウザ標準スタイルを無効にする。
⇒HTML5 Doctor配布のhtml5reset.css使用
【html5reset.css】
/*
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
■clearfix_A
.clearfix{
content:"."; /* 新しい要素を作る */
display:block; /* ブロックレベル要素に */
clear:both;
height:0;
visibility:hidden;
}
■clearfix_B
div:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
※IE7用
div {
display: inline-block;
}
※IEの場合はheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。・・・らしい。
■clearfix_C
/* afterに対応したブラウザ向け */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* IE6 */* htm
.clearfix {
height: 1%;
}
/* IE7 */*:first-child+html
.clearfix {
height: 1%;
}
afterに対応したブラウザ向けの部分です。
after疑似要素はIE8以上、firefoxやsafari、chrome等の標準仕様に準拠したブラウザーで使えます。
afterとcontentプロパティを使って「高さが足りない／なくなっている要素の直後に文字（ピリオド）を追加」します。その文字をdisplayプロパティでブロックレベル要素の様に表示します。そこでclearをするという
最終更新：2012年03月19日 11:19
