タグで字間を指定すると改行がうまくいきません

質問

こんにちは。
現在、素材屋さんからダウンロードしたスキンをカスタマイズして掲示板をつくっています。私はMacユーザーなのですが、Windowsで見たときにかなり字間が詰まって読みづらかったので、body,td{letter-spacing:1px;
}でスペースをあけようとしたところ、バランスはよくなったのですが、掲示板での投稿記事の、行スペース（改行まではされるのですが、２度改行して一行空けてある部分）が詰まってしまっていました。

他のサイトで、body,td{letter-spacing:normal;
}にすれば大丈夫だとありましたが、それだとやはり字が詰まってしまうんです。

Windowsで見てもMacで見ても、違和感なくバランスよい文字の並びになるような、いいアイデアがありましたら教えてください。
よろしくお願いします。

回答No.8

goldfox

＞Macで見ると、文章が記事の枠からかなりはみだしてしまっていました...。（枠内で自動的に改行されない状態）

調べて見たところ、そちらはMacならではのバグらしいですね(^^;
Macではletter-spacingを認識しないようにするのが対応策のようです。
以下のサイトが参考になると思います。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/text.html#letter-spacing

お礼

そうなんですか...。ブラウザや機種によってこんなに色々とバグが発生してしまうんですね。知りませんでした。
わざわざ調べて下さって本当にありがとうございます。教えていただいたサイトもとても参考になりました。どうもありがとうございました！

回答No.7

goldfox

ブラウザのバグらしいです。

body,td{letter-spacing:1px;}
br{letter-spacing:normal;}

で、詰まりは解消するかと思います。

お礼

お礼が遅くなりすみません。ご回答ありがとうございました。
教えていただいたタグを入れてみたのですが、Winで見ると確かに、ちょうどいい感じにスペースができたのですが、Macで見ると、文章が記事の枠からかなりはみだしてしまっていました...。（枠内で自動的に改行されない状態）
このタグは、通常ならMacでも問題なく表れるものなのでしょうか？それとも、私が何か、おかしなタグを入れてしまったためにこうなってしまうのでしょうか？
また何か教えていただけることがありましたらお願いいたします。

回答No.6

goldfox

ブラウザのバグらしいです。

body,td{letter-spacing:1px;}
br{letter-spacing:normal;}

で、いいはずです。

回答No.5

UKY

> body,td{font-family:"Verdana","Osaka",'ms ui gothic,Osaka';}

'ms ui gothic,Osaka' なんていうフォントはないと思いますが……。あなたがやりたいのはこういうことでは?↓

body, td {font-family:"Verdana","Osaka","MS UI Gothic",sans-serif;}

フォントファミリーの設定はいたって普通ですが、フォント/テキスト関連の設定はこれだけですか?
これだけで変になるということは考えにくいのですが……。

お礼

お礼が遅くなりすみません。
font-familyは、言われた通りに直してみました。
ところが、恐らくそれとは関係なく、また別の問題が出てきてしまって、ブラウザに表示されるタイトルの「掲示板」の文字が文字化けし、「掲ヲ板」となってしまうのです。「表示」などの場合の「示」の文字化けは、\を入れることで解決すると他のサイトで書いてあったのですが、「掲示」の場合はそれは効きません...私のMacだけでなく、姉のMacでもネットカフェのWinでも文字化けしてしまっていました。

フォントの設定は、今は
body, td {font-family:"Verdana","Osaka","MS UI Gothic",sans-serif;}
body,td{line-height:16px;}
body,td{letter-spacing:normal;}となっています。
度々すみませんが、また何か気づいたことがありましたらお願いいたします。

回答No.4

hinatamama

No3です。

> 「Winは見慣れていないから」という理由だけでなく、私の作ったページは見づらくなっています。

そうだったんですか。失礼いたしました。
スタイルシートは、どこにも使っていないのでしょうか？使っているところがあれば、それが原因かもしれませんよ。font-familyとか。

お礼

さらにアドバイスいただいて感謝しています。
私はタグについては本当に初心者なので、font-familyに関しては、全体的に文字がバランス良く見えていた、他の方の日記ページのソースをそのままコピペさせていただきました。内容は、body,td{font-family:"Verdana","Osaka",'ms ui gothic,Osaka';}です。いかがでしょうか？....問題がありそうであれば教えていただけるとありがたいです。

回答No.3

hinatamama

#2さんのおっしゃるように、普段見慣れているのが違和感のない字間です。あなたにとって違和感があっても、ユーザーにとってはそれが普通です。
字間が詰まってみえるのはフォントの問題もありますしね。

行間は、#1さんの方法で、

body,td{
line-height:1.4em;
}

というように指定します。5pxだと5px間隔で開きますが、5pxですと、文字が5px以上ある場合、文字が重なるでしょう。
一般にフォントの1.5倍くらいが上限で見やすい行間ではないでしょうか。例えば1.5倍は、150%、または1.5emというように指定します。

お礼

ご回答どうもありがとうございました。
下の方にも書いたように、「Winは見慣れていないから」という理由だけでなく、私の作ったページは見づらくなっています。例えば、全く関係ない別のタグが原因ということはあるんでしょうか...？
すべてのソースをここでお見せして「ここが原因かも」と言っていただければいいのでしょうけれど...。またなにか思い付いたら、教えていただけると幸いです。

回答No.2

UKY

mac ユーザーにとって詰まって見える字間も win ユーザーにとってはむしろそれが当たり前なわけで、単に mac と win で見た目が違うから合わせたいというのであればそれはどうかと。
製作者の好みと閲覧者の好みはえてして異なるものだと思います。

純粋に「違和感なくバランスよい」というのが目的であれば、何もいじらないのがベストでしょう。誰でも普段見慣れているものが違和感ないというものです。

あと、単純に OS の違いだけを考えるのはナンセンスです。ブラウザの違い、画面の大きさの違い、その他いろいろ考慮すべきことはあります。

で、改行が変になる件ですが、win の Internet Explorer は letter-spacing との兼ね合いでうまくいかなくなるバグがあるみたいですね。
回避する裏技はなさそうなので、素直にあきらめるしかないかと。

お礼

ご回答どうもありがとうございます。
確かに「慣れ」という部分は大きいとは思いますが、ひとつ気になったのは、私の作ったサイトだけがやけに、その差が大きかったことなのです。他の、例えばメジャーなMSNやYahoo!などのサイトや、私がいつも読んでいるMacユーザーの方のblogやBBSでも、Winで見た時に、私のものほど字が（横に）詰まっていないのです。それでソース表示などをして見てみたのですが、特にそういった指示をしているのか見つけられず、どなたかご存じであれば、と思いました。

回答No.1

Apacheman

こんにちは。初めまして。
Macは持っていないのでわかりませんが、CSSに以下のようなソースを記入すればいいと思います。
line-height : 5px;
5pxは調整してください。

お礼

はじめまして。
行間の指定はすでにしてありまして、私はどうしても字間の詰まりが気になってしまうのです...
もう少し色々調べてみたいと思います。
ご回答どうもありがとうございました！