knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

2015-12-16から1日間の記事一覧

iOS版Safariで明朝体表示になってしまう

CSS

まずは下記をご覧ください。 この部分は本来ゴシックでなければいけないのに、明朝体で表示されてしまっています。 フォントの指定をひも解いてみると次のように書いてあります。 body{ font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","MS Pゴシック","Osa…

iOS版Safariで郵便番号にリンクが設定される

format-detectionを利用 iOS版Safariでは、電話番号だけでなく、IPアドレスや郵便番号にまでリンクが自動で貼られてしまうという性質があります。 しかも郵便番号に貼られたリンクをタップしても、特に何か起きるわけではないので、ユーザーの方を混乱させて…

iOS版Safariで文字サイズが無視される

CSS

ブラウザが持つ、文字サイズ調節機能を指定する 稀に、iOS版Safariにおいて、CSSで指定した通りの文字サイズで表示されないことがあります。 以下の例では、リード文(青く塗られた部分)が異常に大きくなってしまい、小見出し(赤く塗られた部分)よりも目…

iOS版Safariでフォーム入力時に自動ズームしてしまう

iOS版Safariで入力フォームにフォーカスすると、勝手にズームすることがあります。 予告なくズームされるため、ユーザビリティを考慮すると、好ましくありません。 この現象に対する対策はいくつかあるため、ご紹介いたします。 font-sizeを大きく設定する i…

IE8で透過PNGのフェードが汚れる

以下のような事例を想定します。 こちらの事例はページ読み込み時に、タイル状に並んだ透過PNGがフェードインする要件だったのですが、IE8で表示したときに透過チャンネルの部分が黒く汚れてしまいました。 フェードしているので分かりにくいかもしれません…

スタイルシートのみで吹き出しを実装

CSS

borderの特性を利用する このようなイメージの吹き出しを作ります。 問題なのは「角」の作り方ですが、ヒントはborderの描画のされ方にあります。 たとえば、次のようなdivの枠線は下図のように表示されます。 div{ width: 200px; height: 80px; border-styl…

IEで空セルが消失

以下は、IE6/7での表示です。 セルが消失しています。 tdがないわけではなく、何も値の入っていない空セルなのです。 IE6/7では空セルは表示すらされないという特徴があります。 何かしら文字列を入れればよいので、半角スペースを入れます。 実態参照で書き…

ワイルドカードで要素を取得すると親要素をさかのぼり続ける

イベントのバブリングに注意 たとえば、ページ内の任意を場所をクリックしたとき、クリックした場所にある要素のタグ名を出力するという事例を想定します。 まずタグ名は次のように取得可能です。 var target = /* DOMオブジェクト */ var tagName = target.…

SSIをshtml以外でも実行可能にする

.htaccessに以下を記述 AddOutputFilter INCLUDES .shtml .html .php .xsl includesという命令を、列挙した拡張子のファイルで実行可能にする、という意味です。

BASIC認証下ではできないこと

主な現象 以下に列挙したもの以外にもありそうなので、分かり次第追記してゆきます。 僕が経験したことがあるのは次のとおり。 faviconの反映ができない ※端末による Apple-touch-iconの反映ができない ※iOS端末のみ リンク先に指定したファイル(PDF等)の…

nullを参照してしまったら

try~catchを活用 たとえば、ユーザーエージェントからIEのバージョンを判別します。 var ua = window.navigator.appVersion.toLowerCase(); var appVersion = parseFloat(ua.match(/msie(\s)?(\d+)/i)[2]); String.matchメソッドの戻り値は、正規表現の後方…

IE6でのfloat解除方法

CSS

zoom:1を再確認 floatの解除といえばclearfixが有名ですが、疑似要素をサポートしてないIE6ではclearfixが使えません。 そこで代替として、floatを解除する性質のあるoverflow:hiddenが用いられますが、意外な落とし穴があります。 下図はヘッダー下にある2…

YouTubeのレスポンシブ対応

CSS

レスポンシブ対応したWEBサイトにおいてYouTubeを埋め込む際、ウィンドウ幅が縮んでもアスペクト比を固定しなければいけません。 その方法をご紹介します。 paddingを使う方法 <div id="wrapper"> <iframe src="//www.youtube.com/embed/"></iframe> </div> このようにスタイルを指定します。 #wrapper{ position: relative; height: 0…

ヘッダーを固定表示にするとページ内アンカーがずれる

CSS

目に見えない余白をつくる 下記のような事例を想定します。 グレーのヘッダーはスクロールしてもウィンドウ上部に固定表示するようにします。 スタイルは次のように指定しています。 header{ position: fixed; top: 0; left: 0; } 記事(article)のタイトル部…