CSSで横線の引き方を教えてください

htmlのhrではなくて、
url("../images/hr_blue.gif")
的な方法で指定できませんでしょうか？
区切り線を画像で指定したいのですが、htmlが編集できないためCSSでかけないかと思っております。

なにか根本的に間違ってそうな気もしますがよろしくお願い致します

No.3 ベストアンサー 回答者： naokita 回答日時： 2011/01/26 03:15

融通の悪いシステムで、HTMLが触れない場合がありますが、

その場合、NO.2さんが書いてるようにCSSで、
{ margin-top:1em; padding-top:1em; background:url("../images/hr_blue.gif") repeat-x;}

CSSが適応出来て、他要素のセレクタが共通しない事が条件になりますが・・・

画像じゃなくても、hr の代用なら border で可能です。
{ margin-top:1em; padding-top:1em; border-top:1px solid blue;}
bottomでも応用出来ますが。

id,classが個別に設定されていれば、ほぼ何でも出来ますよ。

この回答へのお礼

{margin-top:1em;
background:url("..image.gif") repeat-x;}
だとなぜか出来なかったので、下記で対応しました。

background: url(http://xxx/img/hr_blue.gif) repeat-x bottom;
bottomなんていうのがあったんですね。

まだfont-familyがきちんと指定できてないっぽいですが。

.post {
margin: 0.1em 0px 10px 10px;
/*border-bottom:5px dotted $bordercolor;*/
padding-bottom:5px;
background: url(http://xxx/img/hr_blue.gif) repeat-x bottom;
font-family:'みかちゃん' 'HG丸ゴシック' 'M-PRO';
}

お礼日時：2011/01/26 09:22

No.2 回答者： LOHA 回答日時： 2011/01/25 21:05

実際にソースを見てみなければ分かりませんが、もし入れれるとするならば、線を入れたい場所付近のブロックでpaddingをとって、背景画像でそこに指定することになるかと想定されます。

IEを捨てるならbefore,after使う手もありかもしれません。

＞なにか根本的に間違ってそうな気もしますが
区切り線はデザインなのでCSSで実装しようという試み自体は間違っていないと思います。
HTMLが編集できないというのは間違っている気がしますが。
＃あーでもブログのテンプレとかならあり得そうですね

裏技的な方法としてJavaScriptが使えるならそれで誤魔化すと言う方法もありますが。

この回答への補足

ブログのテンプレをいじっていたんですが、まさにそんな感じの指定方法でした。
もしよければ、background:url( );以外で背景画像を指定できる方法を教えてください。
ボーダーっぽく。。。

補足日時：2011/01/26 09:13

No.1 回答者： taka451213 回答日時： 2011/01/25 21:00

こんばんは。

＞htmlが編集できないため
多分、この時点でアウトです・・・。
CSSで定義するにせよ、対象のIDなりCLASSなりを指定できないと、思ったところには出せません。

この回答へのお礼

できました。

お礼日時：2011/01/26 09:10