Web サイトの互換化とは

  • android
  • iPhone
  • iPad

レスポンシブなデザインと互換化について

Web サイトのマルチデバイス対応には、1 つの HTML をマルチデバイスに対応させる "互換化" と、PC 用とデバイス用にそれぞれ専用の HTML を制作する "最適化" の 2 つの考え方があります。本サイトは、"レスポンシブなデザイン" を実装した、"互換化" によるマルチデバイス対応のサンプルになっています。

レスポンシブなデザインは、1 つの HTML ファイルを、スマートフォンからデスクトップまで、さまざまな種類の画面に積極的に適応させるという考え方のデザインです。表示される画面に応じて、カラムの幅や 数、そしてコンテンツのレイアウトも動的に変化します。レスポンシブなデザインは、"リキッドレイアウト" と HTML5/CSS3 の機能である "メディアクエリ" を組み合わせることで、可変レイアウトを実現します。

レスポンシブなデザインでは、画面の種類ごとに異なる数のグリッドを使ったグリッドレイアウトを採用する、可変グリッドレイアウトを使うのが一般的です。Dreamweaver CS6 には、ビジュアル環境で可変グリッドレイアウトレイアウトを利用できる新機能が追加されました。

フルブラウザで表示したときのキャプチャ画像

フルブラウザで確認

タブレットで表示したときのキャプチャ画像

iPadをはじめとするタブレットで確認

スマートフォンで表示したときのキャプチャ画像

iPhone, Android
スマートフォンで確認

メディアクエリ

レスポンシブなデザインでも使われるメディアクエリーは HTML5/CSS3 から導入された新しい機能です。メディアクエリは、従来、印刷用の表示に切り替える場合などに使われていたメディアタイプの構文を拡張したもので、例え ば、表示幅を条件に読み込む CSS ファイルを切り替えることが可能です。

iPhone の 320 ピクセル幅の画面と、デスクトップ上の 1024 ピクセルを超える幅の画面に対して全く同じレイアウトが使われたら、どちらかが使いにくくなりそうなことは容易に想像がつくでしょう。そのような場合でも、 メディアクエリを使えば、ページ内のカラム数やコンテンツの並べ方といったレイアウトルールを、表示する画面の状況に応じて選択できます。特にデバイス環境を中心とする、全ての最新のブラウザでサポートされています。

アドビと HTML5

2010 年 5 月、アドビの最高技術責任者ケビン・リンチは最高の HTML5 開発環境を提供する意向を表明、その第 1 弾として HTML5 Pack for Dreamweaver CS5 を紹介しました。その機能の 1 つであるマルチスクリーンプレビューは、メディアクエリーに対応し、同時に 3 種類の画面サイズを、それぞれ異なるスタイルが適用された状態で確認できます。同年 9 月に公開された Dreamweaver CS5 アップデートでは、HTML5 Pack を Dreamweaver CS5 に統合、正式に HTML5 / CSS3 を利用した Web 制作ワークフローがサポートされました。そして 2012 年 4 月に発表された CS6 では、更に HTML5/CSS3 関連の機能が強化されています

当サイトは、Dreamweaver CS5 を活用して作成されました。ページの表示幅に応じてレイアウトが変わる HTML5 / CSS3 のサンプルとしての利用が可能で、サイトのソースが提供されています。また、Dreamweaver CS6 の可変グリッドレイアウトの機能でつくられたサンプルサイトのソースも公開しています。Dreamweaver の新機能と共に、HTML5 / CSS3 の学習にご活用ください。