【CSS】画像の上に文字やボタンを重ねる

この記事では、CSSで画像の上に文字やボタンを重ねる方法を詳しく解説していく。これができるようになると、画像の上に見出しをのせたり、画像の拡大ボタンをつけたりすることが可能になる。

画像の上に文字を重ねる方法【4つのステップ】
1. ❶ 画像とHTMLの準備
1. ❷ relativeとabsoluteを使って文字を重ねる
1. ❸ 文字をデザインする
1. ❹ 文字を画像の中央に表示する

画像の上に文字を重ねる方法【4つのステップ】

それでは、画像の上に文字を重ねる方法を次の4つのステップに分けて解説していく。

画像とHTMLの準備
relativeとabsoluteを使って文字を重ねる
文字をデザインする
文字を画像の中央に表示する

❶ 画像とHTMLの準備

まずはdiv・img・spanタグを使って、次のようにHTMLを構成する。

html

<div>
  <img src="awesome.jpg" />
  <span>Awesome</span>
</div>

❷ relativeとabsoluteを使って文字を重ねる

外枠のdivにrelative、重ねたい要素spanにabsoluteを指定する。

css

div {
  position: relative;
}
span {
  position: absolute;
  top: 0;
  left: 0;
  color:white;
}
img {
  width: 500px;
  height: 311px;
}

❸ 文字をデザインする

spanを編集して、文字をデザインしておこう。「文字サイズ」「文字の太さ」「フォント」を次のように追加した。

css

  span {
    position: absolute;
    top: 0;
    left: 0;
    color:white;    
    font-size:4em; /* 追加 */
    font-weight: 600; /* 追加 */
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /* 追加 */
  }

❹ 文字を画像の中央に表示する

文字を画像の中央に表示するには次の通り。

css

  div {
    position: relative;
    width:500px; /* 追記 */
  }
  span {
    position: absolute;
    top: 0;
    left: 0;
    color:white;    
    font-size:4em;
    font-weight: 600;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    top: 50%; /* 追記 */
    left: 50%; /* 追記 */
    -ms-transform: translate(-50%, -50%); /* 追記 */
    -webkit-transform: translate(-50%, -50%); /* 追記 */
    transform: translate(-50%, -50%); /* 追記 */
  }
  img {
    width: 500px;
    height: 311px;
  }

文字を画像の中央に表示するポイントは次の3つ。