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

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

現象

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

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

対応

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

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

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

みたいな感じですね。

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

おわりに

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

筆者プロフィール

シゴトクリエイター

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

最新の投稿

• お知らせ2026年5月16日サービスのPR記事を書きました。AI時代に文章を書くというのは面白いですね。
• PR2026年5月14日【PR】スマホで簡単に貸し借り管理ができる「カシカン」はプライベートや小さなコミュニティに向いていそう
• 思考・考え方・メモ2026年5月14日AIを使うなら問いや仮説を持ったほうがいい。持てないならそれこそ使うべきではない・・・。
• 思考・考え方・メモ2026年5月7日遊ぶは創るでもある。遊び中に創る要素はかなり大きい。遊び自体を創ることで、楽しさが多分増す。

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

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

詳細はこちら