fuuengineerのブログ

エンジニアになります。

Cafeのウェブサイトを作る①【HTML】

完成図は以下の通り。

f:id:fuuengineer:20211103185626p:plain
完成図①
f:id:fuuengineer:20211103185745p:plain
完成図②

こちらのhtmlは以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- 実務上は大抵このviewportを設定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- ディスクリプション -->
  <meta name="description" content="CSS Cafeの公式ウェブサイトです。商品情報、店舗紹介、アクセス、会社情報など"> 
  <title>CSS Cafe</title>
  <link rel="stylesheet" href="css/html5reset-1.6.1.css">
  <link rel="stylesheet" href="css/base.css">
</head>
<body id="home">
  <header id="top">
    <div class="header_content wrapper">
      <h1><img class="header_logo" src="images/logo.png" alt="CSS Cafe"></h1>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <!-- #はダミーのURL -->
          <li><a href="#">Menu</a></li>
          <li><a href="#">Access</a></li>
        </ul>    
      </nav>
    </div>  
    <div id="main_image">

    </div>
  </header>

  <div class="contents wrapper">
    <main id="main_content">
      <section id="info">
        <h2>お知らせ</h2>
        <dl>
          <dt>2020/3/10</dt>
          <dd>リニューアルオープンしました。</dd>
          <dt>2020/4/15</dt>
          <dd>4/27（金）は設備メンテナンスのため休業いたします。</dd>
          <dt>2018/4/20</dt>
          <dd>ゴールデンウィークは休まず営業いたします</dd>
          <dt>2020/6/20</dt>
          <dd>こだわりのパンに合わせたスペシャルデザートが登場</dd>
          <dt>2020/7/10</dt>
          <dd>営業時間の一部変更について</dd>
        </dl>    
      </section>

      <section id="campain">
        <h2>キャンペーン情報</h2>
        <ul>
          <li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li>
          <li>平日11時から14時までお得なランチタイムを実施中。</li>
          <li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li>
          <li>夏限定のスペシャルフルーツサンドを楽しもう！</li>
        </ul>       
      </section>
    </main>

    <aside id="sidebar"> 
      <ul>
        <li>
          <a href="#">
            <img src="images/banner01.png" alt="季節のおすすめ商品はこちら">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/banner02.png" alt="コーヒー豆の知識">
          </a>
        </li>
      </ul>      
    </aside>
  </div>

  <footer>
    <ul>
      <li><a href="index.html">ホーム</a></li>
      <li><a href="#">商品情報</a></li>
      <li><a href="#">店舗紹介</a></li>
      <li><a href="#">アクセス</a></li>
      <li><a href="#">会社情報</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
    <small>&copy; 2020 CSS Cafe</small>
  </footer>
</body>
</html>

参考文献 : 中村祐太. ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！ | Udemy