スタイルシートでテーブルのようなスタイルを作りたい
- Dreamweaver8を使ってHPを作成中。CSSを使用してヘッダー、メニュー、コンテンツ、フッターのレイアウトを作成中。
- 新しいページを作成する際、２段組の文章を作りたいが、テーブルを使用するとCSSの範囲を超えるためレイアウトが崩れてしまう。
- テーブルではなくCSSでテーブルのような機能を実現する方法を知りたい。
- ベストアンサー
スタイルシート（CSS）の中にテーブルのようなスタイルシートをつくりたいです。
Dreamweaver8にてHPを作成しております。 今回CSSをやってみようと思い試行錯誤しながらがんばっているのですが、 現在スタイルシートのfloatタグなどを使って、 ヘッダー、メニュー、コンテンツ、フッターというよくある構成で作っております。 そしてコンテンツ部分以外はテンプレート機能を使い共有できるようにしています。 そして新しいページを作る際、コンテンツ部分だけを編集していくのですが、真ん中で２つにわかれた２段組の文章をつくりたくて、テーブルを使用したところ、テーブルが縦に長くなるとCSSで指定した範囲を超えてしまいレイアウトが崩れてしまいます。 これがテーブルでなく文章でなら縦に長くなっても自動的にCSSの高さが長くなってくれます。 ですので、題名のようにCSSでテーブルのような機能のあるものを教えていただきたいのですが、素人でなにぶん申し訳ないですがよろしくお願い致しますm(_ _)m
- 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> テーブルの幅や色、余白などは任意で変更してください。
関連するQ&A
- 【CSS】不具合の原因がわかりません。
すいません、少しややこしいかもしれませんが・・・。 下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に clear: both; float: none; をかけると不具合なく表示されます（縦に3つ並びます）。 ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。 （企業によるガイドラインなので詳しくは書けません。すいません・・・。） 「フッタ」から clear: both; float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。 いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり（左右ではなく上下でも）、高さを指定したりするだけでずれてしまいます。 原因は何が考えられるでしょうか？ よろしくお願い致します。 ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }
- 締切済み
- HTML
- FirefoxだとCSSで作ったフッターが崩れてしまいます
お世話になります。現在、CSSにて2段組にて ヘッダー・メニュー・コンテンツ・フッター部分にレイアウトを 切り分けてサイトを作っておりますが IEだと私が意図した通りに表示されるのですが、FireFoxだと フッター部分のレイアウトが、コンテンツ部分にかぶってしまい レイアウトがぐちゃぐちゃになってしまいます。 #cover { width: 700px; height: 100% } #menu { width: 150px; height: 100%; float: left } #main { width: 550px; height: 100%; float: right } #footer { width: 700px; clear: both } こちらが、htmlです。 <div id="cover"> <div id="main">コンテンツ</div> <div id="menu">メニュー</div> <csobj csref="a.html" h="259" occur="27" t="Component" w="700"> <div id="footer">フッター</csobj></div> </div> ※このcsobjは、Goliveのコンポーネント機能を使って １つの外部ファイルからリンクさせることによって、 ヘッダー部分に変更が生じたら、全ページを一括で更新できる 機能を使っています。SSI(サーバーサイドインクルード)みたい なやつでしょうか。 とても困っていますので、詳しい方ぜひご教授ください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSのテーブルの縦100%について
CSSの縦100%指定について伺います。 現在、三行二列のテーブルを、縦100%のレイアウトにしようとしております。 上段一行は一列に統合して、ヘッダーを入れます。 下段一行は一列に統合して、フッターを入れます。 一行目と三行目の縦幅をピクセルで指定して、 二段目の高さをautoに指定し、 テーブル全体の縦の高さを100％にして、 ウィンドウサイズが変わったときに二段目のみが伸縮するように 出来るものでしょうか。 お分かりの方、どうぞご助言をお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
- dreamweaverでテンプレートを作りたいのですが、
dreamweaverでテンプレートを作りたいのですが、 サイト内はヘッダ(ナビバー)とフッタのみ統一で背景画像やコンテンツのレイアウトも各ページまちまちにするように言われました。。 背景画像はcssでbodyに指定していますが、bodyの中のコンテンツ部分を選択して編集可能領域にすると、コンテンツ以外のbodyの背景も編集できない部分になり、ページ共通になってしまいます。 bodyの背景とコンテンツを編集可能領域にしたいのですが、どうしたらいいかわかりません。 それとも、テンプレートは使わず、ヘッダを更新する場合、置き換え機能でも、サイト内のすべてのページに反映させることが出来るのでしょうか ？？？ 初心者ですみませんが、どなたかお願いします。
- ベストアンサー
- HTML
- CSS初心者 コンテンツ高さに合わせたメニュー領域の背景色
CSS初心者です。 Win IE6 環境で制作しています。 「メニュー」部分（右側）と「コンテンツ部分」（左側）とに分けて２段組で外部CSSでのページレイアウトに挑戦しているのですが、なんとかテーブルでのレイアウトを全部外して、形にはなったのですが、表題のようにコンテンツの高さに合わせて、メニュー領域の背景色を付けることが出来ません・・・。 CSSは .contents { width:770px; text-align:center; } （全体のコンテンツ領域） .contents-left { width:550px; float: left; text-align:center; } （←コンテンツ部分） .contents-right { width:200px; vertical-align:100%; } (←メニュー部分） .footer { width:770px; text-align:center; clear: both; } （フッター） とし、 メニューを囲んでいるDiv要素には .menu_box { background-image:url(img/menuback.gif) ; width:197px; vertical-align:100%; } としています。 いといろと試行錯誤していて「vertical-align:100%;」または「vertical-align:bottom;」などを付けてみましたが、ダメでした。 教えてください。よろしくお願いします。
- ベストアンサー
- CSS
- floatを使わずに、cssレイアウトって可能でしょうか？
例えば、現在見ているこのページのように、ヘッダーとフッターがあり、コンテンツが左右二つのカラムで成り立っているようなレイアウトを、floatでなくpositionで、レイアウトすることは可能でしょうか？ （その際、左右どちらのカラムの方が、高さが高くなっても、レイアウトが崩れないように。） floatを使いたくない理由は、親ボックスからはみ出さないように、ハック（clearfix）を使わないといけないからです。
- ベストアンサー
- CSS
- Dreamweaver8でテーブルをCSSで作るには
Dreamweaver8使っています。 テーブルをCSSで作るにはどうすればいいのでしょうか。今までテーブルレイアウトでしたのでやり方が不明です。
- 締切済み
- ホームページ作成ソフト
- スタイルシートでのレイアウトについて
スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。 -HTML- <div id="outline"> <div class="main"> メイン上部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド上部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="main"> メイン下部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド下部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="footer"> フッター部分 </div><!-- end footer --> </div><!-- end outline --> -CSS- #outline{ width : 750px ; text-align : left ; border : solid 1px #000000 ; } .main { width : 200px ; background : #ebebeb ; margin-bottom : 10px ; float : left ; } .side { width : 540px ; background : #ebebeb ; margin-bottom : 10px ; float : right ; } .c-both { clear : both ; } .footer{ width : 100% ; background : #ebebeb ; } そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか？ あと、メイン上部コンテンツ部分・サイド上部メニュー部分、メイン下部コンテンツ部分・サイド下部メニュー部分の下に、同じように行を追加したいのですが、どうしたら良いでしょうか？ スタイルシートの段組みで、非常に困っています。 助けて下さいm(_ _)m
- 締切済み
- その他（プログラミング・開発）
- ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。 一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、 ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、 ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。 現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。 つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。 しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？ １週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。
- ベストアンサー
- HTML
- dreamweaver cs3 でのホームページ作成について
お世話になります。 以前HPBで全てテーブルレイアウトで添付画像のようなHPを作成致しました。 サイトのページ数が約15枚ほどで、画像の「1,ヘッダー」 「3,左メニュー」「4,フッター」は全てIフレームにして別のHTMLを表示させるようにしています。 「1,ヘッダー」「3,左メニュー」「4,フッター」は全てのページで共通 で表示され「3,コンテンツ」のみ内容が切り替わるようにしています。 この度ページを更新しようと思ったのですが、段々と左メニューやコンテンツ、フッター等内容が多くなってきてしまい、なおかつテーブルの入れ子に次ぐ入れ子という感じでレイアウトしていたために、どれがどのテーブルかわからず、レイアウトを調整しようと色々といじっていたらレイアウトがぐちゃぐちゃになってしまいました。 そこでこの際勉強も兼ねて一からサイトを作り変えようと思っております。ソフトはdreamweaver cs3でやってみようかと思っています。 cssを使って何とか添付画像のようなレイアウトは作れたのですが、 ヘッダー内や左メニュー内にも細かな段組みレイアウトが作れません。 通常細かな段組み（ヘッダー部分のメニューや左メニューのレイアウト）についてはやはりテーブルでのレイアウトが正しいのでしょうか？ まだdreamweaver cs3も使い始めて間もないもので細かなレイアウトの方法などが理解できていません。今後のサイト更新のためにも分かりやすい形で作りたいのですが・・・。 どなたかレイアウトについての参考URLや方法などご存知の方がいらっしゃいましたらご教授下さいませ。 よろしくお願い申し上げます。
- ベストアンサー
- ホームページ作成ソフト
お礼
できました！ とってもご丁寧なご説明ありがとうございました。 やはりdivが大事だったみたいです！ ありがとうございました！