スマホのリンクタップ時・パソコンのテキスト選択範囲時のハイライトカラーを変更するcssコード

web制作

読了の目安時間: 18

web制作時の備忘録メモ。

スマホでリンクをタップした時の色、またパソコンでテキストなどマウスで選択範囲した時の色を変更する、cssコードを以下にまとめておきます。

▼スマホでハイライトカラーを変更


-webkit-tap-highlight-color:#eee;
tap-highlight-color:#eee;

▼パソコンでテキストの選択範囲をした時の背景カラーを変更


::selection{background:#eee;}
::-moz-selection{background:#eee;}

なお、無効化する時は、色部分を「rgba(0,0,0,0);」にすればOKです。

一言

スマホでタップした際、色が表示されないようにすると、カッコイイ感じもありますが、ボタンリンクなどは良いとしても、テキストリンクなどは文字色によっては、タップした時にハイライトカラーを表示しないと、触ったかどうか、よくわからずにページ遷移する印象があって、あんまり好きじゃないです。

さておき、せっかく作るウェブサイトですので、細かい部分でもデザインのこだわりを発揮していきたいところです。

最後に一言

選択範囲って操作の名前を思い出すのにすごく時間かかりました・・・。マウスクリックしてガーっと引き伸ばすって認識だけだとダメですね・・・。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

スマホのリンクタップ時・パソコンのテキスト選択範囲時のハイライトカラーを変更するcssコード


本記事のシェアはこちらから!

  • このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

follow us in feedly

本ブログ・WebMakeBlog KIYOTATSUを運営しているYoshiと申します。普段はWEB制作をやっています。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。