しるてく

技術的な話をします

css

一部のAndroid端末でWebFontの代わりに絵文字が表示されてしまう問題

css

スマホサイトでWebFontの私用領域つかっていたら、一部のAndroid端末でWebFontの代わりに絵文字が表示されて困った。DECOLOG TECH BLOG: スマートフォンブラウザの絵文字事情ココらへんをさけるようにマッピングすれば良さそう。

AQUOS PHONEでposition: fixedを指定した要素より後でキーボードが開かない

ヘッダーとかフッターとか固定するのにposition: fixedを使用すると、Android2.3ではもろもろ問題が起こるんだけど、その一例としてAQUOS PHONEでキーボードが開かなくなるようだ。どう解決したもんかなと思ったけど、ヘッダー/フッターみたいな感じで位置固…

compassでcssスプライトするときの出力をできるだけ少なくする試み

概要 Sprite layouts | Compass Documentationcompassでのcssスプライトを試してみたのでメモ。 sprite-backgroundっていうmixinは結構色々な人がブログに書いてるんだけど、retina対応していなかったり、無駄な処理が入っていたりしてなんかしっくりこなか…

css3 transitionでheight: auto;が使えないのでmax-heightを使ってみる

css

背景 CSSだけでスクロールアップダウンしたいなーと思って、特に何も考えず、次のような実装をしてみた。 #open-infoをクリックすると、#infoが内容量に合わせて良い感じにスクロールして閉じたり開いたりしてくれる予定。 実装 #info { overflow: hidden; h…

imgとかinputなどの置換要素にはbefore, afterは使えないよ

css

inputにbefore使おうとしてはまったのでメモ。 仕様読めばすぐ解決(できないという意味で)だったんだけど色々試して時間無駄にしてしまった。 12. Replaced contentIf the computed value of the part of the 'content' property that ends up being used …

font-familyを設定しないとiOS6で明朝になってしまう

css

iOS6のSafariのデフォルトフォントが明朝になってるっぽくて、font-family設定していないサイトがアレな感じになってしまったので直してみた。 スマホ専用のサイトです。 font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W…

iPhoneでリンクをクリックしたときに灰色ハイライトがつくのをやめたい

css

あれはクリックしたことが分かって嬉しいことも多いんだけど、ださいときもあるのでハイライトさせたくないときはこんなのを書くと良い。 a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

list-styleで括弧付の数字を振りたいとき

css

ちょっと前に友人と話していたのですが、 list-styleで()付きの数字をつける方法。 動作確認はあまりしていないですが、最近のは大体大丈夫なはずです。IE7はダメです。 <html> <head> <style> ol li{ list-style-type:none; list-style-position:inside; counter-increment:</style></head></html>…