CSSで画像の上に文字やボタンを重ねる方法を詳しく解説

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

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

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

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

❶ 画像とHTMLの準備

デフォルトの画像
デフォルトの画像

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

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

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

relativeとabsoluteを使って文字を重ねた
relativeとabsoluteを使って文字を重ねた

外枠のdivrelative、重ねたい要素spanabsoluteを指定する。

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

❸ 文字をデザインする

「文字サイズ」「文字の太さ」「フォント」を変更した
「文字サイズ」「文字の太さ」「フォント」を変更した

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

  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; /* 追加 */
  }

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

文字を画像の中央に表示した
文字を画像の中央に表示した

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

  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つ。

  1. divに画像と同じ横幅500pxを指定
  2. spantopleft50%に指定
  3. transform: translateを使って文字のズレを補正

Webデザインのオススメ書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web界隈やデザイナーに大人気! Web関連の情報やデザインについて学べる『Webクリエイターボックス』の中の人、Manaによる渾身のHTML&CSSとWebデザインが学べる本。 Webサイト制作に必要な知識がすべて身につく! 今のWebサイトの作り方が一気に学べる!

KindleAmazon
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。

KindleAmazon
スラスラわかるHTML&CSSのきほん
スラスラわかるHTML&CSSのきほん

4万人が学んだベストセラーが、5年ぶりの大改訂! 小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版! 第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。 ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。 これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

KindleAmazon

最後まで読んでいただきありがとうございました。

「この記事が参考になったよ」という方は、ぜひ記事をシェアをしていただけるととても嬉しいです。

今後も有益な記事を書くモチベーションにつながりますので、どうかよろしくお願いいたします。↓↓↓↓↓↓↓

あなたにおすすめ