ホーム > コンピュータ > webツール > Expression Web 4 > 新しいサイトを作成する

ベクトルドロー・レベルゼロ+

レイアウト枠を設定する[Web]

新規作成日 2015-10-23
最終更新日

方針

Expresson Web 4の付属テンプレートを修正して、ダイナミックWebテンプレートの独自のテンプレートを作成します。

Expresson Web 4の付属テンプレートは、「XHTML 1.0 Transitional」で記述されていますので、大幅な変更が必要になります。

今回、Html5, css3で、レスポンシブデザインのテンプレートを作成したいと思います。

このページでは、レイアウト枠を設定します。

レイアウト枠

レイアウトは、現在のサイトと同じ、「固定幅+フールドデザイン」にします。

「固定幅+フルールドデザイン」は、1部分が固定幅で、その他の要素は、ブラウザウィンドウの大きさに追従して変化する、フルードのレイアウトです。 通常、2カラムで、幅が狭くなると1カラムに変化させます。

サンプルページを作成する

ナビゲーションのレイアウトを取り除いた、レイアウト枠のサンプルページを作成しました。 基本のレイアウトは、このページと同じで、2カラム「固定幅+フルールドデザイン」です。

ブラウザのウィンドウを動かして、レイアウト枠の動きの変化を観察してください。cssは、ページ内に記述しています。「記事に戻ります」のリンクをクリックするとこのページに戻ります。

コードの説明は?

レスポンシブデザインのレイアウトは、理解しにくいのでこの部分は深入りせずに、既存のものを流用することをお勧めします。

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~

書籍販売サイトにリンクしています。

詳しい説明が必要な方、さらに良く知りたい方は、こちらの本を読まれることをお勧めします。p95-121

Copyright (C) 2011-2016 kukekko All Rights Reserved.
kukekko@gmail.com
ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません 」。
inserted by FC2 system