HTML：画像の上に文字を載せる方法

文字を載せた画像を作ってもよかったのですが、文言が変わる可能性と、背景とする画像がセンスないと却下される可能性があるので、画像の上に文字を載せて表示したいと思いました。

方法

今まで作ったことがないので調べたところ、画像を囲う要素にposition: relativeを指定し、文字を囲う要素にposition: absoluteを指定する方法が紹介されていました。

結果

書かれていたことを以下のように当てはめたところ、期待通りの表示になりました。

css

#pageTitle {
    text-align: left;
    font-size: 20px;
    font-weight: bolder;
    margin: 10px 0 10px 0;
    padding: 0;
    position: relative;
    border: solid 1px #e8e8e8;
    height: 30px;
}

#pageTitle div {
    position: absolute;
    top: 6px;
    left: 10px;
}

HTML

<div id="pageTitle">
    <img src="./page_title.jpg">
    <div>メニュー</div>
</div>

簡単にできる内容なので、これからも適宜使っていきたいです。

ソースコード載せるなら、はてな記法が便利ですね。初めて使いました。