文字の大きさが変わる

[新着] Webテンプレートを仮オープンしました

0   名前： ミストレス ： 2006/06/12（月） 11:51
スタイルシートを使ってHPを作成しているのですが、一文の改行位置が閲覧者によって
変わってしまっているようです。よく見てみると文字の大きさや、余白部分の大きさが
スタイルシートで指定しているにも関わらず違っているようなのです。


---------------------------------------
■HTMLソース
<table border><tr><td class="main" valign="top"><div class="main2">
ここに文章。改行がおかしくなるのはここに書き込んだ文章です。
改行タグは一切使わず、長い文をだーっと書いています。
</div></td><td valign="top">
ここに文章。
</td></tr></table>


---------------------------------------
■スタイルシート
TABLE{	border:0px;
	height:100%;
	width:100%;}
TR,TD{	font-size:13px;
	border:0px;
	margin:0px 0px;
	padding:0px 0px;}

.main{	font-size:13px;
	background-color: #ffffff;
	background-image:url(back.gif);
	background-attachment:fixed;
	background-position:left top;
	background-repeat:no-repeat;
	width:700px;
	height:100%;
	margin:0px 0px;
	padding:0px 0px;}
.main2 {text-align:left;
	margin:130px 0px 0px 130px;
	padding:0px 0px;}

---------------------------------------

作成者の環境は、Win2000、1280x1024、IE6。
いま現在わかっている限りの閲覧者の環境は、WinXP、1024x728、Firefox、または
WinXP、1600x1200、IE6です。

これは、スタイルシートではなくOSの関係なのでしょうか？
お手数ですがご回答よろしくお願いします。
1   名前： ????? ： 2006/06/12（月） 11:51  ID:EwqEfvef
pxは相対単位ですので、ディスプレイの表示1024x728、1600x1200によって多少大きさが変わるのは自然じゃないかと　思いますが。
個人的な考えですがWEBページの大きさは８００×６００PXが　いいのじゃないでしょうか？
横スクロールバーが表示されるページは歓迎できませんが…。
2   名前： ミストレス ： 2006/06/12（月） 11:51
回答ありがとうございます。

えーと、ディスプレイの表示サイズが同じ場合でも、大きさが変わってしまっています。
余白部分の指定なども、pxでするとずれてしまうのでしょうか？文字数にしてだいたい
３〜４文字のずれが生じてしまっています。

あと、ページは800x600サイズでの確認も行ってからUPするようにしているので
横スクロールが表示されてしまうという状態にはなっていません。
ご指摘ありがとうございます。
3   名前： 匿名 ： 2006/06/12（月） 11:51  ID:zB2/vVG8
例えば半角の英語・数字を連続してず〜っと打っていくと
自動的に改行されずに
はみ出して伸びていきますけど
「、」「。」などの句読点とかもそうですし
あとスペースだけ長く入れても同じ現象が起きますね
（aaaaaaaaaaaaaaaaaaaaaaaaaaaa…とずっと長〜〜〜〜〜く打つとわかります）

そういうやつのことですか？

普通、英語の単語は途中で分けられませんので

specialなどの単語の途中で（例えばeの部分で）改行すべき幅に到達しても

〜〜〜〜〜〜〜〜spe
cial〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜

とはならず

〜〜〜〜〜〜〜〜special
〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜

としてしまいます。つまりcialの分だけ幅を長くとってしまいます。

読点や句読点も、文の先頭に来ることは許されないので
たとえば、「です」と「。」の間に改行すべき長さに達しても

〜〜〜〜〜〜〜〜です
。〜〜〜〜〜〜〜〜〜

とはならず

〜〜〜〜〜〜〜〜で
す。〜〜〜〜〜〜〜〜

というようにされたりします。
結果、「で」の後ろに少しスペースが空きます。


こういうルールのせいで改行位置とかが変わったりしてませんか？
違ったらごめんなさい…
4   名前： ミストレス ： 2006/06/12（月） 11:51
回答ありがとうございます。
そういった規則の問題ではないですね。

で、いろいろ試してみた結果、フォントサイズの指定を13pxから12pxに変更したら
同じ表示になりました。
以前ワードパットを使っていたときの文字サイズ指定欄に13という選択肢がなかったのを
思い出してのことなのですが。ちなみに、指定できるのは10、11、12、14、16、18、、、、
でした。（これ以上大きいのは使わないと思うので省略）
15が抜けてるのがよくわからないのですが、他で抜けているものはすべて素数みたいです。

とりあえず、問題解決ということで。
お答えくださった方、ありがとうございました。
5   名前： Pid ◆byEkK9OALr ： 2006/06/12（月） 11:51
>>1 のご指摘が全てだと思います。
http://www.mozilla.gr.jp/standards/webtips0027.html

>>2
> 余白部分の指定なども、pxでするとずれてしまうのでしょうか

文字数で計算したいのなら em 単位を使います。


ついでに，>>0 のソースの table には何か意味がありますか。table 要素すなわち「表」のレンダリングには，ブラウザは独自のアルゴリズムを使って良いことになっています。テーブルレイアウトをするのなら，CSS によるレイアウトコントロールは，ほとんど絶望的と思って良いです（←個人的な恨みが混じっている orz）。

「段落」を表す要素は table でも div でもなく，p 要素（paragraph）です。
一覧へ戻る