Part5 - INFO
Part5 - INFO
INFO
INFO 山の中にひっそり佇む 隠れ家レストラン 駅からはちょっぴり遠いですが、 たまには遠回りしてみませんか? Access Capybaland Mt.Sunny 1-2-3 in Capyzou farm 「サニー山駅」から車で10分 [OPEN]10:00-22:00 [CLOSE]Monday Garelly
HTML記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】INFO | Harvest Restaurant</title> <link rel="stylesheet" href="../css/info.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"> </head> <body class="subPage"> <!-- .header --> <header class="header"> <h1><span>info</span></h1> ここにハンバーメニューが入る </nav><!-- /.gnav --> </header> <!-- /.header --> <!-- .main-content --> <main class="main-content"> <section class="article"> <h2>山の中にひっそり佇む<br class="onlySP">隠れ家レストラン</h2> <p class="lead"> 駅からはちょっぴり遠いですが、<br> たまには遠回りしてみませんか? </p> <section> <h3>Access</h3> <p class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2381.3378364030896!2d139.72054154511156!3d35.68929551223065!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5c1e99747ec1e94e!2z77yI5qCq77yJ57-U5rOz56S-!5e0!3m2!1sja!2sjp!4v1617701157289!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe> Capybaland Mt.Sunny 1-2-3 in Capyzou farm<br> 「サニー山駅」から車で10分<br> [OPEN]10:00-22:00 [CLOSE]Monday </p> </section> <section> <h3>Garelly</h3> <ul class="photoGarelly"> <li class="item01"><img src="../img/info_g01.jpg" alt=""></li> <li class="item02"><img src="../img/info_g02.jpg" alt=""></li> <li class="item03"><img src="../img/info_g03.jpg" alt=""></li> <li class="item04"><img src="../img/info_g04.jpg" alt=""></li> <li class="item05"><img src="../img/info_g05.jpg" alt=""></li> <li class="item06"><img src="../img/info_g06.jpg" alt=""></li> <li class="item07"><img src="../img/info_g07.jpg" alt=""></li> </ul> </section> </section> </main> <!-- /.main-content --> <!-- .footer --> <footer class="footer"> <p><img src="../img/footer_logo.svg" alt=""></p> </footer> <!-- /.footer --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="../js/script.js"></script> </body> </html>
CSS記述例
@charset "URF-8"; /* -------------------------------------- reset -------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; vertical-align: bottom; } /* -------------------------------------- body -------------------------------------- */ body { color: #333; font-size: 16px; font-family: 'Catamaran', 'Noto Sans JP', sans-serif; line-height: 1.0; } /* -------------------------------------- font -------------------------------------- */ .subPage { text-align: center; line-height: 1.5; } .header { margin-bottom: 30px; padding-top: 70px; border-top: 14px solid #f5f5f5; } .header h1 { font-size: 42px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; } .header h1 span { background-image: linear-gradient(135deg,#e6ba5d 0%,#9ac78a 100%); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; } .subPage h2 { font-size: 20px; margin-bottom: 20px; letter-spacing: .17em; } .subPage h3 { font-size: 30px; margin-bottom: 30px; } .subPage .lead { font-size: 14px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .subPage h1 { font-size: 60px; } .subPage h2 { font-size: 34px; margin-bottom: 36px; letter-spacing: .2em; } .subPage h3 { font-size: 50px; margin-bottom: 40px; } .subPage .lead { font-size: 18px; margin-bottom: 200px; } .onlySP { display: none; } } /* -------------------------------------- layout -------------------------------------- */ .main-content { width: min(90%, 1240px); margin: 0 auto; } /* -------------------------------------- INFO -------------------------------------- */ .map iframe { width: 100%; height: 240px; margin-bottom: 8px; } .map { margin-bottom: 60px; font-size: 12px; text-align: left; } .photoGarelly { display: grid; grid-template-rows: 40vw 30vw 30vw 40vw 40vw; grid-template-columns: 50% 50%; } .item01 { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3; } .item02 { grid-row: 2 / 4; grid-column: 1 / 2; } .item03 { grid-row: 2 / 3; grid-column: 2 / 3; } .item04 { grid-row: 3 / 4; grid-column: 2 / 3; } .item05 { grid-row: 4 / 5; grid-column: 1 / 3; } .item06 { grid-row: 5 / 6; grid-column: 1 / 2; } .item07 { grid-row: 5 / 6; grid-column: 2 / 3; } .photoGarelly li img { width: 100%; height: 100%; object-fit: cover; } @media screen and (min-width: 768px) { .photoGarelly { grid-template-rows: 175px 175px 290px; grid-template-columns: 50% 20% 30%; } .item01 { grid-row: 1 / 3; grid-column: 1 / 2; } .item02 { grid-row: 1 / 3; grid-column: 2 / 3; } .item03 { grid-row: 1 / 2; grid-column: 3 / 4; } .item04 { grid-row: 2 / 3; grid-column: 3 / 4; } .item05 { grid-row: 3 / 4; grid-column: 1 / 2; } .item06 { grid-row: 3 / 4; grid-column: 2 / 3; } .item07 { grid-row: 3 / 4; grid-column: 3 / 4; } } /* ------------------------------------------ footer ------------------------------------------- */ .footer { background: url(../img/footer_mt.svg) no-repeat right top; background-size: 200px; margin-top: 60px; padding-top: 68px; } .footer p { background-color: #f5f5f5; text-align: left; } .footer img { width: 188px; transform: translateY(-28px); }