カテゴリー:CSSテクニック

リスト表示へ

IE6で複数クラスを使う時の注意点

2010年4月30日 10:00

複数クラスの使用

今さらですが、いちおう念のためってことで。
クラスは複数指定することができます。個別のクラスをひとつの要素に割り当てる、という使い方や、決まったクラスの組み合わせのみスタイルを適用する、なんていう使い方ができます。HTML、CSS の指定方法は以下の通りです。

HTML 側は上記のように、半角スペース区切りでクラスを指定すればそれで複数のクラスが指定されたことになります。(もちろん 2 つだけではなく、3 つ以上を指定することも可能です)

CSS 側は上記の 3 つ目の例のようにスペースを開けずにクラス名を連結させると、ふたつのクラスが指定されている要素にのみスタイルを割り当てることができます。(class1, class2 それぞれ別に定義している場合は、それらを合成したスタイルが割り当てられます)
これを適用すると以下のようになります。

複数クラスを指定し、上からclass1, class2, class1+class2のスタイルが当たった状態。

これを踏まえて。

複数クラスではまったのでメモ

ある案件で、複数クラスを使ったレイアウトをしていたら軽くはまったのでメモ的にエントリー。

IE6 で使う上での注意点

元々 IE6 では複数クラスの実装が不完全で、正確には理解していない、というのは知っていたんですが、まさか適用されない場合があるとは知りませんでした。

まず、複数クラスを使う場合の問題点。

IE6以下ではclassの複数指定は、CSS側のセレクタの記述は対応していないようで、並べられた最後のclass名単品でしか見られていないようです。

出典:IE6以下でclassの複数指定でバグがあった - Webコーダーの手帳

上記 引用はどういうことかというと、IE6 では CSS 側で複数のクラス指定に対応しておらず、いくら連結して指定したとしてもそれらがすべて無視され、最終的に最後に書かれたクラス名だけを読み取ってしまっている、ということです。イメージとしてはこんな感じ→.class1.class2.class3

そのため、以下のように CSS を指定しても、上記のサンプルの HTML にもスタイルが適用されてしまう、という問題が発生します。

▼実際に IE6 で表示してみた例

▼それ以外のブラウザ(キャプチャは Google Chrome)で表示した例

見てみると違いは明白ですね。本来、上記のように複数クラスを指定すると、class1, class2, class3 すべてが指定されている要素にのみ、スタイルが適用されるはずです。
しかし、IE6 では最後に書かれているclass2を読み取り、さも class2 として定義されたかのように 2 つ目と 3 つ目の要素にスタイルが適用されてしまっています。

なので、OOCSS の考えのような形で使用する分にはほとんど問題になりませんが、複数指定されている場合に表示を切り分ける、などのような使い方をする場合は注意が必要です。
下手をすると想定外の箇所にもスタイルが適用されて、レイアウトが崩れる、なんてこともあるかもしれません。

ID と連携して使用する場合の注意

さて、今回ハマったのがこちら。まず以下の引用を見てください。

1つのタグにidとclassを両方設定した際に起きるバグです。(わかりづらくて、すいません。。。)
このバグが発生する条件は少し限られていて、idで設定したスタイルをclassを付け替えることによって、見た目を変更しようとすると発生します。

ページのレイアウトは一緒だけど、色違いのページが数パターンあるという場合などで使用するかもしれませんね。

出典:IE6.0のバグ ?idとclassを両方設定した際

具体的にどういうことかというと、下記のコードを見てください。

まずは HTML から。
サンプルでは比較しやすいように id が重複していますが、通常のサイトのように 1 つであっても問題が発生します

続いて CSS。
#id.class と書くと、指定した id と class の両方が指定されている要素にのみスタイルを適用することができます。

想定としては、ID で大枠のレイアウトスタイルを書き、ページごと(あるいはモジュールごと)に class をつけかえて色や見た目を変化させる、という感じになるかと思います。(というかまさに今回ハマったのはそういった使い方でした)

上記のものを表示してみると以下のようになります。(Google Chrome でのキャプチャ)

見てみると、それぞれ上からしっかりとスタイルが適用されているのが分かるかと思います。
しかし、これを IE6 で見てみると下のような感じになります。

3 つの内、下ふたつにスタイル(背景色)が当たっていないのが分かると思います。
複数クラスの場合は、他で指定されたものが反映されていましたが、今回のサンプルでは完全にスタイルが無視されてしまっています。
こうなると、!important 規則を使ってもなにをしても反映されなくなってしまいます。(優先度ではなく、完全に無視されているような感じ)

