今回はHTMLとCSSで画像の上にオシャレに文字やアイコン、ボタンなどをのせる方法を紹介します。覚えておくととても便利ですよ！

画像の上に文字をのせるサンプル

公開当時のサルワカのPhotoshop講座トップページにも、この表現を使っていました。記事内の画像は当時の表示例です。

1. HTMLとCSSで表現するメリット

「画像自体に文字を書き込む」のではなく、「HTMLとCSSにより画像上に文字を配置する」ことには以下のようなメリットがあります。

  • 拡大しても文字がぼやけない
  • 画像に焼き込まず、HTMLのテキストとして読める
  • 文字を選択することができる
  • レスポンシブデザインにより文字サイズを調整できる（スマホ表示のときは文字を小さめに…というようなことができる）

2. 画像の上に文字をのせる方法

はじめに画像の上に文字をのせる方法を紹介します。

手順1：画像を用意

使用する画像サンプル

まず画像を準備します。白などの明るめの文字をのせたいときは暗めの画像を、黒などの暗めの文字をのせたいときは明るめの画像を使うのがおすすめです

例として暗めの写真を背景に、白文字をのせてみたいと思います。

手順2：画像と文字を1つのdiv要素の中に入れる

画像と文字を1つのdivタグの中に放り込みます。例ではpタグの中に「SUNSET」という文字を入れます。pタグではなく見出しタグを使っても、spanタグを使ってもOKです。

<div class="example">
	<img src="https://saruwakakun.com/wp-content/uploads/2017/03/bdrlee-key-119856.jpg" alt="夕暮れの風景" width="700" height="467">
	<p>SUNSET</p>	
</div>

例のimgタグのsrcには保存済みの写真URLを入れています。利用時は自分の画像URLと、その内容に合ったaltへ差し替えてください。divにはclass名をつけておくのが良いですね。ここでは、exampleという名前にしてみました。

手順3：positionプロパティを指定

positionというCSSのプロパティをそれぞれの要素に指定します。使い方はこちらの記事を読めばサクッと分かるはずです。

あわせて読みたいCSSのpositionを総まとめ！absoluteやfixedの使い方は？

親要素であるdivに対してはposition:relativeを、文字列の入ったpタグに対してはabsoluteを指定します。画像は通常の配置のままにします。 pタグの位置をとりあえずtop:0; left:0としておきましょう。 画像を横いっぱいに広げるためにimgタグにはwidth:100%とheight:autoを指定し、縦横比を保ちます。

CSSコード
.example {/*親div*/
	position: relative;/*相対配置*/
	max-width: 100%;
	}

.example p {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	position: absolute;/*絶対配置*/
	color: white;/*文字は白に*/
	top: 0;
	left: 0;
	}

.example img {
	width: 100%;
	height: auto;
	display: block;
	}
ブラウザ表示文字が重なった

うっすらと画像の左上に文字が重なりました（オレンジ矢印の部分）。この例のposition:absoluteの基準は、position:relativeを指定した親divです。通常はpositionがstatic以外の最も近い祖先が基準になり、transformなどで基準が作られる場合もあります。top:0; left:0は文字を入れたpの配置位置を基準の左上にする指定です。初期のpのmarginがあるため、この段階では文字に余白が残ります。

手順4：見た目を調整

あとは見た目を整えます。文字サイズを大きく、太字にしてみましょう。さらにフォント種類も変えます。QuicksandはGoogle Fontsから読み込んで使ってください。font-familyに名前を書くだけでは読み込まれず、利用できない場合はsans-serifへフォールバックします。

CSSコード
.example {/*親div*/
	position: relative;
	max-width: 100%;
	}

.example p {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	position: absolute;
	color: white;/*文字は白に*/
	font-weight: bold; /*太字に*/
	font-size: 2em;/*サイズ2倍*/
	font-family :Quicksand, sans-serif;/*Google Fontsで読み込み*/
	top: 0;
	left: 0;
	}

.example img {
	width: 100%;
	height: auto;
	display: block;
	}
ブラウザ表示文字のレイアウト変更例

これだけでオシャレに見えますね。

画像サイズを固定する

画像の表示幅を指定したいときは、imgはwidth:100%; height:autoのままに、親divへ例えばwidth:400px; max-width:100%を指定します。狭い画面では親の幅を超えないようにします。各例は別々に使うCSSです。長い文章を重ねる場合は、文字量・大きさ・画像の高さも合わせて確認してください。

