読者です 読者をやめる 読者になる 読者になる

knowledge base

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

gulpで階層構造を維持して出力する

以下のようなディレクトリ構造になるようgulpを用いてSassのコンパイルを行います。 devディレクトリがSassファイルを格納する開発用、destディレクトリがコンパイル後のCSSファイルを格納する納品用ディレクトリです。 root │ ├─ dev │ ├─ scss │ │ ├─ top …

Vagrantで文字化けする

Shift-JIS / EUC-JPの場合 Apacheにてデフォルトの文字コードにUTF-8を指定していることが原因なので、httpd.confにて下記をコメントアウト AddDefaultCharset UTF-8 UTF-8なのに文字化けする場合 ロケールが原因 先ほどは日本語専用の文字コードの場合でし…

Vagrantでphpmyadminが403エラーになる

httpd.confのドキュメントルートディレクティブに以下を記述 AllowOverride All

VagrantでSSIを有効にする

Boxにもよるのかもしれませんが、多くの場合はデフォルトで無効になっています。 まずSSIをするためのモジュールがインストールされているか、httpd.confにて確認。 下記がコメントアウトされていたらコメントを外します。 LoadModule include_module module…

Vagrantのキャッシュが強すぎる

Vagrantの共有フォルダ機能を利用して環境を構築している場合、ブラウザをスーパーリロードしてもキャッシュが消去されない場合があります。httpd.confのドキュメントルートディレクティブに以下を記述します。 EnableMMAP Off EnableSendfile Off

インスペクタを用いたモバイル端末での検証方法まとめ

実機での挙動を実機で確認 モバイル用コンテンツの制作をする際、多くの場合はPC用ブラウザのエミュレータであったり、仮想環境にて挙動を確認します。 しかしごく稀に実機でしか起こり得ない崩れやバグが発生することがあります。 検証しなくてもある程度の…

Canvasのレスポンシブ対応

Canvasのレスポンシブ対応はなぜ難しいか Canvasは複雑なグラフィックの描画から、マルチデバイスに対応したアニメーションの実装、3Dの描画まで幅広く対応できる優れものです。 ところがレスポンシブ対応となると格段に難易度が上がります。 その理由につい…

ビューポートのサイズに合わせてフォントを拡縮する

CSS

iOSではzoomが非対応に レスポンシブデザインにおいて、画面サイズに合わせてフォントサイズも拡縮しないとデザインを大きく崩してしまう場合があります。 そのようなときは、こちらのjQueryプラグインのような挙動を実装する必要があります。これまでは、そ…

YouTubeの埋め込み再生で、警告メッセージが出る

モバイルでは自動再生は行わない YouTube Iframe Player APIを使用して、埋め込み動画を動的生成したところ、「すぐに再生が開始しない場合は、端末を再起動してください。」というメッセージが表示されるとともに、動画のローディングが終わらないという現…

チェックボックスをreadonlyにする

チェックボックスは「見た目上」readonlyにならない フォーム部品にはそれぞれreadonly属性がサポートされていて、これを指定すれば入力が不可能になります(disabledとは違います、念のため)。 ところがチェックすボックスやラジオボタンにreadonly属性を…

n秒づつ遅らせてクラスを追加する

delayはアニメーションのみ このような要件を実装するためによく使われるのは、以下のようにdelayを利用したロジックです。 [ex].200ミリ秒づつ遅らせてフェードインする var $targets = $('.fade'); var delay = 200; $targets.each(function(i){ $(this).d…

画面外に絶対配置した要素が表示されてしまう

CSS

iOS9におけるSafariなど一部のスマホブラウザでは、画面外に配置した要素が、表示されてしまうバグがあります こちらの例では、右側にあるモーダルウィンドウは本来画面外にあり、ボタン押下時に画面中央に表示されるという仕組みになっているはずでした。 ※…

メイリオで斜体を実装

CSS

メイリオには斜体がありません。 正確に申しますと、英数字は斜体にできるのですが、日本語の文字(漢字カナ)はfont-styleにitalicをしても斜体が効きません。 日本語でメイリオ、かつ斜体を実装するには、以下の方法で対応が可能です。 以前10px以下のテキ…

transition + transform アニメーションが動かない

CSS

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

IEで「いいね」ボタンが文字化けする

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

IEで埋込みYouTubeが最前面に表示される

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

Gmailで画像を非表示にできない

CSS

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

ブラウザで表示できる最小フォントサイズ(10px)以下の文字を表示する

CSS

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

Androidデフォルトブラウザでviewportが無視される

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

text-indentも指定してもテキストを非表示にできない

CSS

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

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のテンプレートタグを利用して取得できます。 もし条件分岐をせず、ワンライナーで書きたい場合は以下の方法で可能です。

clipを利用したテキストの非表示方法

CSS

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

最新版IEでセレクトボックスの矢印を消す

CSS

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

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)のタイトル部…

HTMLメールで画像の間に隙間ができる

CSS

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

floatした要素の高さを揃える

CSS

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

JSONPの記述例

JSONPの記述形式 JSON側は、通常のJSONを関数の引数に与えるような形式にします。 callback( {"num":[1,2,3], "abc":["a","b","c"]} ); JS側は、jsonpCallbackオプションに先ほどの関数名を指定します。 $.ajax({ type: 'GET', url: /* URL */, dataType: 'j…