株式会社ネーブルス 社長のブログ
株式会社ネーブルス 代表取締役 福田一成のブログです。アメーバブログはこちら
2010-01-06 HTML覚書（div表組み）
<div>を表組みで使う場合
test.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div class="sotowaku">
<div class="retu_saisho">test1</div>
<div class="retu_hoka">test2</div>
<div class="retu_hoka">test3</div>
<div class="retu_hoka">test4</div>
<div class="retu_saisho">test5</div>
<div class="retu_hoka">test6</div>
<div class="retu_hoka">test7</div>
<div class="retu_hoka">test8</div>
</div>
</body>
</html>
スタイルシートは、以下の様にする。
test.css
div.sotowaku {
width: 400px;←サイズを合わせる
}
div.retu_hoka {
float: left;←左詰にする（横に並べる）
width: 100px;
height:20px;
border: 1px solid;
}
div.retu_saisho {
clear:both;←改行になる
width: 100px;
height:20px;
border: 1px solid;
float:left;←左詰にする（横に並べる）
}
floatとは、表示位置の指定を行います。
同時に回り込みの設定がされます。
次のオブジェクトが前のオブジェクトの
右側に回りこむため列として表示されます。
clearは、回り込みの設定を解除します。
今まで右側に回り込んでいた状態を解除したため
改行され表示されます。
DHTMLの目的からすると
「表は表用のタグを使用して、
レイアウトはレイアウト用のタグを使用して下さい。」
なのです。
今までレイアウトに表用のタグの使用が多発したことによって
正しく使い分けましょうとDHTMLの規格ができたのに
私は、レイアウト用のタグで表を作る事を考えてます。
・・・。
システム開発費用の概算を、オンライン上でご提示いたします。（所要時間：3分／無料）
お問い合せする事なく、費用感をお確かめいただけます。お気軽にご利用ください。
↓↓↓
