レスポンシブ Web デザイン26～30
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート26～30です。
無料テンプレート21～25のメイン画像を、スライドショーに変更したテンプレートです。
スライドショーは、viljamis/ResponsiveSlides.js ・ GitHub（MIT license）を組み込みました。
HTML5 と CSS3 で制作しました。
Free Template 26 をダウンロード（zip 形式）
1カラムレイアウトのテンプレートです。
メニューの数は、HTML ファイルで変更することができます。
スクリーンサイズが幅 699 px 以下のデバイスでは、メニューが開閉式になります。
Free Template 26 のカラーは黒色です。
ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。（テンプレートをダウンロードして、ブラウザでご確認下さい）
Free Template 27 をダウンロード（zip 形式）
テンプレートのカラーを変更しました。
スポンサーリンク
Free Template 27 のカラーは青色です。
Free Template 28 をダウンロード（zip 形式）
テンプレートのカラーを変更しました。
Free Template 28 のカラーは緑色です。
Free Template 29 をダウンロード（zip 形式）
テンプレートのカラーを変更しました。
Free Template 29 のカラーは桃色です。
Free Template 30 をダウンロード（zip 形式）
テンプレートのカラーを変更しました。
Free Template 30 のカラーは橙色です。
テンプレート26～30 の関連カスタマイズ
※Internet Explorer 8 以下に HTML5 と Media Queries を認識させるには、関連カスタマイズを行なって下さい。
スライドショーについて
スライドショーの画像は、images フォルダの main-img1.jpg と main-img2.jpg と main-img3.jpg です。
画像のサイズは、横幅 1200 px で作成して下さい。高さは、ご自由なサイズでご利用下さい。
スライドショーの画像は、フリー写真素材集からお選び頂くこともできます。
スライドショーの画像を増やしたい場合は、以下のように HTML ファイル（index.html）を編集して下さい。
スライドショーの画像を3枚から5枚に変更した例
<ul class="rslides">
<li><img src="images/main-img1.jpg" alt="メイン画像1" /></li>
<li><img src="images/main-img2.jpg" alt="メイン画像2" /></li>
<li><img src="images/main-img3.jpg" alt="メイン画像3" /></li>
<li><img src="images/main-img4.jpg" alt="メイン画像4" /></li>
<li><img src="images/main-img5.jpg" alt="メイン画像5" /></li>
</ul>
トップページ以外のページ
メイン画像を無くした、トップページ以外用のページ（about.html）も梱包しました。
トップページ以外を作成する場合は、about.html を複製してご利用下さい。
メイン画像（スライドショー）があった方が良い場合は、トップページを複製してご利用下さい。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク