- GoogleMapの挿入
- GoogleFontsの挿入
- FontAwesomeの使用
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブサイトの作成</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <header> <h1>Cafe de FELICA</h1> <nav class="g-nav"> <ul> <li><a href="#">Top</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Access</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div class="main"> <p class="key-visual"><img src="img/main.jpg" alt=""></p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptatibus tempore, beatae facilis iusto totam labore, sequi voluptatum praesentium, pariatur veritatis laborum laboriosam, cumque itaque commodi reiciendis. Placeat, doloremque cumque!</p> <div class="wrapper"> <div class="box"> <h2>Shop info</h2> <dl> <dt>住所</dt> <dd>東京都豊島区池袋</dd> <dt>営業時間</dt> <dd>11:00~20:00</dd> <dt>電話番号</dt> <dd>1234567890</dd> <dt>座席数</dt> <dd>50席(テラス10席)</dd> </dl> </div><!--/.box--> <div class="box"> <h2>Map</h2> <div class="map-inner"> <iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.929646365803!2d139.71221001465224!3d35.727948735017065!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1615255457057!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div><!--/.map-inner--> </div><!--/.box--> </div><!--/.wrapper--> </div><!--/.main--> <footer> <p><small>© Cafe de FELICA</small></p> <ul class="sns"> <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> </ul> </footer> </body> </html>
style.css
@charset "utf-8"; html,body,h1,h2,h3,p,ul,li,dl,dt,dd{ margin: 0; padding: 0; box-sizing: border-box; } ul{ list-style: none; } a{ text-decoration: none; } img{ vertical-align: bottom; max-width: 100%; } /*PCレイアウト*/ header{ width: 100%; height: 100px; background-color: crimson; display: flex; align-items: center; justify-content: space-around; } h1{ color: #FFF; font-family: 'Shadows Into Light', cursive; font-size: 40px; } .g-nav>ul{ display: flex; } .g-nav li{ margin: 0 20px; } .g-nav a{ padding: 10px; color: #FFF; font-family: 'Shadows Into Light', cursive; font-size: 20px; } .g-nav a:hover{ text-decoration: underline; } .key-visual{ max-width: 960px; margin: 50px auto; } .lead{ max-width: 600px; margin: 0 auto 50px; line-height: 2; } .wrapper{ max-width: 960px; margin: 0 auto 100px; display: flex; justify-content: space-between; } .box{ width: 46%; } .box>h2{ font-family: 'Shadows Into Light', cursive; font-size: 30px; margin-bottom: 20px; border-left: 16px solid crimson; padding-left: 20px; } dl{ display: flex; flex-wrap: wrap; border: 1px solid #666; } dt{ width: 30%; padding: 20px; background-color: beige; border-right:1px solid #666; } dd{ width: 70%; padding: 20px; } dt:nth-of-type(n+2),dd:nth-of-type(n+2){ border-top:1px solid #666; } .map-inner{ width: 100%; height: 400px; } .g-map{ width: 100%; height: 100%; } footer{ background-color: crimson; padding-bottom: 40px; } footer>p{ text-align: center; color: #FFF; padding: 20px 0; } .sns{ display: flex; max-width: 960px; margin: 0 auto; } .sns>li{ margin-right: 20px; } .sns a{ font-size: 44px; color: #FFF; } .sns a:hover{ color: #CCC; } @media (max-width:959px){ /*959px以下の時*/ .main,.sns{ padding: 0 10px; } } @media (max-width:640px){ /*640px以下の時*/ header{ display: block; height: auto; padding: 6px 0; } h1{ font-size: 24px; text-align: center; } .g-nav>ul{ justify-content: center; } .g-nav li{ margin: 0 6px; } .g-nav a{ font-size: 16px; } .wrapper{ display: block; } .box{ width: 100%; margin-bottom: 50px; } }