クリエイティブ業界の注目情報や求人情報などを発信する、クリエイターのための総合情報サイトです。
column_general_header

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

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

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

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

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

  .webkit{
  -webkit-appearance: none;
  }
  

author

narumasa(なるまさ)

http://narumasa.com


フリーランスのWebクリエイターとして2001年から活動。
レコーディング・エンジニアとして職歴をスタートし、Webの勉強をすべくスクールに通い、デザイン会社のWebデザイナーへ。2001年に退職後、フリーランスのWebクリエイターとして活動しつつ、商品企画会社に入社し、企画プロデューサー・取締役を経て、再びフリーランスに。
現在はフリーランスのWebクリエイターとして数々の大企業のホームページから街の商店のホームページまで、1人で企画からディレクション、デザイン、コーディング、プログラミングまで全てを担当している。

関連記事