Cafi Netつながる情報技術

1カラムのレスポンシブ Web デザイン

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

HTML5 と CSS3 で制作しました。

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

2013/3/18
Internet Explorer 6 用に、HTML と CSS を一部更新しました。

Internet Explorer 8 以下に HTML5 と Media Queries を認識させるには、無料テンプレートのカスタマイズを行なって下さい。

無料テンプレート5

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

斜線テクスチャの灰色でデザインした無料テンプレートです。

編集しやすい 1 カラムレイアウトです。

タイトルやメニューがテキストなので、画像を編集する手間がありません。

無料テンプレート4

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

斜線テクスチャの紫色でデザインした無料テンプレートです。

同じく 1 カラムレイアウトです。

無料テンプレート3

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

斜線テクスチャの青色でデザインした無料テンプレートです。

同じく 1 カラムレイアウトです。

無料テンプレート2

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

ファイバーテクスチャの赤色でデザインした無料テンプレートです。

同じく 1 カラムレイアウトです。

無料テンプレート1

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

ファイバーテクスチャの青色でデザインした無料テンプレートです。

同じく 1 カラムレイアウトです。

ブラウザの幅を狭めると、レイアウトが切り替わります。

編集が必要な箇所に画像を使用していないので、テキストの編集のみでウェブサイトをオープンできます。

メモ帳でスタイルシートを開いた画面

テクスチャを入れ替えれば、テンプレートのカラーを変更できます。

テクスチャをダウンロードしたら、使用したいテクスチャを images フォルダに移動して下さい。

次に、メモ帳などで style.css を開きます。

images/テクスチャ名.png の部分の、テクスチャ名を変更して保存します。

ブラウザでテンプレートを開くと、テクスチャが入れ替わったことを確認できます。

コメント(/* ~ */ の部分)には説明が記載してあるので、カスタマイズの参考にして下さい。

テクスチャは、全体の背景/ヘッダーの背景/メニューの背景/フッターの背景に使用しました。

ヘッダーやリンクの文字色を設定する行にもコメントを記載しました。

テクスチャのカラーに合わせて、文字色のカラーコードを編集して下さい。

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