使用テキスト
山本 梓さん（30代・会社員）
「お気に入りの一杯と出会えた感動！」
普段は行きつけのカフェで満足していましたが、このフェスティバルで色々なロースターの味を飲み比べることができて感動しました！特に「焙煎工房 薫風」さんのエチオピアが香り高くて忘れられません。来年はもっと早く来て、全店舗制覇したいです！
2 田中 悟さん（50代・自営業）
「プロの技と深い知識に触れられる貴重な機会」
妻と二人で参加しました。ただ飲むだけでなく、バリスタさんのデモンストレーションや、豆の産地に関するトークセッションが非常に面白かったです。コーヒーへの情熱と知識の深さに触れ、自宅での淹れ方も変わりました。また来年も楽しみにしています。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IKEBUKURO COFFEE FESTIVAL</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=Irish+Grover&family=RocknRoll+One&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1><a href="#">IKEBUKURO COFFEE FESTIVAL</a></h1> <p class="tag-line">一杯のコーヒーから街のつながりを今年も池袋の街が<br>コーヒーの香りで満たされます。</p> <img src="https://placehold.jp/1200x630.png" alt=""> <nav class="pc-nav"> <ul> <li><a href="#">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="#photo">PHOTO</a></li> </ul> </nav> </header> <button id="bento-btn" type="button"></button> <nav id="sp-nav"> <ul> <li><a href="#">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="#photo">PHOTO</a></li> </ul> </nav> <div class="container"> <div class="ticker"> <p>テレビ池袋「街ブラ天国」（12/4～12/22 毎週日曜日 夕方6時00分～放送予定）にて、イベント出店舗が紹介されます！<span>テレビ池袋「街ブラ天国」（12/4～12/22 毎週日曜日 夕方6時00分～放送予定）にて、イベント出店舗が紹介されます！</span></p> </div> <div class="main-visual"> <img src="img/main.jpg" alt=""> </div> <div class="main-copy"> <div class="sp-header"> <h1>IKEBUKURO COFFEE FESTIVAL</h1> <p class="tag-line">一杯のコーヒーから街のつながりを今年も池袋の街がコーヒーの香りで満たされます。</p> </div> <h2>池袋でコーヒーと<br>音楽を楽しむ</h2> <p class="lead">全国の人気コーヒーショップが一堂に会し、こだわりの一杯を提供。コーヒー豆の販売や、バリスタによるデモンストレーションなど、コーヒー好きにはたまらないイベントが盛りだくさん。美味しいコーヒーを飲みながら、音楽ライブやワークショップも開催。ぜひご来場ください！</p> </div> <main> <section class="page-section" id="news"> <h2 data-en="NEWS">お知らせ</h2> <dl class="news-list"> <dt>2026/10/30</dt> <dd><a href="#">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt, deleniti.</a></dd> <dt>2026/10/29</dt> <dd><a href="#">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt, deleniti.</a></dd> <dt>2026/10/28</dt> <dd><a href="#">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt, deleniti.</a></dd> </dl> </section> <section class="page-section" id="shop"> <h2 data-en="SHOP">店舗の紹介</h2> <div class="shop-wrapper"> <div class="shop-box"> <h3>自家焙煎店:豆蔵</h3> <p class="shop-photo"><img src="https://placehold.jp/600x400.png" alt=""></p> <p class="shop-text">店主・山田太郎「自家焙煎の深煎りコーヒーは格別です。ぜひ、当店自慢のブレンドをご賞味ください。」</p> </div> <div class="shop-box"> <h3>BEANS&BOND</h3> <p class="shop-photo"><img src="https://placehold.jp/600x400.png" alt=""></p> <p class="shop-text">スタッフ・鈴木花子「毎朝丁寧にハンドピックした生豆を、丁寧に焙煎しています。一杯ごとに異なる風味をお楽しみください。」</p> </div> <div class="shop-box"> <h3>Forest Blend</h3> <p class="shop-photo"><img src="https://placehold.jp/600x400.png" alt=""></p> <p class="shop-text">店主・佐藤健「深い森の中にいるような、リラックスできる香りと空間を提供致します。」</p> </div> <div class="shop-box"> <h3>カフェ・ド・ルナ</h3> <p class="shop-photo"><img src="https://placehold.jp/600x400.png" alt=""></p> <p class="shop-text">店長・田中美咲「月夜の下、ゆったりとコーヒータイムを。自家製スイーツとのペアリングもおすすめです。」</p> </div> <div class="shop-box"> <h3>エスプレッソバー ビタースウィート</h3> <p class="shop-photo"><img src="https://placehold.jp/600x400.png" alt=""></p> <p class="shop-text">店長・藤田麻美「本格的なエスプレッソを、様々なアレンジで。あなただけのオリジナル一杯を創りましょう。」</p> </div> <div class="shop-box"> <h3>モバイルコーヒー ワゴン</h3> <p class="shop-photo"><img src="https://placehold.jp/600x400.png" alt=""></p> <p class="shop-text">店主・伊藤健一「街を飛び回るコーヒーワゴン。どこで出会えるかはお楽しみ。」 </p> </div> </div> </section> <section class="page-section" id="access"> <h2 data-en="ACCESS">会場の案内</h2> <div class="access-wrapper"> <h3>東口会場：豊島区立南池袋公園<span>JR池袋駅東口39番出口前</span></h3> <div class="access-inner"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1145.1286081352398!2d139.71291716308212!3d35.72836262023323!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1793752420425!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe> </div> </div> <div class="access-wrapper"> <h3>西口会場：豊島区立池袋西口公園<span>JR池袋駅西口</span></h3> <div class="access-inner"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d962.9131661402838!2d139.7085083391287!3d35.730130722156794!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d5c4d489531%3A0x25d752954313d248!2z6LGK5bO25Yy656uL5rGg6KKL6KW_5Y-j5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1793752702757!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe> </div> </div> </section> <section class="page-section" id="voice"> <h2 data-en="VOICE">参加者の声</h2> <div class="voice-wrapper"> <div class="voice-box"> <img src="img/female.svg" alt=""> <p class="voice-date">2026/11/04</p> <p class="voice-name">山本 梓さん</p> <h3>「お気に入りの一杯と出会えた感動！」</h3> <p class="voice-text">普段は行きつけのカフェで満足していましたが、このフェスティバルで色々なロースターの味を飲み比べることができて感動しました！特に「豆蔵」さんのエチオピアが香り高くて忘れられません。来年はもっと早く来て、全店舗制覇したいです！ </p> </div> <div class="voice-box"> <img src="img/male.svg" alt=""> <p class="voice-date">2026/10/04</p> <p class="voice-name">田中 悟さん</p> <h3>「プロの技と深い知識に触れられる貴重な機会」</h3> <p class="voice-text">妻と二人で参加しました。ただ飲むだけでなく、バリスタさんのデモンストレーションや、豆の産地に関するトークセッションが非常に面白かったです。コーヒーへの情熱と知識の深さに触れ、自宅での淹れ方も変わりました。また来年も楽しみにしています。 </p> </div> </div> </section> <section class="page-section" id="photo"> <h2 data-en="PHOTO">イベントの様子</h2> </section> </main> <footer> <p>© 2026 IKEBUKURO COFFEE FESTIVAL</p> </footer> </div> </body> </html>
style.css
@charset "utf-8"; 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;} /* 変数の登録 */ :root{ --base_color:#E8E3D8; --base_color2:#d6d1c4; --main_color:#257C4D; --txt-color:#333333; --font_en: "Irish Grover", system-ui; --font_ja: "RocknRoll One", sans-serif; --radius: 8px; } html{ scroll-behavior: smooth;/* スムーススクロール */ } body{ background-color: var(--base_color); color: var(--txt-color); display: flex; flex-direction: row-reverse; a{ color: var(--txt-color); } @media (width <= 960px){ justify-content: center; } } /* header部分 */ header{ width: 48%; background-color: var(--base_color); position: fixed; top: 70px; left: 2%; border: 1px solid var(--txt-color); padding: 16px; border-radius: var(--radius); >h1{ font-size: 34px; font-family: var(--font_en); margin-bottom: 6px; >a{ color: var(--main_color); } } .tag-line{ font-family: var(--font_ja); font-size: 16px; margin-bottom: 6px; } @media (width <= 960px){ display: none; } } /* pc用ナビ */ .pc-nav{ margin-top: 10px; >ul{ display: flex; justify-content: center; gap: 0 20px; a{ padding: 5px 12px; &:hover{ text-decoration: underline 5px #9e1c66; text-underline-offset: 5px; } } } } /* コンテンツ部分 */ .container{ width: 40%; margin-right: 2%; background-color: var(--base_color2); box-shadow: 3px 0 3px #AAAAAA,-3px 0 3px #AAAAAA; position: relative;/* 縦書きのメインコピーの基準点にする為 */ @media (width <= 960px){ margin-right: 0; width: 100%; max-width: 600px; } } /* 共通部分 */ .page-section{ min-height: 100vh; padding: 100px 20px 50px; >h2{ 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); color: var(--txt-color); font-size: 0.9em; line-height: 1.8; } } } /* ティッカー部分 */ .ticker{ background-color: var(--txt-color); color: #FFFFFF; overflow: hidden; >p{ width: fit-content; white-space: nowrap; padding: 6px 0; font-family: var(--font_ja); font-size: 16px; text-indent: 4em; animation: ticker 10s infinite linear; >span{ margin-left: 4em; } } } @keyframes ticker{ 0%{translate: 0 0;} 100%{translate: -50% 0;} } /* メインコピー部分 */ .main-copy{ padding: 50px 20px; >h2{ writing-mode: vertical-rl; position: absolute; right: 30px; top: 70px; background-color: #ffffff6f; backdrop-filter: blur(6px); padding: 10px; font-family: var(--font_ja); font-size: 26px; } .lead{ line-height: 1.8; } } /* お知らせ部分 */ .news-list{ >dt{ font-weight: bold; margin-bottom: 6px; } >dd{ margin-bottom: 40px; >a:hover{ text-decoration: underline 2px; text-underline-offset: 4px; } } } /* 店舗の紹介 */ .shop-wrapper{ display: flex; overflow: auto; gap: 0 40px; scroll-snap-type: x mandatory; .shop-box{ flex: 0 0 80%; background-color: var(--base_color); padding: 14px; margin-bottom: 30px; border-radius: var(--radius); scroll-snap-align: start; scroll-snap-stop: always; >h3{ font-size: 22px; font-family: var(--font_ja); color: var(--main_color); margin-bottom: 10px; } .shop-photo{ aspect-ratio: 4/2.4; >img{ object-fit: cover; width: 100%; height: 100%; } } .shop-text{ line-height: 1.6; margin-top: 6px; } } } /* アクセス部分 */ .access-wrapper{ margin-bottom: 100px; >h3{ font-size: 22px; margin-bottom: 10px; >span{ font-size: 18px; display: block; font-weight: normal; } } } .access-inner{ width: 100%; aspect-ratio: 2/1.2; >iframe{ width: 100%; height: 100%; } } /* 参加者の声 */ .voice-wrapper{ display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 20px; } .voice-box{ background-color: var(--base_color); padding: 10px; display: grid; grid-template-columns: repeat(2,50%); gap: 10px; >img{ grid-column: 1/2; grid-row: 1/3; } .voice-date{ grid-column: 2/3; grid-row: 1/2; text-align: center; align-self:center; } .voice-name{ grid-column: 2/3; grid-row: 2/3; text-align: center; } >h3{ grid-column: 1/3; grid-row: 3/4; } .voice-text{ grid-column: 1/3; grid-row: 4/5; } } /* sp用パーツ */ #bento-btn,#sp-nav,.sp-header{ display: none; } @media (width <= 960px){ #bento-btn { display: block; width: 44px; height: 44px; position: fixed; right:20px; top:20px; transition: .3s; z-index: 1000; background-color: var(--base_color); @media (width <= 640px){ background-color: var(--base_color2); } &::after { position: absolute; content: ''; width: 8px; height: 8px; background: #333; display: block; left: calc(50% - 4px); top: calc(50% - 4px); box-shadow: -12px 0 0 #333,12px 0 0 #333,-12px -12px 0 #333,0 -12px 0 #333,12px -12px 0 #333,-12px 12px 0 #333, 0 12px 0 #333,12px 12px 0 #333; } &::before { position: absolute; content: ''; height: 20px; width: 3px; left: 21px; top: 12px; background: #ffffff; opacity: 0; } &.is-active { background: #333; border-radius: 22px; transform: rotate(45deg); &::before{ opacity: 1; } &::after { box-shadow: none; width: 20px; height: 3px; left: 13px; top: 21px; background: #fff; } } } .sp-header{ display: block; >h1{ text-align: center; font-size: 24px; color: var(--main_color); font-family: var(--font_en); margin-bottom: 10px; } .tag-line{ font-family: var(--font_ja); margin-bottom: 20px; } } }
See the Pen
スクロールしたら文字が出てくるやつ by yachin29 (@yachin29)
on CodePen.
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。
htmlの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。header要素やnav要素、section要素といった要素を使用する事で、明示的に文書構造を示すことが出来るようになりました。h1~h6を使用し、適切な見出しの設定を行い、適切なアウトラインの設定が可能になりました。これらはWHATWG（Web Hypertext Application Technology Working Group）の仕様に準拠した形で記述しています。
またHTMLでは以下の項目も学びました。
cssの授業ではレスポンシブデザインを中心に学びました。メディアクエリを使う事でPCだけでなくモバイルに対応したサイトを作る事が出来るようになりました。cssの新しい機能を使う事で今までビットマップ画像でしか出来なかったグラデーションやクリッピングをcssだけで表現する事が可能になりました。意図的に余白に強弱を付ける、文字のコントラストを数値で確認する、などのアクセシビリティやユーザビリティを考慮したページデザインが出来るようになりました。
flexboxやgridレイアウトを使用する事で容易にマルチデバイスに対応でき、かつ自由度の高いレイアウトが作れるようになりました。それぞれの特性を理解する事でレイアウトによってflexboxやgridを使い分け、場合によっては双方を使用したレイアウトが可能です。
また、positionレイアウトを使う事でｚ軸を考慮し要素を重ねる、立体的なレイアウトも可能です。
vh、vwや％、remなどを使用する事で、様々なレイアウトをマルチデバイスに対応出来るようになりました。クランプ関数を使う事で指定した最大サイズと最小サイズの間で文字サイズを可変にする事が出来ます。
フルードイメージやobject-fitを使用する事で、画像本来のサイズに囚われない自由度の高い画像表示が可能です。さらにaspect-ratioを使う事で画像や動画をアスペクト比ベースで自由にコントロールが可能です。
比較的新しいcssはブラウザーによっては未対応な物もあるので、「can i use」等のサイトで細かく対応ブラウザーとバージョンをチェックする必要があります。場合によってはベンダープレフィックスを使用して対応させます。
他人が見てもざっくり命名意図がわかる、保守性を考えた命名規則を使用したコーディングが出来ます。
メインカラーや余白の基準値などを予め変数として保存しておき、必要なところで使用する事で一貫性のあるデザインが可能になります。
汎用的なスタイルと固有のスタイルを明確に分け、汎用的なスタイルは他の箇所でも使いまわせるようにし、拡張性の高いcssの設計が可能です。
SVG画像を使用する事で、拡大縮小に強く、どのような解像度のデバイスにも対応出来ます。またSVG画像はXML形式で記述されている為CSSで簡単に操作が出来、CSS3のアニメーション機能とも相性が良く、webサイトに簡単にマイクロインタラクションを導入する事が出来ます。
SVGコードを編集し、モーションパスやドローイングアニメーションを作成しました。
さらに、Ajaxを使う事でhtmlファイルにインラインで挿入した冗長なSVGアニメーションの記述を外部ファイル化し、htmlファイルをシンプルにする事が出来ます。
特にAjaxでは読み込むデータを外部ファイル化し、非同期通信する事で必要な物を必要な分だけ必要な時に読み込む、という現在webアプリなどで主流になっているSPA（シングル・ページ・アプリケーション）の元となる考え方を学びました。またFetch APIを使った非同期通信も行いました。
参考例: Webスクール、SaaSツール、オンラインサロン、アプリ紹介
解説: 左に強いメッセージとCTAボタン、右にメインビジュアルを置く、最も成約率が高い王道レイアウト。
参考例: カフェ（メニュー一覧）、IT企業（サービス3つの強み）、コスメ（商品ラインナップ）
解説: 情報が等間隔に整理され、誰にとっても見やすくレスポンシブ（スマホ対応）にも強い配置。
参考例: 単発セミナー告知、イベントLP、個人ポートフォリオ、キャンペーンページ
解説: 視線が上から下へ素直に流れるため、スマホでの読みやすさが抜群。
参考例: ファッションブランド、写真・建築事務所、映画・ゲームの公式サイト
解説: 画面全体（100vh）に美しい写真を敷き詰め、ファーストビューで強烈な世界観を伝える。
参考例: 高級コスメ、高級旅館・和風カフェ、注文住宅、ジュエリーブランド
解説: あえて余白（Padding）を大きく取り、要素を減らすことで「洗練された高級感」を生み出す。
参考例: アートギャラリー、デザインスタジオ、アパレル、先進的なWebメディア
解説: 左右のグリッドをあえてずらすことで、躍動感とクリエイティブな印象を与える。
参考例: リゾートホテル、フィットネスジム、コワーキングスペース
解説: メイン画像の下端に、次のセクションのカード（概要や予約枠）を重ねて立体感を出す流行のスタイル。
参考例: ブランドのこだわり・歴史、プロダクトの強み紹介、インタビュー記事
解説: 左・右・左・右とジグザグに視線を誘導し、読み手を飽きさせずにストーリーを読ませる。
参考例: ご利用の流れ（STEP1〜3）、創業ヒストリー、受講手順、FAQ前のお悩み解決
解説: 中央の縦線でつながれた1, 2, 3のステップで、手順や時間の流れをわかりやすく見せる。
参考例: レストラン（メニュー・アクセス固定）、ポートフォリオ、Webマニュアル
解説: PC表示時に左側のメニューやロゴが常に固定され、右側だけがスクロールする回遊性の高いレイアウト。
参考例: 4つの主要サービス紹介、料金プラン比較、メンバー紹介
解説: 4つの要素を正方形に近いバランスで提示し、一覧性とまとまり感を両立させる。
参考例: 家電・ガジェット紹介、健康食品、精密機器の仕様解説
解説: 中央に商品の全体像をドカンと置き、その左右から引き出し線のように特長を解説する配置。
