レスポンシブWebデザインをしていると、スマートフォン向けに指定したCSSの値を、PC向けCSSではリセットしないと上手くいかない（？）のような場面に遭遇します。
そんな時、CSSの値に初期値指定してリセットする方法を知っておくと役に立ちます。
特に目新しいものはありませんがレイアウトをする上で、これからお世話になりそうなので自分用メモです。
これもよく使うとか、知っておくと良いよ！というものが他にもあったら教えていただけると嬉しいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* 幅に関連した初期値の指定 */ .example { width: auto; } .example { max-width: none; } .example { min-width: 0; } /* 位置に関連した初期値の指定 */ .example { position: static; } .example { float: none; } /* その他 */ .example { overflow: visible; } |
「max-width」の初期値が「none」に対して、「min-width」の初期値は「0」です。
プロパティ名が似ているので同じ初期値を指定してしまいがちです。
間違えやすいポイントかと思いますので、注意が必要ですね。
あと番外編メモとして、リセットではありませんがIE6以外のブラウザ向けに指定を行いたい場合、下記のような記述を使うと便利です。
セレクタを「>」で区切る子セレクタを対象とした記述方法は、IE6には対応していないので、結果としてIE6以外のブラウザに向けた指定となるわけです。
|
1 2 3 4 |
/* 子セレクタで区切り、IE6以外のブラウザ向けに指定を行う場合 */ html > body .example { width: auto; } |
