Q&A詳細

表組み風にするには幅を指定して float:left にします

はじめまして。すぐ使える株式会社の井上と申します。

横3×縦2 などの表示は、横幅を決めた div を float:left で連記することで実現できます。

*CSSで表組みするコードの例
<div style="width: 900px"> ←外枠

<div style="width: 300px; float:left">....</div> ←セル1つに該当
<div style="width: 300px; float:left">....</div>
:(6個分)

</div> ←外枠の終わり

**留意点
上記のように単純にサイズ指定するとセルに該当する<div>の中身やブラウザ、DTDによってはセル2つで折り返しされてしまう場合もありますので、CSS指定は参考書などを見ながら工夫して下さい。


[[ご参考:表組み風の画像一覧を作る方法:http://sugutsukaeru.jp/support/165/]]
PR---[[5,250円のCMS「すぐ使えるCGI」:http://sugutsukaeru.jp/]]

井上 みやび子 システムエンジニア   
（代表取締役）

必要なものだけのシンプル設計

システム開発・導入全般 Webアプリ・WEBシステム開発 CMSサイト構築

　

Floatを使用して作ればいいと思います。

はじめまして、シンクライズの吉村です

CSSで3分割で表示させるのであれば
Floatで左のみを使用して
横幅を指定して一段目の並びを作っていく事が良いかと思われます。

参考例
.botan{ float:left; width:200px;}
.clear{ clear:both;}

clearは2段目を入れる際に、回り込みをクリアにし
それから同じ用に作るようにします。

TABLEタグについては、利用用途によって使い分けた方がよろしいかと思います
主にTABLEタグは表等に使用する事が多く、レイアウトでい使用する際はTABLEタグを使わない方がいいです。

ご参考になれば幸いです

ホームページ制作|株式会社シンクライズ
http://syncrise.co.jp

noname

CSSなら外部ファイルに

こんにちは、アイズ･プロダクションの早川です。

ご質問のようなことはもちろん、floatプロパティを使えば実現できます。
その時、メニューということでしたら、リストタグを使うのが一般的でしょう。

「縦2」で横幅を均等にということでしたら一つの案として書き方の例をあげておきます。

*書き方例

htmlに

<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
<ul>
<li>メニュー4</li>
<li>メニュー5</li>
<li>メニュー6</li>
</ul>

と記述し、スタイルシートで

ul {
width:300px; /*3つのメニュー全体の任意幅
list-style-type:none;
}
li {
width:33%;
''float:left;''
text-align:center;
}

と書くのが簡単です。

ひとつ、老婆心で申し添えると、「TABLEタグは使わない方がいいという話をよく聞く」というのはいろいろな意味があると思いますが、「SEOの観点から使わない方がよい」ということを意識するのであれば、CSSは外部ファイルにすることをお勧めします。

ご参考になりますように

早川　ヒカル ITコンサルタント   
（代表取締役）

中小企業等のIT化支援と社員のITリテラシー強化を行う

IT教育・IT活用 データベース構築・導入 Webサイト制作全般 IT・パソコンスキル