iPhoneやiPadでフォームを入力するためにフォーカスすると、画面が自動でズームされることがあります。これはiOSの仕様で、inputやtextareaのフォントサイズが15px以下だと画面がズームします。 少なくと…
iOSでinputやtextareaにフォーカスした際に画面が自動でズームしてしまうのを回避する方法
videoタグによる埋め込み動画がiPhoneでのみ表示されない時の対処法
先日、videoタグで設置している動画が、iPhoneでのみ表示できないという問題に遭遇しました。MacbookやiPadのSafariでは再生できており、iPhoneだけ動画の部分が真っ白になってしまうという現象です。…
Google Chrome 75からサポート予定のloading属性による画像やiframeの遅延読み込みを実装する方法
Google Chrome 75から、HTML側にloading属性を追加するだけで、画像やiframeの遅延読み込みが実装可能になる予定です。 ※2019/08/19追記 Google Chrome 76から公式にサポ…
スマートフォンのブラウザでツールバーの色を変更する方法
スマートフォンのブラウザでツールバーの色を変更する方法です。 ブラウザの種類によって指定方法が異なるので、それぞれご紹介いたします。 スマートフォンのブラウザでツールバーの色を変更する方法 Google Chrome ツ…
ブラウザによる電話番号への自動リンクを無効化する方法
ブラウザによっては、テキストでサイト内に記述している電話番号を認識して、自動的に電話発信用のリンクを付与します。この機能は、テキストとして表示したい箇所がリンクになってしまい、思わぬデザインの崩れを引き起こしてしまう可能…
PCとスマホで別々のスタイルシートを読み込む方法
PCからアクセスした場合とスマホからアクセスした場合で、読み込むスタイルシートを切り替える方法をご紹介いたします。 PCとスマホで別々のスタイルシートを読み込む方法 スタイルシートを読み込むlink要素のmedia属性に…
間違った使い方をしているHTMLをハイライトしてくれるスタイルシート「debugCSS」
debugCSSは、仕様に反する使い方をしているHTMLをハイライトしてくれるスタイルシートです。CSSファイルを読み込むと、間違った使い方をしているHTMLがあったら、ハイライトして知らせてくれます。 デモはこちらから…
SVG非対応ブラウザで代替画像を表示する3つの方法
イラストやロゴなどをSVGで実装する場合、古いIE等のSVG非対応ブラウザのために代替画像を用意することがあるかと思います。SVG非対応ブラウザ用に代替画像を設置する方法を3つご紹介いたします。 object要素を使って…
AndroidのChromeでページを開いた時にブラウザのタブの色を変更させる方法
AndroidのChromeでサイトを開いた時に、タブの色を変更させる方法をご紹介いたします。 以下デモページにAndroidのChromeからアクセスすると、タブの色が青色に変わります。 デモページを見る HTML内に…
Internet Explorerでクリッカブルマップが効かない時の対処法
画像内にリンクを付けることができる、非常に便利なクリッカブルマップ。そんなクリッカブルマップについて、私つい最近まで勘違いをしておりました。なんてこったい( ﾟДﾟ) その勘違いのせいで、IEで正常にクリッカブルマップが…