レスポンシブ Web デザイン77～81

スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート 77～81 です。

観光ホテルや化粧品のような、上品なウェブサイトをイメージしてデザインしました。

スライドショー、写真ギャラリー（モーダルウィンドウ）、会社概要のテーブルなどを用意しました。

無料テンプレートの利用規約はこちらです。

Free Template 77（茶色）をダウンロード（zip）
サンプル（動作確認）はこちら

Free Template 78（緑色）をダウンロード（zip）
サンプル（動作確認）はこちら

Free Template 79（水色）をダウンロード（zip）
サンプル（動作確認）はこちら

Free Template 80（紫色）をダウンロード（zip）
サンプル（動作確認）はこちら

Free Template 81（灰色）をダウンロード（zip）
サンプル（動作確認）はこちら

テンプレート内の写真は、当サイトのフリー写真素材です。そのままご利用頂いても構いませんし、他の写真に変更することもできます。

無料テンプレート 77～81 の編集について

ヘッダーメニューの格納・展開、スライドショー、ギャラリーとモーダルウィンドウの仕組みは、過去のテンプレートと共通なので、過去のテンプレートの解説を参考にしてください。（行数や数値は異なるケースがございます）

ヘッダーメニューについて

無料テンプレート 77～81 のヘッダーメニューは、画面幅によってテキストと画像が切り替わります。

画面幅が 900px 未満の場合は、ヘッダーメニューはテキストです。

画面幅が 900px 以上の場合は、ヘッダーメニューは画像です。

画面幅 900px 未満のヘッダーメニュー（テキスト）
.html の 37行目～45行目
<nav id="nav_mo">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="block.html">BLOCK</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="access.html">ACCESS</a></li>
</ul>
</nav>

テキストの編集は、html ファイルのテキストを書き換えてください。

上の赤字が、メニューのテキストです。

各ページ（.html）で、同じ編集を行ってください。

画面幅 900px 以上のヘッダーメニュー（画像）
.html の 47行目～55行目
<nav id="nav_pc">
<ul>
<li><a href="index.html"><img src="images/menu1-1.png" alt="ホーム" class="nav_hover"/><img src="images/menu1-2.png" alt="ホーム"/></a></li>
<li><a href="block.html"><img src="images/menu2-1.png" alt="ブロック" class="nav_hover"/><img src="images/menu2-2.png" alt="ブロック"/></a></li>
<li><a href="gallery.html"><img src="images/menu3-1.png" alt="ギャラリー" class="nav_hover"/><img src="images/menu3-2.png" alt="ギャラリー"/></a></li>
<li><a href="faq.html"><img src="images/menu4-1.png" alt="よくある質問" class="nav_hover"/><img src="images/menu4-2.png" alt="よくある質問"/></a></li>
<li><a href="access.html"><img src="images/menu5-1.png" alt="アクセス" class="nav_hover"/><img src="images/menu5-2.png" alt="アクセス"/></a></li>
</ul>
</nav>

画像の編集は、BASE フォルダの画像を使用してください。

images フォルダの画像と入れ替えれば、設置は完了です。

上の赤字は alt 属性（代替テキスト）（画像の内容を説明）なので、必要に応じて書き換えてください。

各ページ（.html）で、同じ編集を行ってください。

ヘッダーメニュー（画像）の hover アクションのスピードは、script.js で変更できます。

script.js の 12行目
var menu_hover = 400; // nav_pc の hover アクションのスピード

赤字の値を変更すると、hover アクションのスピードが変わります。

当サイトの無料テンプレートがお役に立ちましたら幸いです。