Expression Web 4 Beginner's Guide

Expression Web初心者向けガイド。ステップバイステップで解説していきます。

レスポンシブWebデザインの作成の流れ

モバイル対応にするために
  • このエントリーをはてなブックマークに追加

Expression Webを使ってレスポンシブWebデザインのサイトを作成するには、まず、モバイル表示のスタイルを定義して、デスクトップの場合のレイアウトのスタイルを定義するとOKです。Expression Webではfloatプロパティが使われているボックス内の定義リストなどがうまく操作できないため、基本スタイルには適用しないのがポイントです。

はじめに

このページをExpression Web 4のデザインビューで開くと、以下の図のようになります。

デスクトップではなく、タブレットの縦向きモードにした時のレイアウトになっています。

Expression Web 4では、floatプロパティを使ったスタイルボックスの要素では、定義リスト(<dl>タグや<dt>と<dd>を使ったもの)の操作がうまくできません。もう開発終了になっているため、この問題は「仕様」としてとらえたほうがいいです。

Expression Web 4で思い通りにWebページを作成するには、そういった問題を回避する必要があります。

スタイル作成手順

レスポンシブWebデザインへの移行にあたり、スタイルを作っていく順番は基本的には以下の通りです。

  1. モバイル向けの基本スタイルを作成する
  2. スマートフォン向けのスタイルを定義する
  3. タブレットの縦向きモードでのスタイルを定義する
  4. デスクトップ表示でのスタイルを定義する

メインサイト www.wanichan.com に訪問される閲覧者のほとんどは、デスクトップからです。しかし、昨今ではペンやタッチで操作可能なタブレットにもなる端末が登場してきています。タブレットを縦向きにして閲覧してみると、従来のスタイルでは横にはみ出てうまく表示することができませんでした。そんなわけで、とりあえず、タブレットの縦向きでも快適に表示するためのスタイルを基本スタイルとして決めました。

サイトのコンテンツのジャンルによって、スマートフォンからが多いのか、それともデスクトップからが多いのか、タブレットユーザーが多いのかはさまざまです。ただ、基本的にはモバイル端末での表示を基本スタイルにするのがいいと思います。

レスポンシブWebデザインに対応していないブラウザーへの対応

IE8以下からのブラウザーから閲覧しているユーザーはかなり少なくなりましたが、念のため、継続して対応しておくとよいでしょう。前の記事の『IE6~8でも対応するために』の項を参考にしてください。

Expression Web サンプルテンプレート

レスポンシブWebデザインに対応したWebサイトを手っ取り早く作りたい方のために、無料テンプレートを用意いたしました。

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

コメント

▲このページのトップへ