Webサイト製作ならTeeem

HTML&CSS作りながら学ぶ第二弾のHTML完全版【webサイトを自分で作れるようになろう】

panda-lion panda-lion

HTMLコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PandaLion-Cafe</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>PandaLion-cafe</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Access</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="hero">
        <figure>
          <img src="img/hero.jpg" alt="店内写真">
        </figure>
      </section>
      <section id="about">
        <h2>padan Lion Cafeとは?</h2>
        <p>パンダライオンが作る秘密基地的カフェです。 スペシャルメニューのパンケーキ「パンダケーキ」がオススメ</p>
      </section>
      <section id="menu">
        <table>
          <tr>
            <td>パンダ珈琲</td>
            <td>¥420+税</td>
          </tr>
          <tr>
            <td>ラテライオン</td>
            <td>¥480+税</td>
          </tr>
          <tr>
            <td>パンダモカ</td>
            <td>¥490+税</td>
          </tr>
          <tr>
            <td>キャラメルライオン</td>
            <td>¥490+税</td>
          </tr>
        </table>
      </section>
      <section id="access">
        <h2>ACCESS</h2>
        <p>〒811-1111</p>
        <p>福岡県福岡市中央区XX-xx-xxxx</p>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.810614962629!2d139.74391316519998!3d35.65703738890591!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1621947779524!5m2!1sja!2sjp" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </section>
      <section id="contact">
        <form action="index.html" method="post">
          <div>
            <label for="name">お名前</label>
            <input id="name" type="text" name="name">
          </div>
          <div>
            <label for="email">メール</label>
            <input id="email" type="text" name="email">
          </div>
          <div>
            <label for="naiyou">内容</label>
            <textarea name="naiyou" rows="8" cols="80"></textarea>
          </div>
          <div>
            <input type="submit" value="送信する">
          </div>
        </form>
      </section>
    </main>
    <aside>
      <h2>INFOMATION</h2>
      <p>テイクアウト専門店を近日オープンします</p>
      <figure>
        <img src="img/coffee.png" alt="持ち帰りコーヒー">
      </figure>
      <a class="button" href="#">詳細はこちら</a>
    </aside>
    <footer>
      ©️panda-lion
    </footer>
  </body>
</html>