レシポンシブな画像に文字を重ねる方法

2020年4月3日HTML & CSSCSS, HTML, デザイン

Contents

1. 完成目標
2. 画像をレスポンシブにする
3. 文字を重ねる
4. まとめ

完成目標

画像はレスポンシブに対応する
画像の横幅は640pxの画像を利用
640pxまでは横幅いっぱいに画像が広がり、その後は画像を中央寄せ
画像の左上ぴったりから文字が始まる
文字列が長く、横幅が足りなくなった場合は、改行して画面に映るようにする

画像をレスポンシブにする

画像部分のHTML部分は以下の通り。

<html lang="ja">
<head>
〜〜〜〜中略〜〜〜〜
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<div class="content-wrapper">
  <div class="image-wrapper">
     <img src="woman.jpg" alt="woman">
   </div>
</div>

CSSについては下記の通り

style.css
.content-wrapper {
  position: relative;
}

.image-wrapper {
  max-width: 640px;
  position: absolute;
  top: 0;
  left: 50%;
  transform; translateX(-50%);
}

img {
  width: 100%;
  max-width: 640px;
  height: auto;
}

.image-wrapperにmax-widthをあてたいので、.image-wrapperの中央寄せをposition: absoluteで実施する(text-align:centerはmax-widthと一緒に使うと機能しない)。

imgにwidth:100vwとmax-width: 640px(設定する画像の横幅)を指定することによって、640pxまではデバイスの横幅いっぱいに画像が表示され、デバイスの横幅が640px以降の場合は左右に余白が作成される(.image-wrapperにleft:50%を指定しているため。画像の左端が画面のちょうど50%から表示されてしまうため、transformXで50%左にずらしている)。

文字を重ねる

HTMLに重ねたい文字を追記する。

〜〜〜〜中略〜〜〜〜
<div class="image-wrapper">
   <img src="woman.jpg" alt="woman">
　<div id="sentence">
     <h1>年齢を重ねても美しさを保つために</h1>
   </div>
</div>

CSSで#sentenceを画像の左上に持っていく。

〜〜〜〜中略〜〜〜〜
#sentence {
  position: absolute; // 親要素のimage-wrapperの位置を基準に配置できる。
  top: 0; // image-wrapperの一番上側に配置
  left: 0; // image-wrapperの一番左側に配置
}