スマホでタップすると光るリンクの色と形のデザイン

スマホでサイトのリンクをタップすると青く光る。調べると使用中のブラウザが影響しているようで、リンクの光の色と形がそれぞれで、何も起こらないものもある。僕はAndroidのChromeで気付いたけれどもiPhoneのSafariでもリンクのタップした瞬間の光が付けられている。その他、Edgeなども対応している。サイトのリンクのデザインとしてハイライトカラーと呼ばれる。スマホのハイライトカラーはパソコンのマウスのカーソルに相当するもので、サイト作成ではリンクのクリックの効果として等しく扱うことができる。リンクの光の色を変更する方法 AndroidのChromeのリンクの青いハイライトカラー

CSSにスマホのハイライトカラーを変更するマークアップがある。

-webkit-tap-highlight-color

スマホのリンクのハイライトカラー

通常のcolor／色やbackground-color／背景色のように色名や色コードの値を指定してデザインを付けられる。-webkit-tap-highlight-colorで半透明の赤を付けるサンプルスマホのChromeやSafariやEdgeなどのリンクのハイライトカラーに対応するブラウザで反映する。HTML<a href="/">サンプル</a>CSSa {-webkit-tap-highlight-color:rgba(255, 0, 0, 0.4)}赤ならば「red」や「#ff0000」、消すならば透明（無色）の「transparent」かrgbaを使って四番目の透過度を「0」にする。-webkit-tap-highlight-colorはベンダープレフィクス／試用版の「-webkit」が付いているけれどもはCSSの標準的なマークアップではないから一般的に推奨されないらしい。

この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

-webkit-tap-highlight-color｜MDN｜Mozilla

CSSの一般的なマークアップでもスマホリンクのハイライトカラーを変更できる。cursorでハイライトカラーを消すサンプルパソコンではクリックのカーソルが消える。HTML<a href="/">サンプル</a>CSSa {cursor:none}cursorでクリックの反応を止めるとスマホのハイライトカラーも出ない。パソコンでマウスのカーソルが消えて不便だから@media／メディアクエリでスマホか大きくてもタブレットまでにかけると良いかも知れない。スマホだけのCSS@media screen and (max-with:480px) { デザインのマークアップ }タブレットまでならばCSSを適用する画面の最大幅のmax-withの値を「640px」（縦向き）とか「960px」（横向き）に調整するとパソコンに反映しないように除外できる。:hoverで薄い緑のハイライトカラーを付けるサンプルリンクのハイライトカラーに対応しないスマホやパソコンでも反映する。HTML<a href="/">サンプル</a>CSSa:hover {-webkit-tap-highlight-color:transparent;background-color:#90ee90}:hoverでクリックした瞬間の背景色を指定するとハイライトカラーに匹敵して全てのデバイスのブラウザで表示可能になる。ハイライトカラーを消さないと二つ反映するから注意しなくてはならない。:hoverはリンクのハイライトカラーのカスタマイズに便利だけれども厄介なのが効果が安定しない。タップの瞬間だけ出るはずが残ってしまったり、ぴったりのタイミングで出なかったりもするからデザインとしてさほど期待できない。リンクの光の形を変更する方法

スマホのリンクのハイライトの形は固定されているようで、AndroidのChromeでしか確認してないけれども基本的に四角の四隅が直角か1.5px程度の角丸しか表示できなさそうだ。どうなるかを色々と試して分かったのはリンクされるHTML要素のCSSのdisplayの状態によってハイライトの形が異なるらしい。

displayがblockなどの改行を伴うもののリンクのハイライトは四隅が直角になる。
div／p／figureなど。

displayがblockなどの改行を伴わないもののリンクのハイライトは四隅が1.5px程度の角丸になる。
タグなし／span／img／svgなど

少なくともAndroidのChromeでは二つのハイライトカの形をリンクされる要素のdisplayの状態を変化させれば選び取ることができる。HTML要素の初期状態だけではなく、CSSでdisplayを変えた場合もハイライトの角が僅かに変化することがある。displayでハイライトの角を直角にするサンプルAndroidのChromeではリンクの角が直角で表示される。HTML<a href="/">サンプル</a>CSSa {display:block}初期状態で角が直角のHTML要素のdisplayをinlineに変えても稍丸くなることは親要素と子要素の場合の両方ともなかったけれども初期状態で角が稍丸いHTML要素のdisplayをblockやinline-blockやflexやgridやlist-itemやtableなどのinline以外に指定すると直角になるのが親要素と子要素の場合の両方で確認できた。ボタンを作るときはHTML要素がdisplay:inlineだと余白が付け辛くて大きさも取れないからblockやinline-blockに変えるけど、するとスマホのリンクのハイライトの角は直角になる。画像やボタンなどでもっと大きな角丸や丸だとハイライトの形を変えて角を合わせる方法が見付からないので、周りにはみ出したハイライトが気がかりならば消すか:hoverに変更して合わせるしかないかも知れない。:hoverでハイライトの形を丸にするサンプルクリック／タップすると薄い緑のハイライトカラーに丸く変わる。HTML<a href="/">サンプル</a>CSSa {display:flex;justify-content:center;align-items:center;border:2px ##1e90ff solid;border-radius:50%;width:6em;height:6em;margin:1em 0;-webkit-tap-highlight-color:transparent} a:hover{background-color:#90ee90}:hoverの背景色によるハイライトの形は元のリンクの形と自動的に同じになる。動作が安定しないからデザインとして使い辛いものの大きな角丸や丸でもリンクのハイライトをぴったり合わせられる。.hover1:hover {-webkit-tap-highlight-color:transparent;background-color:#90ee90}.hover2 {display:flex;justify-content:center;align-items:center;border:2px #1e90ff solid;border-radius:50%;width:6em;height:6em;margin:1em 0;-webkit-tap-highlight-color:transparent}.hover2:hover{background-color:#90ee90}