商品サンプル画像
Python[完全]入門
商品ページ
Amazon
収益広告(手動登録)
商品サンプル画像
乙女ゲームのヒロインで最強サバイバル@COMIC 第7巻 (コロナ・コミックス)
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
スッキリわかるJava入門 第3版 (スッキリわかる入門シリーズ)
商品ページ
Amazon
収益広告(手動登録)
商品サンプル画像
舞台『東京リベンジャーズ』~天竺編~
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
戦闘員D参上!
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
記事の概要
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題
作成日:2023-11-15
最終更新日:2023-11-15
記事の文字数:2665
情報技術Webサイト作成プログラミング
本記事のトピック
  • aリンクやinputボタンにボタンを押すような演出を追加したら、クリック時の反応が悪くなった気がした
  • 原因はボタン要素を下に動かしていること
  • シンプルな対策は移動をやめる
  • それでも移動させたいなら
  • まとめ
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題
aリンクやinputボタンにボタンを押すような演出を追加したら、クリック時の反応が悪くなった気がした
aリンクやボタンの視認性を上げるために以下のようなボタンをCSSでデザインしました。 押してみるとボタンが沈み込みます。
sample

元の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); }
原因はボタン要素を下に動かしていること
原因としては要素を押した瞬間に下に動かすことで、「マウスポインタがボタン要素から外れてしまうこと」のようでした。
下のボタンを押してみるとわかりやすいと思います。
sample

真ん中あたりを押すとアラートが表示されると思いますが、上部分ギリギリを押すと空振るはずです。
上部分ギリギリを押すと、クリックを外す(mouseup)ときにはボタンからマウスポインタが外れ反応しなくなっています。
これはinputタグでもaタグでも同様のことが起こります。
シンプルな対策は移動をやめる
対策としてはボタンを押した瞬間の移動をやめて、別の形でボタン演出をすることかと思います。
ボクが使ってるブラウザの標準ボタンのデザインだと以下のようにして押してる感を出してるようです。
・押した瞬間に要素自体の色を少し暗くする
・あらかじめボーダーを上と左は少し暗く、下と右は少し明るくしておき、押した瞬間にそれらの色を逆転させる
下のボタンは、こちらの2点目を使ってボタン感を出しています。

それでも移動させたいなら
それでも移動させたいなら、親要素を持たせてそこで要素の高さを保証させるのがシンプルな対応方法だと思います。
ただこの方法だと元のhtmlの構造まで変えないといけないので、ボクは嫌いですが……。
※以下、白い部分がクリック領域。
click!

分かりやすく親要素側は背景を白くしています。
元の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); }
まとめ
ボクはデザインがユーザビリティを邪魔するのはダメだと思ってるので、 ボタン要素を動かそうとする今回の実装も嫌いですが、絶対ダメという実装でもないと思っています。
ちょっとくらい反応が悪くても意外とユーザは気にしないものなので。
特にスマホであれば正直今回のような問題もあまり起こらないと思うので、スマホのみを対象にするのであれば問題ない気がします(タブレットだとどうかな?)。
最終的には好みの問題と思いますが、もしボタン要素を動かすような実装にしたい場合はクリック判定が外れることがあることを頭の片隅に置いておくのがいいのかなと思います。
コメントログ
※コメントは最新50件が表示されます
コメント投稿




画面下部の「コンタクト」からも連絡可能です。
管理人ツイート
商品サンプル画像
サレ妻漫画家の旦捨離戦記(3) (女たちのリアル)
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
カグラバチ 8 (ジャンプコミックスDIGITAL)
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
みんな集まれ! 怪人じゃ
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
ルパン三世 風魔一族の陰謀
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
管理人作品宣伝
お手軽ドット絵コンバーター
Webサイト / 最終更新:2025-03-30
【一部機能返礼特典】既存画像をドット絵っぽく加工するWebツールです。「ゲームボーイ風…【一部機能返礼特典】既存画像をドット絵っぽく加工するWebツールです。「ゲームボーイ風」や「高解像度ドット絵」などテンプレートからお手軽変換が可能です。GIFアニメーションも変換可能です。正式版はご厚志者のみ利用可能です。正式版とデモ版の違いはデモ版のページに記載しています。

HPで閲覧する(正式版)HPで閲覧する(デモ版)pixivで閲覧する利用素材等の詳細情報返礼特典
VRoidポーズ集-Part03
3Dモデル / 最終更新:2024-12-03
VRoidのポーズデータ(vroidpose)集です。 写真とかによくありそうなポーズ…VRoidのポーズデータ(vroidpose)集です。 写真とかによくありそうなポーズが中心に入っています。

