- ベストアンサー
ボックスのテキストが表示されない問題について
- 部活のホームページでテキストがボックスを飛び出して表示される問題が発生しています。
- Internet Explorerではテキスト量に応じてボックスが拡大されるため正常に表示されますが、Google ChromeやFirefoxではボックスの大きさが変わらず、テキストが表示されません。
- テキスト量によってボックスの大きさを変更する方法について教えてください。
- u583656f
- お礼率79% (129/163)
- レンタルサーバ・ASP
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> 背景の大きさを中に含まれるボックスの大きさによって自動で変えることはできますか？ 自動で変えることは出来ますが…申し訳ございませんが今のホームページの作りでは難しくなると思います。 難しくなる理由ですが、スタイルシートにおいて 「position: absolute;」 を多用しているようですので、スタイルシートの修正に合わせて全てのHTMLページにも修正が必要になるためです。また、修正する際に CSS のみ修正では、一部のレイアウトが変わってしまう※可能性がありますので、もし修正されるようでしたら、前回解答した 「スクロールバーの表示で回避」 して頂くか、はじめからレイアウトし直して 「position: absolute;」 を極力使わないように作り直す、どちらかがよろしいかと思います。 ■※レイアウトの変わる可能性がある場所 いずれも HTML の修正が必要になりますので大変になります。（＾＾； ●#boxT position が使えなくなることにより、学校名とリンクのメニューが上に移動して写真が下に入れ替わります。こちらは写真用に DIV を用意することで解決できます。 ●#boxL,#boxR position の代わりに float を使ってレイアウトすることにより、Google Chrome や Firefox などのブラウザで 「#boxL,#boxR」 の間に隙間が発生して 「#back_field_middle」 の青い背景が表示されます。こちらの問題はHTMLページの先頭に 「<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">」 を追加して頂いて、スタイルシートの 「width」 を何点か修正するだけで解決できます。 ■レイアウトについて ホームページを新たにレイアウトされる際には以下のサイトを参考にするとよろしいかもしれません。 http://www.webword.jp/layout/ http://www.css-designsample.com/csslayout/
その他の回答 (3)
- kasa1098
- ベストアンサー率69% (25/36)
時間があったので実際に作ってみました。 「_common.css」 ファイルの IDセレクター に上書きして頂くことで、文字のはみ出す問題は解決出来ると思います。質問がありましたら補足にお願い致します。 ■CSS の修正項目 #back_field { /* 基本ボックス */ text-align:left; margin:0px auto; width: 808px; height: 1350px; /* 250px追加 */ position: absolute; background-color: #111155; font-size: 12pt; } #back_field_long { /* 基本ボックスlong */ text-align:left; margin:0px auto; width: 808px; height: 2600px; /* 250px追加 */ position: absolute; background-color: #111155; font-size: 12pt; } #back_field_middle { /* 基本ボックスmiddle */ text-align:left; margin:0px auto; width: 808px; height: 1750px; /* 250px追加 */ position: absolute; background-color: #111155; font-size: 12pt; } #boxL { /* ボックス左 */ width: 500px; height: 1200px; /* 250px追加 */ background-color: #FFFFFF; position: absolute; top: 450px; left: 4px; overflow: auto; /* 文字のはみ出す対策 */ } #boxR { /* ボックス右 */ width: 300px; height: 1200px; /* 250px追加 */ background-color: #DDDDFF; position: absolute; left: 504px; top: 450px; overflow: auto; /* 文字のはみ出す対策 */ } ■CSS の追加項目 「_common.css」 ファイルの一番最後に追記するようにお願い致します。 追加の内容は印刷するときに 「overflow: auto;」 を指定した 「#boxL, #boxR」 の内容が次のページで空白になり途切れてしまう問題を修正します。 @media print { #boxL, #boxR { overflow: visible; /* 印刷が次のページで途切れてしまう対策 */ } }
お礼
ありがとうございました。
補足
ご回答ありがとうございました。 わざわざコードまで書いていただいて、本当に感謝です。 kasa1098さんのコードを実際に適応してみたところ、ボックスの大きさが変わりちゃんとテキストがボックス内に表示されるようになりました。 テキストが多くなっても、スクロールが表示され、全ての内容を見れるようになりました。 ただ、ユーザビリティを考えると、スクロールよりもボックス自体の大きさが変わる方が良いと思ったので今回はNo1さんの方法を使わせていただきます。 コードまで書いていただいたのに申し訳ありません。 勉強になりました。 No.1さんの補足にも書かせていただきましたが、もう一つ質問があります。 今トップページの背景を #back_field_middle { /* 基本ボックスmiddle */ text-align:left; margin:0px auto; width: 808px; height: 1750px; /* 250px追加 */ position: absolute; background-color: #111155; font-size: 12pt; } で表示しています。 これも、boxLやboxRの大きさによって変わって欲しいと思ってheightの部分を消しました。 すると、背景自体が消えてしまいました。 背景の大きさを中に含まれるボックスの大きさによって自動で変えることはできますか？ 何度も初歩的な質問すいません。 お時間があるときによろしければ、ご回答の方よろしくお願い致します。
- kasa1098
- ベストアンサー率69% (25/36)
> InternetExploreでは、テキスト量が多くなるとボックスも拡大してくれるのでちゃんと表示されるのですが、googlechormeやFireFoxではボックスの大きさが変わらないのでテキストが飛び出てしまいます。 サイズが拡張されるのは Internet Explorer 独自の動作ですので、Google Chorme や Firefox のように文字だけがはみ出してしまうのが CSS 本来の動作になります。 > googlechormeやFireFoxでもテキスト量によって、ボックスの大きさが変わるようにする方法を教えていただきたいです。 先ほど説明しましたように、Internet Explorer 独自の動作になりますので、サイズを変えるのは難しくなると思います。（＾＾； ですので、代わりにページのレイアウトの Height を今のサイズより大きめにして頂くか、CSS の 「#boxL」 と 「#boxR」 に 「overflow: scroll;」 を指定してスクロールバーを表示させる代わりに文字がはみ出さない設定にして頂くどちらかが無難になると思います。
- naokita
- ベストアンサー率57% (1008/1745)
divボックスに高さを指定しているのだから当然の結果・・・ テキストが少なくても多くても、 制作者の指定の大きさに従っているだけ。 main部分では、コンテンツの高さを自由に開放するのが一般的なので、 高さを指定しない事。 height: 1500px; height: 950px; これらを削除したらどうなる？
お礼
解決致しました。 ご回答ありがとうございました！
補足
ご回答ありがとうございました。 heightを消したら、自動でボックスの大きさが変わりました。 こんな初歩的なことだったんですね； 本当に助かりました。 お手数なんですが、もう一つ質問があります。 今トップページの背景を #back_field_middle { /* 基本ボックスmiddle */ text-align:left; margin:0px auto; width: 808px; height: 1750px; /* 250px追加 */ position: absolute; background-color: #111155; font-size: 12pt; } で表示しています。 これも、boxLやboxRの大きさによって変わって欲しいと思ってheightの部分を消しました。 すると、背景自体が消えてしまいました。 背景の大きさを中に含まれるボックスの大きさによって自動で変えることはできますか？ 何度も初歩的な質問すいません。 お時間があるときによろしければ、ご回答の方よろしくお願い致します。
お礼
ご回答ありがとうございます。 floatを使って背景を自動で変更するようにできました。 度々のご回答本当に感謝しております。 ありがとうございました！