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

解決済

質問者：goinkyosan
質問日時：2009/08/19 18:27
回答数：5件

こんにちは。

メモ帳を使ってホームページを作成しています。
長い一文など<br>を使って改行しているのですが、パソコンの画面を縮小すると、横スクロールバーが出てきて見にくいものになってしまいます。
他のサイトさんを見ると、画面サイズを縮小すると自動的に見やすく改行され、横スクロールバーも出てこないのですが、（最大化した時と改行していている位置が違います）どういうタグ等を使ったらこのように設定できるでしょうか？

作成については初心者で、本を見ながらやっている状態です。
使用しているブラウザはＩＥ7で、WindowsVistaです。
なにとぞよろしくお願い申し上げます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： sh_hirose
回答日時：2009/08/21 12:55

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を追加しています。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！
パソコンを開けなくなっていたため、お返事が遅くなり大変申し訳ございませんでした！！

サンプル、私のようなHTMLの素人には大変分かりやすく、参考になりました。
早速やってみます！
本当にありがとうございました！

通報する

お礼日時：2009/10/04 14:29

No.4

回答者： JavaJavax2
回答日時：2009/08/20 10:09

<djv>とか<td>とかで囲めば

デフォルト設定でそのようになるでしょう？

divのサイズは指定してやる必要はありますが

CSSをいじれば改行されないとかできますが・・

- 1
- 件

通報する

この回答へのお礼

ありがとうございます！
ＰＣが開けなかったため、お礼を申し上げるのが大変遅くなってしまい、申し訳ございませんでした！

CSSをいじる…まだそこまで理解ができていないので難しそうです。
色々勉強してみたいと思います！

本当にありがとうございました！

通報する

お礼日時：2009/10/04 14:30

No.3

回答者： noname#100277
回答日時：2009/08/19 23:07

>>パソコンの画面を縮小すると

解像度を下げてどうするのですか？
「ブラウザの大きさ」ですよ？

では回答。
「自動改行」されてれば、ブラウザの端に掛かった文字は「改行」された状態で次の行に送られます。
「自動改行」を禁じる指示を与えて無かったら、基本的には上記に成るが、ブラウザ依存でしょう。

CSS 自動改行
で検索すれば判明します。

- 1
- 件

通報する

この回答へのお礼

PCに触れなかったため、お礼が大変遅くなってしまい申し訳ございませんでした！
ちょっと…難しいです。
ブラウザの問題なのですね。

教えて頂いたキーワードで検索してみようと思います。
ありがとうございました！

通報する

お礼日時：2009/10/04 14:32

No.2

回答者： fujillin
回答日時：2009/08/19 19:11

どのような状況で、ご質問の状態が起こっているのでしょうか？

通常は、特に指定しなければ、その要素（bodyとかdivなど）の幅の中で適宜折り返し（改行）されて表示されるはずです。

例えば
<html>
<head></head>
<body>
（以下１行）<br>
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</body>
</html>
みたいなものは、画面の幅に応じて2行になったり3行になったりで、横のスクロールバーは出ないはずですが？

ただし、アルファベットなどでカンマもスペースもなく連続させると、一つの単語として処理しようとするので、↑の折り返しは行われずに横スクロールバーが表示されます。

あるいは、<pre>タグなどで↑のような「あああ…」を囲めばこれも<pre>の指定に従って、改行されず、横スクロールバーが出ることになります。
要素に幅を指定している場合は、画面を縮めても要素の幅が確保されますので、それ以下になるとスクロールバーが表示されることになります。

- 1
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2009/10/04 14:35