【CSS】ファーストビュー画像だけ中央に配置する方法

先日の案件でファーストビュー画像だけ中央に配置するレイアウトを実装をして今後も出てきそうだったので、今回ブログにまとめることにしました。

【CSS】ファーストビュー画像だけ中央に配置する方法

デモサイトはこちら。

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

HTML

<div class="mv">
  <div class="main">
    <img src="https://yujiromx.com/wp-content/uploads/2022/01/road-g7c4555d15_640.jpg" alt="">
    <div class="title">
      <img src="https://yujiromx.com/wp-content/uploads/2022/06/icon_113280_256.png" alt="">
    </div>
  </div>
</div>

main直下に中央に配置する画像を指定し、その子要素に左に表示させる画像を指定します。

CSS

img {
  max-width: 100%;
}

.mv .main {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  padding: 20px;
  width: 45vw;
}

.mv .main .title {
  position: absolute;
  top: 20px;
  left: max(-35vw, -70px);
  max-width: 70px;
  width: 8vw;
}

.mv .main .title img {
  max-width: 70px;
}

ファーストビュー画像だけ中央に配置するポイントは、まず中央に配置したいファーストビュー画像mainにposition: relative;を指定してレイアウトの基準にします。

そしてファーストビュー画像の左に表示させたいtitleをposition: absolute;で配置してあげることで、ファーストビュー画像だけを中央に配置することが出来ます。

関連記事:

画像をCSSアニメーションを使って自動でスライドさせる方法 【CSS】画像を無限横スクロールさせる方法 【JS】固定headerを一定間スクロールしたら背景色を変える方法 【簡単】VSCodeでSassをコンパイルする方法を紹介！