【html,css】画像に文字や要素を重ねる方法

更新日:2019.04.26

HTML，CSSを使って画像の上に文字やボタンなどを重ねる方法を解説．

Webページで画像の上に文字やボタンが重なってるのをよく見かけると思います．

テキストテキストテキスト

文字の重なりだとフォトショップなどで写真自体に加工している場合もありますが，CSSで指定することも可能です．

さっそく，CSSで画像の上に文字や要素を重ねる方法を解説します．

まず，htmlで画像と重ねたい要素を用意してdivタグでまとめます．

HTML
<div class="kani">
    <img src="kani.jpg">
    <p class="btn"><a>ボタン</a></p>
    <p class="text">テキストテキストテキスト</p>
</div>

CSS
div{
}

img{
}

.btn{
    width: 90px;
    text-align: center;
    border-radius: 3px;
    background-color: #1e90ff;
    color: #ffffff;
    padding: 3px;
}

.text{
    width: 400px;
    font-size: 30px;
    color: #ffa500;
}

次にCSSで，要素をまとめているdiv要素のwidthを指定して，img要素をwidth: 100%;にすることで，画像をそのサイズにします．

CSS
div{
    width: 700px;
}

img{
    width: 100%;
}

この時点ではまだ要素が縦に並んでいるだけです．

ボタン

テキストテキストテキスト

次に，div要素に対してposition: relative;重ねて表示したいボタンや、テキストに対してposition: absolute;を与えます．

CSS
div{
    width: 700px;
    position: relative;
}

img{
    width: 100%;
}

.btn{
    width: 90px;
    text-align: center;
    border-radius: 3px;
    background-color: #1e90ff;
    color: #ffffff;
    padding: 3px;
    position: absolute;
}

.text{
    width: 400px;
    font-size: 30px;
    color: #ffa500;
    position: absolute;
}

ボタン

テキストテキストテキスト

positon: absolute;では，要素の絶対座標を決めることができ，top，bottom，right，leftプロパティを使ってその座標を指示します．

ただこのままでは座標指定する際，ページ全体の外枠からの距離を指定することなるので，親要素にposition: relative;を与えることによって，付与した要素の外枠からの距離の指定が可能になります．

例：親要素にposition: relative;無しの場合

top: 50px;でページ全体の最上部から50pxの距離に配置

例：親要素にposition: relative;有りの場合

top: 50px;で親要素の最上部から50pxの距離に配置

あとは，top、bottom、right、leftを指定してボタンやテキストを画像上のどの座標に配置するかを調整します.

top

上からの配置位置を指定．(例：top: 20px;で上から20pxの距離に配置)
bottom

下からの配置位置を指定．(例：bottom: 20px;で下から20pxの距離に配置)
right

右端からの配置位置を指定．(例：right: 20px;で右端から20pxの距離に配置)
left

左端からの配置位置を指定．(例：left: 20px;で左端から20pxの距離に配置)

CSS
div{
    width: 700px;
    position: relative;
}

img{
    width: 100%;
}

.btn{
    width: 90px;
    text-align: center;
    border-radius: 3px;
    background-color: #1e90ff;
    color: #ffffff;
    padding: 3px;
    position: absolute;
    bottom: 40px;
    right: 50px;
}

.text{
    width: 400px;
    font-size: 30px;
    color: #ffa500;
    position: absolute;
    top: 25px;
    left: 30px;
}

ボタン

テキストテキストテキスト

これで画像の上に要素を重ねることができました．

もし，これでボタンやテキストなどの要素が表示されない場合はz-indexプロパティを調整することで改善されるかもしれません．

turutani.com

【html,css】画像に文字や要素を重ねる方法

top

bottom

right

left

プロフィール

コメントフォーム