3. 文字をど真ん中に配置する

「文字を画像の中心に配置したい」ということもあると思います。そんなときはCSSを次のようにします。

CSSコード
.example {
	position: relative;
	max-width: 100%;
	}

.example p {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	color: white;
	font-weight: bold;
	font-size: 2em;
	font-family: Quicksand, sans-serif;
	}

.example img {
	width: 100%;
	height: auto;
	display: block;
	}
ブラウザ表示文字を縦横中央寄せ

中央寄せの解説

簡単に解説をしておきます。

topとleftを50%に

これでほぼ真ん中に配置されます。しかし、これだと文字の大きさ分だけ真ん中からずれてしまいます。

translateで文字分のズレを補正

そこでtransform: translateというワザを使って文字分のズレを補正しています。translate(-50%,-50%)で縦と横の文字のズレが補正されます。横の-50%は文字要素自身の幅、縦の-50%は高さを基準に移動します。現在の主要ブラウザーでは標準のtransformを使えるため、掲載コードでは古いベンダープレフィックスを外しています。

念のため余白を無くしておく

marginやpaddingの余白が入っていると、中央からズレてしまう可能性があります。そこで念のため、値を0にしています。CSSの余白設定についてはこちらの記事が参考になるはずです。

あわせて読みたいCSSのmarginとは？paddingとは？余白の指定方法まとめ

4. 画像に背景色付きのカテゴリ名をのせる表現

次に画像の上に背景色付きのテキストをのせる方法を紹介します。

記事一覧にカテゴリ名を表示させるイメージ

これはブログやウェブサイトの記事一覧でカテゴリー名を表示するときなんかに使われたりしますね。掲載画像は、公開当時のサルワカのトップページで使っていた例です。

この表現をしたいときは以下のようなコードを書きます。HTMLはさきほどと同じです。

HTMLコード
<div class="example">
	<img src="https://saruwakakun.com/wp-content/uploads/2017/03/bdrlee-key-119856.jpg" alt="夕暮れの風景" width="700" height="467">
	<p>SUNSET</p>	
</div>
CSSコード
.example {
	position: relative;
	max-width: 100%;
	}

.example p {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	position: absolute;
	top: 0;/*画像の左上に配置*/
	left: 0;
	margin: 0; /*余計な隙間を除く*/
	color: white;/*文字を白に*/
	background: skyblue;/*背景色*/
	font-size: 15px;
	line-height: 1;/*行高は1に*/
	padding: 5px 10px;/*文字周りの余白*/
	}

.example img {
	width: 100%;
	height: auto;
	display: block;
	}
ブラウザ表示文字の角にカテゴリ名をのせるイメージ

画像の角にタグがつけられたように文字が固定されました。背景色を付けると写真から文字を区切れますが、文字と背景色のコントラストも確認してください。親divの幅を指定する場合はmax-width:100%も付け、狭い画面をはみ出さないようにします。

5. 画像の上にアイコンを重ねる方法

次に画像の上にアイコンをのせてみましょう。ここでは、Font Awesome 7 FreeのBrands Web Fontsを使います。公式手順に沿ってfontawesome.cssとbrands.css、および対応するフォントを読み込んでください。導入方法はこちらの記事を読めばサクッと分かるはずです。

あわせて読みたい【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

やることは文字をのせるときと殆ど変わりません。文字の代わりにFontAwesomeのアイコンコードを書くだけですね。例としてYouTubeのアイコン を画像のど真ん中にのせてみます。

HTMLコード
<div class="example">
	<img src="https://saruwakakun.com/wp-content/uploads/2017/03/bdrlee-key-119856.jpg" alt="夕暮れの風景" width="700" height="467">
	<i class="fa-brands fa-youtube" role="img" aria-label="YouTube"></i>	
</div>
CSSコード
.example {
	position: relative;
	max-width: 100%;
	}

.example .fa-brands {/*classがfa-brandsのアイコンに対して*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	color: white;/*アイコン色*/
	font-size: 60px;/*サイズ*/
	}

.example img {
	width: 100%;
	height: auto;
	display: block;
	}
ブラウザ表示画像の上にアイコンをのせる例

ものすごくYouTube感が出ました。真ん中に配置する方法はさきほど紹介した通りですね。

