読者です 読者をやめる 読者になる 読者になる

wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

無料配布用のダイナミックWebテンプレート作成中

とりあえず、Windows 8.1上のExpression Web 4で作業中です。

Expression Design 4もフリーソフトになってるので、とりあえずなロゴ素材作成ファイルも作っておきました。あ、別に使わなくてもいいですよ。すでにご自身のサイトロゴがあれば、それを使えばいいですし。

f:id:wanichan:20160214000126p:plain

こんな感じに、IE8以下の場合のトップメッセージがExpression Web 4で表示されます。てか、Expression Web 4のデザインビューではIE8のレンダリングエンジンを使ってるっぽいので。でも、最新のブラウザーを使えば大丈夫です。すでに wanichan.com のすべてのページに古いIEの場合だけ表示されるようになっていて、最新のIEでは表示されないことを確認済みです。

タブレット縦向きスタイルが基本ですね。コンテンツエリア内の段組みは実装できてます。

f:id:wanichan:20160214000953p:plain

今回、respond.js は使いません。Google提供のJSファイルを呼び出してるだけです。

コードビューに切り替えるとこんな感じです。

f:id:wanichan:20160214001219p:plain

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

このコードさえあれば、HTML5とCSS3のメディアクエリに対応してないIE8以下でもたぶんイケるかと。。。でも私の所有パソコンにIE8ってもうないんですよね。

これらまとめてZIPで圧縮して配布しましょうか。

ただし、HTML5だと、ダイナミックWebテンプレートが適用されたWebページの編集が多少厄介になってきます。レンダリングエンジンが完全対応してないからでしょう。

f:id:wanichan:20160214002145p:plain

この問題を解決するには、HTML 4.01とかで対応するしかないですね。