CSS 絶対位置と相対位置（メモ）

質問

.scholarship05__content01-image {
  position: relative;
  max-width: 832px;
  max-height: 148px;
}

.scholarship05__content01-innerItems {
  position: absolute;
  top: 79.8%;
  left: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scholarship05__content01-innerText {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 32px;
  line-height: 64px;
  letter-spacing: 0%;
  text-align: center;
  padding-left: 20px;
}

<div class="scholarship05__contents">
<div class="scholarship05__content01">
  <img src="./img/scholarship-images/Rectangle 2355.png" alt="" class="scholarship05__content01-image">
  <div class="scholarship05__content01-innerItems">
    <img src="./img/scholarship-images/Group.png" alt="" class="scholarship05__content01-innerIcon">
    <div class="scholarship05__content01-innerText">ご相談</div>
  </div>
</div>
<div class="scholarship05__content02"></div>
<div class="scholarship05__content03"></div>
<div class="scholarship05__content04"></div>
<div class="scholarship05__content05"></div>
</div>

上記、

<div class="scholarship05__content01-innerItems">
<img src="./img/scholarship-images/Group.png" alt="" class="scholarship05__content01-innerIcon">
<div class="scholarship05__content01-innerText">ご相談</div>
</div>

を、画面サイズが変わってもスタイルがずれないようにしたいです。

Claude先生より。

画面サイズが変わっても scholarship05__content01-innerItems の位置がずれないようにするには、絶対位置指定（position: absolute）から相対的な位置指定に変更するのがよいでしょう。

以下のように CSS を修正することをお勧めします：

.scholarship05__content01 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scholarship05__content01-image {
  width: 100%;
  max-width: 832px;
  height: auto;
  max-height: 148px;
  display: block;
}

.scholarship05__content01-innerItems {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 絶対位置指定から変更 */
  bottom: 0;
  transform: translateY(50%);
}

.scholarship05__content01-innerText {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 32px); /* レスポンシブフォントサイズ */
  line-height: 1.5;
  letter-spacing: 0%;
  text-align: center;
  padding-left: 20px;
}

/* 画像のレスポンシブ対応 */
.scholarship05__content01-innerIcon {
  height: auto;
  width: auto;
  max-height: 40px;
}

この変更点：

1. top: 79.8%; left: 45%; のような固定位置指定を削除し、bottom: 0; transform: translateY(50%); に変更して、画像の下部中央に配置するようにしました。

2. フォントサイズを clamp() を使って画面サイズに応じて変化するように設定しました。

3. 親要素 .scholarship05__content01 に display: flex と中央揃えの設定を追加し、コンテンツを中央に配置しやすくしました。

4. 行の高さを固定値から相対値に変更して、フォントサイズが変わっても適切な行の高さを維持できるようにしました。

5. アイコン画像にもレスポンシブ対応のスタイルを追加しました。

これにより、画面サイズが変わっても「ご相談」の部分の位置が維持されるようになります。