Home > Editor > Expression Web 4 > テンプレートを使用する

Expression Web 4のダイナミック・テンプレートを作成する

新規作成日 2015-11-08
最終更新日

Expression Web 4は、正式にcss3が登場する前に、サポートが終了しています。そのため、Expression Web 4にあらかじめ用意されているテンプレートは、異なる画面サイズでもWebサイトの内容を確認できるレスポンシブWebデザインに対応していません。現在では、タブレットやスマートフォンで、Webサイトを閲覧する層が一定数存在するため、あらたに、Webサイトを作成するためには、タブレットやスマートフォンユーザーを意識する必要があります。

表示されているWebサイトが、レスポンシブWebデザインに対応しているかはすぐに判別することができます。ブラウザの幅をマウスでドラッグして変更するだけです。対応していなければ、Webサイトがはみ出て見えなくなってしまいますが、対応していれば、デザインが変化し、幅の狭くなったブラウザにもきちんと表示されます。

特に、お出かけ情報や旅行記、飲食店紹介、電子書籍サイトの紹介など、出先で調べたい情報や出先の待ち時間の時間つぶしで利用されるWebサイトであれば、タブレットやスマートフォンへの対応は必須です。

逆に、パソコンに限定した情報であれば、タブレットやスマートフォンへの対応は、ほとんど必要ありません。しかし、後で対応する場合は、Webサイト全体を作り直すのと同じぐらいの手間が必要になるので、最初から、レスポンシブWebデザインに対応したテンプレートを使用した方が安全です。

テンプレートを作成する

「Expression Web 4」の機能を知る意味も含めて、レスポンシブデザインのダイナミックWEBテンプレートを作成しようと考えました。 作業の流れは以下のように進めていきます。

Expresson Web 4の付属テンプレートで、ローカルサイトを作成します

付属のテンプレートで作成されるファイル群を元に、修正して求めるテンプレートに変更しようと考えました。

ヘッダに、Html5,css3に対応させるためのポリフィルを構築します

Html5,css3で作成した、レスポンシブデザインのExpresson Web 4のダイナミックWebテンプレートを作成します。 そのために、ヘッダに、Html5,css3に対応していないブラウザのためのポリフィルを構築し、ビューポートを設定します。

フッタを修正する

テンプレートのフッタを修正します

レイアウト枠を設定する

ページをレスポンシブデザインに対応させるには、レイアウト枠の設計が重要です

ナビゲーションデザインを設定する

ページ内にナビゲーションをうまく設定すると、訪問者のサイト内の滞在時間が増え、複数のページを閲覧してくれる可能性が増加します。