レスポンシブ Web デザイン21～25
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート21～25です。
HTML5 と CSS3 で制作しました。
Free Template 21 をダウンロード（zip 形式）
1カラムレイアウトのテンプレートです。
メニューの数は、変更することができます。
スクリーンサイズが幅 699 px 以下のデバイスでは、メニューが開閉式になります。
Free Template 21 のカラーは黒色です。
ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。（テンプレートをダウンロードして、ブラウザでご確認下さい）
Free Template 22 をダウンロード（zip 形式）
テンプレートのカラーを変更しました。
スポンサーリンク
Free Template 22 のカラーは青色です。
Free Template 23 をダウンロード（zip 形式）
テンプレートのカラーを変更しました。
Free Template 23 のカラーは緑色です。
Free Template 24 をダウンロード（zip 形式）
テンプレートのカラーを変更しました。
Free Template 24 のカラーは桃色です。
Free Template 25 をダウンロード（zip 形式）
テンプレートのカラーを変更しました。
Free Template 25 のカラーは橙色です。
テンプレート21～25 の関連カスタマイズ
※Internet Explorer 8 以下に HTML5 と Media Queries を認識させるには、関連カスタマイズを行なって下さい。
サイトロゴとメイン画像について
サイトロゴの編集には、images フォルダの logo-base.png をご利用下さい。
サイトロゴの編集が完了したら、images フォルダに logo.png として保存（上書き保存）して下さい。
メイン画像（images フォルダの main-img.jpg）は、横幅 1200 px で作成して下さい。高さは、ご自由なサイズでご利用下さい。
メイン画像は、フリー写真素材集からお選び頂くこともできます。
メニューの数について
メニューの数は、増やすことも減らすこともできます。（編集は HTML ファイルで行なって下さい）
上の画像のように、初期設定よりメニュー名が長くなると、スクリーンサイズによってはメニューが折り返されます。
その場合は style.css ファイルを開いて、以下の赤字の値を大きくして下さい。（185 行目に記載されています）
/* スクリーンサイズ 幅 700px 以上で適用される設定・上から継承したスタイルを上書き */
@media only screen and (min-width: 700px) {
どのくらい値を大きくするかは、ブラウザの幅を狭めてご確認下さい。
全てのスクリーンサイズで、メニューが折り返されないように設定して下さい。
上の画像の例では、700 px から 980 px に変更しました。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク