5月 182012
 

 

【 全体 】

【 リスト 】
【 ボタン 】
【 部品 】
【 CSS 】
【 フォーム 】

参考URL:西畑一馬のjQuery Mobileデザイン入門

 


5月 172012
 

 

【 主なスマートフォン機種の画像解像度 】

 

 機種名  キャリア 画像解像度
 GALAXY S Ⅱ LTE SC-03D  docomo  480 x 800 ピクセル
 Xperia SO-01B  docomo  480 x 850 ピクセル
 Xperia SO-02D  docomo  720 x 1280 ピクセル
 AQUOS PHONE IS14SH  au  540 x 960 ピクセル
 iida INFOBAR A01  au  540 x 960 ピクセル
 iPhone 3GS  SoftBank  320 x 480 ピクセル
 iPhone 4 / 4S  SoftBank、au  640 x 960 ピクセル

 

 

【 Viewportと画像解像度の違い 】

ViewPortとは、コンテンツ表示領域のこと。ステータスバー、コントロールボタンを覗いた画像領域を指す。

必ずしも画像解像度=ViewPort ではない。

 

例としてiPhone 4 を紹介。

 

iPhone 4の画面解像度は、640ピクセル。

iPhoneのViewPortのデフォルト値は、980ピクセル。

ここに、幅320ピクセルの画像が入ったHTMLを表示すると、横幅の1/3 に画像が表示される。

もちろん、ViewPortの設定値が320ピクセルだったら、画面いっぱいに画像は表示される。

これは、iPhoneの標準ブラウザである、Mobile SafariのViewPortの幅が980ピクセルの為。

 

jQuery Mobileを用いてスマフォ向けサイトを作る時は、次のような指定をすること。

<meta name="viewport" content="width=device-width, initial-scale=1">

上記コードの意味は、幅をデバイス幅にする、初期拡大率を1にする。この設定をしておけば、jQuery Mobileを利用して作られたサイトは、どのスマフォでも適切なサイズで表示されるようになる。

 

 


4月 262012
 

 

 

前からHTML5には興味があったのだが、以下のサイトを見て、ビビッと身体に電気が走った。(ビビビッではない、ビビビッだと松田聖子になってしまう)

 

HTML5サンプル集・デモリンク集まとめ / HTML5の普及の序章(8)

 

という事で、最近、技術的な事を殆ど勉強していないので本格的に勉強しようと思う。

 

まだまだ何も分からない事だらけ。あせらず、一歩一歩理解して行こう。

最終目標としては、

 

・HTML5のホームページを開設する(HTML5のカテゴリ数が20を超えたら作ってOK)

・小生が持っているホームページをHTML5で作る(万歩計、お買い得、Etc)

・HTML5でスマフォアプリを公開する

・HTLM5のホームページで、無料テンプレートを公開する(下部にタブ付き、取りたければ1000円おくれみたいな)

・本を出版したい(本を出すのは長年の夢)

 

ざっ と書き出した所、こんな感じでしょうか。

情報も多そうだし、まずは簡単な本を購入しようと思います。

 

記事ネタを考えてみる

1.そもそもHTML5って何?

2.HTML5で作られたアプリってどんなのがあるか?

2-1 HTML5を使うと何のメリットがあるの?

2-2 各ブラウザの対応状況ってどんな感じ?

2-3 各スマフォの対応状況ってどんな感じ?

3.HTML5って難しいの?

小生が経験した言語と比較する ⇒ Java、VB6、.Net、PHP、JavaScript、Etc

どんなコードを書けばどんな事が出来るの?

4.これからやっぱり主流になるの?

5.サンプル見せて

6. スマフォの各機能のどれだけ実装されているの?

7.HTML5を作るには、何から勉強すれば良いの?(HTMLは知ってるけど)

8.HTML5のサンプルコード1

9.HTML5のサンプルコード2

10.HTML5のサンプルコード3

 

 

 


Get Adobe Flash player