- ベストアンサー
スタイルシートでテーブルのようなスタイルを作りたい
- Dreamweaver8を使ってHPを作成中。CSSを使用してヘッダー、メニュー、コンテンツ、フッターのレイアウトを作成中。
- 新しいページを作成する際、２段組の文章を作りたいが、テーブルを使用するとCSSの範囲を超えるためレイアウトが崩れてしまう。
- テーブルではなくCSSでテーブルのような機能を実現する方法を知りたい。
- torananoda
- お礼率48% (410/838)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （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>
その他の回答 (2)
下記間違いがありましたため追記です。 .table{ width: 400px ;/*テーブルの幅*/ background-color: #ffffff;/*テーブルの色*/ margin: 10px;/*テーブルとテーブルの余白（少ない方がよければ1pxに指定）*/ border: solid 1px #cccccc;/*テーブルの枠の色（必要なければ記入しなくても良いです）*/ padding: 0.5em;/*文字周りの余白*/ } が正しい表記です。大変申し訳ありませんでした。
お礼
ご丁寧にありがとうございます。 上記のソースやってみました。 横に２つ並べるのでspanでやりました。 そこで四角いテーブルが作成されました。 ありがとうございます。 また疑問が生まれたのですが、画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。 また枠線の幅をwidthで指定しているはずなのに、 その幅ではできずテキストを入力するにつれて枠線の幅も自動的的に伸びていくという感じです。 この枠線や高さをガチっと固定する方法はありますでしょうか？
下記のような表記ではどうでしょうか。 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> テーブルの幅や色、余白などは任意で変更してください。
お礼
できました！ とってもご丁寧なご説明ありがとうございました。 やはりdivが大事だったみたいです！ ありがとうございました！