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

質問

ご質問させて頂きます。

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

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

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

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

＊＊＊
毎日新聞

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

共同通信
＊＊＊＊

回答No.3

naokita · ベストアンサー

<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を入れてやる。

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

お礼

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

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

回答No.2

ORUKA1951

[例]
<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);
}
とか・・

お礼

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

回答No.1

play_with_you

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

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

お礼

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