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=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Zen+Maru+Gothic&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">一杯のコーヒーから街のつながりを 今年も池袋の街がコーヒーの香りで満たされます。</p> <div class="banner"> <img src="https://placehold.jp/1000x400.png" alt=""> </div><!-- /.banner --> <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="#voice">Voice</a></li> <li><a href="#gallery">Gallery</a></li> </ul> </nav> </header> <p class="bento-wrapper"> <button id="bento-btn" type="button"></button> </p> <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="#voice">Voice</a></li> <li><a href="#gallery">Gallery</a></li> </ul> </nav> <div class="container"> <p class="ticker">テレビ池袋「街ブラ天国」（03/29～04/12 毎週日曜日 夕方6時00分～放送予定）にて、イベント出店舗が紹介されます！ <span>テレビ池袋「街ブラ天国」（03/29～04/12 毎週日曜日 夕方6時00分～放送予定）にて、イベント出店舗が紹介されます！</span> </p> <div class="main-visual"> <img src="img/main.jpg" alt=""> </div><!-- /.main-visual --> <div class="main-copy"> <h1 class="sp-title">IKEBUKURO COFFEE FESTIVAL</h1> <h2>池袋でコーヒーと<br>音楽を楽しむ</h2> <p class="lead">全国の人気コーヒーショップが一堂に会し、こだわりの一杯を提供。コーヒー豆の販売や、バリスタによるデモンストレーションなど、コーヒー好きにはたまらないイベントが盛りだくさん。美味しいコーヒーを飲みながら、音楽ライブやワークショップも開催。ぜひご来場ください！</p> </div><!-- /.main-copy --> <section id="shop" class="page-section"> <h3 data-en="SHOPS">出店舗情報</h3> <p class="shop-lead">日本全国の人気コーヒーショップが一堂に会するこのイベント。正統派から個性的なお店まで、コーヒー好きにはたまらないラインナップです。あなたにとって最高の1杯が見つかるはず！</p> <div class="shop-wrapper"> <div class="shop-box"> <div class="shop-img"> <img src="img/shop-1.webp" alt=""> </div> <h4>自家焙煎店:豆蔵</h4> <p>店主・山田太郎「自家焙煎の深煎りコーヒーは格別です。ぜひ、当店自慢のブレンドをご賞味ください。」</p> </div><!-- /.shop-box --> <div class="shop-box"> <div class="shop-img"> <img src="img/shop-2.webp" alt=""> </div> <h4>焙煎工房 薫風</h4> <p>スタッフ・鈴木花子「毎朝丁寧にハンドピックした生豆を、丁寧に焙煎しています。一杯ごとに異なる風味をお楽しみください。」</p> </div><!-- /.shop-box --> <div class="shop-box"> <div class="shop-img"> <img src="img/shop-3.webp" alt=""> </div> <h4>珈琲ロースター 星夜</h4> <p>店主・佐藤健「星の下で生まれたような、深みのある一杯を。特別な豆を、特別な方法で焙煎しました。」</p> </div><!-- /.shop-box --> <div class="shop-box"> <div class="shop-img"> <img src="img/shop-4.webp" alt=""> </div> <h4>カフェ・ド・ルナ</h4> <p>店長・田中美咲「月夜の下、ゆったりとコーヒータイムを。自家製スイーツとのペアリングもおすすめです。」</p> </div><!-- /.shop-box --> <div class="shop-box"> <div class="shop-img"> <img src="img/shop-5.webp" alt=""> </div> <h4>エスプレッソバー ビタースウィート</h4> <p>店長・藤田麻美「本格的なエスプレッソを、様々なアレンジで。あなただけのオリジナル一杯を創りましょう。」</p> </div><!-- /.shop-box --> <div class="shop-box"> <div class="shop-img"> <img src="img/shop-6.webp" alt=""> </div> <h4>モバイルコーヒー ワゴン</h4> <p>店主・伊藤健一「街を飛び回るコーヒーワゴン。どこで出会えるかはお楽しみ。」</p> </div><!-- /.shop-box --> </div><!-- /.shop-wrapper --> </section> <section id="access" class="page-section"> <h3 data-en="ACCESS">会場のご案内</h3> <div class="access-wrapper"> <p>東口会場：豊島区立南池袋公園（JR池袋駅から徒歩5分）</p> <div class="g-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12955.725113459785!2d139.7024484!3d35.7279086!3m2!1i1024!2i768!4f6.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1773880040039!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div><!-- /.g-map --> </div><!-- /.access-wrapper --> <div class="access-wrapper"> <p>西口会場：豊島区立池袋西口公園（JR池袋駅から徒歩0分）</p> <div class="g-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!4f6.1!3m3!1m2!1s0x60188d5c4d489531%3A0x25d752954313d248!2z6LGK5bO25Yy656uL5rGg6KKL6KW_5Y-j5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1773880272211!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div><!-- /.g-map --> </div><!-- /.access-wrapper --> </section> <section id="voice" class="page-section"> <h3 data-en="VOICE">参加者の声</h3> <div class="voice-wrapper"> <div class="voice-box"> <div class="voice-avatar"> <img src="img/undraw_friendly-guy-avatar_ibbp.svg" alt=""> </div><!-- /.voice-avatar --> <p class="voice-name">田中 悟さん</p> <h4>「プロの技と深い知識に触れられる貴重な機会」</h4> <p class="voice-text">妻と二人で参加しました。ただ飲むだけでなく、バリスタさんのデモンストレーションや、豆の産地に関するトークセッションが非常に面白かったです。</p> <p class="voice-date">2026年03月21日</p> </div><!-- /.voice-box --> <div class="voice-box"> <div class="voice-avatar"> <img src="img/undraw_stylish-girl-avatar_m8po.svg" alt=""> </div><!-- /.voice-avatar --> <p class="voice-name">加藤 梓さん</p> <h4>「お気に入りの一杯と出会えた感動！」</h4> <p class="voice-text">普段は行きつけのカフェで満足していましたが、このフェスティバルで色々なロースターの味を飲み比べることができて感動しました！特に「焙煎工房 薫風」さんのエチオピアが香り高くて忘れられません。来年はもっと早く来て、全店舗制覇したいです！</p> <p class="voice-date">2026年03月22日</p> </div><!-- /.voice-box --> </div><!-- /.voice-wrapper --> </section> <section id="gallery" class="page-section"> <h3 data-en="PHOTO">フォト・ギャラリー</h3> <div class="gallery-outer"> <input type="radio" id="all" name="filter" checked> <label for="all">all</label> <input type="radio" id="coffee" name="filter"> <label for="coffee">coffee</label> <input type="radio" id="music" name="filter"> <label for="music">music</label> <div class="gallery-wrapper"> <div class="gallery-box" data-category="coffee"> <h4>画像のタイトル</h4> <img src="img/coffee-1.jpg" alt=""> <p class="tag">coffee</p> </div><!-- /.gallery-box --> <div class="gallery-box" data-category="music"> <h4>画像のタイトル</h4> <img src="img/music-1.jpg" alt=""> <p class="tag">music</p> </div><!-- /.gallery-box --> <div class="gallery-box" data-category="coffee"> <h4>画像のタイトル</h4> <img src="img/coffee-2.jpg" alt=""> <p class="tag">coffee</p> </div><!-- /.gallery-box --> <div class="gallery-box" data-category="coffee"> <h4>画像のタイトル</h4> <img src="img/coffee-3.jpg" alt=""> <p class="tag">coffee</p> </div><!-- /.gallery-box --> <div class="gallery-box" data-category="music"> <h4>画像のタイトル</h4> <img src="img/music-2.jpg" alt=""> <p class="tag">music</p> </div><!-- /.gallery-box --> <div class="gallery-box" data-category="music"> <h4>画像のタイトル</h4> <img src="img/music-3.jpg" alt=""> <p class="tag">music</p> </div><!-- /.gallery-box --> <div class="gallery-box" data-category="coffee"> <h4>画像のタイトル</h4> <img src="img/coffee-4.jpg" alt=""> <p class="tag">coffee</p> </div><!-- /.gallery-box --> <div class="gallery-box" data-category="music"> <h4>画像のタイトル</h4> <img src="img/music-4.jpg" alt=""> <p class="tag">music</p> </div><!-- /.gallery-box --> <div class="gallery-box" data-category="coffee"> <h4>画像のタイトル</h4> <img src="img/coffee-5.jpg" alt=""> <p class="tag">coffee</p> </div><!-- /.gallery-box --> <div class="gallery-box" data-category="music"> <h4>画像のタイトル</h4> <img src="img/music-5.jpg" alt=""> <p class="tag">music</p> </div><!-- /.gallery-box --> </div><!-- /.gallery-wrapper --> </div><!-- /.gallery-outer --> </section> <footer> <p><small>© <span id="this-year"></span> IKEBUKURO COFFEE FESTIVAL</small></p> </footer> </div><!-- /.container --> <script> //西暦の表示 const fullYear = new Date().getFullYear(); console.log(fullYear); if(fullYear >= 2027){ document.querySelector('#this-year').textContent = '2026 - '+fullYear; }else{ document.querySelector('#this-year').textContent = fullYear; } //弁当ボタン const bentoBtn = document.querySelector('#bento-btn'); bentoBtn.addEventListener('click',function(){ this.classList.toggle('is-active'); }); </script> </body> </html>
style.css
@charset "utf-8"; /* 変数の登録 */ :root{ --base_color:#E8E3D8; --base_color2:#d6d1c4; --main_color:#257C4D; --txt-color:#333333; --coffee:#7e6e47; --music:#2063b6; --font_en: "Ubuntu", sans-serif; --font_ja: "Zen Maru Gothic", 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; } header{ width: 45%; border: 1px solid var(--txt-color); position: fixed; top: 120px; left: 3%; padding: 20px; >h1{ font-family: var(--font_en); color: var(--main_color); margin-bottom: 10px; } .tag-line{ font-family: var(--font_ja); margin-bottom: 10px; } } /* pc用ナビゲーション */ .pc-nav>ul{ display: flex; justify-content: center; gap: 0 20px; height: 60px; align-items: center; a{ padding: 20px; color: var(--txt-color); &:hover{ text-decoration: underline 4px var(--main_color); text-underline-offset: 6px; } } } .container{ width: 42%; background-color: var(--base_color2); margin-right: 3%; overflow-x: hidden; } /* ティッカーアニメーション */ .ticker{ background-color: var(--txt-color); color: #FFFFFF; font-family: var(--font_ja); white-space: nowrap; padding: 4px; width: fit-content; text-indent: 3em; animation: ticker 7s infinite linear; >span{ margin-left: 3em; } } @keyframes ticker{ 0%{translate: 0 0;} 100%{translate: -50% 0;} } .main-visual{ aspect-ratio: 10/8; >img{ object-fit: cover; width: 100%; height: 100%; } } .main-copy{ padding: 60px 20px; position: relative; >h2{ font-family: var(--font_ja); writing-mode: vertical-rl; position: absolute; right: 40px; top: -80%; background-color: #ffffff88; backdrop-filter: blur(5px); padding: 8px; } .lead{ font-size: 18px; line-height: 1.75; } } /* 共通部分 */ .page-section{ padding: 100px 20px; >h3{ text-align: center; font-family: var(--font_ja); color: var(--main_color); font-size: 26px; margin-bottom: 50px; &::after{ display: block; content: attr(data-en); font-family: var(--font_en); font-size: 0.9em; color: #de3737; } } } /* 出店舗情報部分 */ .shop-lead{ font-size: 18px; line-height: 1.75; margin-bottom: 50px; } .shop-wrapper{ display: flex; scroll-snap-type: x mandatory; overflow: auto; gap: 0 30px; } .shop-box{ flex: 0 0 80%; background-color: var(--base_color); padding: 20px; border-radius: 10px; scroll-snap-align: start; scroll-snap-stop: always; scroll-margin: 20px; margin-bottom: 20px; .shop-img{ aspect-ratio: 4/2.5; >img{ object-fit: cover; width: 100%; height: 100%; } } >h4{ font-size: 20px; margin: 10px 0; } } /* アクセス部分 */ .access-wrapper{ margin-bottom: 100px; >p{ font-size: 20px; font-weight: bold; margin-bottom: 10px; } .g-map{ aspect-ratio: 4/3; >iframe{ width: 100%; height: 100%; } } } /* voice部分 */ .voice-wrapper{ display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 40px 20px; } .voice-box{ background-color: var(--base_color); padding: 10px; border-radius: 10px; display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 10px; } .voice-avatar{ grid-column: 1/2; grid-row: 1/3; } .voice-name{ grid-column: 2/3; grid-row: 1/3; text-align: center; align-self: center; font-size: 18px; } .voice-box>h4{ grid-column: 1/3; font-size: 20px; } .voice-text{ grid-column: 1/3; } .voice-date{ grid-column: 1/3; text-align: right; } /* フォト・ギャラリー部分 */ .gallery-outer>label{ width: 100px; display: inline-block; border: 2px solid var(--main_color); border-radius: 6px; padding: 6px 20px; text-align: center; margin: 0 20px 20px 0; } .gallery-outer>input:checked+label{ background-color: var(--main_color); color: #FFFFFF; } .gallery-outer>[for="coffee"]{ border: 2px solid var(--coffee); } .gallery-outer>input:checked+label[for="coffee"]{ background-color: var(--coffee); } .gallery-outer>[for="music"]{ border: 2px solid var(--music); } .gallery-outer>input:checked+label[for="music"]{ background-color: var(--music); } .gallery-outer>input{ display: none; } .gallery-wrapper{ columns: 2; gap: 20px; } .gallery-box{ border-radius: 10px; padding: 10px; background-color: var(--base_color); break-inside: avoid; margin-bottom: 20px; } [data-category="coffee"]>.tag{ background-color: var(--coffee); color: #FFF; display: inline-block; padding: 4px 8px; border-radius: 6px; margin-top: 10px; } [data-category="music"]>.tag{ background-color: var(--music); color: #FFF; display: inline-block; padding: 4px 8px; border-radius: 6px; margin-top: 10px; } #coffee:checked ~ .gallery-wrapper>.gallery-box:not([data-category="coffee"]){ display: none; } #music:checked ~ .gallery-wrapper>.gallery-box:not([data-category="music"]){ display: none; } /* フッター部分 */ footer{ background-color: var(--txt-color); color: #FFFFFF; padding: 20px 0; text-align: center; } .sp-title{ display: none; } .bento-wrapper{ display: none; } #sp-nav{ display: none; } /* 1100px以下のレイアウト */ @media (width <= 1100px){ header{ width: 50%; } } /* 940px以下のレイアウト */ @media (width <= 940px){ body{ justify-content: center; } header{ display: none; } .sp-title{ display: block; font-family: var(--font_en); color: var(--main_color); font-size: clamp(1.5rem, 1.407rem + 0.37vw, 1.625rem); margin-bottom: 30px; text-align: center; } .container{ width: 70%; margin-right: 0; } /* 弁当ボタン関連 */ .bento-wrapper{ display: block; position: fixed; right: 0; top: 0; width: 60px; height: 60px; background-color: var(--base_color2); z-index: 100; } #bento-btn { display: block; width: 44px; height: 44px; position: absolute; right:8px; top:8px; transition: .3s; &::after { position: absolute; content: ''; width: 8px; height: 8px; background: var(--main_color); display: block; left: calc(50% - 4px); top: calc(50% - 4px); box-shadow: -12px 0 0 var(--main_color),12px 0 0 var(--main_color),-12px -12px 0 var(--main_color),0 -12px 0 var(--main_color),12px -12px 0 var(--main_color),-12px 12px 0 var(--main_color), 0 12px 0 var(--main_color),12px 12px 0 var(--main_color); } &::before { position: absolute; content: ''; height: 20px; width: 3px; left: 21px; top: 12px; background: #ffffff; opacity: 0; } &.is-active { background: var(--main_color); border-radius: 22px; transform: rotate(45deg); &::before{ opacity: 1; } &::after { box-shadow: none; width: 20px; height: 3px; left: 13px; top: 21px; background: #fff; } } } } /* 580px以下のスタイル */ @media (width <= 580px){ .container{ width: 100%; } }
