レスポンシブ Web デザイン97
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート 97 です。
トップページが写真ギャラリーのテンプレートです。
Free Template 97 をダウンロード（zip）
サンプル（動作確認）はこちら
テンプレート内の写真は、当サイトのフリー写真素材です。
そのままご利用頂いても構いませんし、他の写真に変更することもできます。
スポンサーリンク
トップページの編集について
トップページは、3カラムの写真ギャラリーです。
左ブロック、中央ブロック、右ブロックに分かれています。
特徴は、写真の縦横比が違っていても綺麗に配置できることです。
写真の横サイズは、スクリーンサイズ1500px以上は400px、スクリーンサイズ1200px以上は350px、スクリーンサイズ1000px以上は300pxで表示されます。
横400px以上の写真を用意して頂くと、写真の横幅が綺麗に揃います。
写真の縦サイズは自由です。
写真の縦横比が違っていても、一段下の写真との余白は一定になります。
縦位置で撮影しても、横位置で撮影しても綺麗に配置できるように考えました。
スクリーンサイズ1000px未満は、3カラムではなく1カラムで表示されます。
写真の下は「タイトル」「左寄せの説明文」「中央揃えの説明文」を用意しました。
「タイトルと説明なし」でも綺麗に配置されます。
サブページの編集について
サブページは、お知らせ・こだわり・よくある質問・お問い合わせを用意しました。
メニュー名もファイル名もご自由に変更して下さい。
各ページのパーツが便利でしたらそのままご利用下さい。
デザインは、スタイルシート（style.css）で編集できます。
/* news */ というように、コメントで区切られているので目印にして下さい。
特にデザインされていないサブページを作りたい場合は、contact.html を複製して作成すると便利かと思います。
<div id="contact"> から </div><!-- contact END --> の間を削除して、ご自由に内容を記載して下さい。
サブページがいらない場合は、index.html の
<div id="menu_button"><span id="menu_button_line"></span></div>
<div id="overlay"></div>
<header>～</header>
を削除してご利用下さい。 （メニューボタンもメニューも表示されなくなります）
編集が上手く行かなかった場合は、元のコードに戻して再編集して下さい。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク