レスポンシブWebデザインの作成の流れ
Expression Webを使ってレスポンシブWebデザインのサイトを作成するには、まず、モバイル表示のスタイルを定義して、デスクトップの場合のレイアウトのスタイルを定義するとOKです。Expression Webではfloatプロパティが使われているボックス内の定義リストなどがうまく操作できないため、基本スタイルには適用しないのがポイントです。
はじめに
このページをExpression Web 4のデザインビューで開くと、以下の図のようになります。
デスクトップではなく、タブレットの縦向きモードにした時のレイアウトになっています。
Expression Web 4では、floatプロパティを使ったスタイルボックスの要素では、定義リスト（<dl>タグや<dt>と<dd>を使ったもの）の操作がうまくできません。もう開発終了になっているため、この問題は「仕様」としてとらえたほうがいいです。
Expression Web 4で思い通りにWebページを作成するには、そういった問題を回避する必要があります。
スタイル作成手順
レスポンシブWebデザインへの移行にあたり、スタイルを作っていく順番は基本的には以下の通りです。
- モバイル向けの基本スタイルを作成する
- スマートフォン向けのスタイルを定義する
- タブレットの縦向きモードでのスタイルを定義する
- デスクトップ表示でのスタイルを定義する
当サイトに訪問される閲覧者のほとんどは、デスクトップからです。しかし、昨今ではペンやタッチで操作可能なタブレットにもなる端末が登場してきています。私は、Let's Note AX2とSurface Pro 2を持っています。それぞれ縦向きにしてみると、従来のスタイルでは横にはみ出てうまく表示することができませんでした。そんなわけで、とりあえず、タブレットの縦向きでも快適に表示するためのスタイルを基本スタイルとして決めました。
サイトのコンテンツのジャンルによって、スマートフォンからが多いのか、それともデスクトップからが多いのか、タブレットユーザーが多いのかはさまざまです。ただ、基本的にはモバイル端末での表示を基本スタイルにするのがいいと思います。
レスポンシブWebデザインに対応していないブラウザーへの対応
まだまだ、当サイトではIE8以下からのブラウザーから閲覧しているユーザーが多いです。前の記事の『IE6～8でも対応するために』の項を参考にしてください。
問題は解決しましたか？
操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！