ホームページの表作成方法とレイアウト崩れの解決方法
- 住宅やマンションの詳細情報を表で表示するための方法を調べています。tableを使用するとセルとセルが重なって二重線になるため、div要素を使用する方法を試しましたが、Firefoxでのレイアウトが崩れてしまいます。どこを修正すればきれいな表を作成できるでしょうか。
- また、IE7,8,9とFirefox、Chromeでレイアウトが崩れないようにしたいです。アドバイスをお願いします。
- ハッシュタグを5つ作成しますが、内容の詳細がわからないため、適当に作成します。
- ベストアンサー
ホームページにのせる表（内側の枠が一本線）の作り方
よく住宅やマンションなどの詳細情報をのせるのに、 表が使われていますが、それを作りたいと思っています。 tableを使うとセルに枠が出来てしまいセルとセルが重なり二重線になってしまいます。 一本線にする方法を探しましたがjavascriptを使ったものが多く難しくtableは諦めました。 その代わりにdivのネストによる作成方法を見つけました。 http://www.2step-css.com/Begin/step5/item_143.html この方法を参考に作成しました。 しかし、firefoxで見てみるとレイアウトはぐちゃぐちゃ。 その下にあるフッター部分までレイアウトが崩れてしまいました。 参考通りに作ったつもりでしたが、 何が悪いのでしょうか？ きれいな表を作るにはどこを直せばいいでしょうか。 あと、IE7,8,9とfirefox、Chromeでレイアウトが崩れないようにしたいです。 アドバイスを下さい。お願いいたします。 ------------ html ------------- <dir id="box"> <div class="box1"> タイトル欄 </dir> <div class="box2"> コメント欄 </dir> <div class="box1"> タイトル欄 </dir> <div class="box2"> コメント欄 </dir> <div class="box1"> タイトル欄 </dir> <div class="box2"> コメント欄 </dir> <div class="box3"> </dir> </dir> <dir id="box0"> <div class="box1"> タイトル欄 </dir> <div class="box2"> コメント欄 </dir> <div class="box3"> </dir> </dir> ------------ css ------------- #box{ width: 500px; border: 2px #000; } #box0{ width: 500px; border: 2px #000; } .box1{ width: 246px; height: 60px; background-color: #333; color: #fff; border: 2px #000; float: left; } .box2{ width: 246px; height: 60px; background-color: #fff; color: #000; border: 2px #000; float: left; } .box3{ clear:both; }
- orehatens
- お礼率89% (76/85)
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1です。再度チャレンジ。 <html> <head> <title>無題ドキュメント</title> <style> table {border: solid 1px #000000; border-collapse: collapse;} td {border: solid 1px #000000;} td.title{background:#ccc;} </style> </head> <body> <table> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> </table> </body> </html> #2さん、ありがとうございます。灰色が濃くって気がつきませんでした。 ので、すこし薄くしました。
その他の回答 (3)
- k0021
- ベストアンサー率26% (32/120)
.box{ width: 500px; clear:both;} boxの指定を各行の最初に指定したら。 <dir class="box"> <div class="box1"> タイトル欄 </dir> <div class="box2"> コメント欄 </dir></dir> <dir class="box"> <div class="box1"> タイトル欄 </dir> <div class="box2"> コメント欄 </dir></dir> 指定の中にボーダーの指定が無いよう「既に指定済み上のボーダー（枠線）は指定しません」 記述例 枠線の1行目の2列目の指定「既に指定済み左のボーダー（枠線）は指定しません」。 border-style:solid solid solid none;border-color:black;border-width:1px; 私が参考した内容http://ryuso.info/me/se1/tbl01.htm
お礼
ありがとうございました。 無事に解決する事ができました。
- notnot
- ベストアンサー率47% (4848/10262)
横からコメントですが、Firefoxでもちゃんと表示されますよ。 丸ごとコピペすると、コメントじゃない部分に全角空白が入ってるので、それを消さないとその行がエラーで無視されてるんだと思います。
- DrFell
- ベストアンサー率55% (305/551)
表なのだから表でしましょうよ。そのほうが断然ラクですよ。 <html> <head> <title>無題ドキュメント</title> <style> table {border: solid 1px #000000; border-collapse: collapse;} /* 1重の線はここのborder-collapse: collapse が肝*/ td {border: solid 1px #000000} td.title{background:#333;} </style> </head> <body> <table> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> <tr><td class="title">タイトル欄</td><td>コメント欄</td><td class="title">タイトル欄</td><td>コメント欄</td></tr> </table> </body> </html> どーしても、divでやりたいなら、<dir>を<div>に直されてもう一度挑戦されるといいと思います。
お礼
具体的なプログラムを作っていただき有難うございます。 さっそく使わせて頂いたのですが、 firefoxでは回りのborderしか表示されず、 中の線が非表示になってしまいます。 IEではちゃんと理想の形になりました。 あと、コードが間違ってましたね。 全然気が付かなかったです。 <dir>を<div>にして表示しました。 しかし、borderが安定しないです。 表を作成する専用のものでないといけないのですね。 firefoxでも中の線がちゃんと表示させる方法は ネットでいくら探しても見つからないところを見ると そんなものはないのですか？ 何か方法はないでしょうか。
関連するQ&A
- htmlできれいな画像のような表を作りたいです。
htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、 セルとセルの間に空白ができてしまい 思い通りのものができませんでした。 このようなものを作る場合何を利用するのが正しいでしょうか？ ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css"> <!-- .a1 { width:500px; border-collapse:separate; border-spacing:0; } th.a2{ width: 200px; text-align: center; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #330; border-top: 1px solid #330; background-color: #330; color: #fff; } td.a3 { width: 300px; padding: 5px; border-bottom: 2px solid #330; border-top: 2px solid #330; } --> </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </body> </html>
- 締切済み
- HTML
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- テーブルの上と左に白い線を付けたい
下記に書いたのHTMLについて質問があります。 説明が下手かもしれませんが、宜しくお願いします。 このHTMLを書いたら外側が黒枠のテーブルっぽいのがが出るんです、 見出し部分の「ここにタイトル」という緑部分の、上と左部分が白色になってる部分があるんですが、これって新規で作る場合はどんな手順で作ればいいのでしょうか？ 当方使用しているソフトはDreamweaver8です。 <table><tbody><tr><td> <div style="background:#000;font-size:13px;color:#000;padding:1px"><div style="border-width:1px;border-style:solid;border-color:#fff #80dd99 #80dd99 #fff;background:#90eeaa;text-align:center;padding:3px"> ＊ ここにタイトル ＊ </div><div style="margin-top:1px;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;background:#fff;padding:8px"> ここに本文 </div></div> </td></tr></tbody></table>
- ベストアンサー
- HTML
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
- 枠の幅が次のようにすると
画面いっぱいに広がってしまいます どうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <html> <head> <style type="text/css"> <!-- .title { background-color:lightyellow; border-color:blue; border-style:solid; border-width:1px; } --> </style> </head> <body> <div class="title"> 芹沢鴨 </div> </body> </html>
- ベストアンサー
- HTML
- 左右の高さを揃えたいんですが
css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- ベストアンサー
- HTML
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- テーブルの形に沿って画像を作り、貼り付けたら見るブラウザによって余白が生じる。
現在、角丸テーブルを使ってWebページを作っておりまして 角丸部分の形に沿って画像をつくり、貼り付けているのですが、保存しアップしてみると IEでは自分が作ったように見れるのにOperaとFireFoxでは上部分に余白が生じます。 どのようにしたら、余白を無くせるでしょうか？ テーブル部分とその部分のタグはこのようになっています <div align="center"> <div style="width:750"> <div class="kado"> <div class="kado1">-</div> <div class="kado2">-</div> <div class="kado3">-</div> <div class="kado4">-</div></div> <div class="kado5"> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable"> <tr valign="top" style="position:relative; top:-4;"> <td width="5" colspan="4"> <img src="./img/TitleSpace-Left.png" width="5" height="41" alt="TitleSpace"></td> <td width="183"> <img src="./img/Title2.png" width="183" height="41" alt="Title"></td> <td width="557"> <img src="./img/TitleSpace.png" width="557" height="41" alt="Title" ></td> <td width="5"> <img src="./img/TitleSpace-Right.png" width="5" height="41" alt="TitleSpace"></td></tr> </table> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="MenuTable"> <tr style="position:relative; top:-4;"> <td width="33"> <a href="index.htm" target="_self"><img src="./img/HomeIcon.png" width="33" height="25" border="0" alt="ReturnHome"> </a> </td> <td><br></td> </tr> </table> </div> <div class="kado"> <div class="kado4">-</div> <div class="kado3">-</div> <div class="kado2">-</div> <div class="kado1">-</div> </div> </div> </div> 外部読み込みでこの角丸にするためのCSSもいれてます <!-- .kado { background: ./img/wall.png; } .kado1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#fff; } .kado2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#fff; } .kado3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#fff; } .kado4 { margin: 0 1px;height:1px;overflow: hidden; background-color:#fff; } .kado5 { margin:0px; padding:0px; background-color:#fff; } --> おそらく何かがおかしいとは思うのですが、よくわかりません。 下らない質問だとは思いますが、回答の程お願いします。 そのWebページのURIも乗っけておきます。 http://wing2.jp/~movie_village/index2.htm
- ベストアンサー
- CSS
- IE6とIE7でfloatレイアウトのずれ対処法
質問させていただきます。 当方制作のWEBサイトのレイアウトの一部が IE6と7のみで崩れてしまいます。 画像のように、正しくはbox1とbox2を横並びに配置したいのですが、 IE6と7のみbox1の下にbox2がきてしまいます。 FirefoxやOpera.Safariでは崩れません。 具体的な内容は下記です。 画像のような配置で、box1.box2.box3が配置されています。 現在box1.box2.box3のCSSは下記です。 .box1 {float:left; width:60%; height:112px; } .box2{ color:#333; float:none; width:39%; height:108px; overflow:auto; margin:5px; border:2px dotted #6ebef2; background-color:#FFF; padding:0px; font-size: 9pt; } box3 { width : 100% ; height : 20px ; background-color:white; text-align: right; margin-top: 10px; margin-bottom: 10px;} html上では以下のように記述しています。 <div class="box1"> 本文 </div> <div class="box2"> 本文 </div> <div id="box3"> 本文 </div> 何分独学で制作しておりますので、 ここのところで非常につまづいております。 ３時間考えてもできませんでした....。 もし対処法をご存知でしたら、 教えていただけますと大変助かります。 よろしくお願い致しますm(_ _)m
- ベストアンサー
- CSS
お礼
↓のような感じで線を1本で表現することができました。 いろいろヒントを頂き助かりました。 ありがとうございました。 ーーー css ーーー .a { width:500px; border-top:1px solid #000; border-left:1px solid #000; border-collapse:separate; border-spacing:0; cellspacing: 0; } th{ width: 500px; border-right:1px solid #000; border-bottom:1px solid #000; } td { border-right:1px solid #000; border-bottom:1px solid #000; } ーーー HTML ーーー <div class="a"> <table> <tr><th></th></tr> <tr><td></td></tr> </table> </div>