オシャレな区切り線はありませんか？

ご質問させて頂きます。

ホームページを作成しています。

－－－－－－－－－－－－
オシャレな区切り線はありませんか？

お手数ですが、ご覧頂ければお分かりになると思いますが、

現在、項目と項目とを分ける区切り線は、

＊＊＊
毎日新聞

================

共同通信
＊＊＊＊

No.3 ベストアンサー 回答者： naokita 回答日時： 2013/09/07 01:25

<p class="msgnews">================ </p>

こんな無意味な事↑　↑　↑　はやってはいけません。
　
例えば、下線を背景画像で入れれば良いのでは？

<p class="msgnews">
『１１カ月後の「脱原発」』という特集記事に野菜デモが載りました。
<a target="_blank" href="img/attaka.jpg">紙面を見る </a>
</p>
<p class="msgnews">================ </p>

まずは、上記の例だと、

<p class="msgnews line-2">
『１１カ月後の「脱原発」』という特集記事に野菜デモが載りました。
<a target="_blank" href="img/attaka.jpg">紙面を見る </a>
</p>

と、追加＆削除して、

CSSに、


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

----------------
つまり、
１、上記のようなCSSで画像を入れて、その画像のスペースを開ける。
２、HTML側では、罫線を入れたい
<p class="msgnews">～～～</p>の部分を
<p class="msgnews line-2">～～～</p>のように設定したCSSのセレクタ line-2を入れてやる。

画像はお好きなように・・・

この回答へのお礼

ご丁寧にありがとうございますッ！
とっても参考になりました。

ちょっと上手くいきませんので
新しく質問させて頂きます

お礼日時：2013/09/07 07:12

No.2 回答者： ORUKA1951 回答日時： 2013/09/06 18:40

[例]

<div class="aside">
　<div class="section">
　　<h3>見出し</h3>
　　<p>記事・・・・・</p>
　　<p>記事・・・・・</p>
　</div>
　<div class="section">
　　<h3>見出し</h3>
　　<p>記事・・・・・</p>
　　<p>記事・・・・・</p>
　</div>
　<div class="section">
　　<h3>見出し</h3>
　　<p>記事・・・・・</p>
　　<p>記事・・・・・</p>
　</div>
</div>
　とかになっているべきですから、
div.aside div.section+div.section{
border-top:dotted 2px gray;/* 任意のborder-styleを */
}
あるいは、
div.aside div.section{
box-shadow:10px 10px 10px rgba(0,0,0,0.4);
}
とか・・

この回答へのお礼

ありがとうございますッ！
とっても参考になりました。

お礼日時：2013/09/07 07:13

No.1 回答者： play_with_you 回答日時： 2013/09/06 17:35

http://www.htmq.com/style/border.shtml

この中のどれもいやなら、画像でやる以外方法はありません。

この回答へのお礼

ありがとうございますッ！
とっても参考になりました。

お礼日時：2013/09/07 07:14