www.wanichan.com

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

Expression Webを使ってみよう
最終更新日時: 2018/09/10 12:45:40

レスポンシブ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テンプレート

ブログ風シンプルデザイン

はてなブログで使われている、HTML5に対応したCSSを流用しています。後で各自でカスタマイズしやすいように、とにかくシンプルにしました。段組みレイアウトの場合、サイドバーを300pxにし、300ピクセル幅のレクタングル広告の掲載を可能にしました。

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

なお、ダイナミックWebテンプレートでは、以下の3か所に編集可能な領域を指定しています。必要に応じて編集可能な領域の追加や削除を行ってください。

topic_path
パンくずリストを配置する領域です。
content
<article>タグを配置する領域です。ここで更新記事を書いていきます。
related
<aside>タグを配置する領域です。ここで関連情報を書いていきます。

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

ヘッダーと横並びメニューバーは左寄せにしています。横並びメニューはinline-blockで実装しています。

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

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

ヘッダーと横並びメニューバーはセンタリングにしています。横並びメニューはinline-blockで実装しています。

トップページ
ダイナミックWebテンプレート
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

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

▲このページのトップへ