バグの回避方法

そこで、このバグの回避方法が引用先の記事で書かれていました。そこで紹介されていたのは 2 つになります。

要素を追加して回避する

バグの発生条件にも書きましたが、どうやらセレクタの最後でクラスの付け替えによるスタイルの上書きをしようと試みた際に発生するようなので、最後に別のものを追加すれば回避することができます。

下記のソースでは、セレクタの最後をpにすることでバグを回避しています。

出典:IE6.0のバグ ?idとclassを両方設定した際

上記の説明を、今回のサンプルに適用すると以下のようになります。

このように、#id.class の指定をしている要素のさらに内側に、別の要素を追加します。(サンプルでは p 要素を追加していますが、p 以外でも大丈夫です)
そして CSS は以下のようにします。

こうすることで CSS の指定を認識してくれるようになります。(これが認識される、ということは id + class の指定はいちおう認識してるってことですよね・・なぜ最後に要素を足さないと認識しないのか・・まさにバグですね;)

ID と class を分ける

これは、#id.class という表記だとバグが発生するために、この連結での指定をやめてclass 単体でスタイルを指定する、というもの。
ただ、これだと根本の解決にはなっておらず、おそらく普通の指定方法となんら変わらないですよね。

それでもやはり、 IE6 対応を視野に入れるのであればこうした処置はやむを得ないことだとは思います。
また他のところでも言っていますが、ID でなければならない状況ってなにげに少ないと思っています。

JavaScript からアクセスする、というような用途がない限りは、class 指定だけでもスタイルを当てていくことはむずかしくありません。むしろ、ID の介入によって 優先度 が上がり、かなりしっかりと構造を定義しておかないと、後々別の箇所で新しい指定をしたい、と思ったときに上書きできずに、仕方なく id による優先度上げを行うしかない場合もあったりします。

そういう意味でも、あまり id での指定を多用せず、複数クラスの指定に留めておくのが安全かもしれません。

box-shadowを使った面白演出 - CSS3で遊んでみる4

2010年3月 8日 14:04

box-shadowサンプル

今回のネタは、box-shadow を使った、ちょっと面白い演出とデザインの紹介です。
box-shadow は現在、最初に書かれていた仕様の CSS Backgrounds and Borders Module Level 3 からは削除されおり、まだ策定中の段階ですが、先日リリースされた Opera10.50 ではベンダープレフィクスが取れた状態で使用できるようになっています。(なぜ・・・?)

そのため、Firefox や WebKit 系ブラウザで使うには-moz--webkit-のベンダープレフィクスが必要です。

また今回のネタでは、transition プロパティに対応している WebKit のみ、アニメーションの演出を見ることができます。
いちおう Opera10.50 でも transiton には対応したのですが、box-shadow へのアニメーションは適用されませんでした。

ということで、百聞は一見にしかず、ということでデモを見てください。

CSSのみで袋文字を実現する - CSS3で遊んでみる3

2010年1月29日 10:46

袋文字のサンプル画像

今回も CSS3 で遊んでみるシリーズです。
"今回のネタは、CSS3 で袋文字を作る"、です。

いちおう、WebKit では -webkit-text-strokeというそのものズバリなプロパティがありますが、そもそも WebKit しか対応していないこと、また微妙に縁がテキストにかぶるので(現状のままだと)使いづらい、というのがあります。

今回のネタは、見栄えはよくないですが、いちおう IE にも対応させてあります。
ただ、やっぱりネタなので実践で使うには「?」ですが、こんなこともできるよーという感じでご覧下さいw

ちなみに、色々なサイズを見られるように JavaScript を使って境界線の太さを調整できるようにしてあります。また、使う人がいるか分かりませんが 設定したものを CSS として書き出すようにしてあります。

RGBaを使ったプログレッシブ・エンハンスメントと注意点

2010年1月27日 14:16

いきなりはてブで vantguarde さんに突っ込まれました・・。今回の件はプログレッシブ・エンハンスメントではないですね。フォールバック、というらしいです。
プログレッシブ・エンハンスメントは、「なくても内容が破綻しない」というときのことですね。今回は "代替" を用意してるので違う、と。てか、こうなるとすでにタイトルが破綻してる気が・・w とりあえず積極的に新しい技術を使っていこう、という気持ちは変わらないので、このままにしておきます、ってことでいちおう注意。
ちなみに CSSのプログレッシブエンハンスメントの例 にちょっと詳しく書いてありました。

