Safari（Windows版）の場合 本来ベンダープレフィックスはプロパティ名にのみ付けますが、Windows版Safariの場合はプロパティの値にもつけましょう。 -webkit-transition: transform 250ms linear; -webkit-transition: -webkit-transform 250ms linear; -mo…

Helveticaが原因 IEでfacebookの「いいね」ボタンを実装すると、文字化けしてしまいました。 どうやら、デフォルトでHelveticaがフォント指定されているらしく、そのため文字化けを起こしてしまったようです。 IEとHelveticaとの相性の悪さは有名で、今回の…

Flash特有の属性値を指定 スクロールに追従する固定ヘッダーを実装していたところ、IEでのみYouTubeを埋め込んだiframeがヘッダーより前面に表示されてしまうという現象が起きました。 本来は左図のようにヘッダーが最前面に表示されるべきところ、右図ではY…

display:noneは無効 何かとクセの多いHTMLメールコーディングですが、Gmailは特に癖が多く、先日は画像の非表示ができないというバグに直面しました。 調べたところ、どうやらdisplay:noneは無効になってしまうとのことです。 stackoverflow.com こちらの記…

ブラウザが表示できる最小フォントサイズは10px ブラウザは可読性維持のために、CSSで10px未満のフォントサイズを指定しても無視するという機能が備わっています。 以下の例では、決して7pxで表示されることはありません。 後述しますが、zoomを使っても無駄…

たとえば下記のようなページを想定します。 ビジュアルが表示幅ぴったりに広がっており、とても洗練されたデザインですね。 今回はこのデザインを横幅320pxに最適化して表示する際の問題について書きたいと思います。 横幅320pxに最適化とは 横幅320px固定の…

jQueryプラグインを利用してスライダーを作っていました。 どうやらこのプラグインは、サムネイルではなく番号をコントローラーとして出力するようです。 ところがデザインでは、この部分には番号ではなく丸いボタンが指定されていました。 なので、背景色や…

明朝体にするとき、最も簡単なフォント指定は次のとおりです。 font-family: serif; これでほとんどのブラウザでは明朝体になるのですが、IE8だけ表示が崩れてしまいます。下図の赤枠で囲った文字がその顕著な例です。 「青」がゴシック体になっているし、「…

関数内で、その関数自身の情報を得たいなと思っていました。 次の方法で可能となります。 var functionA = function(){ console.log(arguments); } argumentsというオブジェクトは、本来名前の通り関数に渡された引数を参照できる配列に似たものです。 もし…

クリックを無効にするには、JavaScriptを用いる手法をよく見かけますが、CSSでも実装が可能です。 a{ pointer-events: none; } 対応ブラウザはモダンブラウザが中心となっているそうです。 なぜこのようなプロパティがあるのだろうと思ったのですが、どうや…

ブラウザのもつ印刷機能では、デフォルトで背景色や背景画像を印刷しないことになっています。 画像をHTML上に直書きするのも一つの手段ですが、セマンティックなHTMLドキュメントを書こうとするとどうしても限界があります。 IEの各バージョン / Firefox / …

inline-blockとletter-spacingを同時指定すると崩れる たとえば下図のようなレイアウトを実装すると想定します。 リストを横並びにした、シンプルなレイアウトです。 これをinline-blockを用いて横並びにすると、なぜかFireFoxだけカラム落ちしてしまいまし…

transitionが終了したら実行されるようにしたい CSS3のプロパティであるtransitionを用いてアニメーションをさせるとき、transition終了時にコールバックを実装したいときがあります。 jQueryのanimateメソッドならば、簡単にコールバック関数を指定できるの…

Android2.3デフォルトブラウザにはiframeに関連するバグだけでなく、他にもスクロールにまつわるバグがあります。 今回はoverflow:scrollにまつわる現象について、その解決方法をご紹介したいと思います。 要素からあふれた部分を表示するoverflowプロパティ…

iframeを使っていませんか レガシーなIEと同じくらい不具合の多い旧式Androidデフォルトブラウザですが、まれにファーストビューのまま画面がフリーズしてしまうことがあります。 そのようなときはまず、iframeを使用していないか疑ってください。 iframeを…

jQueryを用いた場合 垂直方向はscrollTopで取得できますが、水平方向のスクロール量はscrollLeftによって取得します。 var scrollLeft = $(ELEMENT).scrollLeft(); 引数に数値を与えれば、その数値だけ水平方向にスクロールします。 たとえば左に200pxスクロ…

※inputValという変数に、チェック対象の文字列が代入されていると仮定します。 空白チェック 空文字、半角スペース、全角スペース、タブを検知。 if(inputVal == '' || inputVal.match(/^[\s\u00A0\u3000]+$/g)){ console.log('空白'); }else{ console.log('…

本来ならばページの種別ごとに条件分岐をすることで、WordPressのテンプレートタグを利用して取得できます。 もし条件分岐をせず、ワンライナーで書きたい場合は以下の方法で可能です。

CSS2から対応しているclipというプロパティを利用して、テキストを非表示にします。 .visibilittyHidden{ position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; } 理屈はいたってシ…

このような矢印です。 Chrome/Safari/FireFoxならば、次の方法で非表示にすることが可能です。 select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } ところが、IEではこの矢印のみが残ってしまいます。 IE10以上になってしまいま…