2カラムレイアウトをレスポンシブに作り変えましょう。
ヘッダー画像・バナー画像は自身で用意
使用画像
バナー見本
バナー素材
作例
PCレイアウト
タブレットレイアウト
スマホサイト
レスポンシブ化のソースコード
index.httml
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Pickupstream</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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="url">HOME</a></li> <li><a href="url">ABOUT</a></li> <li><a href="url">CONTACT</a></li> </ul> </nav> </header> <!-- #header --> <div class="inner"> <p id="keyVisual"><img src="img/KeyVisual.jpg" alt="夜景画像"></p> <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/mihon.png" alt="広告"></p> </div> </div><!-- #sidebar --> </div><!-- #inner --> <!-- ### フッター ### --> <footer> <div class="inner"> <div id="footer_txt"> <p id="footer_title">Pickupstream</p> <p><small>Copyright © Pickupstream, all rights reserved.</small></p> </div> <ul> <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a></li> </ul> </div> </footer> </body> </html>
@charset "UTF-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3,p,ul, li,div { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN",Meiryo, sans-serif; } ul { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; vertical-align: bottom; } /* ### レイアウト ### */ header h1 { background: url(img/logo.png)no-repeat; width: 360px; height: 39px; margin: 10px 0; white-space: nowrap; text-indent: 100%; overflow: hidden; } .inner { width: 960px; margin:0 auto; overflow: hidden; } /* ナビゲーションメニュー */ nav#header_nav { background:#1C3479; } ul#main_nav { width: 960px; margin: 0 auto; font-size: 14px; overflow: hidden; background:#0097D8; } ul#main_nav li { float: left; width: 130px; } ul#main_nav li a { display: block; padding: 15px 0 13px; border-right: solid 1px #fff; color: #ffffff; text-align: center; } ul#main_nav li a:hover { background-color: #035; } p#keyVisual { margin-bottom: 30px; } #content{ width: 620px; float: right; margin-bottom:30px; } section h2 { font-size: 25px; line-height:28px; color:#185A68; border-left: solid 30px #185A68; margin: 0 0 6px; padding: 0 0 0 5px; } section p.new{ margin:0 0 10px; } section p { margin-top: 20px; line-height: 1.5; } section img{ border:8px solid #185A68; box-sizing:border-box; } /*サイドバー*/ #sidebar { width: 300px;/*バナーを100%で表示させる為*/ float: left; } #sidebar h2{ font-family: 'Lobster', cursive; } .menu{ margin-bottom:30px; } .ad { margin-bottom: 30px; } nav.menu h2 { font-size: 25px; color: #3F7A8C; margin: 0 0 5px; } nav.menu ul { border-top: solid 1px #aaaaaa; } nav.menu li { border-bottom: solid 1px #aaaaaa; } nav.menu li a { display: block; font-size: 14px; color: #666666; padding: 10px 0 10px 20px; background: url(img/listmark.png)no-repeat 0 50%; } nav.menu li a:hover { background-color: #def; } footer { color: #ffffff; background-color:#1C3479; padding: 10px 10px 20px; } footer p#footer_title { font-size: 18px; padding: 10px 0; font-weight: bold; } #footer_txt { width:50%; float:left; } footer ul { overflow:hidden; width:30%; float: right; margin-top:20px; } footer li { float:left; } footer li a { display:block; color:#FFFFFF; font-size:40px; margin-left:20px; } footer li a:hover { color: #FFCC33; } @media screen and (max-width:959px) { /*タブレット用レイアウト*/ header h1 { margin:10px; } .inner { width: 100%; } /* ナビゲーションメニュー */ ul#main_nav { width: 100%; } #content{ width: 64.58%; padding-right:10px; box-sizing:border-box; } section p.new{ margin:0 0 10px; } section p { margin-top: 20px; line-height: 1.5; } section img{ border:8px solid #185A68; box-sizing:border-box; } /*サイドバー*/ #sidebar { width: 31.25%; padding-left:10px; box-sizing:border-box; } nav.menu h2 { font-size: 25px; color: #3F7A8C; margin: 0 0 5px; } img { max-width:100%; } } @media screen and (max-width:767px) { /*スマホ用レイアウト*/ header h1 { background: url(img/logo.png)no-repeat center/contain; width: 240px; height: 39px; } ul#main_nav li { width: 33.33%; } ul#main_nav li a { display: block; padding: 15px 0 13px; border-right: solid 1px #fff; color: #ffffff; text-align: center; } ul#main_nav li:last-child a { border-right:none; } #content{ width: 100%; padding:10px; box-sizing:border-box; float:none; } #content section { margin:0 auto; } section img{ text-align:center; border:none; box-sizing:border-box; } section h2 { font-size: 22px; line-height:22px; color:#185A68; border-left: solid 10px #185A68; margin: 0 0 6px; padding: 0 0 0 5px; } #sidebar { width: 100%; padding-left:10px; padding-right:10px; box-sizing:border-box; float:none; } #sidebar p { text-align:center; } #footer_txt { width:100%; float:none; } footer ul { overflow:hidden; width:100%; float:none; margin-top:20px; } footer li:first-child a{ display:block; color:#FFFFFF; font-size:40px; margin-left:0; } }