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

 

CSSで画像の上に文字やボタンを重ねる方法を詳しく解説
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を使って文字のズレを補正
記事に関するご質問などがあれば、
@tosisico または お問い合わせ までご連絡ください。
オススメ!Webデザインの本

デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。

ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。

▼ コードを見ながら手を動かし、作りながら学べる内容になってます。Webデザインの知識からHTMLやCSSの技術的なことまでを、体系的に順序立てて学ぶことができます。実際の制作現場の流れが体験できる本です。「レスポンシブデザイン」「Flexbox」「CSSグリッド」についても学べます。

▼ デザインの本といえばこちら。とても有名な古典的名著です。デザインを良くするための4つの基本原則を徹底解説しています。DTPをはじめ、Webデザインやプレゼン資料づくりにも役立ちます。

関連記事