READ MORE

YoutubeやGoogleMapsをリキッド表示にするCSS

absoluteで絶対位置配置した要素のサイズを相対指定の応用で YoutubeやGoogleMapsAPIなどiframeで埋め込む要素を縦横比固定でリキッド表示するCSSです。 スマートフォンやレスポンシブ対応のとき …

READ MORE

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

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

READ MORE

Internet Explorer 8では使えないCSS

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

READ MORE

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

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