初めてCSSをデザインに取り入れたらレイアウトが崩れてしまいました
- 初めてCSSをデザインに取り入れたらレイアウトが崩れてしまいました。スクロールバーが付いているテキストボックスの下に文字や画像を入れると、表示が崩れてしまいます。
- テキストボックスの高さを大きな数字に指定すれば表示は正しくなりますが、指定したい高さとは異なります。同じような問題があった他の方の解決法も参考になるかもしれません。
- 質問内容のコードや他のユーザーの解決法を参考に、CSSの設定を見直してみてください。解決策が見つからなければ、CSSを使用する際の他の注意点なども調べてみると良いでしょう。
- ベストアンサー
初めてCSSをデザインに取り入れたらレイアウトが崩れてしまいました・・。
dreamweaverMX2004を使用しているホームページ作成初心者です。 スクロールバーが付いているテキストボックス（更新画面用）の下に文字なり画像なりを入れると、なぜかだいぶん間が空いて表示されてしまいます。テキストボックスの高さを400くらいの大きな数字を指定すると間はなくなるのですが、どうしても高さ200～250くらいに指定したいんです…。 参考になるかも知れないので、コードを貼り付けておきます。 以前、教えてgooで同じような質問があって、そのときにどなたかが、 http://cssbug.at.infoseek.co.jp/detail/winie/b053.html を紹介していたので、もしかしたらこの状態なんでしょうか？あるいは、決定的なミスをしているのでしょうか？ どなたかご存じの方、いらっしゃったら、どうぞお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .style1 { color: #000000; font-size: 12px; } .style2 {font-size: 12px} .style4 {color: #000099; font-weight: bold; } --> </style> </head> <body> <style type="text/css"><!-- html, body { scrollbar-base-color: #D5D0F7; } --></style> <table width="800" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="279" height="357"> </td> <td colspan="2" valign="top"><style type="text/css"> <!-- .memo { width: 470px; height: 220px; overflow: auto; } --> </style> <div class="memo style1"> <p align="left" class="style1 style2"> </p> <p align="left"><span class="style4">2008年1月4日更新</span><br> あけましておめでとうございます。<br> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2">あけましておめでとうございます。<br> </p> </div></td> </tr> <tr> <td height="43"></td> <td width="248" valign="top">pppp</td> <td width="273"> </td> </tr> </table> <br> </body> </html>
- riko421
- お礼率75% (62/82)
- その他([技術者向] コンピューター)
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
#1～#3です。少し変更しましたので変更と追加部分をアップします。 【変更部分】 #my_body{ margin:0 auto; width:820px;/* #photo1＋#contents＋20pxになるように */ } #photo2{/* 小さな画像を入れる部分 */ width:100%;/* この数値は変更しないでください */ height:230px;/* ←この部分を変更してください。画像よりも少し大きな高さに */ padding:5px;/* 小さな画像まわりの余白（不必要でしたら削除）*/ background-image : url(画像ファイル);/* 画像ファイルへのパス */ background-position:center center;/* 中央になるように設定 */ background-repeat: no-repeat; clear:both; } .memo{ margin:20px 10px;/* ←この部分を変更してください。上下に20pxの余白、左右に10pxの余白 */ width:470px; height:220px; overflow:auto; } .memoの「margin:20px 10px;」ですが「20pxで上下指定」「10pxで左右指定」になります。 上下の位置を下げたい場合は、20pxを大きな数値にしてみてください。 但し、あまりに大きな数値にしてしまうとずれてしまいますので 左の写真サイズとのバランスを考慮なさって、適宜なpx指定をしてください。 【追加部分】 .style1{ color:#000000; font-size:12px; text-align:left;/* テキストが左寄せになります */ } .style3{ color:#000000;/* 文字色は任意で変更してください */ font-size:12px;/* 文字の大きさは任意で変更してください */ line-height:150%;/* テキストの間隔が広がりますので見やすくなります */ } HTML部分修正 <div id="my_body"> <div id="photo1">写真が入る部分のため文字など入れてはいけません</div> <div id="contents"> <div class="memo"> <p class="style1"> </p> <p class="style1"><span class="style2">2008年1月4日更新</span><br> あけましておめでとうございます。</p><br> <p class="style1"> </p> <p class="style1"> </p> <p class="style1"> </p> <p class="style1"> </p> <p class="style1"> </p> <p class="style1"> </p> <p class="style1"> </p> <p class="style1">あけましておめでとうございます。</p> </div> </div> <div id="photo2">画像が入る部分のため文字など入れてはいけません</div> <br> <div class="style3">テキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキスト<br></div> </div> 申し訳ありませんが、今はこれが精一杯です。どうか頑張ってください。
その他の回答 (3)
#1、#2です。すみません、これでいいでしょうか？カスタマイズはお任せします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ scrollbar-base-color: #D5D0F7; } #my_body{ margin:0 auto; width:820px;/* #photo＋#contents＋20pxになるように */ } #photo1{/* 写真を入れる部分 */ float:left; width:320px;/* 写真よりも少し大きな幅に */ height:350px;/* 写真よりも少し大きな高さに */ background-image : url(写真ファイル);/* 写真ファイルへのパス */ background-position:center center;/* 中央になるように設定 */ background-repeat: no-repeat; } #contents{/* 更新ボックスを入れる部分 */ float:left; width:480px;/* 更新ボックスよりも少し大きな幅に */ height:350px;/* #photoと必ず同じ値に */ } #photo2{/* 小さな画像を入れる部分 */ width:100%;/* この数値は変更しないでください */ height:150px;/* 画像よりも少し大きな高さに */ padding:5px;/* 小さな画像まわりの余白（不必要でしたら削除）*/ background-image : url(画像ファイル);/* 画像ファイルへのパス */ background-position:center center;/* 中央になるように設定 */ background-repeat: no-repeat; clear:both; } .memo{ margin:20px 5px;/* 上下に20pxの余白、左右に10pxの余白 */ width:470px; height:220px; overflow:auto; } .style1{ color:#000000; font-size:12px; } .style2{ color:#000099; font-weight:bold; } --> </style> </head> <body> <div id="my_body"> <div id="photo1">写真が入る部分のため文字など入れてはいけません</div> <div id="contents"> <div class="memo"> <p align="left" class="style1"> </p> <p align="left" class="style1"><span class="style2">2008年1月4日更新</span><br> あけましておめでとうございます。</p><br> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1">あけましておめでとうございます。</p> </div> </div> <div id="photo2">画像が入る部分のため文字など入れてはいけません</div> <br> テキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキスト<br> </div> </body>
#1です。早とちりをしてしまって申し訳ありませんでした。 どうもテーブルが入っているようなんですが、これは何故でしょうか。 <table width="800" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="279" height="357"> </td> <td colspan="2" valign="top"> </td> </tr> <tr> <td height="43"></td> <td width="248" valign="top">pppp</td> <td width="273"> </td> </tr> </table> このタグの意味がわからなくて。このテーブルが邪魔をしているのではないでしょうか。 下記の記述例でしたらテキストボックスと画像＆文字の間は離れません。 <html> <head> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ scrollbar-base-color: #D5D0F7; } .memo{ width: 470px; height: 220px; overflow: auto; } .style1{ color: #000000; font-size: 12px; } .style2{ color: #000099; font-weight: bold; } --> </style> </head> <body> <div class="memo"> <p align="left" class="style1"> </p> <p align="left" class="style1"><span class="style2">2008年1月4日更新</span><br> あけましておめでとうございます。</p><br> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1">あけましておめでとうございます。</p> </div> <br> <img src="画像ファイル" width="300" height="200" border="0"><br> テキストテキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキストテキストテキストテキスト<br> </body> </html>
補足
さっそくのご回答ありがとうございます。NymphLunaさんのコードを貼り付けてみたら、たしかに上手く表示されました！ テーブルを入れているのはですね…。画面左側に大きな写真、右側に更新ボックス、その下に小さな画像（更新ボックスと同じくらいの大きさ）を表示させて、しかも常に中央に表示させたいからなんですが…。 全然、見当違いの方法かも知れません。 レイアウトテーブルを使わずに、このような表示をさせる方法を今一度、教えていただけませんか？
スタイルシートの中になぜかテーブルタグが入っているのでレイアウトが崩れているのではありませんか？ テーブルは何にしようされているのかわかりませんが、取った形ですと「高さ220px」できちんと表示されます。 他にCSSのclass指定に複数入れられているようですが、どちらかひとつにしないと有効になりません。 以下、確認したCSSとタグ記述です。 <html> <head> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ scrollbar-base-color: #D5D0F7; } .memo{ width: 470px; height: 220px; overflow: auto; } .style1{ color: #000000; font-size: 12px; } .style2{ color: #000099; font-weight: bold; } --> </style> </head> <body> <div class="memo"> <p align="left" class="style1"> </p> <p align="left" class="style1"><span class="style2">2008年1月4日更新</span><br> あけましておめでとうございます。</p><br> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1"> </p> <p align="left" class="style1">あけましておめでとうございます。</p> </div> </body> </html>
補足
すみません。質問が分かりにくくて…。テキストボックスの大きさはちゃんと220で表示されるのですが、テキストボックスの下に文字を入れると、えらい間が空いて表示されるんです。ごめんなさい。もう一度、教えていただけませんか？
関連するQ&A
- CSSで作ったテーブルのレイアウトが崩れ困っています
テーブルで作成内容をCSSで作成中ですが勉強不足でレイアウトが崩れてしまいます。 テーブルの指定内容を以下のCSSに置き換えています table→dn2 tr→d0 td→d1・d11・d12・d2・d3 ２文字目が列の順番です d3（最後の列）は、float:leftの指定が無いのに回り込むように表示されてしまいます。 以下のように記述しています 下の改行後の内容のように表示したいのですが <html><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css;"> <style type="text/css"><!-- .dn2 {position:static;font:17px/48px serif;width:477px;} .d0 {position:static;} .d1 {margin-left:17px;width:189px;vertical-align:text-top;font:17px/48px serif;float:left;} .d11 {margin-left:34px;width:17px;vertical-align:text-top;font:17px/24px serif;float:left;} .d12 {width:154px;vertical-align:text-top;float:left;} .d2 {width:99px;font:17px/24px serif;vertical-align:text-top;float:left;} .d3 {width:162px;font:17px/48px serif;vertical-align:text-top;} .p08 {font:13px/15px serif;} .p14n {font:17px/18px serif;} .mb18 {margin-bottom:15px;} --></style></head> <body><div class="dn2"> <div class="d0"><div class="d1"><div class="p08">姥ケ谷</div><div class="p14n"> 下田弐拾八歩</div></div> <div class="d2">拾壱間<br>弐間半</div> <div class="d3"><div class="p08">南沼上村</div><div class="p14n"> 伊左衛門</div></div></div> <div class="d0"><div class="d11">下<br>下</div> <div class="d12">田廿三歩</div> <div class="d2">四間半<br>五間</div> <div class="d3"><div class="p08">川合村</div><div class="p14n">長三郎</div></div></div> <div class="d0"><div class="d1"> 下畑拾六歩</div> <div class="d2">四間<br>四間</div> <div class="d3"> 同 人</div></div><br> <!-- 以下の内容のように表示したいのですが--> <div class="d0"><div class="d11">下<br>下</div> <div class="d12">畑六歩</div> <div class="d2">四間<br>壱間半</div> <div class="d3"><div class="p08">同村</div><div class="p14n">曽右衛門</div></div></div> <div class="d0"><div class="d1"> 下畑拾五歩</div> <div class="d2">五間<br>三間</div> <div class="d3"> 同 人</div></div></div> </body></html> ie7 バージョン7.0.5730.11です 宜しくお願いします。
- 締切済み
- HTML
- background-color ｃｓｓ
目的：社員のスケジュール表を作りたいです。 出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>表</title> <style> <!-- .open{ background-color:rgb(255,255,255); } .holiday{ background-color:rgb(166,166,166); } .rest_holiday{ position:relative; filter:alpha(opacity=50); background-color:rgb(255,0,0); } .rev{ background-color:rgb(185,205,229); } --> </style> </head> <body> <table border="1" cellspacing="1"> <tr> <td valign="top"> <table border="1" cellspacing="0" width="60" > <tr align="center"> <td height="23" >名前</td> </tr> <tr align="center"> <td ></td> </tr> <tr align="center"><td>田中</td></tr> <tr align="center"><td>島村</td></tr> <tr align="center"><td>喜田村</td></tr> <tr align="center"><td>林義夫</td></tr> </table> </td> <td valign="top" > <table width="00" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="100" height="23" colspan="2" >10時</td> <td width="100" height="23" colspan="2">11時</td> <td width="100" height="23" colspan="2" >12時</td> </tr> <tr > <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rev"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- table cellpadding「有」又は「無し」でCSSの解釈違う？
IE6,７ tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのですが、スタイルシートでセルのpaddingを指定する場合、HTMLのcellpaddingをcellpadding="0"と表記するべきですか又は表記しないべきですか？ 以下の二つのコードの違いは、<table>タグにcellpadding="0"が「ある」か「ない」かだけですが、例２のコードのテーブルの方が例1のテーブルより全体的な幅が広く表示されます。 <例１：cellpadding="0"あり> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1" cellpadding="0"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html> <例2：cellpadding="0"無し> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- <img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- テーブルの線について
下記のようなＨＰをつくっています。 一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか？ ご回答いただけると嬉しいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> <tr> <td bgcolor="#ffffff" colspan="2"> </td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" height="120" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｔｏｐ</font></td> </tr> <tr> <td><a class="menu" href="">Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br> </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td bgcolor="#ffffff" colspan="2"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> </table> </body></html>
- ベストアンサー
- HTML
- CSS セルごとリンクにする際、リンク文字を上下中央寄せにしたい
セルごとリンクにしたくて、以下の記述をしました。 【CSS】 ------------------------------------------------------------------ a.widelink{ vertical-align:middle; display:block; // display:inline-block; width: 100%; height:100%; // line-height:100%; color: #000000; text-decoration:none } a.widelink:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; text-decoration:none } td.bgchng{ align: center; vertical-align: middle; color: #000000; margin: 0px; padding: 0px; } td.bgchng:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; margin: 0px; padding: 0px; } ------------------------------------------------------------------ 【HTML】 ------------------------------------------------------------------ <TABLE border="1" bordercolor="#6666CC" cellspacing="0"> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test01.html" CLASS="widelink"> テスト<BR>（その１） </A> </TD> <TD width="450" bgcolor=""> テスト（その１）の説明文<BR> 二行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test02.html" CLASS="widelink"> テスト（その２） </A> </TD> <TD width="450" bgcolor=""> テスト（その２）の説明文<BR> 二行目<BR> 三行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test03.html" CLASS="widelink"> テスト（その３） </A> </TD> <TD width="450" bgcolor=""> テスト（その３）の説明文<BR> 二行目 </TD> </TR> </TABLE> ------------------------------------------------------------------ この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。 思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。 line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。 セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。
- 締切済み
- HTML
- 画面の中央に配置しようとすると、レイアウトが崩れてしまいます（泣）
画面の中央に配置しようとすると、レイアウトが崩れてしまいます（泣） ajaxを使用した住所自動入力フォームをあるファイルに作ったのですが、それをコピーしてもう一つのファイルにペーストし、floatでフォームを横並び配置にするところまではうまく出来たのですが、それを画面の中央配置にプロパティでしようとして、ドリームウィーバー上ではちゃんとフォームは横並びに配置されているのですが、アップロードしてブラウザで確認した時になぜか縦配置になってしまっています。どうすればきちんとフォームが横並びになって画面の中央配置にできるでしょうか？ <style type="text/css"> div.exampleB table { width: 280px; margin-right: 10px; float: left; } .exampleB { position: absolute; left: 50%; width: 630px; height: 100%; margin-left: -315px; </style> <div class="exampleB"> <div align="center"> <table width="315" height="449" border="2" align="center" cellspacing="0" bordercolor="#006633"> <tr> <td width="315" height="449"><div align="center"><span class="style13"><span class="style15"><a href="/link/moto2.html" target="_blank"></a><img src="../image/dt_022_03.gif" alt="引越元のイラスト" width="290" height="200" /></span></span></div><p align="center"><span class="style13"><span class="style119">＜引越<strong>元</strong>住所＞</span></span><span class="style119"><br /> 郵便番号：（省略） 都道府県：（省略） 市区町村：（省略） 町域(大字)：（省略） 丁目番地：（省略） 建物名～号室:（省略） </span></p></td> </tr> </table> <table width="316" height="449" border="2" cellspacing="0" bordercolor="#006633"> <tr cellspacing="0"> <td width="301" height="449"><div align="center" class="style30"><img src="../image/dt_023_03.gif" alt="引越先のイラスト" width="290" height="200" /><br /> <p align="left"><span class="style123"><span class="style15"><span class="style118">＜引越<strong>先</strong>住所＞</span></span><span class="style118"><br /> 郵便番号：（省略） 都道府県：（省略） 市区町村：（省略） 町域(大字)：（省略） 丁目番地：（省略） 建物名～号室:（省略） </span></p> </div></td> </tr> </table> </div> </div>
- ベストアンサー
- HTML
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- あるソースをあるソースに埋め込みたい
http://www.1uphp.com/con2/menu/tab41.html このURLの一番下の「全ての書き方」を 下記のソースのメニューの右にあるテーブルに埋めたいと思っています。 しかし、上記URLのソースのスタイルシート部分を書きのソースへコピペした段階で 下記のソースのページが全て左寄せみたいになってしまいます。 どこをどう記述すれば埋め込めるでしょうか？ <html> <head> <style type="text/css"> <!-- A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } TABLE#mainTable { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid; BORDER-COLLAPSE: collapse } TD.borderAll,TD.borderNoTop,TD.borderNoBottom { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid } --> </style> </head> <body bottommargin="10" background="sozai/kabegami.gif" topmargin="10"> <table height="1817" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 1817px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"><strong><font color="#ff0000" size="5"></font></strong></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">お教室情報</font></td> </tr> <tr> <td><a class="menu" href="5_shop.html" >Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table> <p align="center"> <font ><font color="#808080" size="1" > <font ><font size="2"> <br></font></font> </p></font></font></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 1380px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> <p align="left"><font color="#808080"></font> </p></td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> </p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- 締切済み
- HTML
- tableの左側の色をCSSで一回で変えたい
tableの左側の色をCSSで一回で変えたいのですが、どのようにするのが一番良いのでしょうか？現在はclassを使っています。 アドバイス宜しくお願いします。 <head> <style type="text/css"> <!-- table { height: 400px; width: 400px; } .tableleft { background-color: #FF0000; } --> </style> </head> <body> <table summary="ABCD" > <caption>ABCD</caption> <tr> <td class="tableleft">A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td class="tableleft">1</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="tableleft">2</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="tableleft">3</td> <td> </td> <td> </td> <td> </td> </tr> </table> </body>
- ベストアンサー
- HTML
補足
何度もありがとうございます！こちらも今後、勉強していきます！