Yuki's Monologue

「画像の上にテキストを表示したいけどどうしたらいいかわからない」

「positionプロパティを使っているはずなのにうまく配置できない」

「relativeやabsoluteなど知っているけど何を使ったらいいかわからない」

という方のために本記事ではwebサイト内でどのようにつかわれているかを通しながらpositionプロパティの使い方を解説していきます。

画像の上にテキストを表示

背景画像の上にテキストを表示する際に必要なポイントは以下の3つになります。

• backgrounnd-imgでの背景画像の表示
• position: relative, absoluteの組み合わせ
• top, left等を用いての要素の配置

HTML

  <div class="fv">
    <p class="fv_lead">リード文が入ります</p>
  </div>

CSS

.fv{
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../img/fv.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.fv_lead{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  background-color: #fff;
}

background-imageプロパティを用いて背景を表示する際はwidth, heightの設定をしないと画像が表示されないので気を付けてください。また、background-repeat, background-position, background-sizeを設定することで繰り返しや大きさの調整をしています。画面いっぱいに背景画像を表示したいときは上記の設定でいいかと思います。

親要素にrelativeを子要素にabsoluteを設定することでabsoluteで設定した要素をrelativeで設定した親要素を基準に位置の設定をすることができます。位置の設定はtop, left, bottom, rightで設定することができます。今回は上下左右中央に配置したいためtransform: translate(-50%, -50%);を設定しているため気を付けてください。