レスポンシブ:VOGUEのマネ
全面レイアウト:完成版にリンク
VOGUE JAPAN 15th Anniversary 1999~2014:参考サイト
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>全面レイアウト</title> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css?family=Lobster+Two:700" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/style_y.css"> </head> <body> <header> <p>ここはheader</p> </header> <div id="container"> <div class="top topL"> <a href="#"> <div class="cap"> <h3>Snow mountain</h3> <p class="text">雪山へはリフトでいきましょう</p> <p class="view">view more</p> </div></a> </div> <div class="top topR"> <a href="#"> <div class="cap"> <h3>Tent</h3> <p class="text">テントは上手にはりましょう</p> <p class="view">view more</p> </div></a> </div> <div class="bottom btmL"> <a href="#"> <div class="cap"> <h3>Sea</h3> <p class="text">カヤックであそぶのもいいですね</p> <p class="view">view more</p> </div></a> </div> <div class="bottom btmC"> <a href="#"> <div class="cap"> <h3>Mountain</h3> <p class="text">山に寄り道するのも楽しそうです</p> <p class="view">view more</p> </div></a> </div> <div class="bottom btmR"> <a href="#"> <div class="cap"> <h3>Coast</h3> <p class="text">ここは2人組であるきましょう</p> <p class="view">view more</p> </div></a> </div> <p class="logo"><img src="img/camp.svg" alt="CAMP TRAVEL"></p> </div><!--#container--> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { 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; } /*--------------------------*/ html, body { width: 100%; height: 100%; } header { width: 20%; height: 100%; float: left; background: #FFF; position: fixed; z-index: 50; background: #98BEC6; } #container { width: 80%; height: 100%; float: right; position: relative; } .top { width: 50%; height: 50%; float: left; position: relative; overflow: hidden; } .bottom { width: 33.33%; height: 50%; float: left; position: relative; overflow: hidden; } .topL { background: url(../img/02.png) no-repeat; background-size: cover; } .topR { background: url(../img/01.png) no-repeat 50% 50%; background-size: cover; } .btmL { background: url(../img/03.png) no-repeat; background-size: cover; } .btmC { background: url(../img/04.png) no-repeat; background-size: cover; } .btmR { background: url(../img/05.png) no-repeat; background-size: cover; } .logo img { width: 160px; height: 160px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 9999; } /*ホバーアクション*/ .top a, bottom a { display: block; width: 100%; height: 100%; } .cap { padding-top: 240px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 10; opacity: 1; transition: .4s ease-in-out; background: rgba(245,44,67,0); cursor: default; } .cap:hover { top:-40%; left: 0; background: rgba(100,100,100,0.7); } h3{ padding-bottom: 20px; color: #FFF; font-size: 22px; font-family: 'Lobster Two', cursive; } .text { color: #FFF; font-size: 16px; padding-bottom: 36px; } .view { width: 40%; margin: 0 auto; font-size: 20px; color: #FFF; padding: 10px; border: 1px solid #FFF; transition: 0.2s ease-in-out; } .view:hover{ background:white; color: #111; /* cursor: pointer;*/ } @media screen and (max-width : 767px){ header { width: 100%; height: 80px; float: none; top: 0; left: 0; z-index: 30; } .topL { margin-top: 80px; } header p { text-align: center; } #container { width: 100%; float: none; } .top, .bottom { float: none; width: 100%; height: 50%; margin-bottom: 180px;/*.capが表示される領域*/ overflow: inherit; /*overflowを初期値に戻す*/ } .logo img{ width: 60px; height: 60px; padding: 10px; position: fixed; top:0; left:0; margin: 0; } .top a, bottom a { display: block; width: 100%; height: 180px; } .cap { padding-top: 0; position: absolute; top: 100%; left: 0; width: 100%; height: 180px; transition: none; background: rgba(100,100,100,0.7); } .cap:hover { top: 100%; left: 0; } h3{ padding:20px 0; color: #FFF; font-size: 20px; } .text { color: #FFF; font-size: 14px; padding-left: 10px; padding-right: 10px; padding-bottom: 20px; } }