http://oshiete.goo.ne.jp/qa/8252180.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ベストアンサー
- 回答日時:
前にも書きましが、そもそも<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-html4 … )
など、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-html4 … )が分からなくなる。
No.2
- 回答日時:
htmlはまずいですね。
いちいち、msglink、line-2なんて考え方ではなく、1つのまとまり、それの区切りをイメージで表現と考えるべきで、大きな塊の中に、段落とマークアップすると、塊にはクラス名をつけますが、pにはクラス名は入れないですよ。そういう文章構造をhtmlにすべきなのですが、今回は置いておきます。画像が表示されない理由ですが、
cssの置いてある階層からの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%;
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
line-height指定で発生する余白...
-
一括で全体を右にずらす
-
article、section、hgroup?
-
div要素が重なってします
-
html5でheaderの中にnav
-
ブログのサイドバーが下にくる
-
オシャレな区切り線はありませ...
-
グラフィックス
-
idとclassの指定方法
-
HTML属性での「""」 「''」違い
-
<div>テキスト</div>
-
html divボックスの入れ子で中...
-
html5にて水平線の引き方は?
-
HTMLとCSSの次に覚えることは何...
-
html の divとtable の役割
-
h1のテキストサイズよりh2の方...
-
【html&css】太さの違う2本線の...
-
改行がしたいのですが、うまく...
-
携帯サイト、ナノでのタグ編集...
-
コンピューターの画像ブロック
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報