記事内に商品プロモーションが含まれる場合があります
今回はHTMLとCSSで画像の上にオシャレに文字やアイコン、ボタンなどをのせる方法を紹介します。覚えておくととても便利ですよ！
サルワカのPhotoshop講座のトップページにもこの表現を使っています。
1. HTMLとCSSで表現するメリット
「画像自体に文字を書き込む」のではなく、「HTMLとCSSにより画像上に文字を配置する」ことには以下のようなメリットがあります。
- 拡大しても文字がぼやけない
- 検索エンジンにも読まれる（SEO的に良い）
- 文字を選択することができる
- レスポンシブデザインにより文字サイズを調整できる（スマホ表示のときは文字を小さめに…というようなことができる）
2. 画像の上に文字をのせる方法
はじめに画像の上に文字をのせる方法を紹介します。
手順1：画像を用意
まず画像を準備します。白などの明るめの文字をのせたいときは暗めの画像を、黒などの暗めの文字をのせたいときは明るめの画像を使うのがおすすめです
例として暗めの写真を背景に、白文字をのせてみたいと思います。
手順2：画像と文字を1つのdiv要素の中に入れる
画像と文字を1つのdivタグの中に放り込みます。例ではpタグの中に「SUNSET」という文字を入れます。pタグではなく見出しタグを使っても、spanタグを使ってもOKです。
<div class="example"> <img src="◯◯.jpg" /> <p>SUNSET</p> </div>
◯◯.jpgの部分には画像のURLが入ります。divにはclass名をつけておくのが良いですね。ここでは、exampleという名前にしてみました。
手順3：positionプロパティを指定
positionというCSSのプロパティをそれぞれの要素に指定します。使い方はこちらの記事を読めばサクッと分かるはずです。
親要素であるdivに対してはposition:relativeを、文字列の入ったpタグに対してはabsoluteを指定します。imgタグはそのままでOKです。 pタグの位置をとりあえずtop:0; left:0としておきましょう。 画像を横いっぱいに広げるためにimgタグにはwidth:100%を指定しておきます。
.example {/*親div*/
position: relative;/*相対配置*/
}
.example p {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
top: 0;
left: 0;
}
.example img {
width: 100%;
}
うっすらと画像の左上に文字が重なりました（オレンジ矢印の部分）。position:absoluteの要素は、親要素を基準にして位置を決めることになります。top:0; left:0は「親（div）の左上に画像が配置される」という意味になります。
手順4：見た目を調整
あとは見た目を整えます。文字サイズを大きく、太字にしてみましょう。さらにオシャレに見せるためにフォント種類まで変えちゃいます。
.example {/*親div*/
position: relative;
}
.example p {
position: absolute;
color: white;/*文字は白に*/
font-weight: bold; /*太字に*/
font-size: 2em;/*サイズ2倍*/
font-family :Quicksand, sans-serif;/*Google Font*/
top: 0;
left: 0;
}
.example img {
width: 100%;
}
これだけでオシャレに見えますね。
画像サイズを固定する
もし画像のサイズを◯◯pxというように固定したいときは、imgはwidth:100%のままに、親要素のdivに対してwidth:◯◯pxと指定しましょう。詳しい解説は省きますが、意図せずレイアウトが崩れるのを防ぐことができます。
3. 文字をど真ん中に配置する
「文字を画像の中心に配置したい」ということもあると思います。そんなときはCSSを次のようにします。
.example {
position: relative;
}
.example p {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
/*文字の装飾は省略*/
}
.example img {
width: 100%;
}
中央寄せの解説
簡単に解説をしておきます。
topとleftを50%に
これでほぼ真ん中に配置されます。しかし、これだと文字の大きさ分だけ真ん中からずれてしまいます。
translateで文字分のズレを補正
そこでtransform: translateというワザを使って文字分のズレを補正しています。translate(-50%,-50%)で縦と横の文字のズレが補正されます。transformはCSS3のプロパティですが、IE8を除けば対応しています。IE8のシェアは0.◯%というレベルなので、ほとんど全てのブラウザで問題なく使えると思ってしまっても良いでしょう。古いブラウザに対応するために念のためベンダープレフィックス付き（-msと-webkit-）のtranslateも書いています。
念のため余白を無くしておく
marginやpaddingの余白が入っていると、中央からズレてしまう可能性があります。そこで念のため、値を0にしています。CSSの余白設定についてはこちらの記事が参考になるはずです。
4. 画像に背景色付きのカテゴリ名をのせる表現
次に画像の上に背景色付きのテキストをのせる方法を紹介します。
これはブログやウェブサイトの記事一覧でカテゴリー名を表示するときなんかに使われたりしますね。サルワカでもトップページでこの表現を使っています。
この表現をしたいときは以下のようなコードを書きます。HTMLはさきほどと同じです。
<div class="example"> <img src="◯◯.jpg" /> <p>SUNSET</p> </div>CSS
.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 {
width: 100%;
}
画像の角にタグがつけられたように文字が固定されました。これなら画像の明るさに関係なくハッキリ見えますね。ここでも画像のサイズを変えたいときは、親要素のdivに対してwidth:◯◯pxと指定することをおすすめします。
5. 画像の上にアイコンを重ねる方法
次に画像の上にアイコンをのせてみましょう。ここでは、FontAwesomeのWebアイコンフォントを使います。導入方法はこちらの記事を読めばサクッと分かるはずです。
やることは文字をのせるときと殆ど変わりません。文字の代わりにFontAwesomeのアイコンコードを書くだけですね。例としてYouTubeのアイコン を画像のど真ん中にのせてみます。
<div class="example">
<img src="◯◯.jpg" />
<i class="fa fa-youtube" ></i>
</div>
CSS
.example {
position: relative;
}
.example .fa {/*classが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: white;/*アイコン色*/
font-size: 60px;/*サイズ*/
}
.example img {
width: 100%;
}
ものすごくYouTube感が出ました。真ん中に配置する方法はさきほど紹介した通りですね。
アイコンを半透明に
文字色を透明のものにすれば、アイコンを透けさせることもできます。
.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 {
width: 100%;
}
これもなかなかおしゃれに見えますね。
文字とアイコンを両方のせる
pタグの中にアイコンコードを入れて、文字とアイコンを両方のせてみましょう。
<div class="example">
<img src="◯◯.jpg" />
<p><i class="fa fa-youtube" ></i>Hello.</p>
</div>
CSS
.example {
position: relative;
}
.example p {/*pタグを画像の真ん中に*/
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: white;/*文字色*/
font-size: 25px;/*文字サイズ*/
text-align:center;/*pタグ内で更に中央寄せ*/
font-family: 'Quicksand',sans-serif;
}
.example p .fa {/*アイコンに対して*/
display:block;/*前後に改行*/
padding-bottom:10px;/*文字との隙間*/
font-size: 3em;/*文字の3倍のサイズに*/
color: rgba(255, 255, 255, 0.6);/*半透明*/
}
.example img {
width: 100%;
}
簡単にCSSの解説をしておきます。まず、アイコンと文字の入ったpタグを画像の真ん中に重ねています。次にpタグ自体に文字色やフォントサイズなどのデザインを指定します。これはそのまま文字のデザインになります、アイコンのデザインだけを変える場合には、別にclassfaに対してデザインを指定します（faはFontAwesomeアイコンのクラス名です）。
6. ボタンをのせる方法
ここまでの方法を応用すれば画像の上にボタンをのせることもできます。たとえばTwitterのフォローボタンをのせてみましょう。は同様にFontAwesomeのものを使います。ボタンなのでaタグを使います。
<div class="example">
<img src="◯◯.jpg" />
<a href="◯◯"><i class="fa fa-twitter" ></i> Follow Me</a>
</div>
CSS
.example {
position: relative;
}
.example a {/*aタグを画像の真ん中に*/
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
/*以下装飾*/
margin:0;/*余計な隙間を除く*/
font-size: 20px;/*文字サイズ*/
border: solid white 2px; /*線で囲う*/
padding: 7px;/*文字と線の間の余白*/
color: white;/*文字色*/
text-decoration: none;/*下線を表示させない*/
}
.example a:hover{/*カーソルを当てたとき*/
background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
}
.example img {
width: 100%;
}
簡単に解説しておきます。aタグを画像の中央に配置し、白い枠で囲っています。白い枠と文字のスペースはpaddingで指定します。そのままだと下線がついてしまいかっこ悪いのでtext-decoration:noneで非表示にしています。カーソルをあてた時（hover）の背景色は半透明にしてみました。ここではシンプルなものにしましたが、aタグに対するCSSを変えれば、様々なデザインのボタンを画像の上に重ねることができます。
まとめ
このように画像の上に文字やアイコン、ボタンをのせることでおしゃれで見る人の目をひくような表現ができます。便利なので覚えておくと良いでしょう。
この記事も参考になるかも
