<p>ヘッダーの高さいっぱいリンク可能　ロゴの外上下もリンク可能な状態</p>
<div class="big-bg">
<header id="header">
  <a class="logo" href="index.html"><img src="http://inomiti.com/a/lnk/inologo/" alt="いのぷろブログ"></a>
  <a class="button" href="#">ご予約はこちら</a>
</header>
</div>
<br>
<br>
<hr>
<br>
<br>
<!-- /* リンク範囲縮小 */ -->
<p>logo画像の部分だけリンク可能な状態</p>
<div class="big-bg">
<header id="header">
  <a class="rinkusyou" href="index.html"><img src="http://inomiti.com/a/lnk/inologo/" alt="いのぷろブログ"></a>
  <a class="button" href="#">ご予約はこちら</a>
</header>
</div>
<br>
<br>
<hr>
<br>
<br>

<!-- 画像と文字の場合 -->

<p>画像にリンク入れる場合タグがはみ出て画像以外の所にもリンクがある</p>

<div class="big-bg">
  <div class="main">
   <ul class="main-content">
     <li><a class="inopro" href="#"><img src="http://inomiti.com/a/lnk/inopror/" alt=""></a></li>
     <li><a class="base" href="#"><img src="http://inomiti.com/a/lnk/baseb/" alt=""></a></li>
   </ul>
  </div>
 </div>
<br>
<br>
<hr>
<br>
<br>

<!-- 画像と文字の場合 -->

<p>画像にリンク入れる場合タグがはみ出ないようにしてる</p>

<div class="big-bg">
  <div class="main">
   <ul class="main-content">
     <li><a class="rinkubox" href="#"><img src="http://inomiti.com/a/lnk/inopror/" alt=""></a></li>
     <li><a class="rinkubox" href="#"><img src="http://inomiti.com/a/lnk/baseb/" alt=""></a></li>
   </ul>
  </div>
 </div>
/* header */

.big-bg {
  max-width: 900px;
  margin: auto;
  background: rgb(240, 236, 216);
}
#header {
  display: flex;
  height: 84px;
  justify-content: space-between;
}
/* ヘッダーロゴ */
p {
  fonto-size: 24px;
  text-align: center;
}
a {
  text-decoration: none;
}
.logo {
  display: flex;
  align-items: center;
  margin-left: 36px;
}
.logo img {
  width: 200px;
  height: 55px;
  object-fit: cover;
}
/* ヘッダー申し込みボタン */
#header .button {
  color:rgb(255, 255, 255);
  background: rgb(153, 0, 0);
  padding: 0 30px;
  line-height: 43px;
  border-radius: 20px;
  margin: 21px 28px 20px 0;
}

/* リンク範囲縮小 */

/* リンク範囲をブロック要素にして画像と同じサイズにしてる */
.rinkusyou {
 display: block;
  width: 200px;
  height: 55px;
  margin: auto 0 auto 36px;
}

.rinkusyou img {
  width: 200px;
  height: 55px;
  object-fit: cover;
}

/* 画像と文字の場合 */
/* 画像にリンク入れる場合タグがはみ出て画像以外の所にもリンクがある */
li {
  list-style: none;
}
.main-content {
  display: flex;
  justify-content: space-between;
  margin: 49px 35px 51px;
}

.main-content img {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: bottom;
}


/* 画像と文字の場合 */
/* 画像にリンク入れる場合タグがはみ出ないようにしてる */
li {
  list-style: none;
}
.main-content {
  display: flex;
  justify-content: space-between;
  margin: 49px 35px 51px;
}

/* ここでa要素のリンクを画像と同じサイズにしてリンクを画像内に収めてる */
.rinkubox {
  display: block;
  height: 250px;
  width: 250px;
  border-radius: 50%;
}

.main-content img {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: bottom;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.