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; } }
