Cafi Netつながる情報技術

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

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

無料テンプレート57のサンプル

2014/2/19 不要な CSS コードがあったので削除しました。(動作に変更はありません)

ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。(レイアウトを切り替えた場合は、メニューを正しい位置に表示するために、再読み込みが必要な場合があります)

無料テンプレート57 は、白黒のシンプルなテンプレートです。(テンプレート58 にはスライドショーを追加しました)

コンテンツ部分は、1カラム・2カラム・3カラムから選択できます。

スクロールして閲覧するスマートフォンやタブレットを意識した、1ページのウェブサイトです。(もちろん、ページを増やすこともできます)

無料テンプレート57

Free Template 57 をダウンロード(zip)

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

無料テンプレート57 は、画像と文章の横幅を少しずつ狭くすることで、スマートに見えるようにデザインしました。

index.html ファイルの通りですが、文章は <p> タグ(段落タグ)の中に記入してください。

画像には、class「img_frame」を適用してください。

画像の外枠

画像に class「img_frame」を適用すると、上の画像のように自動的に外枠が表示されます。

画像の外枠なしが良い場合は、style.css ファイルを編集してください。

class「img_frame」は、131行目から記載されています。

.img_frame {
/* 画像の外枠なしが良い場合は、ここから */
-webkit-box-sizing:border-box;
box-sizing:border-box;
border: 1px solid #BCBCBC;
background-color:#FFFFFF;
padding: 4px;
/* ここまでを削除してください。 */

margin-top: 10px;
margin-bottom: 10px;
max-width: 95%;
height: auto;
vertical-align:bottom;
}

CSS のコメントに記載の通りですが、上の赤字(7行)が削除部分です。

hover のカラー(リンクにマウスカーソルを合わせた時のカラー)は灰色に設定されていますが、橙色など明るめにカラーを変更しても綺麗かと思います。

.content a:hover {
color: #B9B9B9; /* hover のカラー(コンテンツ部分のリンク)(2/4 箇所) */
}

上記のように、hover についても style.css ファイルにコメントが記載されているので、編集の参考にして頂けたら幸いです。

hover のカラーの設定箇所は、全部で 4箇所です。

古いブラウザでの閲覧についてですが、Internet Explorer 7 と 6 は、2カラムと 3カラムは 1カラムで表示されます。(Internet Explorer 8 は、2カラム・3カラムで表示されます)

Internet Explorer 8 は、実機での確認となります。Internet Explorer 7 と 6 は、シミュレーターでの確認となります。最終確認日は 2014/2/9 です。

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