• ベストアンサー

PCの画面を縮小したらサイズに合わせて改行させたい

こんにちは。 メモ帳を使ってホームページを作成しています。 長い一文など<br>を使って改行しているのですが、パソコンの画面を縮小すると、横スクロールバーが出てきて見にくいものになってしまいます。 他のサイトさんを見ると、画面サイズを縮小すると自動的に見やすく改行され、横スクロールバーも出てこないのですが、(最大化した時と改行していている位置が違います)どういうタグ等を使ったらこのように設定できるでしょうか? 作成については初心者で、本を見ながらやっている状態です。 使用しているブラウザはIE7で、WindowsVistaです。 なにとぞよろしくお願い申し上げます。

質問者が選んだベストアンサー

  • ベストアンサー
  • sh_hirose
  • ベストアンサー率66% (56/84)
回答No.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を追加しています。

goinkyosan
質問者

お礼

ありがとうございます!! パソコンを開けなくなっていたため、お返事が遅くなり大変申し訳ございませんでした!! サンプル、私のようなHTMLの素人には大変分かりやすく、参考になりました。 早速やってみます! 本当にありがとうございました!

その他の回答 (4)

回答No.4

<djv>とか<td>とかで囲めば デフォルト設定でそのようになるでしょう? divのサイズは指定してやる必要はありますが CSSをいじれば改行されないとかできますが・・

goinkyosan
質問者

お礼

ありがとうございます! PCが開けなかったため、お礼を申し上げるのが大変遅くなってしまい、申し訳ございませんでした! CSSをいじる…まだそこまで理解ができていないので難しそうです。 色々勉強してみたいと思います! 本当にありがとうございました!

noname#100277
noname#100277
回答No.3

>>パソコンの画面を縮小すると 解像度を下げてどうするのですか? 「ブラウザの大きさ」ですよ? では回答。 「自動改行」されてれば、ブラウザの端に掛かった文字は「改行」された状態で次の行に送られます。 「自動改行」を禁じる指示を与えて無かったら、基本的には上記に成るが、ブラウザ依存でしょう。 CSS 自動改行 で検索すれば判明します。

goinkyosan
質問者

お礼

PCに触れなかったため、お礼が大変遅くなってしまい申し訳ございませんでした! ちょっと…難しいです。 ブラウザの問題なのですね。 教えて頂いたキーワードで検索してみようと思います。 ありがとうございました!

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

どのような状況で、ご質問の状態が起こっているのでしょうか? 通常は、特に指定しなければ、その要素(bodyとかdivなど)の幅の中で適宜折り返し(改行)されて表示されるはずです。 例えば <html> <head></head> <body> (以下1行)<br> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </body> </html> みたいなものは、画面の幅に応じて2行になったり3行になったりで、横のスクロールバーは出ないはずですが? ただし、アルファベットなどでカンマもスペースもなく連続させると、一つの単語として処理しようとするので、↑の折り返しは行われずに横スクロールバーが表示されます。 あるいは、<pre>タグなどで↑のような「あああ…」を囲めばこれも<pre>の指定に従って、改行されず、横スクロールバーが出ることになります。 要素に幅を指定している場合は、画面を縮めても要素の幅が確保されますので、それ以下になるとスクロールバーが表示されることになります。

goinkyosan
質問者

お礼

ありがとうございます。 PCに触れなかったため、お礼が遅くなってしまい申し訳ございませんでした。 <pre>タグで囲むと便利かと、素人の浅知恵でやっていましたが、色々不都合が出てくるんですね。 まだ色々勉強する必要があるみたいです。 <pre>を使わず<br>を使うようにしてみました。 ありがとうございました。

回答No.1

他のサイトさんを見ると、画面サイズを縮小すると自動的に見やすく改行され、横スクロールバーも出てこないのですが、(最大化した時と改行していている位置が違います)どういうタグ等を使ったらこのように設定できるでしょうか? この方のHTMLを参照してください。 一般にTABLEタグを使っています。

goinkyosan
質問者

お礼

ありがとうございます。 PCに触れなかったため、お礼が大変遅くなってしまい、申し訳ございませんでした。 ちょっとソースを見てもよく分からなかったので、こちらに投稿させていただいたのですが。 アドバイスありがとうございました。

関連するQ&A