

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。
pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓
<p>あああああ</p>
<p>かかかかか</p>
★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;
各pタグにわかりやすく背景色をつけて確認してみると・・・
・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む
それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?
pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?
No.3ベストアンサー
- 回答日時:
まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。
誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。
なお、文字列の横をそろえるのほぼ無理と考えてください。
>pタグに限らず、ul、dlなんかでもずれることが多いです。
こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。
ixkaitoさん、回答ありがとうございます。
line-heightを相対的な指定にするとブラウザ間での差が生じるんですね。
確かにline-heightに絶対値を指定するとぴったりとなります。
reset.cssはよく使うのですが、
ブラウザのデフォルト環境をリセットした状態で、
font-sizeに%で相対的な指定を行ったり、pxで絶対的な指定を行っても、
line-heightに相対的な指定を行うとなぜずれるのかが不思議でした。
今回のfont-familyの指定だと、
win環境(ヒラギノが入ってないもの)だとMS Pゴシックで、
Mac Safariだとヒラギノ角ゴシックになるようにしてありますが、
書体の違うSafariがIE6/7、Chrome、Firefoxとピッタリなのに、
IE8と9だけが上下のmarginがズレてしまうんですよね。
(文字と文字の間のズレはどのブラウザでもやはり生じてしまいますね…)
ただ、pxでfont-sizeを指定してもline-heightに相対的な指定を行った場合は
必ず誤差が生じるということがお聞きできたので、当然のものと捉えられて安心しました。
ブラウザの仕様って奥が深いですね。。
No.2
- 回答日時:
DTP (
http://ja.wikipedia.org/wiki/DTP )やワープロとHTMLは、まったく異なります。前者は、どのように配置し印刷するかを指定するもので、機械や第三者には内容自体を理解することはできません。HTMLは、どこが見出しで、どこからどこまでがひとつの段落で、どこが引用なのか--という文書構造を示すものです。それをどのように表示するかはスタイルシートで指定しますが、それはずれて当たり前、ずれても良いという前提です。
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
ブラウザ、OSを含め、どの利用形態であっても文書構造が正しく伝わること--それが最も重要なコーディング--デザインなのです。
「テキストをぴったりを合わせる技術ってないのでしょうか? 」
のような些細なことにこだわってはダメなのです。
その上で、説明すると
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
必ず、総称ファミリ名を最後に書きます。羅列されたフォントが無いときに利用されます。
font-size: 14px;
line-height: 1;
字の大きな日本語の場合、ブラウザが持つデフォルトのスタイルシートによるline-heightは小さすぎます。通常は1.4em~1.6em程度が読みやすいでしょう。代わりに段落が変わると一文字、字下げして段落が変わったことを示します。
margin: 0;
padding: 0;
よって
p{line-height:1.6em;margin:0;text-indent:1em;}
と指定すると良いでしょう。
「ul,ol,li,dl,dt,dd」についても、ブラウザによってmarginやpaddingの指定が微妙に異なりますから、必要なら
ul,ol,dl{margin:0.5em 1em;padding:0;}
li{list-style-position:outside;}
li,dd{text-indent:1em;margin:0 0 0 2em;line-height:1.4em;}
などと指定することがあります。
★ただし、あまり使用せず、ブラウザのデフォルトのスタイルに任せてブラウザ間の誤差は気にしないほうが良いです。視覚障害者はフォントを大きくして利用したりしますのでね。
ウェブページのデザインは、DTPやワープロとまったく異なるものである。多少ずれようが無視できる度量が必要なのですよ。
ORUKA1951さん、回答ありがとうございます。
確かにテキストの誤差を気にしてはいけないですよね。
私もやはり、ユーザビリティの観点から、
・font-sizeは相対的であるべき、
・文字の読み上げを意識した正しい文書構造でコーディングを行うべき、
と思います。
ただ、(私自身、趣味からコーディングをはじめたレベルですが)
会社で制作をお願いされることがありまして、
「サイズは固定してくれ」と言われることが多いのです。
会社の人たちは、そういった本質の部分を説明しても、
やはりブラウザ間でのレイアウトの誤差を気にされるんですよね。
これからは、納得してもらえるように
もう少し頑張ってみたいと思います。
回答ありがとうございました!
No.1
- 回答日時:
CSS誤記・・・
差異云々の話はまだ早いのでは?
line-height: 1; は各行の高さが1フォント分って事ですよ。
基本:文章にheightは使わない。
因みに、複雑なデザインによりますが“全て”を100%完璧に揃えるのは無理です。

naokitaさん、回答ありがとうございます。
今回、ブラウザごとのテキスト1行あたりの差を厳密に確認するために
line-heightを1にしていました。
font-sizeを14pxに固定し、line-heightを1と指定しても、
やはりブラウザ間での誤差が生じることが見てとれました。
たった2行のテキストでこれですから、
おっしゃるように複雑なデザインによりますが、
全てを100%完璧に揃えるのは無理でしょうね。
各ボックスモデルの解釈がどうなっているか、
個人的に理解できていなかったので、
精通されている方、仕事をされている方の対処方法や解釈が知りたかったのです。
これを機に、より一層、勉強をしたいと思います。
迅速な回答ありがとうございましたm(_ _)m
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- 物理学 万有引力と重力の位置エネルギーについて 例えば、地球の表面から真上に質量mの球を初速v₀で投げた時の 7 2022/04/18 23:15
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- 工学 電気関係のテキストにて以下の問題が分からず、回答をお願いします 【問題文:ブレーカーがトリップしてい 3 2023/05/22 10:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Excel VBA メール作成について ...
-
CSSのid名class名の重複回避方...
-
マウスオーバーで下線を表示さ...
-
リストの前後の行間をなくす方...
-
次のGTK+の一連のコマンドが
-
Format 関数 表示書式指定文字...
-
フォントの大きさを2と3の間...
-
テキストエリア内の文字の装飾
-
ホームページビルダー作成HPがi...
-
CSSで特定の場所だけ、vlinkの...
-
<input type="file"> の幅
-
CSSを適用したい
-
HTMLファイルのフォント指定
-
文字の位置、上下のマージンが...
-
background-color: #ddd;の意味...
-
アコーディオンメニューが思う...
-
font-family、font-sizeについて
-
<pre>にフォントを・・・。
-
文字が斜め(斜体、イタリック体...
-
</h1>行とその次の行との間に空...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
文字の位置、上下のマージンが...
-
Excel VBA メール作成について ...
-
background-color: #ddd;の意味...
-
Format 関数 表示書式指定文字...
-
リンク文字
-
Excel VBA メール作成について ...
-
テキストエリア内の文字の装飾
-
HTMLで特定の文字だけ色を変え...
-
全角半角含めて等幅で表示したい
-
<pre>にフォントを・・・。
-
fontサイズ指定の ”-(マイナ...
-
htaコードですが、IE6に対応さ...
-
jquery.validationEngine.jsカ...
-
特定の文字のみcssを適用するに...
-
CSSを一部無効にしたい
-
CSSのid名class名の重複回避方...
-
テキストボックス途中で切れて...
-
フォームのスタイルについて教...
-
CSSで14px/1.4の部分の記述は正...
おすすめ情報