【CSS】iPhoneを横向きにしたときに文字サイズが大きくなる件

投稿日:2011年10月7日作成者: r_tsugawa

ちょっとハマったのでメモ。

iPhoneを横向きにしたとき、ブラウザの文字サイズがどう考えても大きくなってしまう問題にぶちあたった。

どうやら原因はモバイルサファリの仕様にあるようで、自動的に文字サイズを調整してしまうらしい＾＾；

まさに小さな親切大きなお世話状態。

ってことで、以下の一行でばっちりOK!

body{
-webkit-text-size-adjust: none;
}

【CSS】floatしたリスト（li）の高さを揃える

投稿日:2011年9月5日作成者: r_tsugawa

返信

とりあえずCSS tipsということで。

前にも書いたような気もしなくもないけど、リストのお話。
普通、リストをfloatで横並びにしたとき、その中の文章量によって高さが変わります。

リストに背景色を付けたい場合とか、デザインによってはどうしても高さを揃えたいケースがあります。

当然、高さを固定値で指定すればOKだけど、可変したい場合のほうが多いと思うので。

ってことで、そんな場合の解消法を書いてみます。

投稿日:2011年2月10日作成者: r_tsugawa

返信

僕らのようにウェブ制作を生業としている人種を除いて、ホームページの制作というのは
とてもハードルが高いように思う。

投稿日:2010年8月5日作成者: r_tsugawa

返信

というわけで、CSSのテクニックが紹介されているサイト達です。
特に目新しいものはないですが、意外と抜け落ちてたりするのではないでしょうか。

やっぱりコードは短くてわかりやすいものがいいです。笑

ゆっくりまとめ読みします・・・苦笑

投稿日:2010年4月2日作成者: r_tsugawa

返信

グローバルメニューなどでよく見かける画像置換。
text-indent:-9999px;　のようにマイナス指定して、そこの背景に画像を持ってくるという手法。

しかし、この方法ではもしそこにリンクを張っていたときに、点線が左端からその場所まで続くという非常にカッコ悪い状態になってしまう。text-indentをマイナスで指定してるから当たり前といえばそれまでだが。

そこで、この画像置換時に点線を正常表示させる方法があったので紹介。

これをかけてやるだけでOKです。
overflowとは盲点だった・・・。