ブラウザによっては、テキストでサイト内に記述している電話番号を認識して、自動的に電話発信用のリンクを付与します。この機能は、テキストとして表示したい箇所がリンクになってしまい、思わぬデザインの崩れを引き起こしてしまう可能…
ブラウザによる電話番号への自動リンクを無効化する方法
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で正常にクリッカブルマップが…
Internet Explorer(IE)でのみ異なる内容を読み込ませるための条件式
Internet Explorer(IE)のみで異なる内容を読み込ませるための条件式について紹介いたします。 IEでのみ表示が崩れる場合などに活用できます。 IEでのみ読み込みをするための条件式 下記のように条件式を記述…
ページ内に閉じるボタンを設置する方法
リンクを別ウインドウで開いた時などに、以下のような閉じるボタンをよく見かけると思います。 この閉じるボタンを設置する方法を紹介したいと思います。 ページ内に閉じるボタンを設置する方法 閉じるボタンを設置するのは非常に簡単…
記号などの文字参照の値を簡単に調べることができる「Entity Lookup」
Entity Lookupは、記号などを文字参照で記述するためのコードを検索することができるWEBサービスです。よく一覧でまとめられているサイトはありますが、Entity Lookupは検索型で、文字を入力する度にリアル…
WEBページに設置したフォームのオートコンプリート機能を無効化する方法
WEBページに設置したフォームで、ブラウザのオートコンプリート機能を無効化する方法を紹介します。 オートコンプリートとは、ブラウザにIDやパスワードの情報を保存することができる機能のことです。WEBサービスなどでIDやパ…