- ベストアンサー
初めてCSSをデザインに取り入れたらレイアウトが崩れてしまいました
- 初めてCSSをデザインに取り入れたらレイアウトが崩れてしまいました。スクロールバーが付いているテキストボックスの下に文字や画像を入れると、表示が崩れてしまいます。
- テキストボックスの高さを大きな数字に指定すれば表示は正しくなりますが、指定したい高さとは異なります。同じような問題があった他の方の解決法も参考になるかもしれません。
- 質問内容のコードや他のユーザーの解決法を参考に、CSSの設定を見直してみてください。解決策が見つからなければ、CSSを使用する際の他の注意点なども調べてみると良いでしょう。
- 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で表示されるのですが、テキストボックスの下に文字を入れると、えらい間が空いて表示されるんです。ごめんなさい。もう一度、教えていただけませんか？
補足
何度もありがとうございます！こちらも今後、勉強していきます！