文字の下線を画像に変えて表示する方法

質問

http://okwave.jp/qa/q8252180.html
上記の箇所で質問させて頂いたのですが
ちょっと上手くいきませんので
新しく質問させて頂きました

すいません

文字の下線を画像に変えて表示する方法を教わりました。

以下のようにして、したのですが
肝心の画像が表示されないのです

どのようにしたら宜しいでしょうか？

―――――――――――――――――――
Html

<p class="msglink line-2">「原発がなくても、ホントに大丈夫なの～？」<br>
そんな疑問に、楽しく答えてくれる動画です。</p>

////////
Css

p.msglink {
margin: 7px 0 0px 0;
color: #000;
font-size: 9pt;
font-weight: bold;
line-height: 150%;
padding: 10px;
}

p.line-2 {
background: url("img/border1.jpg") no-repeat 0 100%;
margin-bottom: 20px;
padding-bottom: 40px;
}

回答No.1

ORUKA1951 · ベストアンサー

前にも書きましが、そもそも<p class="msglink">のようなHTML自体は、良くないのですよ。
例えば、文書構造でふたつのセクションがあるなら
<div class="aside"><!-- 本文とは直接関係ない記事(aside)を示すclass名 -->
　<div class"section"><!-- 内部に見出しを持つはずのセクションを示す -->
　　<h3>見出し</h3>
　　<p>記事・・・・・・・・</p>
　　<p>記事・・・・・・・・</p>
　　<p>記事・・・・・・・・</p>
　</div>
　<div class"section">
　　<h3>見出し</h3>
　　<p>記事・・・・・・・・</p>
　　<p>記事・・・・・・・・</p>
　　<p>記事・・・・・・・・</p>
　</div>
</div>
とか、
<div class="aside">
　<dl>
　　<dt>タイトル</dt>
　　<dd>記事・・・・・</dd>
　　<dd>記事・・・・・</dd>
　　<dd>記事・・・・・</dd>
　　<dt>タイトル</dt>
　　<dd>記事・・・・・</dd>
　　<dd>記事・・・・・</dd>
　　<dd>記事・・・・・</dd>
　　<dt>タイトル</dt>
　　<dd>記事・・・・・</dd>
　　<dd>記事・・・・・</dd>
　　<dd>記事・・・・・</dd>
　</dl>
</div>
　のようになっているはずです。
★DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )
　など、HTMLの基本です。

　そして、それぞれの項目の境界に区切り線を入れるのでしたら、スタイルシートで
div.aside div.section + div.section:after{
content:"\A"url(画像URL);
width:100%;
white-space:pre;
display:block;height:5px;
}
とか、
div.aside dl+dt{content:"\A"url(画像URL);
width:100%;
white-space:pre;
display:block;height:5px;
}
とか・・・
CSS3でよければborder-imageプロパティを使えば良いです。
　HTMLをデザインのために書いたら、デザインを変えるたびにHTMLを書き換えなければならなくなります。何のためのHTML、構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )が分からなくなる。

回答No.4

dskijisajdi

その線は、<hr/>です。
そのタグの下にimgタグを挿入すればいいですよ。

回答No.3

神崎 渉瑠（@taloo）

画像を適切な場所にアップロードされましたか？

回答No.2

DrFell

htmlはまずいですね。いちいち、msglink、line-2なんて考え方ではなく、1つのまとまり、それの区切りをイメージで表現と考えるべきで、大きな塊の中に、段落とマークアップすると、塊にはクラス名をつけますが、pにはクラス名は入れないですよ。そういう文章構造をhtmlにすべきなのですが、今回は置いておきます。

画像が表示されない理由ですが、
ｃｓｓの置いてある階層からのurlをbackground:urlに入れてますか？
css階層からは、1階層あがってimg階層に行かないと……。相対urlを理解されてますか？

つまり、1階層あがって「..」を使って、自分（cssファイル）のいる位置からの相対urlまたは、絶対urlで正しいurlを表示してみてください。
【例】
background: url("../img/border1.jpg") no-repeat 0 100%;
background: url("http://yasaid***.web.fc2.com/img/border1.jpg") no-repeat 0 100%;