• ベストアンサー

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

ご質問させて頂きます。 ホームページを作成しています。 ------------ オシャレな区切り線はありませんか? お手数ですが、ご覧頂ければお分かりになると思いますが、 現在、項目と項目とを分ける区切り線は、 *** 毎日新聞 ================ 共同通信 ****

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.3

<p class="msgnews">================ </p> こんな無意味な事↑ ↑ ↑ はやってはいけません。   例えば、下線を背景画像で入れれば良いのでは? <p class="msgnews"> 『11カ月後の「脱原発」』という特集記事に野菜デモが載りました。 <a target="_blank" href="img/attaka.jpg">紙面を見る </a> </p> <p class="msgnews">================ </p> まずは、上記の例だと、 <p class="msgnews line-2"> 『11カ月後の「脱原発」』という特集記事に野菜デモが載りました。 <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; } ---------------- つまり、 1、上記のようなCSSで画像を入れて、その画像のスペースを開ける。 2、HTML側では、罫線を入れたい <p class="msgnews">~~~</p>の部分を <p class="msgnews line-2">~~~</p>のように設定したCSSのセレクタ line-2を入れてやる。 画像はお好きなように・・・

sato1221
質問者

お礼

ご丁寧にありがとうございますッ! とっても参考になりました。 ちょっと上手くいきませんので 新しく質問させて頂きます

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

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

sato1221
質問者

お礼

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

回答No.1

http://www.htmq.com/style/border.shtml この中のどれもいやなら、画像でやる以外方法はありません。

sato1221
質問者

お礼

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

関連するQ&A

専門家に質問してみよう