ちょっと面白い記事を見つけたので紹介です。(元記事: IE Background RGB Bug

概要はというと、単一セレクタによる指定で RGBa に対応していない IE6, 7 に対処しつつ、対応しているブラウザには RGBa を適用させる、というときの注意点です。

RGBa を使う

RGBa は、IE6, 7 は対応していません。なので、もしそのまま指定すると当然、IE6, 7 では背景色がない状態になってしまいます。
背景色がなくても問題ないこともありますが、例えばベースのテキストカラーが白(黒背景)で、見出しだけ白っぽい背景にした、などという場合、当然その見出しに載せるテキストカラーは黒に近い色になると思います。

そんなとき、もし背景色が表示されないとなるとテキストが見づらいばかりか、最悪の場合見れない、などということにもなりかねませんよね。
なので、RGBa に対応していない IE6, 7 であっても適切に文字が見えるようにしなければなりません。

CSS ハックを利用して、IE6, 7 だけに改めて背景の色を指定する、ということも考えられますがやや冗長になってしまいます。そこで、ひとつのセレクタ内で完結する記述方法が下記です。

CSS ソース01

こうして並べて記述することで、IE6, 7 とモダンブラウザ双方とも背景色が表示されるようになります。

注意点

しかし、元記事でも触れていますが、この方法、ショートハンド(backgroundのみのもの)で指定しないと IE6, 7 では反映しないようです。なので、下記のように書いてしまうと IE6, 7 では背景色が表示されません。

CSS ソース02

プログレッシブ・エンハンスメントという考え方

最近では、モダンブラウザで使える機能は積極的に使い、IE6(場合によっては IE7)などの対応していないブラウザに対しては同じような表示になるよ代替を用意する、という "プログレッシブ・エンハンスメント" という考え方が徐々に広まってきています。
RGBa はとても使いやすい機能なので、積極的に使っていきたいですね。

ちなみに、IE6, 7 では RGBa に対応していない、と書きましたが、filter をうまく使うと RGBa のようなことを実現することは可能です。以前、IE6, IE7でもRGBaを使う という記事を書いたので、よかったら参考にしてみてください。

CSSのみでグローバルメニューのhover以外をぼかしてhover中ボタンを強調する

2010年1月19日 23:51

ul要素のぼかしエフェクト画像

今回のテクニックは、以前書いた ピュアCSSで実装する DKIR を応用した画像ボタンのロールオーバー効果 の応用版です。
なので HTML はいじらずに、CSS の変更だけで実現しています。

また、今回のテクニックは ul, li 要素に対して:hover擬似クラスを使って実現しているためIE6 は未対応です。が、IE6 でもマウスオーバーの効果は正常に動作するので、IE6 以外のモダンブラウザ向けに仕込んでおくといい感じです。いわゆる "プログレッシブ・エンハンスメント" ってやつですねw

ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果

2009年12月22日 22:00

最近、「XHTML&CSS超高速コーディング術」という 牧野工房 さんが出している本を読みました。その中で、画像のロールオーバー効果を CSS で実現しているくだりがありました。

そこではvisibility: hiddenを利用したテクニックが載っていました。
概要としては、メニューなどの部分を普通に img 要素でマークアップしておき、マウスオーバー時や閲覧中のカテゴリの画像を背景にして該当の場合に img 要素を文字通り非表示にする、という方法で実装していました。

が、その場合だともし画像オフの場合や、オフにしていなくても回線の問題などで画像が表示されていないような場合に、マウスオーバーしたとき(あるいはカテゴリ閲覧中)に情報がまったく見れない、ということが(少ないですが)可能性としてありえるのでは、と思いました。

そこで、以前書いた これで決まり?な画像置換 - DKIR を応用した、上記のような場合でも情報が見れなくならないようなロールオーバー効果を実現する方法を書いてみたいと思います。

Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

2009年12月17日 14:49

PhotoshopライクなCSS3ジェネレーターイメージ
[09/12/22]
Opera でもいよいよ border-radius に対応する ようです。また、W3C の「CSS Backgrounds and Borders Module Level 3」が勧告案(Candidate Recommendation)になったためか、Opera ではプレフィクスがないようです。
なので、プレフィクスのない border-radius プロパティも出力するように修正しました。
[09/12/18]
若干 機能追加を行いました。
作成したものを、IE の独自拡張である filter を用いて、同じような表示になるソースも出力できるようになりました。
ただ、そもそもの実装が違うので完全には再現されません。(グラデーションが最初と最後の色しか指定できない、など)

今まで、CSS3 のグラデーションを利用したサンプルの作成を作成するとき、Photoshop っぽい感じでグラデーションが作れたらなーと前から思っていたので、最近 JavaScript から遠ざかっていたのもあって思い切って自分で作ってみました。

メインはグラデーションの作成ですが、Photoshop ライクなものを目指したので、Photoshop では当たり前のように出来るドロップシャドウなんかも設定できたら便利かな、と思って付け加えてあります。

ちなみに、CSS3 のグラデーションがメインなので、"CSS3 のグラデーションに対応している Firefox3.6以上か、WebKit 系のブラウザでしか動作しません"。

色々チェックはしていますが、もし不具合なんかあったら連絡もらえるとうれしいです。
連絡いただける際は、この記事へのコメントか、問い合わせからお願いします。

Photoshop ライクな CSS3 ジェネレーター

作ってみた感想など

今回は、CSS3 のプロパティを出力するのが目的だったので、そもそも CSS3 に対応していないブラウザはすっぱり切り捨てましたw なので、全体的に CSS3 をめっさ使ってます。

加えて、IE6 などのブラウザを切り捨てたので、気兼ねなく色々なセレクタを使ったりしてとてもコーディングが楽でした。
CSS3 が当たり前になったらこんなに楽になるんだなー・・としみじみ思いました。早く、CSS3 をメインで使ってコーディングがしたい・・・。

ボタンに光のエフェクトを加えるCSS3 - CSS3で遊んでみる2

2009年12月15日 14:27

考えてみたら -webkit-animation についての記事を書いていなかったので、ちょうどいいかなーと思いつつエントリー。

今回の記事は、これで決まり?な画像置換 - DKIR で紹介したz-indexのマイナス値と、-webkit-animationを使ったボタンに光るエフェクトを加える方法の紹介です。

前回 に引き続き、CSS3 で遊んでみるの第 2 段ですw
ちなみに今回のサンプルは、WebKit 系が先行実装している-webkit-animationを使ったものなので、Google Chrome や Safari で見ないとまったくなにも起こりませんのであしからず。(ただ、逆を返せばその他のブラウザ(もちろん IE6 も)では変化がないので、WebKit 系ブラウザで見た人向けに仕込んでおく、なんていう使い方もできちゃったりします)

CSS3だけで丸いボタンを作る方法 - CSS3で遊んでみる

2009年12月12日 00:04

CSS3で丸いボタンを作成したサンプル

最近なんだか結構 CSS3 で色々やっているのが流行ってるようなので、自分も CSS3 で遊んでみることにしました。n 内容は、「CSS3だけで丸いボタンを作る」です。

画像を見てもらうと分かるように、完全に丸いボタンです。
しかもこれ、画像は一切使っていません。使用しているのは CSS のみです。n

今回はとにかく遊んでみる、っていうのが主題なので使いどころとかは一切考えていませんw
それから CSS3 に対応していないブラウザで見ると、ただの真四角のボタンリンクになります。n

IE6, IE7でもRGBaを使う

2009年12月 9日 23:52

正確には RGBa っぽく表示させる、ですがw
IE6, IE7 は RGBa に対応していません。

ですが、IE の独自拡張である filter を使うと RGBa と同じことが実現可能です。
ただ注意点として、JavaScript オフで見ているユーザの場合は処理されなくなってしまうので、JS で制御するような LightBox などで表示したポップアップに対して使用しておくと問題なく使えると思います。

HTML ソース

CSS ソース

簡単に説明すると、filter のグラデーション機能の透明度を利用します。
上記サンプルの filter は本来グラデーションを指定するものなのですが、グラデーションの色にアルファ値を持った値を設定できるのです。

サンプルで言うと、#B4000000の部分ですね。数値は 16 新数の 8 桁で指定し、最初の 2 桁が透明度を表します。00 で透明、FF で不透明となります。

つまり、始まりと終わりの色と透明度を同じにしてしまえば、まるで RGBa のような振る舞いになる、というわけです。
ただ、filter は CPU に負荷をかけるので、あまり多用しないほうがいいかもしれません。
上でも書いたように、ちょっとしたポップアップなどに利用する程度にしておくといいと思います。

それから 1 点問題として、IE7 では filter を使った場合、clearType のフォント(メイリオとか)が細くなる(アンチエイリアスがなくなる)という問題があります。
そのあたりも考慮した上で使用してみてください。

前の10件 1  2  3  4  5  6  7  8  9  10