ページヘッダーで背景色付き、縦方向中央揃え、インナー幅内で左寄せをする

みなさん、こんにちは。

今回はページヘッダーでよくある以下の様な構成をする際の方法をまとめます。

やりたいことは、「ページヘッダーで背景色付き、縦方向中央揃え、インナー幅内で左寄せをする」です。緑までがインナー幅ですね。インナー幅にpadding付けてます。

これ、よくありそうな実装でそこまで難しくないはずなのですが、なんだかものすごい時間がかかっちゃいました。なので、今後の自分の為の思考の整理として書きます。

コード：HTML

<div class="page-header">
    <div class="inner-1200">
      <div class="page-header__inner">
        <h1 class="page-header__title">NEWS</h1>
      </div>
    </div>
  </div>
</div>

シンプルです。

コード：CSS

お次はCSSです。

.page-header {
  background-color: #f5f7f7;
}

.page-header__title {
  text-align: left;
  font-size: 28px;
  font-weight: 700;
}

.page-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 200px;
}

.inner-1200 {
  max-width: calc(1200px + 80px);
  margin: 0 auto;
  padding: 0 40px;
}