- ベストアンサー
PCの画面を縮小したらサイズに合わせて改行させたい
こんにちは。 メモ帳を使ってホームページを作成しています。 長い一文など<br>を使って改行しているのですが、パソコンの画面を縮小すると、横スクロールバーが出てきて見にくいものになってしまいます。 他のサイトさんを見ると、画面サイズを縮小すると自動的に見やすく改行され、横スクロールバーも出てこないのですが、(最大化した時と改行していている位置が違います)どういうタグ等を使ったらこのように設定できるでしょうか? 作成については初心者で、本を見ながらやっている状態です。 使用しているブラウザはIE7で、WindowsVistaです。 なにとぞよろしくお願い申し上げます。
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
divとtableの場合のサンプル <div>や<table>の横幅をパーセント指定します。 固定値(500px)などにすると改行されたようには出来ません。 <html> <head> <title>sample</title> </head> <body> <div style="width: 100%;word-break:break-all;"> <p><!-- 長い文章を書き込む --></p> </div> </body> </html> <html> <head> <title>sample</title> </head> <body> <table style="width: 100%;word-break:break-all;"> <tr> <td><!-- 長い文章を書き込む --></td> </tr> </table> </body> </html> ※英文ようにword-breakを追加しています。
その他の回答 (4)
- JavaJavax2
- ベストアンサー率22% (68/305)
<djv>とか<td>とかで囲めば デフォルト設定でそのようになるでしょう? divのサイズは指定してやる必要はありますが CSSをいじれば改行されないとかできますが・・
お礼
ありがとうございます! PCが開けなかったため、お礼を申し上げるのが大変遅くなってしまい、申し訳ございませんでした! CSSをいじる…まだそこまで理解ができていないので難しそうです。 色々勉強してみたいと思います! 本当にありがとうございました!
>>パソコンの画面を縮小すると 解像度を下げてどうするのですか? 「ブラウザの大きさ」ですよ? では回答。 「自動改行」されてれば、ブラウザの端に掛かった文字は「改行」された状態で次の行に送られます。 「自動改行」を禁じる指示を与えて無かったら、基本的には上記に成るが、ブラウザ依存でしょう。 CSS 自動改行 で検索すれば判明します。
お礼
PCに触れなかったため、お礼が大変遅くなってしまい申し訳ございませんでした! ちょっと…難しいです。 ブラウザの問題なのですね。 教えて頂いたキーワードで検索してみようと思います。 ありがとうございました!
- fujillin
- ベストアンサー率61% (1594/2576)
どのような状況で、ご質問の状態が起こっているのでしょうか? 通常は、特に指定しなければ、その要素(bodyとかdivなど)の幅の中で適宜折り返し(改行)されて表示されるはずです。 例えば <html> <head></head> <body> (以下1行)<br> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </body> </html> みたいなものは、画面の幅に応じて2行になったり3行になったりで、横のスクロールバーは出ないはずですが? ただし、アルファベットなどでカンマもスペースもなく連続させると、一つの単語として処理しようとするので、↑の折り返しは行われずに横スクロールバーが表示されます。 あるいは、<pre>タグなどで↑のような「あああ…」を囲めばこれも<pre>の指定に従って、改行されず、横スクロールバーが出ることになります。 要素に幅を指定している場合は、画面を縮めても要素の幅が確保されますので、それ以下になるとスクロールバーが表示されることになります。
お礼
ありがとうございます。 PCに触れなかったため、お礼が遅くなってしまい申し訳ございませんでした。 <pre>タグで囲むと便利かと、素人の浅知恵でやっていましたが、色々不都合が出てくるんですね。 まだ色々勉強する必要があるみたいです。 <pre>を使わず<br>を使うようにしてみました。 ありがとうございました。
- miracle3535
- ベストアンサー率20% (306/1469)
他のサイトさんを見ると、画面サイズを縮小すると自動的に見やすく改行され、横スクロールバーも出てこないのですが、(最大化した時と改行していている位置が違います)どういうタグ等を使ったらこのように設定できるでしょうか? この方のHTMLを参照してください。 一般にTABLEタグを使っています。
お礼
ありがとうございます。 PCに触れなかったため、お礼が大変遅くなってしまい、申し訳ございませんでした。 ちょっとソースを見てもよく分からなかったので、こちらに投稿させていただいたのですが。 アドバイスありがとうございました。
お礼
ありがとうございます!! パソコンを開けなくなっていたため、お返事が遅くなり大変申し訳ございませんでした!! サンプル、私のようなHTMLの素人には大変分かりやすく、参考になりました。 早速やってみます! 本当にありがとうございました!