<!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">
<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">
<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>
KAOKA Daisuke