【課題制作】ベーカリーヤマグチ Webサイト リニューアル課題
クレジット
デザイナー
HTMLコード【商品紹介】
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/mystyle.css"> <title>商品紹介 | BAKERY YAMAGUCHI</title> </head> <body> <div id="container"> <header> <p class="logo"><a href="index.html"><img src="images/logo.png" alt="ベーカリー ヤマグチ"></a></p> </header> <nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a class="select" href="menu.html">商品紹介</a></li> <li><a href="effort.html">当店のこだわり</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> </nav> <div id="main"> <h1 class="code2">商品紹介</h1> <div id="box"> <h2>おすすめパン</h2> <p class="copy"></p> <img src="images/creambox.jpg" alt="クリームボックス"> <div id="kurimu"> <h3 class="dekai">クリームボックス</h3> <p>福島県郡山市発祥のご当地グルメ。</p> <p>濃厚なクリームとふわふわの食感がマッチしています。</p> <span class="migi"><p>140円</p></span> </div> <img src="images/syokutaku.jpg" alt="クリームボックス" class="soro"> <p class="pagetop"><a href="#top">ページの先頭へ戻る</a></p> </div> <div id="menu"> <h2>期間限定パン</h2> <div class="gentei"> <img src="images/menu_maracakeB.jpg" alt="マーラーカオ" id="maracake"> <div id="moji2"> <h3 class="dekai">マーラーカオ</h3> <p>中国風蒸しパン、マーラーカオ。レーズン入りでリニューアルしました。</p> <span class="migi"><p>150円</p></span> </div> <img src="images/pan27.jpg" alt="マーラーカオ" class="maracake"> <p class="pagetop"><a href="#top">ページの先頭へ戻る</a></p> <p class="pagetop"> </p> <img src="images/menu_breadB.jpg" alt="熟成生食パン" id="bread"> <div id="moji3"> <h3 class="dekai">熟成生食パン</h3> <p>じっくり寝かせて本格熟成した生地をふんわり焼き上げた生食パンです。ふわふわな中にある、しっかりとした食べ応えが特徴です。</p> <p>アレンジなどもおすすめです。 </p> <span class="migi"><p>450円（1斤）</p></span> </div> <img src="images/bread.png" alt="調理された生食パン" class="bread"> <p class="pagetop"><a href="#top">ページの先頭へ戻る</a></p> </div> <div id="ninki"> <h2>人気パン</h2> <figure> <img src="images/menu_anpans.jpg" alt="あんぱん"> <figcaption>あんぱん</figcaption> </figure> <figure> <img src="images/menu_coronets.jpg" alt="チョココロネ"> <figcaption>チョココロネ</figcaption> </figure> <figure> <img src="images/menu_croissants.jpg" alt="クロワッサン"> <figcaption>クロワッサン</figcaption> </figure> <figure> <img src="images/menu_frances.jpg" alt="フランスパン"> <figcaption>フランスパン</figcaption> </figure> <figure> <img src="images/menu_melons.jpg" alt="メロンパン"> <figcaption>メロンパン</figcaption> </figure> </div> <p class="komeme">※実際にはその他の種類や限定メニューなどもございます。</p> <p class="pagetop"><a href="#top">ページの先頭へ戻る</a></p></div> </div> <div id="info"> <h2>店舗情報</h2> <aside> <p><img src="images/logo3.png" alt="logo"></p> <p> 【TEL】024-000-0000</p> <p>【Open】8:00～<br> 【Close】19:00</p> <p>【定休】日曜日</p> </aside> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3169.7410870134295!2d140.36022591526492!3d37.39595487983017!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60206cbbe8005311%3A0x9b94a768f26f5d80!2z44CSOTYzLTg4NjEg56aP5bO255yM6YOh5bGx5biC6ba06KaL5Z2m77yR5LiB55uu77yR77yU4oiS77yV!5e0!3m2!1sja!2sjp!4v1663140750699!5m2!1sja!2sjp" width="400" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <p class="pagetop"><a href="#top">ページの先頭へ戻る</a></p> </div> <p id="copyright"> <small>Copyright © 2022 Bakery Yamaguchi. All Rights Reserved.</small> <br> <time datetime="2022-9-15">2022年9月15日</time>更新 </p> </div> </body> </html>
詳細
もっとみる
HTMLコード【ホーム】
もっとみる
HTML【当店のこだわり】
もっとみる
HTML【お問い合わせ】
もっとみる
CSS
もっとみる
fori.io/
fori.io/