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

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

現象

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

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

対応

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

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

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

みたいな感じですね。

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

おわりに

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

筆者プロフィール

シゴトクリエイター

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

最新の投稿

• アイデアネタ2025年7月16日普段使わない言葉から、他者の見方を学んだりしてみるといいかも
• アイデアネタ2025年7月15日AI収集に対して請求できる仕組みというアイデアがあるらしい。面白い！
• アイデアネタ2025年7月14日ローソンは青森にアバター接客導入。こういう動きはさらに広がりそう。
• ビジネスニュースカフェ2025年7月11日ビジネスニュースカフェダイジェスト：2025年7月第2週

ビジネスアイデア相談窓口

ビジネスアイデアに関する、アイデアや企画、事業、起業についてカジュアルなご相談はお気軽に壁打ち可能です。

詳細はアイデア相談窓口（お仕事依頼）をご参照ください。

大橋に相談してみる