知っておくと便利なcssの小技 part7

  • はてブ

こんにちは、工藤です。
今回は個人的に知っておくと便利だなと思うcssの小技part7です。
今回はリセット系の2つです。

バックナンバー


safariのようなwebkit系のモバイル用ブラウザのフォーム要素をリセット

img01

safariのようなwebkit系のモバイル用ブラウザだと、input等のフォーム要素のデフォルトのデザインが強く残ってしまい、うまくスタイルを反映させることができません。
そんな時は1回リセットしてしまいます。

DEMO


-webkit-appearance: none;』の1行を追加するだけです。
input[type=”text”]等の部分は問題が無さそうであればユニバーサルセレクタ(*{~})で指定してもよいかもしれません。


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


max-width(height)をリセットする

img02
例えばレスポンシブの時など、PC用にmax-width(height)を使用した時にスマホの方ではそれをリセットをしたい場合があります。
なんとなく『auto』を使えばいいのでは?と思うのですが、実は全然効かないので以下のクラスを設定します。

DEMO


各属性を初期値に戻せる『initial』を設定します。
ちなみにmin-width(height)も同様に使えますのでぜひ試してみてください。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