以下のような事例を想定します。 こちらの事例はページ読み込み時に、タイル状に並んだ透過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が用いられますが、意外な落とし穴があります。 下図はヘッダー下にある２…

レスポンシブ対応した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)のタイトル部…

画像をブロック要素に 先日、HTMLメールの制作をしていましたら、次のような現象に遭遇しました。 画像のあいだに余白ができてしまいました。 以前、似たような現象に対する記事を書かせて頂きましたが、それとはまったく異なる現象です。 実はこれ、Gmailで…

borderを指定していなければCSSのみで見せかけられる 下図のような事例を想定します。 ここで、赤枠で囲まれた部分の高さを揃えたいという要望があったと仮定しましょう。 グレーのエリアは、両方ともfloatが指定されています。 高さを揃える方法はjsを用い…

Android 4.x系の一部機種において、テキストの幅が不足することがあります。 下図がその一例です。 テキスト右側に、原因不明の空白があるのがお分かりでしょうか。 すべての機種にこの現象が起きるわけではなく、一部機種のデフォルトブラウザでの挙動です…

レスポンシブ案件などで、あえて表組を崩して、th,tdを横幅いっぱいに広げたい（1カラムのレイアウトにしたい）ときがあります。今回は下図のような事例を想定します。 見出しのセルをth, フォーム部品を持っているセルをtdでマークアップしています。 クリ…

UTF-8の外部ファイルを、Shift-JISのページに読み込むと想定します。 当然ながら文字コードが異なるので、文字化けします。 overrideMimeTypeを用いる $.ajax({ type: 'GET', url: 'hogehoge.xml', dataType: 'xml', success: function(data) { /* do someth…

実装方法は3通り 以下のような事例を想定します。 白いテキストボックスが上下中央配置されています。 上下中央配置といえば、display:table-cellであったり、line-heightでの実装であったり、JavaScriptを用いたりと、何パターンが実装方法が存在しますが、…

親ウィンドウからiframe内の要素を操作したり、その逆を行いたいときの方法です。 jQueryに依存しない書き方ももちろんあるのですが冗長になってしまうので、ここではjQueryを用いたアクセス方法をご紹介します。 親ウィンドウ → iframe内の要素にアクセス …

過去・未来を判別する 難しいロジックを考える必要はありません。 Dateオブジェクトの特徴を利用すればシンプルなコードで判別できます。 getTimeメソッドで世界協定時 1970年1月1日00:00:00 からの経過ミリ秒が取得できるので、それを用いて比較します。 ※…

copyイベント / pasteイベントに紐づける 以前、画像のダウンロードを禁止する際にcontextmenuイベントの紹介をしましたが、同様の考え方になります。 今回はjQueryでの書き方を紹介しますが、バニラなjavascriptでも動作します。 [ex.ペーストによる入力を…

１ページあたりの表示件数を指定するposts_per_pageですが、もし指定しないとデフォルトで10件しか表示されません。 全件表示する際は、-1を指定するそうです。 下記はカスタムポストタイプ「works」を全件取得するクエリです。 $args = array( 'post_type' …

is_page()でもis_single()でもなく、投稿タイプで判別 カスタム投稿タイプのみで実行したいプログラムがある場合、通常の投稿ページや固定ページに関してはデフォルトで様々な関数が用意されていますが、カスタム投稿タイプにはありません。 そんなときは投…

ショートコードはthe_content() 呼び出し時に実行される ショートコードはthe_content() を呼び出したときのみ、実行されます。 たとえばget_the_content() 実行時など、ショートコードは実行されず[ショートコード名]という文字列のまま返ってきます。 この…

functions.phpに次の一行を追加 remove_filter('the_content', 'wpautop');

functions.phpに以下を記述 ここではnewsというカスタム投稿タイプがあると仮定します。 function custom_post_rss_set($query) { if(is_feed()) { $query->set('post_type', Array( 'post','news' )); return $query; } } add_filter('pre_get_posts', 'cus…

input要素ではなくbutton要素を使用 フォーム部品であるsubmitボタンに対して、通常は画像で実装するような細かい装飾を行いたいとき、input要素では限界があります。 なぜならinput要素は子要素をとることができないためです。 たとえばこんなsubmitボタン…

要素取得系メソッドは、ページ読み込み後に実行する 空要素を取得して、JSで動的にコンテンツを出力したいときがあります。 jQueryを使用していないページの場合、要素の取得はgetElement系メソッドに頼るしかないのですが、それが空要素の場合にエラーが発…

要素を含むかどうかを調べるのは、$.contains( ) たとえばスクロールイベントを想定してみます。 特定の要素上でスクロールされたときのみ、任意の処理を止めることが可能です。 文字列を含むかどうかの判定は:containsフィルターを使えばよいのですが、ある…

onメソッドを再確認 動的に生成された要素にイベントをバインドするには、現行のjQueryではon/offを用います。 ところが、頻繁に生成・削除が繰り返されるような要素であったり、Ajaxによって生成にタイムラグが発生する要素の場合、うまくバインドできない…

<meta name="viewport" content="width=device-width">が無視される 最新版のIE（特にWindowsPhoneやSurfaceなどのモバイル端末）において、viewportの指定が無視されることがあります。 すなわち、viewportのサイズが端末の画面サイズではなく、端末の解像度そのままになってしまい、モバイルなのに大画面用のス</meta>…

jQueryには適切なメソッドはなし 百聞は一見にしかずということで、まずはこちらをご覧ください。 white-spaceにpreが指定してあるため、文章は改行せずに、あふれてしまいます。 ここで求めたいのは矢印で示された領域です。 もしもoverflow:hiddenが指定さ…