Cafi Netつながる情報技術

レスポンシブ Web デザイン98

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

シンプルなワンページ(シングルページ)のテンプレートです。

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

無料テンプレート98

Free Template 98 をダウンロード(zip)
サンプル(動作確認)はこちら

テンプレート内の写真は、当サイトのフリー写真素材です。

そのままご利用頂いても構いませんし、他の写真に変更することもできます。

無料テンプレート98の編集について

標準的な編集方法を解説します。

style.css と script.js もカスタマイズされる場合は、この限りではございません。

title.png は、180px × 70px です。

BASE フォルダに白紙の title.png が梱包されているので、画像編集ソフトを使ってご自身のサイトタイトルを入力して下さい。

スライドショーの写真の枚数は自由です。

写真の横幅は、スクリーンサイズ 1500px 以上のデバイスで max-width 1400px に設定されています。

つまり、横幅 1400px 以上の写真を設置しても 1400px まで縮小されます。

サンプルには、1400px × 500px の写真を設置しました。

縦幅は自由ですが、横幅は 1400px に揃えることをお勧めします。

スライドショーのスピードは、script.js で変更できます。

script.js にコメントが記載してあるので、そちらを参考にして下さい。

コンテンツがフェードインする仕組みは、マウス環境のみです。

この仕組をオフにしたい場合は、script.js の var content_state = 1 を 0 に変更して下さい。

コンテンツをデザインするパーツとして、parts1 ~ parts5 を用意しました。

parts1 ~ parts5 は、ブロック間で入れ替え自由です。

parts デザインの編集や追加は、style.css で行って下さい。

サンプル写真のサイズは、横幅 500px です。

縦横比は自由ですが、横幅は 500px をお勧めします。(max-width: 500px に設定されている為です)

ブロックは増やすことも減らすこともできます。詳細は html のコメントをご確認下さい。

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