タイトルの作り方

質問

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；にすると右が罫から離れます。

お礼

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

回答No.6

noname#213810

ANo.4です。
fieldset要素は本来フォーム関連に使われるので、ICHI-yanさんのやり方のほうがいいかも知れませんね。
大変参考になりました。

回答No.4

noname#213810

私だったら、以下のHTMLに適当にCSSで装飾しますがどうでしょうか？

<fieldset>
<legend>タイトル</legend>
<ul>
<li>内容</li>
</ul>
</fieldset>

お礼

これも知らなかったです＞＜
ありがとうございます。

回答No.3

k0021

>padding-top:1px solid #0080ff;
はborder-topの誤りですか

わたしの場合　padding　を指定しています
作成例
.bka {border:1px solid black;padding:17px 9px;}

お礼

こんな機能もあるんですね。
ありがとうございます。

回答No.2

ICHI-yan

htmlは、文章に構造的な要素に印をつけます。
cssでは、そのhtmlに装飾的な見た目を施します。

２つがかみ合っていないとうまくできません。htmlで印をつけていると、それに適したｃｓｓが用意されていることが多いです。

たぶんしたいことは
大枠で囲む中に見出しと説明文（又は箇条書き）をいれる。
大枠を見出し部分を外して罫線で囲む事だと思います。

beginners9さんのhtmlでは
箇条書きです
　見出しです
　文章です
箇条書き終わりです。
になっています。

htmlでの約束では箇条書き「ul」の中身は「li」でなければいけません。が、そのようなものは入っていません。

というように、基本が全くできていないので、これから質問を繰り返して一時的解決だけをしていくより、基本を学んでそれから他を参考にする方が、結局は早いのです。足し算、引き算、掛け算もできないのに、割り算を教わるようなものです。

ヒントとしては、構造を理解し、ブロック要素、インライン要素を理解し、ブロッキングした上でpositionで位置をずらすといいと思います。

補足

指摘、お返事ありがとうございます。
なんとか出来たと思います＞＜
確認よろしくお願いいたします。

----------------------------------------------
HTML

<ul class="test">
<h5>テスト</h5>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
</ul>
----------------------------------------------
CSS
ul.test{
border-left: 1px solid #0080ff;
border-bottom:1px solid #0080ff;
border-right: 1px solid #0080ff;
padding-top:1px solid #0080ff;
padding-left:0px;
width:400px;
}
----------------------------------------
どうでしょうか？
枠内の文字が線に重なりかけてるのが気になりますが・・・
また指摘の方よろしくお願いいたします

回答No.1

Nine-nine

罫の種類も指定してください。
色、種類（形）、太さがそろって初めて惹かれます。
h5{border:solid 6px #0080ff;}
要素{プロパティ：値;}です。

htmlの中身も文法的にありえないですので、基本を勉強されることをおすすめします。もし、仮に表示が上手くされていても、ブラウザが拡大解釈しています。

補足

指摘、お返事ありがとうございます。
なんとか出来たと思います＞＜
確認よろしくお願いいたします。

----------------------------------------------
HTML

<ul class="test">
<h5>テスト</h5>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
</ul>
----------------------------------------------
CSS
ul.test{
border-left: 1px solid #0080ff;
border-bottom:1px solid #0080ff;
border-right: 1px solid #0080ff;
padding-top:1px solid #0080ff;
padding-left:0px;
width:400px;
}
----------------------------------------
どうでしょうか？
枠内の文字が線に重なりかけてるのが気になりますが・・・
また指摘の方よろしくお願いいたします