画像の上におしゃれに文字やボタンをのせる方法（CSS）

HTMLとCSSで画像の上に文字やボタン、アイコンなどを美しくのせる方法を分かりやすく解説します。サンプルコード付き。

そこで transform: translate というワザを使って文字分のズレを補正しています。 translate(-50%,-50%) で縦と横の文字のズレが補正されます。 transform はCSS3のプロパティですが、IE8を除けば対応しています。IE8のシェアは0.◯%というレベルなので、ほとんど全てのブラウザで問題なく使えると思ってしまっても良いでしょう。古いブラウザに対応するために念のためベンダープレフィックス付き（-msと-webkit-）のtranslateも書いています。

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

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

SUNSET

.example < position: relative; >.example p < position: absolute; top: 0;/*画像の左上に配置*/ left: 0; margin: 0; /*余計な隙間を除く*/ color: white;/*文字を白に*/ background: skyblue;/*背景色*/ font-size: 15px; line-height: 1;/*行高は1に*/ padding: 5px 10px;/*文字周りの余白*/ > .example img

画像の角にタグがつけられたように文字が固定されました。これなら画像の明るさに関係なくハッキリ見えますね。ここでも画像のサイズを変えたいときは、親要素のdivに対して width:◯◯px と指定することをおすすめします。

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

.example < position: relative; >.example .fa .example img アイコンを半透明に .example < position: relative; >.example .fa < position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; color: rgba(255, 255, 255, 0.6); font-size: 80px; > .example img 文字とアイコンを両方のせる

Hello.

.example < position: relative; >.example p .example p .fa .example img

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

6. ボタンをのせる方法

.example < position: relative; >.example a .example a:hover .example img

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

まとめ

翻訳も AI にまるっとお任せ

AI翻訳ツール Nani !? ならネイティブ講師に教わるかのように自然な翻訳ができます。

同じカテゴリーの記事一覧リファレンスサルワカについてサルワカくん少し役立つ生活やインターネットの知識を分かりやすく解説していきます。検索