PCのChromeF12のシミュレーターでは分からず、実機iPhoneSEで見ると、ボタンが灰色グラデーションになってしまう現象がありました。

inputでなく、button要素を使えば問題なさそうです。

現象

iOS（iPhoneSE）上では、こんなボタンになってしまいます。

実際にはこう見せたいわけです。PCのChromeでは問題なく見えています。

対応

【フォーム】iOSのボタンが角丸グラデーションになるのをリセット

こちらの記事が参考になりました。ありがとうございます。

<button type="button">次へ</button>

みたいな感じですね。

input要素を使っていたので、button要素を使うことで回避しました。

おわりに

Chromeのシミュレーターでは限界があるんだよなあということを痛感します。とはいえ、実機でテストも手間がかかりますし、なかなか難しいところですね。

筆者プロフィール

シゴトクリエイター

「シゴクリ」運営者。アイデアの力でお客様に貢献するゼロイチ大好きアイデアマン。ビジネスアイデア採択実績数は474件。好きな言葉は三方良し。詳しい自己紹介、仕事実績も合わせてご覧ください。お仕事メニューやお問い合わせはお気軽にどうぞ。

最新の投稿

• アイデアネタ2026年1月16日洗面台を洗うという隠されたニーズがあったっぽい。なるほど！
• アイデアネタ2026年1月15日ホテルの掃除が有料。どうするかの対応がおもしろい。人手不足かもですねえ。
• アイデアネタ2026年1月15日AIでほぼ作られた面白い社会風刺MVがあるらしい。すげー！
• アイデアネタ2026年1月13日ライフハックは他人に迷惑をかけてやることではない・・・っす。確かにすぎる。

違和感で発想のやり方が学べます

日常生活で感じる違和感を用いて、アイデアを出すやり方が学べます。「違和感発想法」は誰でも気軽に出来るサービスです。

詳細はこちら