レスポンシブデザイン

2カラムでレスポンシブなページを作成

ソースファイル

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWD枝豆</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<header>
<h1><img src="img/logo.png" alt="枝豆隊ロゴ"></h1>
<h2>豆はカラダにイイ</h2>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">枝豆一覧</a></li>
<li><a href="#">枝豆隊</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</header>

<div id="wrapper">
<div id="main">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<span>たくさんの栄養がつまっています。</span>枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>

<h3>代表的な豆料理</h3>
<div>
<h4>枝豆</h4>
<img src="img/01.jpg" alt="枝豆">
<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
</div>

<div>
<h4>ずんだ</h4>
<img src="img/02.jpg" alt="ずんだ">
<p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</div>
</div><!--/#main-->

<div id="sub">
<h4>枝豆隊隊長</h4>
<img src="img/03.jpg" alt="肖像 枝豆隊長">
<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div><!--/#sub-->
</div><!--/#wrapper-->

<footer>
<p><small>2004-2012&copy;枝豆隊</small></p>
</footer>
</div><!--/#container-->
</body>
</html>

 

CSS

@charset "utf-8";
/* CSS Document */
html,body,h1,h2,h3,h4,p,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "游ゴシック", YuGothic,
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
font-weight: 500;
}
ul {
list-style: none;/* マーカーを消す */
}
a {
text-decoration: none;/* 下線を消す */
}
img {
border: 0;/* リンクが設定されたimgにつくborderを消す */
}
img{
vertical-align: bottom;
}

/* Layout
------------------------------------------*/
#container {
width: 100%;
}

header {
width: 100%;
text-align: center;
padding-top: 16px;
}

h1 {
margin-bottom: 16px;
}

h2 {
font-size: 36px;
margin-bottom: 16px;
font-weight: bold;
}

/*navi*/
nav {
width: 100%;
background-color: #6D3524;
margin-bottom: 24px;
}

nav ul {
overflow: hidden;
width: 960px;
margin: 0 auto;
}

nav ul li {
float: left;
width: 25%;
height: 50px;
border-right: 1px solid #FFF;
box-sizing: border-box;
}

nav ul li:first-child {
border-left: 1px solid #FFF;
}

nav ul li a {
display: block;
color: #FFF;
line-height: 50px;
}

nav ul li a:hover {
color: white;
background-color: #B7715D;
}

#wrapper {
overflow: hidden;
width: 960px;
margin: 0 auto;
line-height: 1.8;
}

footer {
padding: 24px 0;
color: white;
background-color: #629E3C;
text-align: center;
}

/* Contents
------------------------------------------*/
#wrapper img {
max-width: 100%;/*フルードイメージの設定*/
}

#main {
float: left;
width: 600px;
padding: 10px;
}

#sub {
float: right;
width: 300px;
padding: 10px;
}

#main p, #sub p {
margin-bottom : 24px;
}

#main img {
margin-bottom : 24px;
box-shadow : 0 0 10px #000;
}
#sub img {
margin-bottom: 24px;
}

h3 {
font-size: 24px;
margin-bottom: 16px;
font-weight: bold;
}

h4 {
margin-bottom: 16px;
font-weight: bold;
}

span {
color: blue;
}

#main h4 {
margin: 10px 0 10px;
font-weight: bold;
}

#sub h4 {
margin-bottom: 10px;
font-weight: bold;
}


/*タブレット用*/
@media screen and (max-width:959px){
nav ul {
width: 100%;
}

nav ul li:first-child {
border-left: none;
}

nav ul li:last-child {/*新規追加*/
border-right: none;
}

nav ul li:hover {
color: white;
background-color: #B7715D;
}

/* Contents
------------------------------------------*/
#wrapper {
overflow: visible;/*hiddenを初期値に戻す*/
width: 100%;/*960pxから変更*/
}

#wrapper img {
max-width: 100%;/*フルードイメージの設定*/
}

#main {
float: none;/*leftを変更*/
width: 98%;/*左右に1%パディングがあるので*/
padding: 1%;/*10px÷960px✖100=約1%*/
}

#sub {
float: none;/*rightを変更*/
width: 98%;
padding: 0 1%;
}
}
/*スマホ用*/
@media screen and (max-width:767px){
h2, h3, h4, p, img {
text-align: center;
}
}