NARUMASA CREATIVE DESIGN
Copyright © narumasa.com
All rights reserved.
13
2月
2022

【CSS】iPhoneスマホサイトで自作ボタンを使う方法

iPhoneのスマホサイトを作成しているとき、デフォルトの状態ではボタンなどを【css】で作りこんでも適用されません。

 

どんな環境・ブラウザなどでも基本的にはデフォルトの設定というのがあり、その設定に沿って表示されます。
そのため、iOSのSafariで表示する際、デフォルトの設定が優先されてしまうので、そのデフォルトの設定をリセットすれば、思い通りの表示をさせることができます。

 

iPhoneのスマホサイトではブラウザの標準設定が指定されているので、それを【none:リセット】にしてあげなければいけません。

下記のコードを入れるだけで、リセットできます。

 

.webkit{
-webkit-appearance: none;
}
【HTML】metaタグ:『X-UA-Compatible』はあまり必要ない気が。
【Mobile】スマートフォンのデザインを作成するにはこうすればいいんです。