今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。
まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。
今回のブレイクポイントは
画像のダウンロード
http://ascii.jp/elem/000/000/699/699812/index-3.html
作例
PCレイアウト
タブレットレイアウト
スマホレイアウト
テキスト
枝豆隊ロゴ
豆はカラダにイイ
ホーム
枝豆一覧
枝豆隊
アクセス
枝豆の栄養素はスゴい
枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。
代表的な豆料理
枝豆
イラスト 枝豆
枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。
ずんだ
イラスト ずんだ
ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。
枝豆隊隊長
肖像 枝豆隊長
枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。
2004-2019©枝豆隊
index.html
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>枝豆隊長</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>枝豆隊ロゴ</h1> <p>豆はカラダにイイ</p> <nav class="g-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 class="wrapper"> <div class="main"> <h2>枝豆の栄養素はスゴい</h2> <p class="main-txt">枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p> <h2>代表的な豆料理</h2> <div class="food"> <h3>枝豆</h3> <p class="photo"><img src="img/01.jpg" alt="枝豆"></p> <p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p> </div> <div class="food"> <h3>ずんだ</h3> <p class="photo"><img src="img/02.jpg" alt="ずんだ"></p> <p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p> </div> </div><!--/.main--> <div class="sub"> <h2>枝豆隊隊長</h2> <p class="photo"><img src="img/03.jpg" alt="枝豆隊長"></p> <p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p> </div><!--/.sub--> </div><!--/.wrapper--> <footer> <p><small>2004-2019 © 枝豆隊</small></p> </footer> </body> </html>
@charset "utf-8";
/* CSS Document */
html,body,h1,h2,h3,p,ul,li,small {
margin:0;
padding:0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}
img {
vertical-align:bottom;
max-width:100%;/*フルードイメージ*/
}
/*PCレイアウト*/
header {
padding-top:20px;
}
h1 {
width:80px;
height:80px;
background:url(../img/logo.svg) no-repeat;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
margin:0 auto 20px;
}
header>p {
text-align:center;
font-size:32px;
font-weight:bold;
margin-bottom:20px;
}
.g-nav {
width:100%;
background:#093;
}
.g-nav ul {
max-width:960px;
margin:0 auto;
overflow:hidden;
}
.g-nav li {
width:25%;
height:50px;
float:left;
}
.g-nav li>a {
display:block;
text-align:center;
line-height:50px;
color:#FFFFFF;
background:#093;
border-right:1px solid #FFF;
}
.g-nav li:first-child>a {
border-left:1px solid #FFF;
}
.g-nav li>a:hover {
background:#3C6;
}
.wrapper {
max-width:960px;
margin:30px auto;
overflow:hidden;
}
.main {
width:630px;
float:left;
}
.main h2 {
margin-bottom:10px;
}
.main-txt {
margin-bottom:30px;
}
.food {
margin-bottom:40px;
}
.food h3{
margin-bottom:10px;
font-size:22px;
border-left:16px solid #FC6;
padding-left:10px;
}
.photo {
margin-bottom:10px;
}
.sub {
width:300px;
float:right;
}
footer {
width:100%;
height:100px;
background:#FC6;
}
footer p {
line-height:100px;
text-align:center;
}
@media (max-width:959px){
.g-nav li:first-child>a {
border-left:0;
}
.g-nav li:last-child>a {
border-right:0;
}
.wrapper {
overflow:visible;
}
.main,.sub {
width:100%;
float:none;
padding:0 10px;
box-sizing:border-box;
}
}
@media (max-width:640px){
.g-nav li {
width:50%;
}
.g-nav li:nth-child(2)>a {
border-right:0;
}
.g-nav li:nth-child(-n+2)>a {
border-bottom:1px solid #FFF;
line-height:49px;
}
}
コメント