婚活LABより、ブライダルネットの期間限定クーポン配布中!!

CSSで画像に”NEW”やランキング順位を重ねる1番簡単な方法。

CSSで画像に”NEW”やランキング順位を重ねる1番簡単な方法。

CSSで画像に文字や装飾を重ねて表示する方法について問い合わせがありましたので当記事にて詳しく簡単に実現出来る方法を解説します。

今回の完成形

今回実現したいスタイルは以下の様に、画像に任意の文字を重ねて表示するスタイルです。

サンプル

上の例では、画像に”NEW!!”という文字列と背景色を重ねて表示している。

コピペもOK!!画像に文字を重ねるサンプルコード

では、実際に上記の完成形のサンプルコードを見ていきましょう。

サンプルHTMLコード

まずはHTMLコードから。

<div class="sample">
<img src="任意の画像のパス" alt="サンプル画像" width="300" height="200"/>
</div>

今回はサックと擬似要素::beforeを使用して文字列と背景色を重ねたいと思うのでHTMLはimgタグの親要素にdivタグを使用し、class名をsampleとした簡単な物にしました。

サンプルCSSコード

続いてCSSのコード。

.sample{
position:relative;
width:300px;
margin:0 auto;
}

.sample::before{
position:absolute;
top:0px;
left:0px;
content:"NEW!!";
font-size:1.3em;
padding:5px 15px;
color:#fff;
background:rgba(0,0,0,0.4);
}

ポイントはsampleと名をつけたclassに擬似要素『::before』を使用してスタイルを定義しています。
次に各プロパティについて解説していきます。

今回使用した主要プロパティの解説

コピペでもOKですが、各プロパティについて詳しく抑えておいたほうが様々な応用が利きます。
各要素を重ねる際に一番重要となるCSSプロパティがpositionです。今回は疑似要素も使用しているのでcontentプロパティについても順に解説していきます。

最重要!!positionプロパティ

各要素を重ねたり任意で位置を決める際、positionプロパティを使用します。ではpositionプロパティがどんな値を持つか見ていきましょう。

static 特に位置を指定しない。デフォルト値
relative 相対位置での配置。通常の位置からtop、left、right、bottomプロパティで位置を指定。
absolute 絶対位置での配置。親要素がstatic以外の場合、その親要素からtop、left、right、bottomプロパティで位置を指定。親要素が全てデフォルト値、staticな場合はbodyタグが基点となります。
fixed 絶対位置で配置し、かつスクロールしても位置が固定される。
sticky スクロールして固定される位置を指定出来る新しく追加されたプロパティ。

今回のサンプルの様に、画像に文字を重ねて表示するスタイルに使用するCSSで重要なプロパティと値は、ブルーでマーキングされた『position:absolute;』と『positiom:relative;』です。

上のテーブルで説明した通り、サンプルCSSコードを
解説すると、『.sample』で『relative』を指定し、子要素の『.sample::before』の『absolute』の相対位置での基点を作ります。
『.sample』で『relative』を指定しなかった場合は、親要素にstatic以外のpositionの指定がなければbodyタグを基点とします。

疑似要素『::before』をセレクタに指定した場合、サンプルHTMLコードの<div class=”sample”>の直前に要素が作成されると思われるかも知れませんがCSSでは内側に作成されると考えると分かりやすいです。したがって上記の場合<div class=”sample”>を親要素とします。
『::after』も同じく直後に要素が作成されるわけではありません。
解釈が難しい点です。

擬似要素で使うcontentプロパティ

『::before』や『::after』の擬似要素で文字列や画像を表示する為にcontentプロパティを使用します。全ての値を解説するとものすごい文字数となるのでよく使う値に絞って解説します。

“” or ” ダブルクォーテーション、もしくはシングルクォーテーションで囲んだ範囲の文字列を表示。
url() 画像や音声ファイル等のパスを()内に指定して表示。
counter() counter-incrementプロパティと併記して使用。()内にcounter-incrementプロパティで指定で指定したカウンタ名を記述し、要素の数だけ連番を表示。

今回のサンプルCSSでは一番上のダブルクォーテーションの中に文字列『NEW!!』を入力しています。

応用問題

上記まででCSSで画像や文字を重ねる方法を解説していきました。
では以下の応用問題サンプルを見てみましょう。

応用問題サンプル

CSSで文字を重ねる

応用問題サンプルのHTMLコードは以下です。

<div class="sample-2">
<img src="任意の画像のパス" alt="サンプル画像" width="300" height="200"/>
<p>CSSで文字を重ねる</p>
</div>

応用問題では擬似要素を使用せずp要素を重ねて表示させています。
では以下のCSSコードのブルーマーカーが引かれている〇〇〇〇の部分2カ所にそれぞれなにが入るか考えてみましょう。

.sample-2{
position:〇〇〇〇;
width:300px;
margin: 0 auto;
}

.sample-2 p{
position:〇〇〇〇;
left:0px;
bottom:0px;
width:100%;
font-size:1.3em;
content:"NEW!!";
color:#fff;
background:rgba(0,0,0,0.4);
text-align:center;
}

どうしてもわからなければコメント欄で質問頂ければ迅速に回答します。

また、『.sample-2』の横幅指定widthがない場合どのように表示されるかいろいろ試して見てください。

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!