各種ブラウザの改行位置

質問

プログラミングの方が専門で、デザインにはあまり詳しくないので質問させてもらっています。
今回、MacBook Proを買ったのですが、自分が作っているサイトの一行分の文字数の改行位置が
MacBook Proでみた場合、一行分の文字数の最大値から少しはみ出してしまっていて、行数文字を揃えて書いたつもりが、ばらばらの見苦しい見え方になっていました。
これまでほとんどWindowsで仕事をしていたので、Windows上にＩＥ以外にもSafariやFirefoxのブラウザもインストールして、それらでは一応見栄えは確認していたのですが、同じSafariのブラウザでもWindows上で見た場合とMacBook Proのデフォルとでみた場合には見栄えの違いがあることがわかりました。（多分、デフォルトで使っているフォントの違いで一行の文字数の最大値が変わっているのだと思います。）
そこでお聞きしたいのは、どのＰＣのどのブラウザで見た場合でも、意図した一行分の文字数の最大値を超えないで必ず改行するようなＣＳＳの書き方とかあるのでしょうか？全てのＰＣの全てのブラウザで改行位置を確認しなくてもうまくいく方法とかあれば教えていただきたいのです。

よろしくお願い致します。

回答No.3

ORUKA1951

No.1です。
＞上記のような意図した見栄えと違ってしまうのを防ぐ
　これはウェブの世界では、致命的な誤りだということは御理解されているとして。

下記のHTMLにおいて、特定の重要な単語が折り返されたくないときには
<p>
ここからはひとつの<em>段落</em>です。<em>段落</em>を<em>マークアップ</em>するときは&lt;p&gt;&lt;/p&gt;(Paragraph)というタグを使ってマークアップします。&lt;br&gt;は、ひとつの<em>段落</em>でありながら<strong>強制改行(orced line break)</strong>で、通常のHTMLでは一度も登場しないはずです。
</p>
　とマークアップしておいてあるとしたら
em,strong{white-space:pre; font:bold normal;text-decoration:none;}
strong{font-color:red;}
とデモすれば、em,strong内では改行されません。

　長い文章には使うのは望ましくありません。20文字程度の文字しか表示できない端末(携帯電話)とか・・
<pre>を使うとしたら、詩とかコンピューター用のコードとかでしょうか？？

回答No.2

play_with_you

とりあえず、あなたの考え、やりたいことは、WEBデザインとしては致命的誤りであることをまず理解してください。
＞どのＰＣのどのブラウザで見た場合でも、意図した一行分の文字数の最大値を超えないで必ず改行する
これが閲覧者に対してどれほど不親切かということを考えたことは無いのですか？
「1行の文字数」なんてものを決めてはいけません。折り返しまでの文字数なんていうのは、閲覧者の環境によって「変わらなくてはいけない」ものです。たとえば視力の弱い人があなたのサイトをフォントサイズ3倍にしないと読めなかったらどうするんですか？1行の文字数を固定して閲覧者に横スクロールを強要しますか？それではユーザビリティのかけらもありません。
ちなみに、本文には書いてないけどなんだかあなたのサイトはフォントサイズも固定にしてそうですが…それは大丈夫ですか？

とにかく、「1行の文字数」を固定しようなんていうおろかな考えは今すぐ捨て、折り返しまでの文字数が変わっても困らないようなサイト作りをしてください。
ついでに言うと、「改行」と「折り返し」の区別もつけましょう。

回答No.1

ORUKA1951

＞自分が作っているサイトの一行分の文字数の改行位置が
MacBook Proでみた場合、一行分の文字数の最大値から少しはみ出してしまって

　もっとも基本的な事ですが、HTMLを使ってページを作成されていらっしゃいますよね。あなたが、そして多くの方がHTMLを使用されるのは、ただひとつ・・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書邦訳/2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　例えば視覚弱者がCtrl+＋でフォントサイズを大きくしても、スクリーンリーダーで読み上げても、携帯電話(ガラケー)で見ても、幅広のディスプレイでもスマホのような小さな画面で見ても・・利用できるようにするためにHTMLで作成するのですよ。

　どのような指定をされているか分かりませんが、例えば段落でしたら
<p>
ここからはひとつの段落です。段落をマークアップするときは&lt;p&gt;&lt;/p&gt;(Paragraph)というタグを使ってマークアップします。&lt;br&gt;は、ひとつの段落でありながら強制改行(orced line break)で、通常のHTMLでは一度も登場しないはずです。
</p>
　と言う風にマークアップしますから、幅やフォントサイズがどのようであっても、右端で折り返されるされるはずです。

　また詩の様に改行なども内容の一部であるような場合は、
<pre>
　山のあなたの空遠く
　　幸　住むと人のいふ。
　噫、われひとゝ尋めゆきて、
　　涙さしぐみ、かへりきぬ。
　山のあなたになほ遠く
　　幸　住むと人のいふ。
</pre>
とマークアップします。

＞意図した一行分の文字数の最大値を超えないで必ず改行するようなＣＳＳの書き方
　div.section p{font-family:monospace;width:40em;}
とすれば、その段落(sectionブロック内の段落)については、40文字幅になります。
※プロポーショナルフォントは小さな文字があると40文字を越えます。monospaceにします。また英文を含む場合は、単語内では改行されません。

　しかし、この方策はHTMLの目的を考えると間違っていますよ。
　段落内では、段落の幅にきたら自然と改行されるのが本来の姿です。

補足

御返答ありがとうございます。
<pre>というタグは使ったことはありませんが、やりたいことはこれと同じで、
たとえばこの文章がもう少し長くてPCやブラウザの違いにより途中で折り返されて
しまって、上記のような意図した見栄えと違ってしまうのを防ぐことってできる
のでしょうか？