初めまして。
部活のホームページを作成しているのですが、表示の仕方で分からないことがあって質問させていただきました。
表示に問題があるのは、左下の内容が書いてあるボックスです。
メインの内容に当たるボックスですが、このボックスにテキストを書きすぎると
下部のテキストがボックスを飛び出して表示されます。
InternetExploreでは、テキスト量が多くなるとボックスも拡大してくれるのでちゃんと表示されるのですが、googlechormeやFireFoxではボックスの大きさが変わらないのでテキストが飛び出てしまいます。
googlechormeやFireFoxでもテキスト量によって、ボックスの大きさが変わるようにする方法を教えていただきたいです。
No.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/
ご回答ありがとうございます。
floatを使って背景を自動で変更するようにできました。
度々のご回答本当に感謝しております。
ありがとうございました!
No.3
- 回答日時:
時間があったので実際に作ってみました。
「_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の部分を消しました。
すると、背景自体が消えてしまいました。
背景の大きさを中に含まれるボックスの大きさによって自動で変えることはできますか?
何度も初歩的な質問すいません。
お時間があるときによろしければ、ご回答の方よろしくお願い致します。
No.2
- 回答日時:
> InternetExploreでは、テキスト量が多くなるとボックスも拡大してくれるのでちゃんと表示されるのですが、googlechormeやFireFoxではボックスの大きさが変わらないのでテキストが飛び出てしまいます。
サイズが拡張されるのは Internet Explorer 独自の動作ですので、Google Chorme や Firefox のように文字だけがはみ出してしまうのが CSS 本来の動作になります。
> googlechormeやFireFoxでもテキスト量によって、ボックスの大きさが変わるようにする方法を教えていただきたいです。
先ほど説明しましたように、Internet Explorer 独自の動作になりますので、サイズを変えるのは難しくなると思います。(^^;
ですので、代わりにページのレイアウトの Height を今のサイズより大きめにして頂くか、CSS の 「#boxL」 と 「#boxR」 に 「overflow: scroll;」 を指定してスクロールバーを表示させる代わりに文字がはみ出さない設定にして頂くどちらかが無難になると思います。
No.1
- 回答日時:
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の部分を消しました。
すると、背景自体が消えてしまいました。
背景の大きさを中に含まれるボックスの大きさによって自動で変えることはできますか?
何度も初歩的な質問すいません。
お時間があるときによろしければ、ご回答の方よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Access(アクセス) Accessで予定表を作成しようとしてます。 テーブル フィールド名 連番 オートナンバー型 年月日 2 2023/07/23 11:40
- Windows 10 タスクバー上に表示されたアドレス・ボックス? 1 2023/04/30 17:37
- WordPress(ワードプレス) Wordpress テーマを編集 の編集する枠が表示されない 2 2022/11/19 11:07
- Excel(エクセル) [クイックアクセスツールバー]の設定ファイルの格納場所について、 5 2023/04/21 14:43
- PHP php my adminより取り出したデータ表示 2 2022/06/15 11:56
- Excel(エクセル) Excelヘルプの原文を表示する最速の方法(手順)には? 1 2023/08/11 11:30
- PDF PDFのテキストを追加機能 1 2022/06/18 12:45
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- gooメール ドコモメール、OCNメールの受信ボックスが同じなのはどうしてですか 1 2022/07/28 00:28
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
インターネット用語について教...
-
http://cloth-gallery.net/inde...
-
自分のドメインが他者のサイト...
-
任意団体名でも開設できますか
-
忍者アドマックスは無料ですか?
-
海外でも報酬を受け取れるアフ...
-
プログラミングに触れて見たい
-
アフェリエイトって登録したサ...
-
FC2掲示板に広告を表示させる方...
-
ご本人様不在のため荷物を持ち...
-
ホームページが、見られません。
-
XPERIASO-01Gを使用してます こ...
-
au oneホームページ作成
-
さくらインターネットのレンタ...
-
有料サイトの開設方法
-
インターネットの環境をポケッ...
-
Slackの料金体系に詳しい方教え...
-
イントラネットを構築したい
-
LINE でリンク先を投稿すると ...
-
GOOメールが使用出来なくなりま...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
WEBページで電光掲示板のように...
-
https://danqkzs.com/ipchange-...
-
広告とホームページが重なって...
-
HPのソースをそのまま貼り付け...
-
FC2WEBのテキスト広告の文字色...
-
どうやって画像を縮小させてい...
-
ホームページビルダー:フォン...
-
メモ帳をブラウザで表示するには
-
ホームページのレイアウトについて
-
HPの上の一部を固定する方法
-
jimdoのHPのテンプレートの変...
-
別ページの指定場所に移動
-
ホームページビルダーの表について
-
フルスクリーンで表示。
-
アクセスカウンターの位置
-
メインに表示させるには?
-
htmlで改行タグを入れていない...
-
隠しページの探し方
-
大きくなった文字を元に戻すには?
-
ドラッグすると見える文字
おすすめ情報