【SCSS/CSS🔰】「アイコン＋タイトル」の高さを合わせるにはFlex＋Transform！

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

アイコン＋タイトルで高さが合っていない場合

アイコン＋タイトルっておしゃれなんだけれど、アイコンの高さと文字の高さが合っていない時がある。

その場合の対処法。

まずは、通常通りアイコンとタイトルを横並びにセットする。

【HTML】
<h2 class="c-article-level2">ここにタイトルを入れる</h2>

【CSS】
.c-article-level2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 1.6;

  &::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 29px;
    background-image: url("/img/icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

次に、display:flexで高さを大まかに調整

【HTML】
<h2 class="c-article-level2">ここにタイトルを入れる</h2>

【CSS】
.c-article-level2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 8px;

  &::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("/img/icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

transform: translateYで微調整

【HTML】
<h2 class="c-article-level2">ここにタイトルを入れる</h2>

【CSS】
.c-article-level2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 8px;

  &::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("/img/icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(3px);
  }
}

Googleの検証ツールを使って、高さ調整するときれいな位置の数値を求めることができる。