スマホでタップすると光るリンクの色と形のデザイン 結城永人 - 2021年5月16日 (日) スマホでサイトのリンクをタップすると青く光る。調べると使用中のブラウザが影響しているようで、リンクの光の色と形がそれぞれで、何も起こらないものもある。僕はAndroidのChromeで気付いたけれどもiPhoneのSafariでもリンクのタップした瞬間の光が付けられている。その他、Edgeなども対応している。サイトのリンクのデザインとしてハイライトカラーと呼ばれる。 スマホのハイライトカラーはパソコンのマウスのカーソルに相当するもので、サイト作成ではリンクのクリックの効果として等しく扱うことができる。 リンクの光の色を変更する方法 CSSにスマホのハイライトカラーを変更するマークアップがある。 -webkit-tap-highlight-color スマホのリンクのハイライトカラー 通常のcolor／色やbackground-color／背景色のように色名や色コードの値を指定してデザインを付けられる。 -webkit-tap-highlight-colorで半透明の赤を付ける サンプル スマホのChromeやSafariやEdgeなどのリンクのハイライトカラーに対応するブラウザで反映する。 HTML <a href="/">サンプル</a> CSS a {-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> CSS a {cursor:none} cursorでクリックの反応を止めるとスマホのハイライトカラーも出ない。 パソコンでマウスのカーソルが消えて不便だから@media／メディアクエリでスマホか大きくてもタブレットまでにかけると良いかも知れない。 スマホだけのCSS @media screen and (max-with:480px) { デザインのマークアップ } タブレットまでならばCSSを適用する画面の最大幅のmax-withの値を「640px」（縦向き）とか「960px」（横向き）に調整するとパソコンに反映しないように除外できる。 :hoverで薄い緑のハイライトカラーを付ける サンプル リンクのハイライトカラーに対応しないスマホやパソコンでも反映する。 HTML <a href="/">サンプル</a> CSS a: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> CSS a {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> CSS a {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の背景色によるハイライトの形は元のリンクの形と自動的に同じになる。動作が安定しないからデザインとして使い辛いものの大きな角丸や丸でもリンクのハイライトをぴったり合わせられる。 参考サイト[スマホ]iOS や Android でリンクタップ時のハイライト表示を変更する方法 コメント 新しい投稿 前の投稿
結城永人
結城永人
コメント