iPhoneでフォントサイズが勝手に変わっちゃう時の解決方法
とあるサイトを作成中に、ちょっとはまったのでメモ。 このサイトは、特にiPhone対応という訳ではなかったけど 何気にiPhoneのSafariで開いてみると、フォントサイズがおかしい。。 同じサイズに指定してた箇所も大きさ違うし、 アコーディオンにしてたところも、開くと オープンしたコンテンツ内のフォントサイズが大きくなってしまうという具合。...
View ArticleIE6：DD_belatedPNGを使いつつcssスプライトしちゃう時は1px上にズレるぜ！
タイトルの内容だけどさ… これって有名な話なの？ 知らずにハマったのでメモ。。 最近透過pngを使うデザインがやたら多くなった気がするんですが気のせいですかね？ で、Gナビなんかを透過で書き出してcssスプライトで作成するってこともしばしば。 何も考えずに普通に作ってたら、IE6で不具合発生・・・ マウスオーバーした時に1px上にズレるんすよ。。...
View Article一度設定した progid:DXImageTransform.Microsoft.AlphaImageLoader をリセット(override)する方法
こう上書いてやればよろし。 div { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false); } それか、これでもいいのかな div { -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled = false)";...
View Articleie6 にて min-width や max-width を設定する方法
みなさんご存知 ie6。 いろいろ困らせてくれる ie6。 そんなやんちゃな ie6 で min-width や max-width を指定する方法をメモ。 こんな感じで書く。 #hoge { position: relative; max-width: 1280px; min-width: 980px; width: expression(...
View ArticlebxSlider.js で pager や prev、next をクリックすると startAuto が止まるのを回避する方法
比較的よくお世話になっているライブラリ bxSlider.js オートでスライドをスタートさせるってのはよくある話だけど デフォルトでは pager や prev、next をクリックすると、このオートスライドがストップするという謎仕様となっています。。 これではぶっちゃけ困る。 だって、そんな仕様でお願いされることとかまず無いからね… てなわけで、回避方法を。 2つあります。 その1...
View Article背景画像が横スクロール時に切れてしまう場合の対応方法
width:100% の要素にcssにて背景画像を敷くことはままあることだと思います。 しかし、横スクロールが出る状態で表示しスクロールすると、背景が全部表示されずウインドウ幅で切れちゃうんですよ。。 残念なことにieだけじゃなくChromeとかも… そんな時の対応方法をメモ。 width:100% を指定している要素にそのコンテンツの最小幅を min-width で指定してあげればOK。...
View ArticleAndroid 4系でブロック要素の幅が100％に広がらず小さく書き換えられるバグの対応方法
Androidの4系にて何故かブロック要素の幅が勝手に小さくなる現象に遭遇。 なんぞこれ… 原因は全く不明で、解決方法もこれまた意味不明。。 対応方法はズバリこれ！ 縮まった要素自体にcssで背景色を指定する。 なんか不都合がありそうな時は background-color:rgba(255, 255, 255, 0.01); とか指定してやれば大丈夫なんじゃないかな。
View Articlesassで出力するcssファイルの書式をカスタマイズする際に修正するto_css.rbの場所【Mac OS X】
sassで出力するcssファイルの書式をカスタマイズするにはto_css.rbを修正すればいいんだけど このファイルの場所をいつも見失ってしまうので備忘録的メモ。 Macintosh HD > ライブラリ > Ruby > Gems > 2.0.0 > gems > sass-3.3.14 > lib > sass > tree >...
View Articlecss の :nth-child() で何故か偶数と奇数が逆になっちゃったから調べてみた
表組みを作る際に1行毎に背景色を変えたいってのはよくあることかと思います。 1行毎って言っても、ほとんどが奇数行と偶数行での振り分けなんですけどね。 で、ie9以降の対応で良ければ、わざわざjsを書かずにcssにて:nth-child()を指定して実装するんですが、先日、自分の理解不足によりハマってしまったので備忘録としてメモ。 先ずはハマったものと同様の構造のhtmlを。...
View ArticleChromeにて文字サイズが大きくなる時の対処法
Chromeではviewportにinitial-scaleを設定しないとフォントサイズが大きくなってしまうという残念なバグがあります。 通常はinitial-scaleを入れることがほとんどだけど、landscape時にportraitの状態をそのまま拡大して表示して欲しいという依頼も多く、その時は例えば次のようにviewportを設定することになります。 <meta...
View ArticleiOSのSafariにてselect内のテキストが長い場合に省略されてしまう問題を解決する方法
フォームを作っていると、<select>内に長いテキストを入れたい場合がたまにありますよね。 ただ、あんまり長いとiOSのSafariでは後半が省略されて三点リーダーで表示されてしまいます。 これでは正確な選択項目が分からないので、iOSのSafariでも全てきちんと表示させたいなぁと。。 そこで困った時の stack overflow 。 やっぱりありました！流石ですね。...
View Article
