スタイルシート（CSS）の中にテーブルのようなスタイルシートをつくりたいです。

Question

Dreamweaver8にてHPを作成しております。

今回CSSをやってみようと思い試行錯誤しながらがんばっているのですが、
現在スタイルシートのfloatタグなどを使って、
ヘッダー、メニュー、コンテンツ、フッターというよくある構成で作っております。
そしてコンテンツ部分以外はテンプレート機能を使い共有できるようにしています。

そして新しいページを作る際、コンテンツ部分だけを編集していくのですが、真ん中で２つにわかれた２段組の文章をつくりたくて、テーブルを使用したところ、テーブルが縦に長くなるとCSSで指定した範囲を超えてしまいレイアウトが崩れてしまいます。

これがテーブルでなく文章でなら縦に長くなっても自動的にCSSの高さが長くなってくれます。

ですので、題名のようにCSSでテーブルのような機能のあるものを教えていただきたいのですが、素人でなにぶん申し訳ないですがよろしくお願い致しますm(_ _)m

NymphLuna · Accepted Answer

横に2つ並べるのでしたら「float: left;」を入れると横に並びます。ただ、テーブル幅を狭く設定して

～

をずらっと並べてしまうと、その分だけ横にテーブルが並んだようになってしまうのでその場合はひとつひとつ指定しなくてはならなくなります。 > 画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。これはテーブルの背景に画像を挿入されているということでしょうか？それとも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記入例

文字など文字など文字など文字など文字など文字など文字など文字など

NymphLuna · Answer

下記間違いがありましたため追記です。

.table{
width: 400px ;/*テーブルの幅*/
background-color: #ffffff;/*テーブルの色*/
margin: 10px;/*テーブルとテーブルの余白（少ない方がよければ1pxに指定）*/
border: solid 1px #cccccc;/*テーブルの枠の色（必要なければ記入しなくても良いです）*/
padding: 0.5em;/*文字周りの余白*/
}

が正しい表記です。大変申し訳ありませんでした。

NymphLuna · Answer

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

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>

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

文字など

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

スタイルシート（CSS）の中にテーブルのようなスタイルシートをつくりたいです。

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

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

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

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング