レスポンシブ Web デザイン11～15

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

HTML5 と CSS3 で制作しました。

サイコロ状のテンプレートです。

スクリーンサイズに応じて、1列～4列に切り替わります。

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

無料テンプレート12

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

無料テンプレート13

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

無料テンプレート14

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

無料テンプレート15

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

テンプレート11～15 の関連カスタマイズ

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

ロゴ（logo.png）について

ロゴ（logo.png）は画像なので、ご自身でご用意頂く形となります。

ロゴを作成したら、images フォルダの logo.png と置き換えて下さい。

もちろん、画像ではなくテキストに置き換えても構いません。

12ブロック用意しましたが、増やすことも減らすこともできます。

ブロックの数は、HTML ファイルで変更して下さい。

ブロックの背景色は、CSS ファイルで変更して下さい。

初期設定のブロックの背景色は、2色を交互に設定しています。

1色には、CSS ファイルのコメントに「color 1」と書きました。

もう 1色は「コメント無し」なので、ブロックの背景色の区別にお役立て下さい。

文章の長さがブロックからはみ出した場合、パソコンではスクロールバーが表示されます。

しかし、スマートフォンでは、ブロックからはみ出した文章は非表示となります。（2013/4/7 確認）

そこで、文章はブロック内に収めることをお勧め致します。

詳細ページも用意しましたので、コンテンツが長くなる場合は詳細ページをご活用下さい。

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