knowledge base

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

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

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…