HTML5+CSS3メディアクエリでテンプレート作ってみた

趣味と勉強と実益をかねてこれからの時代に主流となると思われる、HTML5とCSS3メディアクエリを使ったテンプレートを作ってみました。

勉強用に、サイト作成用にご自由にお使いください。ご意見、ご要望などはこのページにコメントにて。

★ 注意:免責事項 ★

本プログラムを使用して生じたいかなる損害に対しても
作者は責任を負わないものとします。

改変や再配布は自由に行っていただいて構いません。
ただし素材の再配布については、下記を参照ください。

■ デモ&ダウンロード

デモサイトはこちら

・ダウンロードはこちら
http://tool.muzin.org/html5template/html5template.zip

※このテンプレートを使用しているサイト様です。動作確認にご参照ください。

■ テンプレート中で使用している素材について

シェルの素材工場様(http://shell-factory.com)の素材を使用しております。
素材の再配布については、こちらの素材の規約に準じてください。

■ import.cssからの動作の流れ

HTMLからは import.cssのみを読み込みます。
import.cssから以下の手順で各種CSSファイルを読み込みます。

1.reset.cssを読み込みます。
  HTML5にあわせた初期設定を行います。

2.style.cssを読み込みます。
  通常のブラウザにあわせたCSSを設定します。

3.ブラウザサイズが760pxより小さい場合にのみ small_style.cssを読み込みます。
  モバイル用のCSSで上書きします。

4.ブラウザサイズが760pxより大きい場合にのみ visual.cssを読み込みます。
  モバイル用のCSSをさらに上書きして、通常のブラウザ用のビジュアルにします。

■ 特殊クラス一覧

○ mobile_onlyクラス
 ブラウザサイズが小さい場合にのみ表示します。

○ mobInvisibleクラス
 ブラウザサイズが大きい場合にのみ表示します。

カテゴリー: ツール   タグ: , ,   この投稿のパーマリンク

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>