<< June 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< コーディングがうまくなるポイント | main | 引越し準備中 >>

ハムからみんなへお願い&お知らせ

相互リンク募集!
ハムにメールを送る時はここから
07月05日(Sat)

スポンサーサイト

一定期間更新がないため広告を表示しています

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ

  • 2014.07.05 Saturday
  • -
  • -
  • -
  • by スポンサードリンク

03月12日(Wed)

クロスブラウザとfont-sizeの問題

久々にこっちに記述

コーダーが悩むポイントの一つ


Webを制作している上で、毎回ぶちあたる問題の一つに
font-size指定がある。

僕の場合、デザイナーにもらったデザインをもとに、
それ通りにコーディングしていくのが仕事だけど、
OSとブラウザの違いによってfont-sizeの大きさがバラバラになる。

だからなんとか統一しようと思うけど、うまくいかない。

解説しているサイト(参考のために)


いろんなサイトを参考にしてみた。
TRANS - 英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ
RedLine Magazine : font-size:82% って何?

この他にもいろいろあったけど、
結局のところ、ブラウザによって、そろえる最前の方法がない。
一応あるにはあっても、必ずどこかでほころびが見つかる。
サイズをそろえたとしても、font-familyによる違いとかね。

font-familyの違いはかなり顕著に現れて、
同じ文字サイズだとしても、
MS ゴシックとMacのヒラギノとかの文字間隔が違うから、
どうしても横幅がかわってくる。

これはもうどこかで妥協するしかないか。。。

僕が採用している方法


そんな中でも僕が採用しているCSSは以下のようになっている。

body { font-size : 62.5%; }
html>body { font-size : 10px; }


なぜこのような指定なのかと言うのは、
こちらを参照してもらいたい。

RedLine Magazine : bodyにfont-size:62.5%を指定すると・・・

簡単に言えば、感覚的にピクセル指定ができるようになるからだ。

CSSハックを使う理由


html>body { font-size : 10px; }

CSSハックを用いて、IE以外のブラウザのデフォルトを
10pxに統一している方法の一つで、
このような方法を採用した。

なぜこのようなハックを使用したのかというと、
ブラウザのFirefoxは、
Windowsだとデフォルトのフォントが16pxに対して、
Macだとデフォルトのフォントが14pxになっているからだ。

なので、%でサイズを指定してしまうだけだと、
どうしてもMacのFirefoxだけサイズが小さくなってしまう。

この一つの違いはかなり厄介だ。。。

なぜすべて10pxと指定しないか


なぜ最初から10pxでフォントを指定しないのかというと、
IEでは、pxでフォントサイズを指定すると、
文字の拡大に対応しなくなってしまうからだ。

大きさを固定して動かなくするのであれば、
pxで指定していてもいいのだが、
ユーザビリティの観点から考えて、
文字の拡大縮小に対応していないのは、良くないと言える。
FirefoxやOpera、Safariなどのブラウザは
pxでサイズ指定をしていても、問題なく拡大できるが、
IEだけはできない。

なぜなんだーーーーー!!!

だから正直言うと、なるべくハックは使いたくないのだが、
ここは仕方なく使っている。
ハックだらけのサイト構築よりは、多少の妥協でおわるので、
それはそれでしかたないと思うしかないのである。

それでも問題はある


途中でも書いたのだけど、これだけでは問題解決はしなくて、
使われているfontが違うために、文字間隔によってずれが生じる。

IEとその他のブラウザで、横幅の位置がずれてきてしまうのだ。

これもいろいろ実験してはみたものの、
うまい解決策がうかばずに、
結局これだけはあきらめて妥協している。

サイズさえ同じならばそれでいっか。

デザインと違ってくるのは、
何となくコーダーとして嫌なのだが、しかたが無いようだ。

JavaScriptとかで解決しないかな・・・
いまだ模索中である。。。
JUGEMテーマ:日記・一般

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


07月05日(Sat)

スポンサーサイト

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ

  • 2014.07.05 Saturday
  • -
  • 16:02
  • -
  • -
  • by スポンサードリンク

【i2i】SEO対策ツール ロリポップ NetMile 見ると得する『CMサイト』
コメント
コメントする









この記事のトラックバックURL
トラックバック
categories
archives
recent comment
recent trackback
friend links
link list
あわせて読みたい
search this site.
tag cloud search
others
  • RSS1.0
  • Atom0.3
powered
みんなのブログポータル JUGEM
sponsored links