> Expression Web 4 > Chapter 2 サイトの作成とデザインの決定

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

Expression Web 4で作るかんたんスマホ対応サイト
最終更新日時: 2016/08/01 22:54:55

初心者向けにレスポンシブWebデザインのサンプルテンプレートを配布します。よかったらダウンロードしてご活用ください。

使い方

ダウンロードボタンをクリックしてZIPファイルを展開し、作業中のサイトにindex.html、master.dwt、および、style.cssとrespond.min.jsの4つのファイルをインポートした後、index.htmlやmaster.dwtをExpression Web 4で開いた場合は、基本レイアウトで表示されます。ちなみに、respond.min.jsはローカルではなくWeb上にパブリッシュを行ったときにはじめてレスポンシブWebデザインに非対応のブラウザーでも対応できるようになります。

左メインコンテンツ、右サイドバー

記事がメインのサイトにおすすめのレイアウトです。

サイドバー #sidebar
要素幅:スマホ・タブレット縦向きはデバイス幅、970px 以上は160px、1110px以上は300px
コンテンツ #page_content
要素幅:スマホ・タブレット縦向きはデバイス幅、970px 以上は 730px

ダイナミックWebテンプレート
オレンジ 右サイドバー ダイナミックWebテンプレート

ダイナミックWebテンプレート
グリーン 右サイドバー ダイナミックWebテンプレート

ダイナミックWebテンプレート
ピンク 右サイドバー ダイナミックWebテンプレート

スポンサーリンク

左サイドバー、右メインコンテンツ

会社案内、自己紹介サイト等、メニューが多いサイトにおすすめのレイアウトです。

サイドバー #sidebar
要素幅:スマホ・タブレット縦向きはデバイス幅、768px 以上は200px
コンテンツ #page_content
要素幅:スマホ・タブレット縦向きはデバイス幅、768px 以上は 480px, 870px 以上は 580px, 970px 以上は680px, 1020px 以上は730px

ダイナミックWebテンプレート
オレンジ 左メニュー ダイナミックWebテンプレート

ダイナミックWebテンプレート
グリーン 左メニュー ダイナミックWebテンプレート

ダイナミックWebテンプレート
水色 左メニュー ダイナミックWebテンプレート

ダイナミックWebテンプレート
ピンク 左メニュー ダイナミックWebテンプレート

ダイナミックWebテンプレート
グリーン 左メニュー ダイナミックWebテンプレート

ダイナミックWebテンプレート
オレンジ 左メニュー ダイナミックWebテンプレート

 

スポンサーリンク
INDEX

問題は解決しましたか?

操作方法、設定方法等で困ったら、Google+コミュニティ Expression Web Users Group Japan に投稿してください!

▲このページのトップへ