div要素とは、主に、他の「段落」や「見出し」などのブロックをグルーピングするためのものです。
カヅサツのウェブサイト
私のウェブサイトへようこそ
上記のうち、上の行は「見出し」ですから h1、下の行は「段落」ですから p要素にします。
<h1>カヅサツのウェブサイト</h1>
<p>私のウェブサイトへようこそ</p>
多くのブラウザでは、h1要素を大きい太字にすることで「見出し」を表現するのですが、それが気に入らなければスタイルシートで変更することができます。例えば「色は赤でセンタリング。太さと大きさは通常のまま」など。
h1{
color: red;
text-align: center;
font-weight: normal;
font-size: 100%;
}
一方、見出しと段落両方を、枠線でくくりたいという場合、div要素の出番です。
class属性か id属性で適切な名前を付けてやり、その名前に対してスタイルシートを適用します。
<div id="title">
<h1>カヅサツのウェブサイト</h1>
<p>私のウェブサイトへようこそ</p>
</div>
div#title{
border-width: 1px;
border-style: solid;
}
さて、今回のご質問のテキスト場合は、見出しのようですので、div要素でなく、h1〜h6のいずれかになります(1〜6のどれが適切かは、文書構造による)。
以下にサンプルを書きましたが、ここは HTML質問板ですので、「見栄えに」関する事柄については詳しく解説しません。サンプルを読んでも分からない場合、スタイルシート質問板か、総合質問板へどうぞ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
h1{
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: black;
width: 50%;
text-align: center;
}
.deco_left{
display: block;
float: left;
}
.deco_right{
display: block;
float: right;
}
</style>
</head>
<body>
<h1>
<span class="deco_left">■</span>
TOP
<span class="deco_right">■</span>
</h1>
</body>
</html>
