レスポンシブ Web デザイン57
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート57です。
2014/2/19 不要な CSS コードがあったので削除しました。（動作に変更はありません）
ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。（レイアウトを切り替えた場合は、メニューを正しい位置に表示するために、再読み込みが必要な場合があります）
無料テンプレート57 は、白黒のシンプルなテンプレートです。（テンプレート58 にはスライドショーを追加しました）
コンテンツ部分は、1カラム・2カラム・3カラムから選択できます。
スクロールして閲覧するスマートフォンやタブレットを意識した、1ページのウェブサイトです。（もちろん、ページを増やすこともできます）
スポンサーリンク
無料テンプレート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 です。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク