グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

ブラウザで100%で表示していた場合は崩れないのに、
縮小させて表示した場合に崩れてしまう場合があります。
たとえば下記のように記述した場合。

■html
-----------------------
<div class="all">
<div class="left"></div>
<div class="right"></div>
</div>
-----------------------

■CSS
-----------------------
.all{
width:402px;
height:50px;
margin:0;
padding:10px;
background-color:#FF0000;
}

.left{
width:200px;
height:48px;
margin:0;
padding:0;
border:#cccccc 1px solid;
background-color:#00F;
float:left;
}

.right{
width:200px;
height:50px;
margin:0;
padding:0;
background-color:#00FF00;
float:right;
}
-----------------------

100%ではこのように見えます。



縮小してしまうと



このようにずれてしまいます。
これは、親のボックスにぴったり入れ子していてかつ、
子のボックスにborder1pxを設定している為におこってしまいます。
border1pxが縮小できずにそのまま表示されてしまうため、
縮小した場合の数値が、あわなくなってしまうようです。
※2px以上の場合は大丈夫です！

今のところの解決策としては、親のボックスにぴったり入れ子せず
2px以上の余裕を持たせるようにする。
デザインによっては、できないこともありますね。。。。

■現象が起きてしまうブラウザ
IE,firefox

文章中に、アイコンなど小さな画像を入れたい場合が結構あります。
そんな時は、画像に「vertical-align:middle;」や「vertical-align:text-top;」を
指定するとほとんどのブラウザで崩れる事なく表示されます。
が、やはりIE6では、画像挿入後にline-heightが無効になってしまうらしく
かなり崩れてしまいます。

• ああああああああああああああああああああああああ
• いいいいいいいいいいい
• ううううううううううううううううううううううううううううううううううううううううううううううううううう

上記は1、2、3の文章をリストにしています。
下記のように、リスト内の画像にスタイルを当てると
多少のずれはあるものの、IE6でもきれいに表示されます。

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

li img{
padding:6px 0 5px 0;
vertical-align:middle;
}

li > img {
padding:0;
}

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

下記のページを参考にさせていただきました。
IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる

もともとmacはwindowsに比べて文字間が広いという認識でしたが、
最近firefoxは、windowsに近い表示になってきたようです。
そこで困るのがsafari。
いくつか検索してsafariのみにきくハックを試してみましたが、
バージョンが低いもの用なのか、効果なし。。。
やっとバージョン 5.0.3使えるものを見つけました。

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

@media screen and (-webkit-min-device-pixel-ratio:0){
ココにsafariだけにきかせたいスタイルを書く
}

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

でもバージョンが新しくなってくると使えなくなってしまう可能性があるので
期間限定のサイトに限った方が良さそうです。

GIGAZINEさんの記事で、無料で使える日本語webフォントが紹介されてました。

デコもじで、ホームページが、ブログが、もっと楽しくなる♪
http://decomoji.jp/
（試し書きとかもできます）

webフォントというのはCSS3の機能で、
予めサーバーにアップロードされているフォントを表示させる機能だそうです。

つまり、見る側の環境に依存しない（しにくい？）webページが作れる、
ってことですよね？
これはすごく便利そう・・

今のところ見出しなどに利用するのを想定されているいるようですが、
ページ全体をwebフォントに、とか、問題なければやりたいくらいの勢いです。

そもそもIEが完全対応してなかったりとか、
上のサイトの場合は商用利用ができなかったりとかしますが・・

今後もっと使いやすくなっていくのでは思うので、とりあえずメモです。

携帯サイトの制作にXHTMLを使ったのですが（cssを使うため）、
MTで書き出していたので文字コードはUTF-8でした。
あまりない状況かもしれませんが、そのときに躓いたところを
メモしておこうと思います。

※ちなみに頼りの綱だったMT-I18NプラグインはMT5未対応でした。。
※2010.5.20 追記
I18NHelperというプラグインなら動くとの情報を頂きました。
タグを書くときは文字コード指定の大文字/小文字に注意です！