knowledge base

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

2016-01-07から1日間の記事一覧

IE8で明朝体の表示が崩れる

CSS

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

関数内でその関数自身を取得実行する

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

JavaScriptを用いずにクリックを無効にする

CSS

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

背景色や背景画像も印刷したい

CSS

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

FireFoxでinline-blockがカラム落ちする

CSS

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

transitionのコールバックを実装する

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

Android 2.3でスクロールを実装する

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

Android 2.3で画面がフリーズする

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('…

現在開いているページの URLを出力

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