Cafi Netつながる情報技術

レスポンシブ Web デザイン31~40

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

美容室をテーマにデザインしたテンプレートです。(他の業種でもご利用頂けます)

トップページ/コンセプト/スタッフ/メニュー・プライス/アクセスの5ページをデザインしました。

内容を入れ替えて頂ければ、ウェブサイトの作成やリニューアルが素早く完了するかと思います。

同じカラーで、スライドショーありとスライドショーなしを用意しました。

スライドショーなしはメイン画像が1枚なので、少しでも表示が軽い方が良いという場合は、スライドショーなしを選択して下さい。

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

無料テンプレート31

Free Template 31 をダウンロード(zip)(スライドショーあり)

Free Template 32 をダウンロード(zip)(スライドショーなし)

Free Template 31・32 のカラーは茶色です。

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

無料テンプレート33

Free Template 33 をダウンロード(zip)(スライドショーあり)

Free Template 34 をダウンロード(zip)(スライドショーなし)

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

Free Template 33・34 のカラーは黒色です。

無料テンプレート35

Free Template 35 をダウンロード(zip)(スライドショーあり)

Free Template 36 をダウンロード(zip)(スライドショーなし)

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

Free Template 35・36 のカラーは灰色です。

無料テンプレート37

Free Template 37 をダウンロード(zip)(スライドショーあり)

Free Template 38 をダウンロード(zip)(スライドショーなし)

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

Free Template 37・38 のカラーは緑色です。

無料テンプレート39

Free Template 39 をダウンロード(zip)(スライドショーあり)

Free Template 40 をダウンロード(zip)(スライドショーなし)

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

Free Template 39・40 のカラーは紫色です。

編集必須箇所について

ヘッダーのメインロゴ(logo.png)と電話番号(tel.png)の編集には、images フォルダの base.png をご利用下さい。

フッターの電話番号とメールアドレスにはリンクが設定されているので、HTML ソースを編集して下さい。スマートフォンでタップして電話できます。

編集の必要があるのは、HTML ファイル(index.html/concept.html/stuff.html/menu.html/access.html)と images フォルダの画像だけです。

ファイル名やページ数は、編集内容に合わせて変更して下さい。

style.css(デザインの記述)は、任意で編集して下さい。

スライドショーの画像について

スライドショーは、gilbitron/Nivo-Slider ・ GitHub(MIT license)を組み込みました。

スライドショーの画像は、images フォルダの main-img1.jpg と main-img2.jpg と main-img3.jpg です。

画像のサイズは、横幅 1200 px で作成して下さい。高さは、ご自由なサイズでご利用下さい。

画像の枚数は、HTML ファイル(index.html)で変更できます。

スライドショーの画像を3枚から5枚に変更した例
<img src="images/main-img1.jpg" alt="メイン画像1" />
<img src="images/main-img2.jpg" alt="メイン画像2" />
<img src="images/main-img3.jpg" alt="メイン画像3" />
<img src="images/main-img4.jpg" alt="メイン画像4" />
<img src="images/main-img5.jpg" alt="メイン画像5" />

画像の枚数が多くなると読み込みに時間がかかるので、適度な枚数に設定されることをお勧め致します。

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