スタイルシートでデザイン

質問

style.cssからの読み込みで<div class=""></div>を使いテーブルデザインを行っていますが、スタイルシートで表のように、縦3列横2列等で表示させる方法がわかりません。位置指定で表示させるしかないのでしょうか？

最近スタイルシートを使いはじめ、上記のデザイン方法をいろいろなサイトで調べてみましたがわかりませんでした。方法、又は、わかりやすい参考サイトをお教えいただけると幸いです。

回答No.1

noname#66203 · ベストアンサー

説明がへたくそなので参考になりそうなページをご紹介します。ただスタイルシートで段組するとブラウザによっては全く無視され思いもしなかったデザインになることを頭のすみにおいておかれたほうがよろしいかと。

参考URL：

http://allabout.co.jp/computer/hpcreate/closeup/CU20041111A/index.htm

お礼

ご回答有難うございます。
http://allabout.co.jp/computer/hpcreate/closeup/CU20041111A/index4.htm
スタイルシートでも上記ページのようにデザインできるんですね。まさに求めていた情報にピッタリです。

回答No.4

pingu98

ちょっと、どのようなことをされたいのか不明確なので補足を求めたいところですが、もしページ全体のレイアウトを段組のようなかたちにしたいということであれば、大抵の場合はCSSのfloatを使います。
floatはIEやMozillaで表示のされ方に違いがあり(バグがあり)、使う時にはちょっと注意が必要です。
もし思い通りにいかなかった場合は、検索するか再度具体的に質問されることをおすすめします。

一番分かりやすいのはソースサンプルだと思いますので参考URLに挙げておきます。
このサンプルソースは下記ブログのエントリにあるものです。
http://studio.katati.com/log/eid19.html

参考URL：

http://studio.katati.com/file/test3c.html

お礼

ご回答有難うございます。
スタイルシートのことをよくわかっていないため、どのように質問していいのかもよくわからずお恥ずかしい限りです。ソースサンプルは大変わかりやすいですね！参考にさせていただきます。

回答No.3

koutarou504

スタイルシートが無効の場合というか、
デザインではなくそれぞれのデータの意味，関連性が判りませんと
適切な方法を提示する事が出来ません。

単なる縦３列横２列なら、全てに float:left;
左側の３つそれぞれに clear:both;
あとは、適度に width:xxx;
以上でとりあえずは実現できます。

しかし、ブラウザのバグやスタイルシートを無効にされた場合を配慮すると、
その他のいろいろな方法も検討しないと・・・。
（絶対位置指定から相対位置指定や、
他の要素で囲ってあげる必要があったりといろいろ・・・。）

別に縦に一列表示されてもかまわないとか
崩れても見えれば良しというのであれば、
先の提示の案である程度対応出来ます。
（似たような案件でＰ要素での実績あり。）

詳細な回答を望まれるなら、
改めてデータ内容も提示される事をお勧めします。

お礼

ご回答有難うございます。
ブラウザにより表示されなかったりデザインが崩れる等の理由から今まではスタイルシートを使ったことがありませんでした。しかしウェブデザインのプロの方の多くはスタイルシートを使う？ということらしいので、Dreamweaverを購入し勉強のためにも新たに作成するサイトは全てスタイルシートでデザインしてみるつもりです。あらゆるタイプのブラウザでの表示テスト、スタイルシートが無効にされた場合のデザイン方法は今後勉強しなければなりませんね。おかげさまで知りたかった内容のご回答を得られました。

回答No.2

ao_

補足をお願いします。
＞<div class=""></div>を使いテーブルデザインを行っていますが、

という部分がわからないのですが、CSSで表をデザインしたいということですか？それともCSSだけで三段組にしたいということですか？

お礼

ご回答有難うございます。
私自身スタイルシートを使い始めたばかりのもので分からないことが多く、質問内容が上手に伝わらなかった可能性があり、申し訳ございません。

> CSSで表をデザインしたいということですか？
> それともCSSだけで三段組にしたいということですか？

CSSだけでデザインしたいということになると思いますが、具体的に上記二つはどのような違いがあるのでしょうか？