レシピ

スマートフォン/タブレットでリンクをタップしたときのスタイルを指定する

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

リンクがスマホやタブレットでタップしたときのスタイルを指定する方法を解説します。

この記事のポイント

  • スマホ/タブレットでリンクをタップしたときのスタイルを指定する

目次

スマホやタブレットのタップに対応する

パソコンなどマウスを使う端末の場合はリンクは、「:hover」や「:clicked」などの擬似要素でスタイルを操作することができます。
しかしスマホやタブレットなど指でタップする場合は、マウスオンなどの状態がないためこれらの擬似要素はうまく適用されません。

そんな「タップ」に対応するために、-webkit-tap-highlight-colorプロパティがあります。
ベンダープレフィックス「-webkit-」が付く通り、iOSのSafariやChrome、AndroidのChromeなど主要なWebkit系ブラウザのみ対応している点に注意してください。

リンクをタップしたときのスタイルを指定する
リンクをタップしたときのスタイルを指定する

コード例

具体的なコード例をご紹介します。

コード例

<style>
.btn {
	text-align: center;
}
.btn a {
	display: inline-block;
	padding: 5px 30px;
	border: 2px solid #4da0e7;
	border-radius: 5px;
	color: #4da0e7;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba( 77, 160, 231, 0.5);
}
</style>
<p class="btn"><a href="#">リンク</a></p>

-webkit-tap-highlight-colorプロパティrgbaで色(77, 160, 231)、透過度(0.5)を指定しています。
透過していないと文字も塗りつぶしてしまうため、透過度を一緒に指定するケースが多いです。

もし透過の必要がなければ、「#4da0e7」などカラーコードで指定することもできます。

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