header 要素

2024 5/19

2023.11.16 2024.05.19

記事の内容

header 要素

header要素は、タイトル・ロゴ・ナビゲーションメニューなどが含まれます。

header要素

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="main.css" rel="stylesheet" />
    <title>header要素に関して</title>
  </head>

  <body>
    <header>
     <!-- タイトル・ロゴ・ナビゲーションメニューなど -->
    </header>
    <!-- 他のページコンテンツ -->
  </body>
</html>

nav要素

nav要素は、webサイト内にある主要なコンテンツへのリンクを集めたメニューを作成する際に使用します。

nav要素に関して

記法

 <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="main.css" rel="stylesheet" />
    <title>ナビゲーションに関して</title>
  </head>
  <body>
    <header>
      <nav>
        <ul class="header-ul">
　　　　　  <li>
            <a href="#">
              <img width="70" src="url" alt="tomojiのメガネ">
            </a>
          </li>
          <ul class="item-ul">
            <li>
              <a href="#">メガネの概要</a>
            </li>
            <li>
              <a href="#">お知らせメガネ</a>
            </li>
            <li>
              <a href="#">お問い合わせ</a>
            </li>
          </ul>
        </ul>
      </nav>
    </header>
  </body>
</html>

body {
  margin: 0;
}
nav ul {
  background-color: beige;
  margin-top: 0;
  padding: 0;
  text-align: center;
}
nav li {
  display: inline-block;
  margin: 0 1.5em;
}
a {
  display: block;
  padding: 1em;
  text-decoration: none;
}
.header-ul {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.item-ul {
  display: flex;
  align-items: center;
}

出力結果

※レスポンシブには対応してません