レスポンシブ Web デザイン6～10
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレートです。
HTML5 と CSS3 で制作しました。
Free Template 6 をダウンロード（zip 形式）
編集しやすい 1カラムレイアウトです。
ブラウザの幅を狭めると、レイアウトが切り替わります。
Free Template 7 をダウンロード（zip 形式）
メニューなどのカラーを、青色に変更したテンプレートです。
スポンサーリンク
Free Template 8 をダウンロード（zip 形式）
メニューなどのカラーを、緑色に変更したテンプレートです。
Free Template 9 をダウンロード（zip 形式）
メニューなどのカラーを、紫色に変更したテンプレートです。
Free Template 10 をダウンロード（zip 形式）
メニューなどのカラーを、赤色に変更したテンプレートです。
テンプレート6～10 の関連カスタマイズ
※Internet Explorer 8 以下に HTML5 と Media Queries を認識させるには、関連カスタマイズを行なって下さい。
ロゴ（logo.png）について
ロゴ（logo.png）は画像なので、ご自身でご用意頂く形となります。
サンプルでは、透過 PNG の画像を使用しています。
ロゴを作成したら、images フォルダの logo.png と置き換えて下さい。
画像の代わりに、Web フォントを使用しても良いかと思います。
index.html 以外のページについて
5ページ、5つのメニュー（nav）を用意しましたが、ページ数とメニュー数は増やすことも減らすこともできます。
メニュー名とファイル名も、ご自由に変更してご利用下さい。
メイン画像（main_img.jpg）について
テンプレートの最大幅は、1200 px に設定されています。
幅 1200 px 以上の画像は、1200 px まで自動的に縮小されます。
ファイルサイズを少しでも抑えるために、1200 px 以上の画像は 1200 px まで縮小してから配置されることをお勧め致します。
初期設定では index.html のみにメイン画像を設定していますが、全てのページに別々のメイン画像を設定することもできます。
index.html 以外にもメイン画像を設定する方法
</nav>
<p class="main_img"><img src="images/main_img.jpg" alt="春の花" /></p><!-- 最大幅は1200pxです。 -->
<article class="content">
赤字が追加した HTML タグです。
index.html 以外にもメイン画像を設定したい場合は、上のように
<p class="main_img"><img src="images/ファイル名.jpg" alt="画像の説明" /></p>
を追加して下さい。
メイン画像は、8枚用意致しました。
文字を載せて利用しても良いかと思います。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク