www.wanichan.com

レスポンシブWebデザイン対応テンプレート使用上の注意事項

Section 1 モバイル対応にするために
最終更新日時: 2014/04/21 02:38:46
  • このエントリーをはてなブックマークに追加

当サイトで配布している、レスポンシブWebデザイン対応のテンプレートを活用していただく上での注意事項について説明します。

レスポンシブWebデザインって何?

レスポンシブWebデザインとは、単一のWebページでウィンドウサイズに合わせてレイアウトを変えたり非表示にできたりするデザインのことです。スマホからみても、デスクトップからみても、表示するページのURLは単一です。しかし、デバイス幅によってレイアウトが変わります。段組みなしから段組みレイアウトになったり、スマホのみのスタイル、デスクトップのみのスタイルという感じでいろいろと分岐できます。

デバイスの幅に応じてレイアウトが変わる

スマホでもちゃんと読めるコンテンツにする

単一のWebページであるからこそ、デスクトップよりもむしろスマホからでも問題なくコンテンツを見やすく配慮しなければいけません。たとえば、複雑な表は画像化しないといけないでしょう。画像にしてしまうと再編集ができなくなるというデメリットもあります。とにかく制約がいろいろとあります。ポイントとして「スマホでもちゃんとコンテンツ読めるか?」というのが重要事項になってくるのです。

Expression Web 4でのデザインビューの仕様

ZIPファイルを展開して、作業中のサイトにindex.html、master.dwt、および、style.cssとrespond.min.jsの4つのファイルをインポートした後、index.htmlやmaster.dwtをExpression Web 4で開いた場合は、基本レイアウトで表示されます。ちなみに、respond.min.jsはローカルではなくWeb上にパブリッシュを行ったときにはじめてレスポンシブWebデザインに非対応のブラウザーでも対応できるようになります。

Expression Web 4のデザインビューって、レスポンシブWebデザインに対応しているのか?というと、否です。

そもそも、Expression Web 4におけるデザインビューはInternet Explorer 8のレンダリングエンジンを使っている気がします。よって、CSS 3ではじめて登場したスタイルは再現できません。IE8はCSS 3に対応してませんし、レスポンシブWebデザインにも対応していません。角丸スタイルもデザインビューに再現できません。

Expression Webでは@mediaブロックで記述されたスタイルはデザインビューでは無視されます。あくまで直接スタイルを記述した場合のみです。

レスポンシブWebデザインを確認するには

デスクトップバージョンのレイアウトを確認する場合は、、Expression Web 4からはブラウザーでプレビュー(F12)を行ってください。ただし、IE8はNGです。

そのブラウザーウィンドウの大きさを変えていくことで、レイアウトが変わっていくことが確認できると思います。

お使いのOSがWindows XPの方は新しいPCに買い替えてください。Windows XPではIE8までしか提供されません。

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

▲このページのトップへ