system
中山 享祐

2022.3.7HTML/CSS 

Webクリエイター

中山 享祐

2021年8月1日「マリンロード」は「インソースマーケティングデザイン」へ社名を変更いたしました

iOSでボタン部分のCSSが反映されない理由とその対処法

こんにちは!今回はiOSでWebサイトを閲覧した際、ボタンのCSSが反映されない理由とその対処方法について紹介したいと思います。

表示させたいボタン

ボタン表示確認(PC)

今回は上記のようなボタンを、実際のWEBページ上に表示させたいと思います。
PCまたはAndroid端末で閲覧すると、画像の通りのスタイルのボタンが表示されます。

iOS端末で閲覧すると…

修正前のボタン表示(iOS)

iOS端末(iPhone・iPad)で閲覧すると、ボタンのCSSが適用されず上記のようなスタイルになってしまい、表示が崩れてしまいます。

 

原因はinputタグにあった!

この現象はinputタグに対してiOSデフォルトスタイルが適用されてしまうことが原因で発生し、当該のボタンのクラスに” -webkit- appearance: none; “を記述するか、buttonタグでボタンを配置することで回避することができます。

ここではサンプルのHTMLとCSSを用いて、前者の方法について説明していきたいと思います。

HTML

CSS

” -webkit- appearance: none; “を追加したCSS

css_sorce_v2_1

inputタグ または inputタグに指定しているクラスに1行追加するだけで、iOSのデフォルトスタイルをリセットし、ボタンにCSSを反映させることができます。

 

終わりに

業務で実際にスマートフォン用ページのCSSをコーディングするまで、iOS環境ではinputタグにiOSのデフォルトスタイルが適用されてしまうことは知りませんでした。今後もスマートフォン用ページのコーディングを行う機会は沢山あるので、作業の際はこれを常に留意したいと思いました。

WEBサイト診断 現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