で作成し、Webサイトのフレームワークを作成する前にHTML5 - ダミー

iPhoneとiPadに表示されるWebサイトのフレームワークを作成する前に、スタイルを追加するときにページを見たい。これは、ワイヤフレームが本当に役立つところです。

次の図では、シンプルなブログのWebサイトの最初のページ（iPhone用）とiPad用の次の2つモード）。

<！ - 1 - >

基本的なブログには理想的な、比較的シンプルな3つのワイヤフレームデザインを探そう。表示されているようなワイヤフレームデザインは、サイト内のフレームワークをHTMLで作成する際に役立ちます。

<！ - 2 - >

あなたのサイトをどのように開発するかを決めたら、3つの全く異なるHTMLページを作成することができます。

あなたがその経路をとった場合、あなたのサイトの訪問者が使用しているデバイスの種類を検出し、そのデバイスの各ページのベストバージョンに誘導することができる複雑なプログラムであるデバイス検出スクリプトを使用する必要があります。最も幅広いユーザー層に到達する必要があるモバイルウェブサイトを設計している場合は、これが最善の方法です。

<！ - 3 - >

iPhoneとiPadに焦点を当てることの利点は、デバイス検出スクリプトを作成する手間を省くことができるということです。 iPhoneとiPadのSafari Webブラウザは複数のCSSファイルを読み取ることができるため、他の多くの携帯電話ブラウザでは不可能な機能です。

そのため、CSSを使用して、デスクトップやラップトップコンピュータの最新のブラウザ、iPhone、iPadでうまく動作するデザインを作成できます。

各デバイスで表示するために完全に異なるページを作成することもできますが、HTMLで1ページを作成し、次に3つの異なるスタイルシートセットを使用してデザインを調整することが最も効率的です。この目標を念頭に置いて、まず1ページのフレームワークを作成し、CSSを使用してその1つのHTMLページからさまざまなデザインを作成します。

ここでは、CSSを使ってできることすべてに慣れていない場合、少し夢中に見える部分があります。同じHTMLコードを使用して、図に示す3つのデザインのすべてを作成することができます。脇に置くなどの要素の配置はCSSで行います。