【CSS】headerの左にロゴタイトルを表示しタイトルは中央寄せするレイアウトを組む方法

headerでheaderロゴを左に配置して且つタイトルは中央寄せにする実装が実案件で出てきたので、今後のためにも備忘録としてまとめました。

【CSS】headerの左にロゴタイトルを表示しタイトルは中央寄せするレイアウトを組む方法

デモサイトはこちら。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

ロゴを左寄せにしつつ、タイトルは中央寄せになっていることがわかるでしょう。

HTML

<header class="header">
    <div class="header-inner">
        <h1 class="header-logo">headerロゴ</h2>
        <h2 class="header-title">headerタイトルです</h2>
    </div>
</header>

CSS

.header {
  background-color: red;
  padding: 40px 20px;
  color: #fff;
}

.header .header-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.header .header-inner .header-logo {
  font-size: clamp(13px, 2.083vw, 30px);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.header .header-inner .header-title {
  text-align: center;
  font-size: clamp(13px, 2.083vw, 30px);
}

やり方としては、header-logoをpositionで左に配置したらOKです。

こうすることで、ロゴを左にタイトルを中央寄せにすることが出来ます。

レスポンシブですが、ロゴとタイトルがpositionを使ったことによって重なってしまう現象が起きるので、フォントサイズにclampを使うことで、レスポンシブにしたときでも重ならないようにしました。
（320pxくらいまでは重ならないですが、それ以降はどうしても重なるので、どこかのタイミングで縦向きにレイアウトを変えても良いかもしれません）

もしheader-logoが画像の場合は%を使って相対的に表示したらOKです。