CSSのmedia querysでは必ず1em=16pxになる

レスポンシブデザインで頻繁に使用するCSS media querysのmax-widthでは
文字サイズを基準としたemを単位に使った場合
必ず、ブラウザの初期フォントサイズ16pxが基準になります。

例えば、iPadよりも幅広いデバイスにだけスタイルを適用させたい場合
ブレークポイントはiPadの最小幅768pxになるので、emになおすとこのようになります。

768(px) / 16(px) = 48em

@media screen and (min-width: 48em) {
}

“CSSのmedia querysでは必ず1em=16pxになる”の続きを読む

Internet Explorer 8では使えないCSS

Internet Explorer 8では、ひらたくいうとCSS3から使えるようになったもの全般が効かないのですが
プログレッシブ・エンハンスメント対応の場合切り捨てられる装飾
そして
対応してなかったのをうっかり忘れがちな便利要素
を中心にピックアップしてみました。

便利な装飾プロパティ

  • 角丸のborder-radiusが使えない
  • 色と不透明度を同時に指定できるrgbaが使えない
  • 影をつけるbox-shadowとtext-shadowが使えない

レスポンシブデザイン対応

  • media max-width min-width が使えない

疑似クラス

  • :last-child が使えない
  • :nth-child() が使えない

擬似要素

  • 擬似要素を::after(または::before)の書式で書けない
  • 擬似要素にz-indexがきかない
  • 擬似要素にfilterがきかない

“Internet Explorer 8では使えないCSS”の続きを読む

viewportでパソコン用のウェブサイトをiPad対応

iPadを回転させても画面にフィットさせる

PC用のウェブサイトをiPadでタテ表示にしたときも横表示にしたときも画面内に収める方法。
このメタタグでviewportのwidthを1024に固定するとちょうど良く調整できます。

<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=0">

initial-scaleで初期倍率を指定した状態だと、回転させた時スクロールが出たり、縮小し過ぎたりとハマったので
最初からinitial-scaleは省いておくのがポイント。

もちろん、元になるウェブサイトの幅が1024px以内に収まっているのが大前提です。