記事の概要
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題
作成日：2023-11-15
最終更新日：2023-11-15
記事の文字数：2665
情報技術Webサイト作成プログラミング
本記事のトピック
- aリンクやinputボタンにボタンを押すような演出を追加したら、クリック時の反応が悪くなった気がした
- 原因はボタン要素を下に動かしていること
- シンプルな対策は移動をやめる
- それでも移動させたいなら
- まとめ
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題
aリンクやinputボタンにボタンを押すような演出を追加したら、クリック時の反応が悪くなった気がした
aリンクやボタンの視認性を上げるために以下のようなボタンをCSSでデザインしました。
押してみるとボタンが沈み込みます。
元のcssは以下ページを参考にしております。
https://web-dev.tech/front-end/css/3d-button/
いろんなページを見てみても大体同じような実装をしており、 「ボタンを押した瞬間」に要素を「下方向にわずかに動かす」ことでボタン感を出すようにしているようです。
なのですが、これを実装してPCで自分で色々操作してみると、なぜかボタンを押しても反応しないことがありました。
（上のボタンの元のCSSはこちらです。divタグで作ってますが、そこはあまり気にしないでください）
元のcssは以下ページを参考にしております。
https://web-dev.tech/front-end/css/3d-button/
いろんなページを見てみても大体同じような実装をしており、 「ボタンを押した瞬間」に要素を「下方向にわずかに動かす」ことでボタン感を出すようにしているようです。
なのですが、これを実装してPCで自分で色々操作してみると、なぜかボタンを押しても反応しないことがありました。
（上のボタンの元のCSSはこちらです。divタグで作ってますが、そこはあまり気にしないでください）
/* css */
div.local-button{
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a; /* 背景色 */
box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
div.local-button:active{
box-shadow: none;
transform: translateY(5px);
}
原因はボタン要素を下に動かしていること
原因としては要素を押した瞬間に下に動かすことで、「マウスポインタがボタン要素から外れてしまうこと」のようでした。
下のボタンを押してみるとわかりやすいと思います。
真ん中あたりを押すとアラートが表示されると思いますが、上部分ギリギリを押すと空振るはずです。
上部分ギリギリを押すと、クリックを外す（mouseup）ときにはボタンからマウスポインタが外れ反応しなくなっています。
これはinputタグでもaタグでも同様のことが起こります。
下のボタンを押してみるとわかりやすいと思います。
真ん中あたりを押すとアラートが表示されると思いますが、上部分ギリギリを押すと空振るはずです。
上部分ギリギリを押すと、クリックを外す（mouseup）ときにはボタンからマウスポインタが外れ反応しなくなっています。
これはinputタグでもaタグでも同様のことが起こります。
シンプルな対策は移動をやめる
対策としてはボタンを押した瞬間の移動をやめて、別の形でボタン演出をすることかと思います。
ボクが使ってるブラウザの標準ボタンのデザインだと以下のようにして押してる感を出してるようです。
・押した瞬間に要素自体の色を少し暗くする
・あらかじめボーダーを上と左は少し暗く、下と右は少し明るくしておき、押した瞬間にそれらの色を逆転させる
下のボタンは、こちらの2点目を使ってボタン感を出しています。
ボクが使ってるブラウザの標準ボタンのデザインだと以下のようにして押してる感を出してるようです。
・押した瞬間に要素自体の色を少し暗くする
・あらかじめボーダーを上と左は少し暗く、下と右は少し明るくしておき、押した瞬間にそれらの色を逆転させる
下のボタンは、こちらの2点目を使ってボタン感を出しています。
それでも移動させたいなら
それでも移動させたいなら、親要素を持たせてそこで要素の高さを保証させるのがシンプルな対応方法だと思います。
ただこの方法だと元のhtmlの構造まで変えないといけないので、ボクは嫌いですが……。
※以下、白い部分がクリック領域。
分かりやすく親要素側は背景を白くしています。
元のCSSは以下です。spanをdivで囲う形で実装します。
ただこの方法だと元のhtmlの構造まで変えないといけないので、ボクは嫌いですが……。
※以下、白い部分がクリック領域。
分かりやすく親要素側は背景を白くしています。
元のCSSは以下です。spanをdivで囲う形で実装します。
/* css */
div.local-button2 {
display: inline-block;
height: 80px;
background-color: white;
border: 1px solid black;
}
div.local-button2 > span{
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a;
box-shadow: 0 5px 0 #ca1c30;
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
div.local-button2:active > span{
box-shadow: none;
transform: translateY(5px);
}
まとめ
ボクはデザインがユーザビリティを邪魔するのはダメだと思ってるので、
ボタン要素を動かそうとする今回の実装も嫌いですが、絶対ダメという実装でもないと思っています。
ちょっとくらい反応が悪くても意外とユーザは気にしないものなので。
特にスマホであれば正直今回のような問題もあまり起こらないと思うので、スマホのみを対象にするのであれば問題ない気がします（タブレットだとどうかな？）。
最終的には好みの問題と思いますが、もしボタン要素を動かすような実装にしたい場合はクリック判定が外れることがあることを頭の片隅に置いておくのがいいのかなと思います。
ちょっとくらい反応が悪くても意外とユーザは気にしないものなので。
特にスマホであれば正直今回のような問題もあまり起こらないと思うので、スマホのみを対象にするのであれば問題ない気がします（タブレットだとどうかな？）。
最終的には好みの問題と思いますが、もしボタン要素を動かすような実装にしたい場合はクリック判定が外れることがあることを頭の片隅に置いておくのがいいのかなと思います。
コメントログ
コメント投稿
管理人ツイート
3D立体 ウォーターシール シール シャカシャカ精巧な柄 手帳用装飾 DIYクリエイティブ かわいい個性的ファッションデコ 透明インナーページ対応 ギフトセット ギフトに最適 防水耐磨のクリエイティブステッカーセット (6個)
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
タカラトミー(TAKARA TOMY) BEYBLADE X ベイブレードX UX-17 スターター メテオドラグーン3-70J
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
