index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>スマホ特化型サイトã®ä½œæˆ</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=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=RocknRoll+One&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <header> <h1>IKEBUKURO COFFEE FESTIVAL</h1> <p class="tag-line">一æ¯ã®ã‚³ãƒ¼ãƒ’ーã‹ã‚‰è¡—ã®ã¤ãªãŒã‚Šã‚’<br> ä»Šå¹´ã‚‚æ± è¢‹ã®è¡—ãŒã‚³ãƒ¼ãƒ’ーã®é¦™ã‚Šã§æº€ãŸã•ã‚Œã¾ã™ã€‚</p> <div class="banner-img"> <img src="https://placehold.jp/1000x400.png" alt=""> </div><!-- /.banner-img --> <nav class="pc-nav"> <ul> <li><a href="#top">Top</a></li> <li><a href="#shop">Shop</a></li> <li><a href="#access">Access</a></li> <li><a href="#gallery">Gallery</a></li> </ul> </nav> </header> <button id="ham-btn"><span></span></button> <nav id="sp-nav"> <ul> <li><a href="#top">Top</a></li> <li><a href="#shop">Shop</a></li> <li><a href="#access">Access</a></li> <li><a href="#gallery">Gallery</a></li> </ul> </nav> <div class="logo-box"> <img src="img/logo.svg" alt=""> </div> <div class="container"> <p class="ticker"> ãƒ†ãƒ¬ãƒ“æ± è¢‹ã€Œè¡—ãƒ–ãƒ©å¤©å›½ã€ï¼ˆ12月7日土曜日 夕方6時放é€äºˆå®šï¼‰ã«ã¦ã€ã‚¤ãƒ™ãƒ³ãƒˆå‡ºåº—舗ãŒç´¹ä»‹ã•ã‚Œã¾ã™ï¼ <span class="s2">ãƒ†ãƒ¬ãƒ“æ± è¢‹ã€Œè¡—ãƒ–ãƒ©å¤©å›½ã€ï¼ˆ12月7日土曜日 夕方6時放é€äºˆå®šï¼‰ã«ã¦ã€ã‚¤ãƒ™ãƒ³ãƒˆå‡ºåº—舗ãŒç´¹ä»‹ã•ã‚Œã¾ã™ï¼</span> </p> <div class="main-visual"> <img src="img/main.webp" alt=""> </div><!-- /.main-visual --> <div class="main-copy"> <h2>æ± è¢‹ã§ã‚³ãƒ¼ãƒ’ーã¨<span>音楽を楽ã—ã‚€</span></h2> <p class="lead">全国ã®äººæ°—コーヒーショップãŒä¸€å ‚ã«ä¼šã—ã€ã“ã ã‚ã‚Šã®ä¸€æ¯ã‚’æ供。コーヒー豆ã®è²©å£²ã‚„ã€ãƒãƒªã‚¹ã‚¿ã«ã‚ˆã‚‹ãƒ‡ãƒ¢ãƒ³ã‚¹ãƒˆãƒ¬ãƒ¼ã‚·ãƒ§ãƒ³ãªã©ã€ã‚³ãƒ¼ãƒ’ー好ãã«ã¯ãŸã¾ã‚‰ãªã„イベントãŒç››ã‚Šã ãã•ã‚“。美味ã—ã„コーヒーを飲ã¿ãªãŒã‚‰ã€éŸ³æ¥½ãƒ©ã‚¤ãƒ–やワークショップも開催。ãœã²ã”æ¥å ´ãã ã•ã„ï¼</p> </div><!-- /.main-copy --> <main> <section id="news" class="page-section"> <h3 data-ja="ãŠçŸ¥ã‚‰ã›">News</h3> <dl class="news-list"> <dt>2024å¹´12月13æ—¥</dt> <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, suscipit!</dd> <dt>2024å¹´12月12æ—¥</dt> <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, suscipit!</dd> <dt>2024å¹´12月11æ—¥</dt> <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, suscipit!</dd> <dt>2024å¹´12月10æ—¥</dt> <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, suscipit!</dd> </dl> </section> <section id="shop" class="page-section"> <h3 data-ja="出店舗ã®ç´¹ä»‹">Shop</h3> <div class="scroll-wrapper"> <div class="scroll-box"> <h4>自家焙煎店:豆蔵</h4> <div class="scroll-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.scroll-img --> <p>店主・山田太郎「自家焙煎ã®æ·±ç…Žã‚Šã‚³ãƒ¼ãƒ’ーã¯æ ¼åˆ¥ã§ã™ã€‚ãœã²ã€å½“店自慢ã®ãƒ–レンドをã”賞味ãã ã•ã„。ã€</p> </div><!-- /.scroll-box --> <div class="scroll-box"> <h4>焙煎工房 薫風</h4> <div class="scroll-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.scroll-img --> <p>スタッフ・鈴木花å「毎æœä¸å¯§ã«ãƒãƒ³ãƒ‰ãƒ”ックã—ãŸç”Ÿè±†ã‚’ã€ä¸å¯§ã«ç„™ç…Žã—ã¦ã„ã¾ã™ã€‚一æ¯ã”ã¨ã«ç•°ãªã‚‹é¢¨å‘³ã‚’ãŠæ¥½ã—ã¿ãã ã•ã„。ã€</p> </div><!-- /.scroll-box --> <div class="scroll-box"> <h4>çˆç²ãƒãƒ¼ã‚¹ã‚¿ãƒ¼ 星夜</h4> <div class="scroll-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.scroll-img --> <p>店主・ä½è—¤å¥ã€Œæ˜Ÿã®ä¸‹ã§ç”Ÿã¾ã‚ŒãŸã‚ˆã†ãªã€æ·±ã¿ã®ã‚る一æ¯ã‚’。特別ãªè±†ã‚’ã€ç‰¹åˆ¥ãªæ–¹æ³•ã§ç„™ç…Žã—ã¾ã—ãŸã€‚ã€</p> </div><!-- /.scroll-box --> <div class="scroll-box"> <h4>カフェ・ド・ルナ</h4> <div class="scroll-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.scroll-img --> <p>店長・田ä¸ç¾Žå’²ã€Œæœˆå¤œã®ä¸‹ã€ã‚†ã£ãŸã‚Šã¨ã‚³ãƒ¼ãƒ’ータイムを。自家製スイーツã¨ã®ãƒšã‚¢ãƒªãƒ³ã‚°ã‚‚ãŠã™ã™ã‚ã§ã™ã€‚ã€</p> </div><!-- /.scroll-box --> <div class="scroll-box"> <h4>エスプレッソãƒãƒ¼ ビタースウィート</h4> <div class="scroll-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.scroll-img --> <p>åº—é•·ãƒ»è—¤ç”°éº»ç¾Žã€Œæœ¬æ ¼çš„ãªã‚¨ã‚¹ãƒ—レッソをã€æ§˜ã€…ãªã‚¢ãƒ¬ãƒ³ã‚¸ã§ã€‚ã‚ãªãŸã ã‘ã®ã‚ªãƒªã‚¸ãƒŠãƒ«ä¸€æ¯ã‚’創りã¾ã—ょã†ã€‚ã€</p> </div><!-- /.scroll-box --> <div class="scroll-box"> <h4>モãƒã‚¤ãƒ«ã‚³ãƒ¼ãƒ’ー ワゴン</h4> <div class="scroll-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.scroll-img --> <p>店主・伊藤å¥ä¸€ã€Œè¡—を飛ã³å›žã‚‹ã‚³ãƒ¼ãƒ’ーワゴン。ã©ã“ã§å‡ºä¼šãˆã‚‹ã‹ã¯ãŠæ¥½ã—ã¿ã€‚ã€</p> </div><!-- /.scroll-box --> </div><!-- /.scroll-wrapper --> </section> <section id="access" class="page-section"> <h3 data-ja="ä¼šå ´ã®ã”案内">Access</h3> <div class="access-wrapper"> <div class="access-box"> <h4>æ±å£ä¼šå ´:JRæ± è¢‹é§…æ±å£å¾’æ©5分</h4> <div class="access-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.945289559118!2d139.7117402752527!3d35.72756402742839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1734057036396!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div><!-- /.access-map --> </div><!-- /.access-box --> <div class="access-box"> <h4>西å£ä¼šå ´:JRæ± è¢‹é§…è¥¿å£å¾’æ©1分</h4> <div class="access-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.8400845926953!2d139.7063519752528!3d35.73015122728611!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d5c4d489531%3A0x25d752954313d248!2z6LGK5bO25Yy656uL5rGg6KKL6KW_5Y-j5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1734056996388!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div><!-- /.access-map --> </div><!-- /.access-box --> </div><!-- /.access-wrapper --> </section> <section id="gallery" class="page-section"> <h3 data-ja="イベントã®æ§˜å">Gallery</h3> <div class="gallery-wrapper"> <div class="gallery-box"> <h4>投稿タイトル1</h4> <div class="gallery-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.gallery-img --> <p class="gallery-text">Lorem ipsum dolor sit amet,</p> <p class="date">2024/12/13</p> </div><!-- /.gallery-box --> <div class="gallery-box"> <h4>投稿タイトル2</h4> <div class="gallery-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.gallery-img --> <p class="gallery-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, itaque.</p> <p class="date">2024/12/12</p> </div><!-- /.gallery-box --> <div class="gallery-box"> <h4>投稿タイトル3</h4> <div class="gallery-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.gallery-img --> <p class="gallery-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate reiciendis impedit tempora id facilis magni nemo. Distinctio quae corrupti ipsum sed placeat qui necessitatibus voluptas? Amet tempore saepe eum esse?</p> <p class="date">2024/12/11</p> </div><!-- /.gallery-box --> <div class="gallery-box"> <h4>投稿タイトル4</h4> <div class="gallery-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.gallery-img --> <p class="gallery-text">Lorem ipsum dolor sit amet, </p> <p class="date">2024/12/10</p> </div><!-- /.gallery-box --> <div class="gallery-box"> <h4>投稿タイトル5</h4> <div class="gallery-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.gallery-img --> <p class="gallery-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, itaque.</p> <p class="date">2024/12/09</p> </div><!-- /.gallery-box --> <div class="gallery-box"> <h4>投稿タイトル6</h4> <div class="gallery-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.gallery-img --> <p class="gallery-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, itaque.</p> <p class="date">2024/12/08</p> </div><!-- /.gallery-box --> <div class="gallery-box"> <h4>投稿タイトル7</h4> <div class="gallery-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.gallery-img --> <p class="gallery-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium impedit provident reiciendis est quam consequatur molestias, voluptatum quos magni veniam, iure iste officiis itaque eaque nam? Culpa, quisquam totam?</p> <p class="date">2024/12/07</p> </div><!-- /.gallery-box --> <div class="gallery-box"> <h4>投稿タイトル8</h4> <div class="gallery-img"> <img src="https://placehold.jp/600x400.png" alt=""> </div><!-- /.gallery-img --> <p class="gallery-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, itaque.</p> <p class="date">2024/12/06</p> </div><!-- /.gallery-box --> </div><!-- /.gallery-wrapper --> </section> </main> <footer> <p><small>© 2024 IKEBUKURO COFFEE FESTIVAL</small></p> </footer> </div><!-- /.container --> </body> </html>
style.css
@charset "utf-8"; /* 変数ã®æŒ‡å®š */ :root{ --base_color:#E8E3D8; --main_color:#257C4D; --color_2:#d6d1c4; --txt-color:#444444; --txt_color2:#f45454; --font_en:"Kanit", sans-serif; --font_ja:"RocknRoll One", sans-serif; } html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search][type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted}[type=reset],[type=submit],button,html [type=button]button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}img{max-width: 100%;vertical-align: bottom;} html{ scroll-behavior: smooth; } body{ background-color: var(--base_color); color:var(--txt-color); display: flex; flex-direction: row-reverse; @media (960px >= width){ justify-content: center; } } header{ width: 45%; border: 1px solid var(--txt-color); position: fixed; top: 120px; left: 3%; padding: 20px; border-radius: 10px; >h1{ color: var(--main_color); font-family: var(--font_en); font-size: 40px; margin-bottom: 10px; } .tag-line{ font-family: var(--font_ja); font-size: 18px; margin-bottom: 10px; } .banner-img{ margin-bottom: 10px; } @media (960px >= width){ display: none; } } /* pc用ナビ */ .pc-nav>ul{ display: flex; justify-content: center; gap: 0 20px; a{ padding: 6px 14px; color: var(--txt-color); font-family: var(--font_en); font-size: 18px; &:hover{ color: var(--main_color); text-decoration: underline 2px; text-underline-offset: 4px; } } } .container{ width: 42%; margin-right: 3%; background-color: var(--color_2); overflow: hidden; @media (960px >= width){ margin-right: 0; width: 80%; } @media (640px >= width){ width: 100%; } } /* 共通部分 */ .page-section{ min-height: 100vh; padding: 50px 0; >h3{ text-align: center; font-size: 28px; margin-bottom: 40px; color: var(--txt_color2); font-family: var(--font_en); &::after{ display: block; content: attr(data-ja); font-size: 22px; color: var(--txt-color); } } } /* メインコピー */ .main-copy{ font-family: var(--font_ja); position: relative; >h2{ writing-mode: vertical-rl; position: absolute; right: 10px; top: -360px; background-color: #ffffff; height: 14em; padding: 8px; letter-spacing: 0.2em; >span{ display: block; margin-top: 6em; } } >.lead{ width: 66%; margin: 100px auto; line-height: 2.2; } } /* ãƒã‚´ãƒœãƒƒã‚¯ã‚¹ */ .logo-box{ width: 180px; aspect-ratio: 1/1; position: fixed; top: 20px; left: 42%; animation: logo 5s linear infinite; @media (960px >= width){ display: none; } } @keyframes logo{ 0%{rotate: 0deg;} 100%{rotate: 360deg;} } /* ティッカー部分 */ .ticker{ background-color: var(--txt-color); color: #FFF; font-family: var(--font_ja); padding: 10px; white-space: nowrap; display: flex; text-indent: 2em; animation: txt 7s linear infinite; font-size: 14px; >span{ text-indent: 2em; } } @keyframes txt{ 0%{text-indent: 2em;} 100%{text-indent: -48em;} } /* ãŠçŸ¥ã‚‰ã›éƒ¨åˆ† */ .news-list{ padding: 0 20px; >dt{ font-weight: bold; margin-bottom: 5px; } >dd{ margin-bottom: 40px; padding-bottom: 5px; border-bottom: 1px solid var(--txt-color); } } /* shop部分 */ .scroll-wrapper{ display: flex; flex-wrap: nowrap; overflow: auto; scroll-snap-type: x mandatory; gap: 0 40px; padding: 0 20px; scroll-padding: 0 20px;/* スナップã§æ¢ã¾ã£ãŸæ™‚ã®ä½™ç™½ */ } .scroll-box{ flex: 0 0 80%; scroll-snap-align: start; scroll-snap-stop: always; padding: 20px; background-color:#eeecec; margin-bottom: 20px; border-radius: 10px; >h4{ font-size: 22px; font-family: var(--font_ja); color: var(--main_color); margin-bottom: 8px; } >.scroll-img{ width: 100%; aspect-ratio: 16/9; margin-bottom: 8px; >img{ object-fit: cover; width: 100%; height: 100%; } } } /* access部分 */ .access-wrapper{ padding: 0 20px; display: grid; gap: 50px 0; margin-bottom: 100px; h4{ font-size: 18px; margin-bottom: 8px; } .access-map{ width: 100%; aspect-ratio: 4/3; >iframe{ width: 100%; height: 100%; } } } /* gallery部分 */ .gallery-wrapper{ padding: 0 10px; display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 40px 20px; } .gallery-box{ display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 10px; >h4{ text-align: center; font-size: 20px; font-family: var(--font_ja); } >.gallery-img{ width: 100%; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; >img{ object-fit: cover; width: 100%; height: 100%; } } >.gallery-text{ border-bottom: 1px solid var(--txt-color); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;/* 指定ã—ãŸè¡Œæ•°ä»¥ä¸Šã«ãªã£ãŸã‚‰çœç•¥ã•ã‚Œã‚‹ */ } >.date{ text-align: right; } } /* footer部分 */ footer{ background-color: var(--main_color); padding: 20px; text-align: center; color: #FFF; } /* spナビゲーション部分 */ #ham-btn{ display: none; @media (960px >= width){ display: block; width: 50px; height: 50px; background-color: #ff0; position: fixed; right: 0; top: 0; } } #sp-nav{ display: none; @media (960px >= width){ display: block; } }