アイコンを半透明に

文字色を透明のものにすれば、アイコンを透けさせることもできます。

CSSコード
.example {
	position: relative;
	max-width: 100%;
	}

.example .fa-brands {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 80px;
	}

.example img {
	width: 100%;
	height: auto;
	display: block;
	}
ブラウザ表示アイコンを半透明に

これもなかなかおしゃれに見えますね。

文字とアイコンを両方のせる

pタグの中にアイコンコードを入れて、文字とアイコンを両方のせてみましょう。

HTMLコード
<div class="example">
	<img src="https://saruwakakun.com/wp-content/uploads/2017/03/bdrlee-key-119856.jpg" alt="夕暮れの風景" width="700" height="467">
	<p><i class="fa-brands fa-youtube" aria-hidden="true"></i>Hello.</p>	
</div>
CSSコード
.example {
	position: relative;
	max-width: 100%;
	}

.example p {/*pタグを画像の真ん中に*/
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
	color: white;/*文字色*/
	font-size: 25px;/*文字サイズ*/
	text-align:center;/*pタグ内で更に中央寄せ*/
	font-family: 'Quicksand',sans-serif;
	}

.example p .fa-brands {/*アイコンに対して*/
	display:block;/*前後に改行*/
	padding-bottom:10px;/*文字との隙間*/
	font-size: 3em;/*文字の3倍のサイズに*/
	color: rgba(255, 255, 255, 0.6);/*半透明*/
	}

.example img {
	width: 100%;
	height: auto;
	display: block;
	}
ブラウザ表示文字の上に画像とアイコンをのせる例

簡単にCSSの解説をしておきます。まず、アイコンと文字の入ったpタグを画像の真ん中に重ねています。次にpタグ自体に文字色やフォントサイズなどのデザインを指定します。これはそのまま文字のデザインになります、アイコンのデザインだけを変える場合には、別にclassfa-brandsに対してデザインを指定します（この例はFont AwesomeのBrandsアイコンです）。

6. ボタンをのせる方法

ここまでの方法を応用すれば画像の上にボタンをのせることもできます。たとえば公開当時のTwitterの意匠を使ったリンクボタンをのせてみましょう。現在のXのフォロー機能を実装する例ではありません。リンク先は仮のURLなので、利用時に自分のページのURLへ変更してください。鳥のマークは、Font Awesome 7 Brandsのものを使います。ボタンなのでaタグを使います。

HTMLコード
<div class="example">
	<img src="https://saruwakakun.com/wp-content/uploads/2017/03/bdrlee-key-119856.jpg" alt="夕暮れの風景" width="700" height="467">
	<a href="https://example.com/"><i class="fa-brands fa-twitter" aria-hidden="true"></i> Follow Me</a>	
</div>
CSSコード
.example {
	position: relative;
	max-width: 100%;
	}

.example a {/*aタグを画像の真ん中に*/
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	/*以下装飾*/
	margin:0;/*余計な隙間を除く*/
	font-size: 20px;/*文字サイズ*/
	border: solid white 2px; /*線で囲う*/
	padding: 7px;/*文字と線の間の余白*/
	color: white;/*文字色*/
	text-decoration: none;/*下線を表示させない*/
	}

.example a:hover, .example a:focus-visible{/*カーソルを当てたとき*/
	background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
	}

.example img {
	width: 100%;
	height: auto;
	display: block;
	}

.example a:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
}
ブラウザ表示リンクボタンをのせる例

簡単に解説しておきます。aタグを画像の中央に配置し、白い枠で囲っています。白い枠と文字のスペースはpaddingで指定します。そのままだと下線がついてしまいかっこ悪いのでtext-decoration:noneで非表示にしています。カーソルをあてた時（hover）とキーボード操作でフォーカスした時（focus-visible）の背景色を半透明にし、フォーカス時には輪郭線も表示します。ここではシンプルなものにしましたが、aタグに対するCSSを変えれば、様々なデザインのボタンを画像の上に重ねることができます。

まとめ

このように画像の上に文字やアイコン、ボタンをのせることでおしゃれで見る人の目をひくような表現ができます。便利なので覚えておくと良いでしょう。

この記事も参考になるかも

あわせて読みたいCSSで中央寄せする9つの方法（縦・横にセンタリング）あわせて読みたいCSSの疑似要素とは？beforeとafterの使い方まとめ