メニュー(<HR><DIV>)

[新着] Webテンプレートを仮オープンしました

0   名前： 匿名 ： 2006/08/12（土） 12:03  ID:CJPDO/8w
【何をしたいのか】
＿＿＿＿＿＿＿＿＿
■　　 TOP ■
―――――――――
↑このように両端の■を固定して真ん中の文字をcenter揃えにしたい

【現在の状況】

＿＿＿＿＿＿＿＿＿
■
TOP
　　　　　　　　■
―――――――――
↑のように<BR>等を入力していないにも関わらず改行されてしまいます；

【何をしてみたのか】

<HR>タグ,<DIV>タグの特性について調べてみました。
<HR><div align="left">■</div><div align="center">T O P</div><div align="right">■</div><HR>
↑このようなソースを入力致しました。
「TOP」と共に■をセンター揃えするといけることはいけますが■はどうしても両端で固定したいです。

1   名前： m035 ◆Wpzr1YKOiq ： 2006/08/12（土） 12:03  ［URL］  ID:4KIacXXc
divの特性について調べたならどうして>>0のように表示されるのか、分かるはずなのですが･･･
divを使うのであれば、CSSでfloatを使うと出来そうです。
http://www.tagindex.com/stylesheet/box/float.html

怪しいですが例としては以下でできました。
<div style="float:left;text-align:left;width:33.3%">■</div>
<div style="float:left;text-align:center;width:33.3%">TOP</div>
<div style="float:left;text-align:right;width:33.3%">■</div>
2   名前： カヅサツ ◆ThCi95HEzw ： 2006/08/12（土） 12:03  ［URL］  ID:f0UXxXRM
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>

3   名前： 匿名 ： 2006/08/12（土） 12:03  ID:sLEyVFWK
教えて頂いた様にやってみましたが、
__________________
■ TOP
■
------------------

↑このようになってしまいます。
TABLEﾀｸﾞで何とかしてみます。
有難う御座いました。
4   名前： 初心者デス ： 2006/08/12（土） 12:03  ID:9jBkBFCV
更新記録用に貼り付けしたいと思っている物がリます。


【1】
<DIV style="border:dotted 1px #ffffff;height:115px;overflow:auto;"> <p align=Left>
ココに文字
</p></DIV>



【2】
<div style="width:480px; height:120px; overflow:scroll; border-color:#a4d3a3; border-style:dotted; border-width:2px 2px 2px 2px; color:#666666; font-size:9pt; background-color:#FFFFFF; scrollbar-3dlight-color:#bcd1bd; scrollbar-arrow-color:#bcd1bd; scrollbar-base-color:white; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:white; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#bcd1bd;"> <p align=Left>
コチラに文字。
</p> </div>


【1】ではテキストリンクが出来ないので、【2】を使用してみたのですが、
それだと下の方に余計な部分が出てしまうので、どうにかしたいのです。
どこを修正すれば良いのか教えて下さい。
5   名前： ごめんなさい ： 2006/08/12（土） 12:03  ID:9jBkBFCV
上記は記入場所（投稿先）を間違えて投稿してしまいました。。。
一覧へ戻る