復習！ IE6が対応していなかったCSS2 + α
2014年9月30日 火曜日 ｜ デザイン
レキブロをご覧の皆さま、こんにちは！
デザインチームの新垣です。
2014年4月、Windows XPのサポートが終了されました。
それにともない、いよいよIE6を対象ブラウザから外した
Web制作会社は多いと思います。
しかし、IE6のサポートを打ち切ったあとも、
IE6が対応していなかった機能を使っていないWeb制作者を
目にすることがあります。もったいない！
ということで今回は、IE7以上を対象した場合利用できる
古くて新しい技術を紹介していきます！
セレクタ
IE6で使えたセレクタはクラスセレクタ、idセレクタ、子孫セレクタ
くらいでしたが、CSS2には便利なセレクタがたくさんあります。
| p.red.button | 複数のクラス指定 [1] |
|---|---|
| div > p | 子セレクタ。子要素だけ、孫要素は対象外 |
| h1 + p | 隣接セレクタ。h1要素の直後にあるp要素 [2] |
| h1 ~ p | 間接セレクタ。h1要素のあとにあるp要素 |
| img[alt] a[target=”_blank”] input[type=”radio”] など |
属性セレクタ。alt属性を持つimgタグ、target属性に「_blank」を指定したaタグ、という指定が可能。 |
| :first-child | ある要素の中での最初の子要素 |
| a:hover span | :hover疑似クラスの子孫要素 |
| p:hover | :hover疑似クラスをa要素以外にも使用可能 |
[1] IE7ではクラスの順番によるバグがあります。
NG
p.red.button { color: #f00; }
p.blue.button { color: #00f; }
NG
p.red.button { color: #f00; }
p.blue.button { color: #00f; }
OK
p.button.red { color: #f00; }
p.button.blue { color: #00f; }
[2] IE7ではコメントの記述によるバグがあるそうです…。
position: fixed;
| .xxx { position: fixed; } | ブラウザに対して絶対配置、 スクロールしても位置は固定 |
|---|
max-width、max-height、min-width、min-height
| .xxx { max-width: 100%; } | 要素の最大の横幅を指定 |
|---|---|
| .xxx { max-height: 300px; } | 要素の最大の高さを指定 |
| .xxx { min-width: 50px; } | 要素の最小の横幅を指定 |
| .xxx { min-height: 6em; } | 要素の最小の高さを指定 |
PNG画像の透過
長らくデザイナーを悩ませていた問題が解消されましたね。
ロゴやアイコンなどで思う存分使ってください！
といいたいところですが、IE7とIE8では、透過PNG画像の
透明度(opacity)を変化させると輪郭が黒く汚く表示されますので、
注意が必要です。
記事を書いて思ったのですが、全部有名ですねｗ
世の中のブログ記事でCSS4を紹介していたりすることを考えると
いまいち手応えがなかった…。いや、しかし復習は大事です。
もし、「何これ知らない！」というものを見つけた方は、
この際にこっそり覚えてみてください！
