wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

配布中のレスポンシブWebデザインに対応したテンプレートご利用上の注意事項とか

レスポンシブWebデザインって何?ということをあんましわかっていない人が少なくないので、改めて記事に書いてみます。

そういう私も実際のところ最近知った言葉なので、まあ、無理もない気がしないでもないですが。

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

12

単一の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です。

IE8以下でもレスポンシブWebデザインに対応するために、respond.jsファイルが対応するための一つの手段として挙げられます。圧縮したrespond.min.jsだけで十分ですけど。

で、そのrespond.min.jsは、ローカルでは解釈できない仕様です。Web上ではじめてスクリプトが実行できるものだと記憶しています。

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