Part5 - MENU
Part5 - MENU
MENU
MENU 旬の野菜と食材を 手軽に味わえる 自家農園の食材のため、リーズナブルにご提供 季節ごとにサラダ/メインメニューは変わります Salad Main Pasta
HTML記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】MENU | Harvest Restaurant</title> <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"> <link rel="stylesheet" href="../css/menu.css"> </head> <body class="subPage"> <!-- .header --> <header class="header"> <h1><span>menu</span></h1> ここにハンバーメニューが入る </header> <!-- /.header --> <!-- .main-content --> <main class="main-content"> <section class="article"> <h2>旬の野菜と食材を<br class="onlySP">手軽に味わえる</h2> <p class="lead"> 自家農園の食材のため、リーズナブルにご提供<br> 季節ごとにサラダ/メインメニューは変わります </p> <section class="menuDetailSec"> <h3>Salad</h3> <ul class="menu-list"> <li><img src="../img/menu_s01.webp" alt=""></li> <li><img src="../img/menu_s02.webp" alt=""></li> <li><img src="../img/menu_s03.webp" alt=""></li> <li><img src="../img/menu_s04.webp" alt=""></li> </ul> </section> <section class="menuDetailSec"> <h3>Main</h3> <ul class="menu-list"> <li><img src="../img/menu_m01.webp" alt=""></li> <li><img src="../img/menu_m02.webp" alt=""></li> <li><img src="../img/menu_m03.webp" alt=""></li> <li><img src="../img/menu_m04.webp" alt=""></li> </ul> </section> <section class="menuDetailSec"> <h3>Pasta</h3> <ul class="menu-list"> <li><img src="../img/menu_p01.webp" alt=""></li> <li><img src="../img/menu_p02.webp" alt=""></li> <li><img src="../img/menu_p03.webp" alt=""></li> <li><img src="../img/menu_p04.webp" 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; } /* -------------------------------------- MENU -------------------------------------- */ .menu-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; width: min(96% , 1240px); margin: 0 auto; } .menu-list li img { filter: drop-shadow(1px 2px 3px #dddddd); } .menuDetailSec { margin-bottom: 80px; } @media screen and (min-width: 768px) { .menu-list { grid-template-columns: repeat(4, 1fr); } } /* ------------------------------------------ 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); }