Cafi Netつながる情報技術

レスポンシブ Web デザイン16~20

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

HTML5 と CSS3 で制作しました。

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

無料テンプレート16

Free Template 16 をダウンロード(zip 形式)

1カラムレイアウトのテンプレートです。

Free Template 16 のカラーは灰色です。

ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。(テンプレートをダウンロードして、ブラウザでご確認下さい)

無料テンプレート17

Free Template 17 をダウンロード(zip 形式)

テンプレートのカラーを変更しました。

Free Template 17 のカラーは黒色です。

無料テンプレート18

Free Template 18 をダウンロード(zip 形式)

テンプレートのカラーを変更しました。

Free Template 18 のカラーは緑色です。

無料テンプレート19

Free Template 19 をダウンロード(zip 形式)

テンプレートのカラーを変更しました。

Free Template 19 のカラーは紺色です。

無料テンプレート20

Free Template 20 をダウンロード(zip 形式)

テンプレートのカラーを変更しました。

Free Template 20 のカラーは茶色です。

テンプレート16~20 の関連カスタマイズ

※Internet Explorer 8 以下に HTML5 と Media Queries を認識させるには、関連カスタマイズを行なって下さい。

メイン画像について

サイトタイトルは、メイン画像に記載して下さい。

images フォルダに、未記入の main_img-base.jpg と main_img_mobile-base.jpg が梱包されています。ご自身のサイトタイトルを記載してご利用下さい。

ご参考までに、Site Title のフォントは Edwardian Script ITC です。メイン画像の編集は、Adobe Photoshop CS6 で行いました。

メイン画像が 2種類に分かれているのは、スマートフォンで閲覧した時にサイトタイトルが小さくなり過ぎないようにする為です。

メイン画像は、フリー写真素材集からお選び頂くこともできます。

ご自身で撮影した写真をご利用頂くこともできます。

パソコンとタブレット用のメイン画像(images フォルダの main_img.jpg)は、横幅 1200 px で作成して下さい。

スマートフォン用のメイン画像(images フォルダの main_img_mobile.jpg)は、横幅 550 px で作成して下さい。

メイン画像の高さは、ご自由なサイズでご利用下さい。

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