タイトルの作り方

質問

CSSで作ったタイトル付に
お知らせ＿＿＿＿＿＿＿＿＿＿＿＿
｜　　　　　　　　　　　　　　　　　　　　　　｜
｜　　　　　　　　　　　　　　　　　　　　　　｜
｜　　　　　　　　　　　　　　　　　　　　　　｜
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
こんな感じにお知らせの周りを線で囲みたいのですが
どのように設定したらいいんでしょうか？
CSSの中身は

h5 {
border-left:solid 6px #0080ff;
border-bottom:solid 1px #0080ff;
padding-top:2px;
padding-left:4px;
width:500px;
}
----------------------------------------------------
HTMLの中身は
<ul>
<h5>お知らせ</h5>
テストテスト<br>
テスト<br>
test<br>
</ul>

以上であります
どうぞよろしくお願いいたします。

回答No.5

ICHI-yan · ベストアンサー

添削です
html
h5はulの中に入れるのは文法的におかしいです。
<h5>テスト</h5>
<ul class="test">
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
</ul>
これが正解です。更に罫線を全体に入れたいならh5とulを１つのボックスにしてしまいます。
<div>
<h5>テスト</h5>
<ul class="test">
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
</ul>
</div>
この場合、ulに罫でなくdivを罫で囲みます。
それで、h5の位置を少し上にあげて、
背景を白で塗ることにより罫線を消し
ブロック要素をインライン要素にすることで、文字数にあわせ
マージンで罫線を置くまで引き
パディングで罫線と文字の間に空間を空けてみました。

他にも追加すれば、いろいろ楽しいですので、是非、ｃｓｓの本質を学ばれる事をおすすめします。ｃｓｓは単純なことを如何に組み合わせるかです。

ということで私の解答例は以下です。

★html側
<div>
<h5>テスト</h5>
<ul class="test">
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
</ul>
</div>

★ｃｓｓ側を差し替えてみてください
div{
border: 1px solid #0080ff;
padding:10px;
width:400px;
}
h5{position:relative;
top:-20px;
background:white;
display:inline;
margin:0 20px;
padding:0 20px;
}

最初に自力でされた分の罫線と文字がかさなるのはpadding-left:0をpadding-left:10px；にすると右が罫から離れます。

お礼

２度目の指摘、また丁寧な添削ありがとうございます
非常に参考になりました。
感謝してます。　ありがとうございました