jQueryMobileでスマホサイト(CSSフォントとか幅とか)
CSS に 絶対的な使い方はないと思います。
みんな ケースバイケースで工夫しているようです
Adobe Developer Connection [ADC]/ Dreamweaver デベロッパーセンター/
スマートフォン時代のWebサイト制作 第3回 スマートフォン向けのコーディング
http://www.adobe.com/jp/devnet/dreamweaver/articles/smartphone_web_part3.html
①HTML4で普通のCMSとかWEBで使用されているのはYUI's CSS
reset.css
To use CSS Reset, include the following source file in your web page:
Eric Meyer’s のCSS Reset
http://meyerweb.com/eric/tools/css/reset/
fonts.css
To use CSS Fonts, include the following source file in your web page with the link element:
#demo {font-size:100%;} /*renders 13px */ てな感じ。
スタイルシートは後に記述されたものが効きます
id は 1ページに 1回しか使えません(jQueryMobileではページ遷移に使います)
class は ページの中で何度も使えます
id と classの優先順位は id です
②スマホ用の というかHTML5のreset.css
Google Codeで入手することができます。
html5resetcss – A reset stylesheet including HTML5 elements (Google Project Hosting)
http://code.google.com/p/html5resetcss/downloads/list
html5doctorのHTML5 Reset Stylesheet
Monday, July 27th, 2009 by Richard Clark.
http://html5doctor.com/html-5-reset-stylesheet/
IE6からIE8 とかHTML5の新要素に対応していない対策に
Remy Sharp氏が公開した『html5.js』というライブラリをインポート
http://code.google.com/p/html5shim/
スマートフォンサイト用に
iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう
http://www.html5-memo.com/css3/resetcss/
新しく Nomalize.css
http://necolas.github.io/normalize.css/
2013 年 2 月22 日に開催された W3Conf でもニコラス氏は、Nomalize.css を使うことがベストプラクティスであるとも触れていた
http://d.hatena.ne.jp/hukumarukun/20130428/1367117064
実際にhtml5を使ってコーディングした例のサイト
基本的な書き方(webのべんきょうは実践。)
http://d.hatena.ne.jp/hukumarukun/20130428/1367117064
③文字サイズは pxにしないこと
px(ピクセル)をemや％やptの単位に変換してくれるサイト
http://pxtoem.com/
body { font-size:62.5%; }の秘密
ほとんどのブラウザの標準状態の文字サイズの大きさが１６px で設定されています
emはエムと読み、相対的なフォントサイズを指定できます
標準では、1em が16px（ピクセル）に相当します
font-size:62.5% で１６px を基準値にすると
１emが１０pxで表示されるようになります
body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 0.7em; } /* =7px */
外人さん達も話し合っています
62.5% font size? - CSS-Tricks Forums
https://css-tricks.com/forums/discussion/17027/62-5-font-size/p1
④
DIVというボックス
div{margin:o auto;} ボックスが中央寄せになります
上下にマージン取らなくて 左右の幅の真ん中に持ってくる という感じ。
⑤
iPhone4から搭載のRetinaディスプレイは、画面解像度が640×960px。
小さな画像だと 粗くみえてしまいます
⑥
Androidにおけるコンテンツフィットと「overflow:hidden」
http://blog.webcreativepark.net/2011/01/28-000238.html
