<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>6-02_drawer</title> <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet"> <link href="../../_common/css/style.css" rel="stylesheet"> <link href="css/special.css" rel="stylesheet"> </head> <body> <div id="wrapper" class="show"> <header> <div class="container"> <div class="title-block"> <h1>ドロワーナビゲーション</h1> <h2>メニューが「開いた」ときの状態を作る</h2> </div> <div class="hamburger" id="open_nav"> <img src="hamburger.png" alt=""> </div> </div><!-- /.container --> </header> <main> <div class="container"> <section> <div class="key"> <img src="key.jpg" alt=""> </div> <div class="content"> <h1>ひとり旅でリフレッシュ</h1> <p>今月の特集は「ひとり旅」。<br> 週末に行ける小さな旅行から人生を見つめる長旅まで、<br> 充実のおひとり様プラン、紹介します。</p> </div> <div class="archive"> <h3>特集アーカイブ</h3> <div class="archive-box"> <figure> <img src="thumb1.jpg" alt=""> <figcaption>レトロな街の、楽しみ方</figcaption> </figure> <figure> <img src="thumb2.jpg" alt=""> <figcaption>建築物を巡る旅</figcaption> </figure> </div> </div> </section> </div><!-- /.container --> </main> <footer> <div class="container"> <p>JavaScript Samples</p> </div><!-- /.container --> </footer> </div> <nav id="nav" class="show"> <div class="logo"><img src="logo.svg" alt=""></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">今月の特集</a></li> <li><a href="#">ホテル検索</a></li> <li><a href="#">カフェ検索</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </body> </html>