初めての店舗開業を成功させよう>>

Dreamweaver8にてHPを作成しております。

今回CSSをやってみようと思い試行錯誤しながらがんばっているのですが、
現在スタイルシートのfloatタグなどを使って、
ヘッダー、メニュー、コンテンツ、フッターというよくある構成で作っております。
そしてコンテンツ部分以外はテンプレート機能を使い共有できるようにしています。

そして新しいページを作る際、コンテンツ部分だけを編集していくのですが、真ん中で2つにわかれた2段組の文章をつくりたくて、テーブルを使用したところ、テーブルが縦に長くなるとCSSで指定した範囲を超えてしまいレイアウトが崩れてしまいます。

これがテーブルでなく文章でなら縦に長くなっても自動的にCSSの高さが長くなってくれます。

ですので、題名のようにCSSでテーブルのような機能のあるものを教えていただきたいのですが、素人でなにぶん申し訳ないですがよろしくお願い致しますm(_ _)m

このQ&Aに関連する最新のQ&A

A 回答 (3件)

横に2つ並べるのでしたら「float: left;」を入れると横に並びます。


ただ、テーブル幅を狭く設定して<div class="table">~</div>をずらっと
並べてしまうと、その分だけ横にテーブルが並んだようになってしまうので
その場合はひとつひとつ指定しなくてはならなくなります。

> 画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。
これはテーブルの背景に画像を挿入されているということでしょうか?
それともbodyの中にということでしょうか?
枠線の色をかなり薄いグレーに設定しているので(#cccccc)
そこを別の色に変えると出てきませんか?

> その幅ではできずテキストを入力するにつれて枠線の幅も自動的的に伸びていくという感じです。
下記のCSSの記入方法で何度か試してみたのですが、テキストは延々と伸びていかず
きちんと自動的に折れ曲がってくれるのですが…。spanではなくdivで書かれてみてはどうでしょうか。

CSSファイル例

.table{
float: left;
width: 200px ;/*テーブルの幅*/
background-color: #ffffff;/*テーブルの色*/
background-image : url(sample.gif);/*テーブルの中に入れる画像(画像ファイル名は任意) */
margin: 10px;/*テーブルとテーブルの余白*/
border: solid 1px #000000;/*テーブルの枠の色(今回は黒)*/
padding: 0.5em;/*文字周りの余白*/

html記入例

<body>
<div class="table">文字など文字など文字など文字など文字など文字など文字など文字など</div>
<div class="table">文字など文字など文字など文字など文字など文字など文字など文字など</div>
</body>
    • good
    • 0
この回答へのお礼

できました!
とってもご丁寧なご説明ありがとうございました。

やはりdivが大事だったみたいです!
ありがとうございました!

お礼日時:2007/11/27 20:05

下記間違いがありましたため追記です。



.table{
width: 400px ;/*テーブルの幅*/
background-color: #ffffff;/*テーブルの色*/
margin: 10px;/*テーブルとテーブルの余白(少ない方がよければ1pxに指定)*/
border: solid 1px #cccccc;/*テーブルの枠の色(必要なければ記入しなくても良いです)*/
padding: 0.5em;/*文字周りの余白*/
}

が正しい表記です。大変申し訳ありませんでした。
    • good
    • 0
この回答へのお礼

ご丁寧にありがとうございます。

上記のソースやってみました。
横に2つ並べるのでspanでやりました。

そこで四角いテーブルが作成されました。
ありがとうございます。

また疑問が生まれたのですが、画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。
また枠線の幅をwidthで指定しているはずなのに、
その幅ではできずテキストを入力するにつれて枠線の幅も自動的的に伸びていくという感じです。
この枠線や高さをガチっと固定する方法はありますでしょうか?

お礼日時:2007/11/27 18:09

下記のような表記ではどうでしょうか。



CSS記入部分

.table{
width: 400px ;/*テーブルの幅*/
background-color: #ffffff;/*テーブルの色*/
margin: 10px;/*テーブルとテーブルの余白(少ない方がよければ1pxに指定)*/
border: solid 1px #cccccc;/*テーブルの枠の色(必要なければ記入しなくても良いです)*/
padding: 0.5em;/*文字周りの余白*/

html記入部分

<div class="table">
文字など
</div>
<div class="table">
文字など
</div>

テーブルの幅や色、余白などは任意で変更してください。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング