商売上のホームページではヘッダーやフッター、及び必要コンテンツ内に 電話番号を表示するのは閲覧者に連絡を取って貰いたいならば欠かせません。 表示させるだけならばHTML上で記述すれば済む話です。 しかし最近ではスマートフォンが充分普及し個人個人が所有するようになり ホームページの閲覧も多くがスマートフォンからのものを配慮する必要があるようになりました。
スマートフォンは携帯電話ですから出来得るならば
電話番号の表示をタップしたと同時に通話発信して欲しいものであるのは言わずもがな、
此の事情を配慮して電話番号と
ところでデザイン上の配慮などで画像で電話番号を表示させたい要請も多くあります。 此の時画像をタップして通話発信させるには例えば以下のようなリンクを張る必要があります。
此のHTMLコードはもちろん スマホでもPC画面上でも適用されますので 機能して欲しくないPCに依る閲覧時にもクリックで電話発信しようとして 警告ダイアログを閲覧者に拝ませる羽目になります。 此の事態は出来るならば避けたいものです。
其処でリンクタグをスマホの時だけ表示させたいと言う要請が生まれました。 方法としてはJavaScriptでユーザーエージェントに依る分岐をしてスマホの時のみ 当該DOMを探し出してリンクタグを表示せしめるものが代表的なものとして知られていますが なかなか実装が面倒なのは手掛けた向きには同意して貰えるでしょう。
此の如き要請こそないものの現在請け負っている作業では
レスポンシブウェブデザイン
が採用されており電話番号の表示も指定されている上では避け得ぬ問題でもあるのは
薄っすらと感じながらの日々処理を施している
上記の要請を意識するでもなく単に見慣れない pointer-events なるCSSプロパティに興味を惹かれ読み進めてなるほどと思いながらも 孰れに有用なるべき哉と些か読み捨てる方向へ意識の舵が切られ始めたとき目にしたのが以下の具体例列挙です。
- 後ろ側にある要素をクリック・タップさせる
- 画像が保存されるのを防止する
- 親要素が任意の状態の時にリンクを無効化する
- Media Queriesと併用する
リストの4番目を目にした際に以上の事柄が pointer-events を中心に一本の線に繋がり其れは実に有用なるCSSプロパティとなり得ると考えるに至りました。 即ち上に記していたように従来JavaScriptを利用するのが一般的だった スマホのみで電話発信リンクを実装する方法が CSSだけで実装出来るのではないか、という発想です。 4番のメディアクエリーに於ける特性を上手く電話発信タップに応用する方法を思いついたのが標題の実装という塩梅です。
実装は頗る簡単です。
CSSのpointer-eventsプロパティはデフォルトでは値は
auto
を取り此れはクリックが効いている状態ですが値を
.site-header {
.tel a {
pointer-events: none;
}
}
｝
@media only screen and (max-width: 991px) {
body {
.site-header {
.tel a {
pointer-events: auto;
}
}
}
}
上記ではブラウザ幅が991pxを境に クラス名telの下のアンカータグのクリックの挙動が変化しますから 此処にイメージタグなりを記述すれば良くなります。 CSSのみの簡単な記述で一気にスマホのみ発信の電話番号リンクを単純化出来るCSSの pointer-events は実際に利用してみると従来よりとても手間が省け、そのため記述ミス等も減り 今後は手元の環境では定番にすべく目論んでいます。