CSS h1要素の左端に画像を表示する方法を教えてください｡写真のように画像(ここでは☆)のあとにﾃｷｽﾄが入るｲﾒｰｼﾞです｡…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

CSS h1要素の左端に画像を表示する方法を教えてください｡
写真のように画像(ここでは☆)のあとにﾃｷｽﾄが入るｲﾒｰｼﾞです｡

●質問者: halappa
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽1 ● a-kuma3
●50ﾎﾟｲﾝﾄ

こんな感じでしょうか｡

H1 {
 background-image: url(画像のURL);
 background-repeat: no-repeat;
 padding-left: ○px; /* 画像の幅だけ､内容を右にずらす */
}

具体的な値を入れて書くと､こんな感じ｡

H1 {
 background-image: url(http://s.hatena.ne.jp/images/star.gif);
 background-repeat: no-repeat;
 padding-left: 16px;
}

halappaさんのｺﾒﾝﾄ
おおおさっそくありがとうございます､やってみます

halappaさんのｺﾒﾝﾄ
できました!!!!

▽2 ● Hiroto
●50ﾎﾟｲﾝﾄ

h1::before{
content: "<img src=\"画像のURL\">";
}

h1要素の前にimgﾀｸﾞを挿入します｡

halappaさんのｺﾒﾝﾄ
ありがとうございます！こちらでもやってみます！

Hirotoさんのｺﾒﾝﾄ
返信ありがとうございます｡今確認してみたのですが､ﾀｸﾞがそのまま表示されてしまいました｡正しくは次の通りでした｡ >|css| h1::before{ content: url("画像のURL"); } ||< 間違えてしまい､本当にすいません｡