Macでホームページを作っているのですが...

質問

Macで個人サイトを運営しております。
ソフトはDreamweaverを使っております。
しかし、どうしても納得いかず、解決できない問題があるので質問致します。
テーブルの中にシンプルテキストを数行入れており、テーブルの幅に合わせて改行しています。そして、アップをしてMac IE 5.2で確認すると、行の始めと終わりが揃っており、テキスト全体がテーブルの形どおり四角形に整っております。ですがWindows IE 5.1で同じページを確認してみると、改行した箇所は同じなのに、なぜか行の終わりがデコボコで、テキスト全体の形が揃っていなく、整った四角形ではありません。
テキストが揃っていなくて、デコボコだと汚い感じがしてしまうので困っております。
異なるブラウザの表示によって見え方が違うので、文字の大きさも一文字、一文字違うのでしょうか？
こういう場合、どうやればWindows IE 5.1でもMac IE 5.2でもテキストの文末を揃え、整った四角形のテキストになるでしょうか？
Web制作に詳しい方やWebデザイナーさん教えて下さい。
いちおうそのテキストのCSSも下に書いておきます。
{font-size: 13px; line-height: 140%; color: #555555; }

回答No.4

kjn · ベストアンサー

１のkjnです。WEBではなるべく文字をデザインの一要素とは見なさないように心がけています。デザインとして文字を使いたいときには２の方がおっしゃっているように画像にしてしまいます。そのため文字をタイプするときにはあまり改行を使わず、ある程度の量（４～５行）のブロック単位で読ませるようにします。そしてそのブロックごとにCSSを使って薄い点線で区切るなどして、細部ではなくて全体のバランスに目が行くようにしますね。そうするとあまりブラウザーごとの性格の違いに左右されずにすむので・・・。具体的なテクニックでなくてもうしわけないのですが、参考URLに全体のバランスを重視していてWEBならではの文字組の美しさを表現しているサイトを紹介しますので、がんばって色々勉強してみてください。

参考URL：

http://www.designfarm.org/

お礼

ありがとうございます。
改行をせずに、ブロックでやってみたらとてもよくなりました。それにこっちのほうが読みやすいですね。

回答No.3

flowermaze

OSによるフォントの違いはこちらのページが参考になるかと。
http://aor.ktplan.jp/fonts/fonts.html

Windows標準のMS Pゴシックはプロポーショナルフォントですので、文字によって文字幅にかなり差が出てしまいます。
マス目に入れたようにすべての文字を同じ幅で表示したいのであれば、その部分を等幅フォントで表示するように指定する必要があります。

<tt>でも等幅フォントの指定はできますが、スタイルシートを使うのが良いでしょう。（ttはなぜか文字サイズまで変えられてしまいますし）

{font-family: monospace}

で、WindowsでもMacでも、ユーザーのPCにインストールされた等幅フォントを使って表示することができます。
http://www.tohoho-web.com/css/reference.htm#font-family
個人的には、Windowsで全角文字を等幅指定すると、ちょっと間延びしたような印象があるのですが、そのへんは好みでしょうね。

参考URL：

http://aor.ktplan.jp/fonts/fonts.html, http://www.tohoho-web.com/css/reference.htm#font-family

お礼

回答ありがとうございます。
いろいろあるんですね、勉強になります。
まだまだ私は未熟者ですね。
全角文字を等幅指定してみましたが、やっぱりしっくりこなかったです。

回答No.2

mach-mach

テーブルの中のテキストに改行を入れているということでしょうか？

それはまずいです。下手をすると、例えば・・・
12文字
1文字
12文字
という変なレイアウトになってしまいそうです。

どうしても文章のある部分で改行して、それをテキストにしたいのなら１行に１テーブルにして、テーブルのピクセルに余裕を持たせる。

または、そのテーブル内に表したい文書を画像にしてしまうしかないでしょうね～。

お礼

回答ありがとうございます。
私の説明が下手ですみません。
テーブルの中のテキストに改行を入れているとは、例えば、テーブルの横幅が最大12文字入る大きさだとして、そのなかに
10文字　改行
12文字　改行
11文字　改行
12文字　改行
12文字　改行

としていくとMacで見ると、ある程度行が揃って見えるのですが、Windowsで見ると文字数や改行の位置は同じなのに、なぜが行の終わりがデコボコと不揃いになってしまうということです。

回答No.1

kjn

MacとWindowsではブラウザーに表示する標準フォントも違いますし、大きさも違います。標準設定ならMacのほうが大きいフォントで表示されますし、CSSなどで制御してもMacはOSXならフォント自体にアンチエイリアスがかかっているため太く見えます。そして実際にレイアウトもだいぶ変わってくるでしょう。

異なる環境の異なるブラウザーで同じように文字を見せたいのであればブラウザーごとに最適なCSSを用意して、はじめにサイトへアクセスがあったときにjavascriptでOSとブラウザーを判別し、それぞれに合ったCSSをリンクして読み込ませるしかないでしょう。これはかなり面倒な作業ですし、それでもユーザーが各自でフォントの大きさなどを調整していたらやはりレイアウトは崩れます。WEBサイトでは確実なレイアウトというものはあり得ません。むしろどのような状況でも融通の利く最大公約数のレイアウトを心がけるべきでしょう。

お礼

回答ありがとうございます。
とても参考になります。

なんだかWindowsで自分の作ったWebサイトのテキストを見ると悔しくなってきますが、やはりある程度は仕方ないので予測して融通が利くようなレイアウトになるよう思考錯誤するしかないのですね。

もしkjnさんなら、その際どういったやり方で最大公約数のレイアウトをするのでしょうか？どのブラウザでもある程度テキストが綺麗に見えるようなテクニックみたいなものがあれば教えていただきたいです。