ヘッダー作成

ヘッダーのテンプレート

ヘッダーのテンプレートです。WEBサイトの作成の際に参考にしてみて下さい。

index.html

<header id="header">
  <h1 class="site-title">
    <a href="#">
      <img src="./img/#1.png" alt="My work">
    </a>
  </h1>
  <nav>
    <ul>
      <li class="top-link">About</li>
      <li class="top-link">Works</li>
      <li class="top-link">News</li>
      <li class="top-link">Contact</li>
      <img src="./img/#2.png" class="top-link" alt="inst">
    </ul>
  </nav>
</header>

index.css

/* 共通要素　*/
img{
  max-width: 100%;
  border-style: none;
}

/* header */
#header{
  max-width: 960px;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 5%;
}
#header ul{
  display: flex;
  justify-content: space-between;
}
.top-link{
  margin:0 10px;
}

イメージ