125naroom / デザインするところ(会社)です。

【CSS】スマホでリンクをタップした時に色を変える方法

【CSS】スマホでリンクをタップした時に色を変える方法
きのこさん
スマホでタップ!
きのこさん
色変わる!

実装サンプル

See the Pen
【CSS】スマホでリンクをタップした時に色を変える方法
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<a href="https://125naroom.com/web/3449" target="_blank" ontouchstart>スマホでリンクをタップした時に色が赤に変わる</a>
きのこさん
赤に変わるにはー
きのこさん
a要素に『ontouchstart』を追記して『a:active』に色を指定するだけですー

CSS

a {
  display: inline-block;
  width: 200px;
  padding: 20px;
  border: 1px solid;
}
a:active{
  color : #f00;
}

実装サンプル(リンクじゃなくてもOK)

See the Pen
【CSS】スマホでタップした時に色を変える方法
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<div ontouchstart>スマホでタップした時に色が赤に変わる</div>

CSS

div {
  width: 200px;
  padding: 20px;
  border: 1px solid;
}
div:active {
  color : #f00;
}

さいごに

きのこさん
ページ全部にできますかー?
きのこさん
ページ全部の場合は『<body ontouchstart>』でオッケーですー

関連記事

【CSS】シンプルなボタンデザイン実装サンプル集

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

NEWTOWN/グラフィック・Webデザイン
ちょっと思い出しただけ
【CSS】見出しデザインをまとめてみる(左右に線を引くとか)