【HTML5】 レスポンシブデザイン 画像のサイズを可変に設定
HTML5でレスポンシブデザインのページを作ってみました。
画像のサイズは可変に設定してあるので、画面のサイズを変えても崩れません。
PC用、タブレット用、スマートフォン用で切り替わるようになっています。
ポイント
①以前、同天下一WEB道会で紹介したレスポンシブデザインでは、ひとつのCSSに全ての条件を記述していましたが、今回は条件ごとにCSSを分けて記述してあります。
②画像のサイズを可変にするために、以下のように設定してあります。
img {
max-width: 100%;
height: auto;
}③前回同様、特殊なCSSであるスマートフォン用のCSSから記述していきます。ただ、私はPC用のものから記述してしまったので、今回のコードに無駄なものが多く含まれていると思います。修正後アップロードしなおします。
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>レスポンシブデザイン実践</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style-s.css"> <link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:600px) and (max-width:979px)"> <link rel="stylesheet" href="css/style-l.css" media="only screen and (min-width:980px)"> <!-- Webフォントの設定 --> <link href='http://fonts.googleapis.com/css?family=Maven+Pro:900,400' rel='stylesheet' type='text/css'><!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> </head> <body> <div id="container"> <header> <h1><img src="img/logo.png" width="360" height="39" alt="PICKUP STREAM"></h1> <ul> <li><a href="#"><img src="img/twitter.png" width="35" height="35" alt="twitter"></a></li> <li><a href="#"><img src="img/facebook.png" width="35" height="35" alt="facebook"></a></li> <li><a href="#"><img src="img/googleplus.png" width="35" height="35" alt="google plus"></a></li> <li><a href="#"><img src="img/rss.png" width="35" height="35" alt="RSS"></a></li> </ul> <p><img src="img/header.jpg" width="960" height="300" alt="トップイメージ"></p> </header> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> <div id="content"> <article> <p id="date"><span>1</span><br>AUG</p> <h1>海岸のデコレーション</h1> <p id="category">CATEGORY: 海と海岸と空</p> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。<p> <br> <img src="img/sand.jpg" width="500" height="332" alt="砂浜"> <br><br> <p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p> <br> <p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p> </article> <aside> <h2>CATEGORIES</h2> <ul> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">山と森林</a></li> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">海と海岸と空</a></li> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">都市と建築</a></li> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">地下</a></li> </ul> <h2>RECENT POSTS</h2> <ul> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">海岸のデコレーション</a></li> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">風車と海風の関係</a></li> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">ツルを伸ばしてどこまでも</a></li> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">色とりどりの絨毯</a></li> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">休日に買い物にいくなら</a></li> <li><a href="#"><img src="img/listmark.png" width="13" height="13" alt="矢印">高層ビルと風の関係</a></li> </ul> </aside> </div> <!--/#content--> <footer> <p>PICKUP STREAM</p> <small>Copyright © PICKUP STREAM, all rights reserved.</small> </footer> </div> <!--/#container--> </body> </html>
【style-s.css】
@charset "utf-8";
/*RESET*/
body, div, h1, h2, p, ul, li, header, nav, article, aside, footer {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
}
body {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height: 1.7;
}
/*STYLE*/
#container {
width: 100%;
margin-top: 3em;
position: relative;
}
header {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
header h1 {
float: left;
}
header ul {
position: absolute;
left: 46%;
top: 97%;
}
header ul li {
float: left;
padding: 0.2em;
}
header p img {
width: 100%;
}
#content {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
article {
width: 90%;
float: left;
position: relative;
}
article h1 {
width: 90%;
border-bottom: 1px solid #CCC;
}
article p#category {
color: #666;
}
article p#date {
width: 10%;
padding: 2% 6% 2% 3%;
background: #0CF;
color: #FFF;
text-align: center;
border-radius: 10%;
font-weight: bold;
line-height: 1.2em;
}
article p#date span {
font-size: 22px;
font-weight: bold;
}
article p#category {
margin-bottom: 6%;
}
aside {
width: 90%;
margin-bottom: 5%;
}
aside h2 {
color: #0CF;
font-weight: 700;
border-bottom: 3px solid #CCC;
margin-bottom: 5%;
}
aside ul {
margin-bottom: 5%;
}
aside img {
margin-right: 5px;
max-width: 100%;
}
aside li {
border-bottom: 1px dotted #CCC;
margin-bottom: 2%;
}
aside ul li a {
display: block;
color: #333333;
}
aside ul li a:hover {
background: #0CC;
color: #FFF;
}
nav {
width: 90%;
margin: 0 auto 3% auto;
background-color: #222;
}
nav ul li {
width: 100%;
text-align: center;
border-bottom: 1px solid #CCC;
font-size: 14px;
font-weight: bold;
margin: 0 auto;
}
nav ul li a {
display: block;
color: white;
padding: 0.8em 1em 0.8em 1em;
}
nav ul li a:hover {
background: #111;
}
#content {
margin-bottom: 10%;
}
footer {
width: 90%;
height: 8em;
background: #111;
margin: 0 auto;
}
footer p {
color: #FFF;
margin: 2% 0 0 2%;
padding-top: 1%;
font-weight:bold;
}
footer small {
color: #FFF;
margin: 2% 0 0 2%;
}【style-m.css】
@charset "utf-8";
/*RESET*/
body, div, h1, h2, p, ul, li, header, nav, article, aside, footer {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
}
body {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height: 1.7;
}
/*STYLE*/
#container {
width: 100%;
margin-top: 3em;
}
header {
width: 90%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
header h1 {
float: left;
}
header ul {
float: right;
position: absolute;
left: 68%;
top: 0%;
}
header ul li {
float: left;
padding: 0.2em;
}
header p img {
width: 100%;
max-width: 100%;
}
nav {
width: 90%;
height: 3em;
margin: 0 auto 3% auto;
background-color: #222;
}
#content {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
article {
width: 60%;
float: left;
position: relative;
margin-left: 5%;
}
article h1 {
width: 100%;
border-bottom: 1px solid #CCC;
}
article p#date {
width: 10%;
padding: 2% 3% 2% 3%;
background: #0CF;
color: #FFF;
text-align: center;
border-radius: 60%;
position: absolute;
left: 80%;
top: 1%;
font-weight: bold;
line-height: 1.2em;
}
article p#date span {
font-size: 22px;
font-weight: bold;
}
article p#category {
margin-bottom: 6%;
}
aside {
width: 25%;
float: right;
}
aside h2 {
color: #0CF;
font-weight: 700;
}
aside ul {
margin-bottom: 10%;
}
aside img {
margin-right: 5px;
}
nav ul li {
width: 20%;
float: left;
text-align: center;
border-left: 1px solid #BBB;
border-right: 1px solid #BBB;
font-size: 16px;
padding: 0.1em 0.1em 0.1em 0.1em;
}
aside h2 {
font-size: 18px;
}
aside ul li a {
display: block;
color: #333333;
}
aside ul li a:hover {
background: #0CC;
color: #FFF;
}
nav ul li a {
display: block;
color: white;
padding: 0.6em 1em 0.6em 1em;
}
#content {
margin-bottom: 10%;
}
footer {
width: 90%;
height: 5em;
background: #111;
margin: 0 auto;
}
footer p {
color: #FFF;
margin: 2% 0 0 2%;
padding-top: 1%;
}
footer small {
color: #FFF;
margin: 2% 0 0 2%;
}【style-l.css】
@charset "utf-8";
/*RESET*/
body, div, h1, h2, p, ul, li, header, nav, article, aside, footer {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
}
body {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height: 1.7;
}
/*STYLE*/
#container {
width: 100%;
margin-top: 3em;
position: relative;
}
header {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
header h1 {
float: left;
}
header ul {
float: right;
position: absolute;
left: 78%;
top: 0%;
}
header ul li {
float: right;
padding: 0.2em;
}
header p img {
width: 100%;
max-width: 100%;
}
nav {
width: 90%;
height: 3em;
margin: 0 auto 3% auto;
background-color: #222;
}
#content {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
article {
width: 60%;
float: left;
position: relative;
margin-left: 5%;
}
article h1 {
width: 100%;
border-bottom: 1px solid #CCC;
}
article p#date {
width: 10%;
padding: 2% 3% 2% 3%;
background: #0CF;
color: #FFF;
text-align: center;
border-radius: 60%;
position: absolute;
left: 80%;
top: 1%;
font-weight: bold;
line-height: 1.2em;
}
article p#date span {
font-size: 22px;
font-weight: bold;
}
article p#category {
margin-bottom: 6%;
}
aside {
width: 25%;
float: right;
}
aside h2 {
color: #0CF;
font-weight: 700;
}
aside ul {
margin-bottom: 10%;
}
aside img {
margin-right: 5px;
}
nav ul li {
width: 20%;
float: left;
text-align: center;
border-left: 1px solid #BBB;
border-right: 1px solid #BBB;
font-size: 16px;
padding: 0.1em 0.1em 0.1em 0.1em;
}
nav ul li a {
display: block;
color: white;
padding: 0.6em 1em 0.6em 1em;
}
#content {
margin-bottom: 10%;
}
footer {
width: 90%;
height: 5em;
background: #111;
margin: 0 auto;
}
footer p {
color: #FFF;
margin: 2% 0 0 2%;
padding-top: 1%;
}
footer small {
color: #FFF;
margin: 2% 0 0 2%;
}
aside ul li a {
display: block;
color: #333333;
}
aside ul li a:hover {
background: #0CC;
color: #FFF;
}
