www.wanichan.com

Expression Webテンプレート(HTML5版)

Expression Webを使ってみよう
最終更新日時: 2017/03/11 10:54:16

レスポンシブWebデザインのシンプルなExpression WebのダイナミックWebテンプレートを作成しました。良かったらダウンロードしてご利用ください。

スポンサーリンク

はじめに

このコーナーはかつて、デスクトップ専用のデザインテンプレートを配布していました。しかし、レスポンシブWebデザインの重要性が高まっているため、今回、すべての過去のテンプレートを削除して、レスポンシブWebデザインのテンプレートに置き換えました。

HTML5バージョンでは、Expression Web 4自体完全対応していないことが原因で、ダイナミックWebテンプレートが適用されたWebページでのデザインビューのレンダリングに問題が生じる場合がある点にご了承いただければ幸いです。

姉妹サイト xweb.wanichan.jp Expression Web サンプルテンプレート は、HTML 4.01 Transitional のため、問題なく編集が可能です。

使い方

ダウンロードボタンをクリックしてZIPファイルを展開し、作業中のサイトにindex.html、master.dwt、style.css および logo.pngのファイルをインポートした後、index.htmlやmaster.dwtをExpression Web 4で開いた場合は、基本レイアウトで表示されます。logo.design は Expression Design 4形式のファイルです。Expression Design 4もフリーソフトになったので、ロゴ作成してみたい方はチャレンジしてみてください。

スポンサーリンク

注意

必ず[ダウンロード]ボタンのリンクからZIPファイルをダウンロードし、解凍してご利用ください。

当サイトのサンプルトップページを保存している方がいらっしゃいます。当サイト以外では無効なコードが含まれているため、ご利用にならないでください。

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

記事がメインのサイトにおすすめのレイアウトです。iPadの横向きでのサイドバーは200ピクセルになります。

サイドバー #sidebar
要素幅:スマホ・タブレット縦向きはデバイス幅、1008px 以上は 200px、1110px 以上は 300px
コンテンツ #page_content
要素幅:スマホ・タブレット縦向きはデバイス幅、1008px 以上は 730px
トップページ
ダイナミックWebテンプレート

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

会社案内、自己紹介サイト等、メニューが多いサイトにおすすめのレイアウトです。navタグはサイドメニューリスト部分に使用しています。横並びリストメニュー省略バージョンは、Expression Web 4でほぼ問題なく編集が可能です。

横並びメニューあり

サイドバー #sidebar
要素幅:スマホ・タブレット縦向きはデバイス幅、1008px 以上は 200px
コンテンツ #page_content
要素幅:スマホ・タブレット縦向きはデバイス幅、1008px 以上は 730px
トップページ
ダイナミックWebテンプレート

横並びメニューなし

トップページ
ダイナミックWebテンプレート
INDEX

問題は解決しましたか?

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

▲このページのトップへ