Boothで閲覧する利用素材等の詳細情報
作品一覧はこちら
関連ページ
DOM要素の操作でよく使うプロパティ・メソッド一覧
最終更新日:2025-06-03
概要 JavaScriptでDOM操作(取得・作成・更新・削除)をする際によく使うプロパティとメソ…
記事を閲覧する
JavaScriptでアナログ時計とデジタル時計を表示するコード
最終更新日:2025-05-29
概要 最近アナログ時計を使ったので、アナログ時計を表示するJavaScriptコードを載せます。 …
記事を閲覧する
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-03
最終更新日:2025-04-20
概要 three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方…
記事を閲覧する
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-02
最終更新日:2025-04-15
概要 three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方…
記事を閲覧する
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-01
最終更新日:2025-04-13
概要 three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方…
記事を閲覧する
GIF / APNG(アニメーション付きPNG)ファイル解析ページ
最終更新日:2025-03-31
ファイル読込・操作 以下に調べたいファイルを読み込ませてください。 ファイル情報 カラーパレットを…
記事を閲覧する
gifler.js仕様メモ
最終更新日:2025-03-23
本ページの趣旨 「gifler.js」という、gifアニメーションをcanvasに簡単に表示できる…
記事を閲覧する
【プログラミング】実例で分かるかもしれない再帰処理
最終更新日:2024-12-15
本ページは以下動画の台本を書き起こしたものです 解説の趣旨・方向性 皆さん、こんばんは今回はプログ…
記事を閲覧する
SNSツイート一元化対応(Twitter・Misskey・Mastodon・Bluesky)-公開
最終更新日:2024-12-06
概要 SNSツイートを一元化するためのツールを作成しています(古い記事ですが、こちらのページで紹介…
記事を閲覧する
SNSツイート一元化対応(Twitter・Misskey・Mastodon・Bluesky)-Python
最終更新日:2024-10-13
概要 概要 SNSのツイートを一元化する際の備忘録というかPythonコードの共有です。 それぞれ…
記事を閲覧する
本サイトのタグ一覧
NovelAIR18VRoidWebサイト作成Webツールととモノ。アークナイツアークナイツ-ステージ攻略日記アズールレーンアズールレーン-日記ウマ娘ギャラリーゲームデビラビローグネットスラング系プログラミングホラーポケットタウン怪談気ままな日記情報技術情報技術-WebAPI知的財産権統合戦略白夜極光本サイトについて魔王スライム様がんばる!漫画
人気記事
メイド・オブ・ザ・デッド-攻略お助け情報
最終更新日:2024-05-01
スコア:782.2725 pt
ネタバレ注意! 本ページは『メイド・オブ・ザ・デッド』の情報を記録しているものです。 攻略の参考に…
記事を閲覧する
ポケットタウン_パズル一覧
最終更新日:2025-05-02
スコア:702.8834 pt
グレーのピースの数 (Number of gray pieces):検索グレーピースの数を入力して、…
記事を閲覧する
剣と魔法と学園モノ。2G - パーティ編成確認ツール
最終更新日:2024-05-09
スコア:180.6421 pt
ツール概要 ととモノ。2Gのパーティ編成を考える際に使うツールです。 あくまでストーリークリアまで…
記事を閲覧する
アークナイツ-常設商品-理性換算
最終更新日:2024-04-28
スコア:136.1702 pt
概要 "常設商品でお得な商品はどれか"というのを理性に換算して一覧化したものとなります。 絶対的に…
記事を閲覧する
本サイトについて
最終更新日:2025-06-11
スコア:122.0339 pt
本サイトの概要 概要 個人ブログのようなものです。とくにジャンルはありません。 本サイト内の情報に…
記事を閲覧する
黒バス:キセキの世代級の人たちの技一覧
最終更新日:2024-07-21
スコア:114.3529 pt
黒バスのキセキの世代級の人たちの技一覧です 概要 黒バスのキセキの世代級の人たちの技を記載したもの…
記事を閲覧する
ゲーム『イカれた狩場の看板娘』の紹介・レビュー
最終更新日:2025-05-01
スコア:105.5385 pt
記事概要 イカれたゲームを紹介するぜ! イカれた狩場の看板娘! 以上だ! ちなみにそんなイカれてな…
記事を閲覧する
地獄先生ぬ~べ~で好きな切ないエピソード
最終更新日:2025-05-19
スコア:92.1905 pt
概要 初代というべきか、週刊少年ジャンプで連載されていた地獄先生ぬ~べ~の切ないエピソードの中で好…
記事を閲覧する
最新記事
htmlタグ混在のテキストをhtmlタグとプレーンテキストで分けるJavaScriptコード
最終更新日:2025-06-20
概要 「よくある質問は a href="/" こ span ち /span ら /a です」 とい…
記事を閲覧する
htmlタグ混在のテキストを1行ずつ左から右へワイプ表示する - JavaScript / CSSコード
最終更新日:2025-06-16
JavaScript全文コード 使い方 以下のJavaScriptとCSSコードを読み込んで、Te…
記事を閲覧する 返礼特典
htmlタグ混在のテキストを1行ずつ左から右へワイプ表示する
最終更新日:2025-06-16
概要 ここでは以下のようにテキストを一行ずつ左から右に表示するJavaScriptコードを載せてい…
記事を閲覧する
本サイトについて
最終更新日:2025-06-11
本サイトの概要 概要 個人ブログのようなものです。とくにジャンルはありません。 本サイト内の情報に…
記事を閲覧する
商品サンプル画像
ロボカーポリー のりもののうた Vol.2
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認