改行が変な位置、中途半端な位置にて、不本意な改行がされていますので、そ

質問

改行が変な位置、中途半端な位置にて、不本意な改行がされていますので、それを防ぐ方法、やり方を教えてください。

まずは添付画像をご覧ください。

ドリームウェーバーCS5を使用してHPを作成しました。その際には、テーブルの中にテキストを入力し、そのテキストには予めCSSにてフォントサイズ・色を設定しています。

テキスト入力時にテーブルの端まで文字を入力する場合には、端の部分に来たところで、シフトキーとエンターキーを同時に押して改行しています。コードを確認すると<br />となっており、ちゃんと改行が出来ているようです。

その後にブラウザーでのプレビューすると、私のPC（windowsXP IE8)からでは、ちゃんと改行が設定どおりにされているのですが（画像上）、しかし、他のPC（windows7 IE8）で見ると改行が無理やり？変な位置で改行されてしまい、見た目が崩れてしまっています（画像下）。

どのようなやり方、方法をすれば、意図した改行、思惑通りの改行が出来て、どのPCから見ても同じように表示させる事が可能なのでしょうか？

アドバイス…ご指示をお願い致します。

回答No.2

naokita · ベストアンサー

まずは、その該当する<br />を削除しましょう。
もしかして、全角スペースも使っていませんか？　削除しましょう。
文章の途中で、シフトキーとエンターキー<br />　を使わないようにしましょう。
---------------------
今回の例は、
br は強制改行ですから、制作者の指示通り改行しているので、
ブラウザが不正ではなく、文章幅が長くなるのでその表示されているので正しいです。
その位置で強制改行しているのは、質問者さんなのですから・・・

また、自分のUA環境で合わせたとしても、
他者のユーザー環境ではまた違うので、
ある程度は揃えれてもフォントの違いによって幅間隔が違うので崩れたりもします。
メールや携帯などで意図しない改行があるのが良い例です。

"。" の読点以外では改行しないのが一般的です。
文章の始まりから終了の "。" までの段落を<p>～</p>でマークアップするのが基本です。
ただ、傾向としては、
横に長いのも見難く感じるのであれば、
ある程度の区読点で<br />強制改行するのが良いかも知れません。

ボックスの幅、widthにもよります。
しっかり、枠幅を決めたりメディアの位置を決める事です。

お礼

naokitaさん：

お忙しい中、ご回答・アドバイス有難うございました。お陰様で大変に勉強になりました。
やはり、無理やり改行をしていたので、それがかえってよくなかったのですね。文章の途中で改行するとかえっておかしくなる事が解りました。早速に、そのようにしてみました。

本当に有難うございました。大変に勉強になりました。

回答No.1

rukuku

こんにちは

＞テキスト入力時にテーブルの端まで文字を入力する場合には、
＞端の部分に来たところで、
これこそが原因です。

ホームページは見る人によってフォントもフォントサイズも異なります。
パソコンやブラウザが変われば、見え方も多少変わります。

＞意図した改行、思惑通りの改行が出来て
発想の転換が必要です。思った通り改行させるのではなく、改行の位置が多少変わっても表示がおかしく見えないように作ります。
具体的には、文章が右端に達すれば自動的に改行されるのでそれを利用し、
<br />を入れるのは行末だけにします。こうすることで、１～２字くらいを残して中途半端に改行されることを防ぎます。
（<p>…</p>を使えば<br />はほとんど使わないと思いますが。）

お礼

rukukuさん：

こんにちわ。
お忙しい中、ご回答・アドバイス有難うございました。お陰様で大変に勉強になりました。
確かに、発送の転換が必要ですね。改行の位置が変わっても表示がおかしく見えないように作ってみます。

本当に有難うございました。大変に勉強になりました。