niwadesign

ホームページ制作のネタ発信

iAKG会

第2回iAKG会 iPhone上での表示に適した体制に変換するための基本的なテクニック

投稿日:2010/9/27 月曜日 更新日:

2章

2.1はじめの一歩

PCサイトをiPhoneで表示させて「改善の余地が多いね」って実感するための項。
このページは流し読みでオッケー!

2.1.1iPhone用のスタイルシート

共通HTMLを使ってCSSでiPhone用とPC用を切り替えよう。

  1. media属性のonlyキーワードでスタイルシートを切り替え
  2. IE専用の条件分岐を追加
スタイルシートの切り分け
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />

メディア機能「max-width」「min-width」とピクセル値の組み合わせでスタイルシートを切り替えるみたい。
でもここで疑問が1つ。iPhone 4の解像度は960×640ピクセルなのでこのやりかたじゃダメなんじゃない!?
と思ったけど、iPhone4もmax-width: 480px)でいけるみたい。

さてこのままだとIEは上記の振り分けを理解しないの、IE専用のスタイルシートも参照するようにする。

IE専用の条件分岐
<!--&#91;if IE&#93;> 
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> 
<!&#91;endif&#93;-->

2.1.2ページの幅の調整

iPhone用に表示領域を指定してあげます。これをしないと、iPhone版Safariがページの横幅を980pxとみなしてしまいます。

<meta name="viewport" content="user-scalable=no, width=device-width" />


viewpoint指定前


viewpoint指定後

まとめ

今回の勉強会で覚えたのは以下の通りです。

    <head>
        <title>Jonathan Stark</title>
        <meta name="viewport" content="user-scalable=no, width=device-width" />
        <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
        <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
		<!--&#91;if IE&#93;> 
		<link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> 
		<!&#91;endif&#93;-->
    </head>

今日はここまで。
次回は2.2iPhone向けのCSS

-iAKG会
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

第3回iAKG会 iPhone向けのCSS

今回はCSSを使ってiPhoneアプリケーションらしい表示の実現。 特徴的なタイトルバー 角丸箇条書きリスト 上記2点を実装して行くみたい。 2.2 iPhone向けのCSS body要素に対してのス …

第4回iAKG会 jQueryによる簡単なふるまいの追加

今回はjQueryを使って簡単な動きを追加します。 2.4jQueryによる簡単なふるまいの追加 ヘッダー部分のナビゲーションメニューをユーザーが表示、非表示と切り替えられるようにする。 ヘッダー内の …

no image

第1回iAKG会(iPhoneアプリケーション開発ガイドを読みながらの勉強会)

iPhoneが日本で発売されて2年以上が経ちました。 そこでそろそろ本格的にiPhone用のサイトを作ってみようと手に取ったのがこの1冊! とにかく “Making App Store A …