2015-12-16から1日間の記事一覧
まずは下記をご覧ください。 この部分は本来ゴシックでなければいけないのに、明朝体で表示されてしまっています。 フォントの指定をひも解いてみると次のように書いてあります。 body{ font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","MS Pゴシック","Osa…
format-detectionを利用 iOS版Safariでは、電話番号だけでなく、IPアドレスや郵便番号にまでリンクが自動で貼られてしまうという性質があります。 しかも郵便番号に貼られたリンクをタップしても、特に何か起きるわけではないので、ユーザーの方を混乱させて…
ブラウザが持つ、文字サイズ調節機能を指定する 稀に、iOS版Safariにおいて、CSSで指定した通りの文字サイズで表示されないことがあります。 以下の例では、リード文(青く塗られた部分)が異常に大きくなってしまい、小見出し(赤く塗られた部分)よりも目…
iOS版Safariで入力フォームにフォーカスすると、勝手にズームすることがあります。 予告なくズームされるため、ユーザビリティを考慮すると、好ましくありません。 この現象に対する対策はいくつかあるため、ご紹介いたします。 font-sizeを大きく設定する i…
以下のような事例を想定します。 こちらの事例はページ読み込み時に、タイル状に並んだ透過PNGがフェードインする要件だったのですが、IE8で表示したときに透過チャンネルの部分が黒く汚れてしまいました。 フェードしているので分かりにくいかもしれません…
borderの特性を利用する このようなイメージの吹き出しを作ります。 問題なのは「角」の作り方ですが、ヒントはborderの描画のされ方にあります。 たとえば、次のようなdivの枠線は下図のように表示されます。 div{ width: 200px; height: 80px; border-styl…
以下は、IE6/7での表示です。 セルが消失しています。 tdがないわけではなく、何も値の入っていない空セルなのです。 IE6/7では空セルは表示すらされないという特徴があります。 何かしら文字列を入れればよいので、半角スペースを入れます。 実態参照で書き…
イベントのバブリングに注意 たとえば、ページ内の任意を場所をクリックしたとき、クリックした場所にある要素のタグ名を出力するという事例を想定します。 まずタグ名は次のように取得可能です。 var target = /* DOMオブジェクト */ var tagName = target.…
.htaccessに以下を記述 AddOutputFilter INCLUDES .shtml .html .php .xsl includesという命令を、列挙した拡張子のファイルで実行可能にする、という意味です。
主な現象 以下に列挙したもの以外にもありそうなので、分かり次第追記してゆきます。 僕が経験したことがあるのは次のとおり。 faviconの反映ができない ※端末による Apple-touch-iconの反映ができない ※iOS端末のみ リンク先に指定したファイル(PDF等)の…
try~catchを活用 たとえば、ユーザーエージェントからIEのバージョンを判別します。 var ua = window.navigator.appVersion.toLowerCase(); var appVersion = parseFloat(ua.match(/msie(\s)?(\d+)/i)[2]); String.matchメソッドの戻り値は、正規表現の後方…
zoom:1を再確認 floatの解除といえばclearfixが有名ですが、疑似要素をサポートしてないIE6ではclearfixが使えません。 そこで代替として、floatを解除する性質のあるoverflow:hiddenが用いられますが、意外な落とし穴があります。 下図はヘッダー下にある2…
レスポンシブ対応したWEBサイトにおいてYouTubeを埋め込む際、ウィンドウ幅が縮んでもアスペクト比を固定しなければいけません。 その方法をご紹介します。 paddingを使う方法 <div id="wrapper"> <iframe src="//www.youtube.com/embed/"></iframe> </div> このようにスタイルを指定します。 #wrapper{ position: relative; height: 0…
目に見えない余白をつくる 下記のような事例を想定します。 グレーのヘッダーはスクロールしてもウィンドウ上部に固定表示するようにします。 スタイルは次のように指定しています。 header{ position: fixed; top: 0; left: 0; } 記事(article)のタイトル部…