レスポンシブ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; } |
left を right で上書きしたいときは left:auto; を、
top を bottom で上書きしたいときは top:auto; を指定して、「リセット指定しないと」いけない。
というのが意外でした。
rightやbottomを、優先順序が高いセレクタで指定しても、それだけでは上書きがきかない。
タカハシ先生
コメントありがとうございます！
レスポンシブWebのコーディングをする際に注意が必要ですね。
配置関連のプロパティは調べてみると以外に面白いです！
top, bottom, left, rightの基本は3つのようです。
・いずれも初期値はauto
・topとbottomまたはleftとrightの指定がバッティングする場合、各々topおよびleftが優先されるので、autoによるリセット指定が必要
・ただし、leftが優先されるのはdirectionプロパティでltrと指定されている場合に限る（←directionプロパティの初期値はltr）
directionプロパティの値をltr→rtl（left to rightからright to left）に変更するとleftよりrightが優先されるようになるようです。
> directionプロパティ
アラブの文字とかですね。日本にいるとこのプロパティを使わないけど、
太平洋戦争までの横書きを再現するのに使えたりするかな？
日本語を右から左に表記するにはdirectionプロパティの指定に加えて、unicode-bidiプロパティの指定をunicode-bidi: bidi-override;とする必要があるそうです。
ちょっとコアになってきましたね。
【参考サイト】
http://www.htmq.com/style/direction.shtml