なんにもない日の頭の中はこんなもんだったりする

【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】シンプルなボタンデザイン実装サンプル集

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

かんれん

【CSS】ベンダープレフィックス 必要なもの不要なもの
【CSS】transform（トランスフォーム）の基点（原点）
【CSS】line-heightの単位は必要ない
【CSS】背景画像を固定したおしゃれなLP（ランディングページ）を作ってみよう

Googleさんのおすすめ

人気記事

【jQuery】アコーディオン実装サンプル10選
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【CSS】olのリストで①、②、③（丸数字）を表示させる
【jQuery】スライダープラグイン「slick」実装サンプル集
#1 miya
【CSS】三角アイコンと矢印アイコンをつくる
LINE風の吹き出しの会話をCSSで作ってみる
more

Googleさんのおすすめ

デザインの記事

Artio
  • 2020.03.23New
  • Artio
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
Artio
  • 2020.03.23New
  • Artio
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
3月28日
3月25日