見本画像
PCレイアウトは960px固定で2カラム。liは130pxで固定。content画像は100%の大きさで使用する。navとfooterの幅は100%。
タブレットはフルードレイアウトで縮小。liは130pxで固定。
スマホはフルードレイアウトで1カラム。li幅は3等分
ブレイクポイントは
- 960px以上
- 959px~768px
- 767px以下
sidebar内のh2にgoogleFontsを使用すること
素材データ
http://yachin29.com/09-test.zip
作例
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Pickupstream</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> </head> <body> <header> <div class="inner"> <div id="site"> <h1>PickupStream</h1> </div> </div> <nav id="header_nav"> <ul id="main_nav"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </header> <!-- #header --> <p id="keyVisual"><img src="img/header.jpg" alt="夜景画像"></p> <div class="inner"> <div id="content"> <section> <h2>海岸のデコレーション</h2> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p> <p id="plant"><img src="img/plant.jpg" alt="海浜植物"></p> <p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p> <p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p> </section> </div> <div id="sidebar"> <nav class="menu"> <h2>Main Menu</h2> <ul> <li><a href="#">山と森林</a></li> <li><a href="#">海と海岸</a></li> <li><a href="#">都市と建築</a></li> <li><a href="#">地上と地下</a></li> </ul> </nav> <div class="ad"> <p><img src="img/ad2.jpg" alt="広告"></p> </div> </div><!-- #sidebar --> </div><!-- #inner --> <!-- ### フッター ### --> <footer> <div class="inner"> <p id="footer_title">Pickupstream</p> <p><small>Copyright © Pickupstream, all rights reserved.</small></p> </div> </footer> </body> </html>