IE8 がリリースしてしばらく経ちました。
現状では、CSS2.1 への準拠が一番、と言われていますが、正直 CSS3 に対応してくれないと使い物にならない、ってのが正直な感想です。
ただそれでも、以前の IE たちに比べるとずいぶんとお利口になったようで、あまりレイアウトが崩れる、というのがないのではないでしょうか。
しかしながら、まだたまにおかしな挙動をする部分があり、しかもそれが IE8 だけ、なんてことになるとハックの出番かな、なんてことになります。
そんなこんなで、IE8 対策が必要な場合に備えて、ハックを調べてみたらいくつか見つかりました。備忘録的にもエントリーしたいと思います。（ハックは 2 種類あります）
今回のサンプルで、実際に使いやすいのは sample02 ではないかなと思います。
そのものズバリを適用させることができるので。ということで、順番前後しますが sample02 から説明したいと思います。
見てもらうと分かりますが、注意点は 3 箇所。
まず最初に、html>/**/bodyと、子セレクタを使いつつ、>とbodyの間に/**/と、空のコメントを入れます。
これを入れないと、IE7 でも適用されてしまうようです。
次に、プロパティの後ろに/***/を入れます。（サンプルではcolor /***/
これに関しては、この表記がなくても IE6,7, Firefox2,3, Safari4, Opera9, Google Chrome で確認したところどれも適用されませんでした。Mac では確認していないので Mac 向けの指定かもしれません。念のため。
最後に、値の後ろに9を追加します。
他のプロパティも指定したい場合は、9がないときと同じように行末に;をつけて、次のプロパティからは/***/なくても大丈夫なようです。
続いて sample01 の説明です。
sample01 は 3 行からなります。サンプルソースのコメントに書いてありますが、1 行目が IE6, 7 用、2 行目が IE8 用、最後がモダンブラウザ用となります。
最初の 1 行目は通常の指定ですね。このままであれば、全ブラウザに適用されるスタイルになります。
続いて 2 行目。これは間接セレクタを使った指定です。ただこの指定だけだと間接セレクタを正常に解釈できるモダンブラウザにも適用されてしまうために、これを打ち消すために最後の 3 行目が必要なわけです。
そして最後の 3 行目、IE8 は CSS3 の対応があまいく、not 疑似クラスに対応していないため IE8 を除いたモダンブラウザ向けにスタイルが適用できる、というわけです。これが打ち消しの 3 行目です。
ちなみに、2 行目の指定でコメントが途中入っているのは IE7 対策です。
このコメントがないと IE7 にもスタイルが適用されてしまうためこのような記述があります。
合わせて読むと役に立つかもなエントリー
前回 の続きです。今回で最後です。
今回のエントリーも完全にメモエントリーです。
CSS3 からのセレクタの指定方法なんか、覚えているようで細かいところを忘れがちなので、今回のエントリーを書きました。
なのでこのエントリーは、下記の WWW WATCH さんのエントリーを参考にさせていただきました。（というかほぼコピー）
そちらのほうが詳細に書かれているのでぜひ参考にしてみてください。n
擬似要素とは、そこにあたかも要素があるようにふるまう CSS のことです。
たとえば、n
上記のように（タグ名は分かりやすいようにしていますので、こんなタグはありません）あたかもそこに要素があるように描画されます。n
擬似要素は、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、:を2回使って、::と記述することが定義されています。
CSS2 までに準拠してコーディングする場合は従来どおり、:1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基本になる予定です。
ですので、:はCSS2、::はCSS3の仕様で、意味は同じ、ということです。n
この::方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。nIE8 では、どうやら CSS3 の記述である:: には対応していないようです。なので、しばらくは:と書いておくのが安全かもしれません。
E という要素の最初の 1 行目にのみスタイルを指定します。CSS1 で定義されています。
1 行目というのがフォントサイズやブラウザのウィンドウサイズ等、色々な条件で変わってきますので、注意が必要です。
ちなみにブロック要素に対してのみ有効で、指定できるプロパティにも制限があります。n
テストしてみましたが、ほとんどのプロパティが指定できないので、実際どういう状況で使うのが望ましいのか分かりかねてます・・。n
E という要素の最初の 1 文字にのみスタイルを指定します。CSS1 で定義されています。
1 文字目が特定の文字（引用符やカギ括弧など）の場合、次の文字と合わせてスタイルが指定されます。
::first-line 擬似要素同様、ブロック要素に対してのみ有効で、指定できるプロパティにも制限があります。n
雑誌の ドロップキャプスのような効果を狙いたい場合などに使えます。n
ユーザーが選択した文書に対してスタイルを指定します。
例えばマウスドラッグ等でテキストを選択状態にした際の見た目を変えることができます。
選択中だけ背景画像を出す、なんてことをやると面白い演出ができるかもしれませんね。n
言わずもがな、これについてはほとんどの方が知っているでしょう。
CSS2 では:before(:after)と書いていますが、CSS3からは::と2個になります。
::after は clearfix などでよく目にすると思います。n
class 属性の値によってスタイルを指定します。基本的な使い方ですね。
ちなみに詳細度は 1 なので、ID などで指定したものに比べて上書きされやすいです。n
id 属性の値によってスタイルを指定します。こちらも基本ですね。
class 属性での指定よりも詳細度が高く（100）ID で指定したスタイルは上書きされづらいです。n
E という要素のうち、s でないものにスタイルを指定します。n
子孫セレクタは、親要素に含まれるすべての子孫要素（F）に対してスタイルを指定します。
ユニバーサルセレクタや、属性セレクタなどと組み合わせて使用できます。n
子セレクタは、親要素の直接の子要素に対してスタイルを指定します。孫要素以下は対象になりません。
div の中の span にスタイルを適用したいが、入れ子になっている div の中の span には適用させたくない、という場合などに使用します。n
E という要素から見て直接の弟要素である F という要素にスタイルを指定します。
兄弟要素とは、ある親要素内で、同列に存在する要素のうち、前 （兄） 後 （弟） に存在する要素を指します。さらに直接の弟要素とは、E という要素と同列で、Eという要素の直後に隣接して存在する要素を指します。例えば次のような場合、h2 要素は h1 要素の直接の弟要素です。n
E という要素の後に出現する F という要素にスタイルを指定します。
つまり、E という要素の弟要素が対象になります。n
このセレクタの使い方があまり思いつきませんが、例えば li:nth-child(3n) li なんて使い方をすると、3n 以降の li要素に対してスタイルを適用、なんて使い方ができます。n
合わせて読むと役に立つかもなエントリー
前回 の続きです。
今回のエントリーも完全にメモエントリーです。
CSS3 からのセレクタの指定方法なんか、覚えているようで細かいところを忘れがちなので、今回のエントリーを書きました。
なのでこのエントリーは、下記の WWW WATCH さんのエントリーを参考にさせていただきました。（というかほぼコピー）
そちらのほうが詳細に書かれているのでぜひ参考にしてみてください。n
ドキュメント内のルート要素である E という要素にスタイルを指定します。(X)HTML においては、ルート要素は html 要素になるので、以下のようにすれば html 要素にスタイルが適用されます。
XML の場合は、DTD で指定されたルート要素に対して適用されます。（XMLの場合はDTDなどによってルート要素が異なる）n
E という要素のうち、その親要素の n 番目の子要素である E 要素にスタイルを指定します。
（1th, 2th なんかの th と n 番目の n を合わせたもの、と覚えると覚えやすいかも）n
とすれば、div 要素内で、3 番目の子要素として出現する p 要素にのみスタイルが指定されます。また、n
として、奇数番目に出現する要素を指定したり、同じく even を n に入れて偶数番目のみを対称にしたりもできます。
（odd は奇数、even は偶数という意味）n
他にも 2n+1 など、an+b という記述も可能で、a と b に整数を入れると、n には 0 から順番に整数が代入されて計算されていきます。
つまり、2n+1 であれば、奇数 （odd） と同じであり、2ｎ+0 であれば、偶数 （even） と同様です。ちなみに、+0 は省略しても同じですので、実際は、2n と記述します。n
注意点として、:nth-child の () 内の記述はスペースを許可していないようです。（webkit系）
この記述は、下記の擬似クラスに出てくる n にも同様に使用できます。n
E という要素のうち、その親要素の "最後" から数えて n 番目の子要素である E 要素にスタイルを指定します。n
とすれば、div 要素内で、一番最後の子要素として出現する p 要素にのみスタイルが指定されます。（div p:last-childと同義）n
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で n 番目に出現する E 要素にスタイルを指定します。n
とすれば、div 要素内で兄弟関係にある p 要素の中で、5番目に出現する p 要素にのみスタイルが指定されます。n
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最後から数えて n 番目に出現する E 要素にスタイルを指定します。n
とすれば、div 要素内で兄弟関係にある p 要素の中で、最後から 3番目に出現する p 要素にのみスタイルが指定されます。（上記の逆から数える）n
E という要素のうち、その親要素の最初の子要素である E 要素にスタイルを指定します。
連続する要素の中で、"最初の要素だけ margin を指定したくない" なんてときに使えます。n
E という要素のうち、その親要素の最後の子要素である E 要素にスタイルを指定します。
上記とは逆で、"最後の要素だけ border を表示しない"なんてときに使えます。n
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最初に出現する E 要素にスタイルを指定します。
E:first-child との違いは、E:first-child はそのE要素がその親要素内で "最初に" 登場した場合に限り適用されるスタイルです。
しかし、E:first-of-type はその親要素内で最初に登場する E に必ず適用されます。n
とすれば、div 要素内で兄弟関係にある p 要素の中で、最初に出現する p 要素にのみスタイルが指定されます。n
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最後に出現する E 要素にスタイルを指定します。
（E:first-of-type と同じで、last-child との違いがあります）n
とすれば、div 要素内で兄弟関係にある p 要素の中で、最後に出現する p 要素にのみスタイルが指定されます。n
E という要素のうち、その親要素内で唯一の子要素である （兄弟を持たない） E 要素にスタイルを指定します。
つまり、div span:only-childとすると、親要素内に span 要素が 1 つだけしか存在しない場合にスタイルを適用します。
もし "なにかしらの" 要素が 1 つだけの場合にスタイルを適用したい場合はdiv *:only-child（もしくはdiv :only-child（div との間に半角スペース））」とすることで、特定の要素を指定せずに、なにかしらの要素があった場合にこのスタイルが適用されます。n
E という要素のうち、その親要素内で唯一の E 要素にスタイルを指定します。
上記との違いは、E 要素が唯一であれば、E 以外の要素があってもスタイルが適用されます。n
E という要素のうち、子要素 （テキストノードも含めて） をまったく持たない E 要素にのみスタイルを適用します。
（テキストノードとは、タグを有さないテキストのことです。（<p>textnode<span>span text</span></p>の、textnodeの部分。つまり<p></p>だった場合））
自動的に書きだされるブログなどで、なにも含まれない要素がある場合などに使えます。n
文書内のハイパーリンクのうち、ユーザーがまだ訪れていないリンクか:link 、または訪問済みリンクか:visitedによって、それぞれにスタイルを指定します。
注意点として、以下のサンプルのような順番で記述しないと意図した結果にならない場合があります。
（CSS は通常、下に書いたもののほうが有効になるため、:visitedの下に:linkを書いてしまうと、訪問しても変化がない、ということがあります）n
ユーザーの操作に合わせてスタイルを指定します。:active はユーザーによって対象要素がアクティブにされた時。例えばマウスでクリックしてボタンを離した時などですね。
:hover はユーザーによって対象要素が指し示されている時。マウスカーソルなどが重ねられた時など。（本来は a タグ以外にも使えますが、IE6 は対応していません）
最後に、:focus は対象要素がフォーカスされている状態でのスタイルを指定します。
例えば、入力待ちになっている input 要素など。n
ハイパーリンクのうち、URI にアンカーリンクが指定されているリンクをアクティブにした際、そのターゲットとなる要素に対してスタイルを指定します。
（アンカーリンクとはhttp://example.com/example.html#section_3などの#の後ろにページ内のIDが指定されたリンクです）n
:target擬似クラスを指定することで、ページ内リンクで飛んだとしても、どこへのリンクだったかが分かるようになります。n
E という要素のうち、前方一致で fr という lang 属性値を持つ要素を対象にします。n
のように指定すれば、n
などと記述された p 要素にのみスタイルを設定します。n
E という要素のうち、有効なもの （:enabled）、無効なもの （:disabled）に対してそれぞれスタイルを指定します。
デフォルトのボタンとかを使っているのではなく、画像なんかで代替えしているときなどに使えそうですね。
E:checkedは、"ラジオボタン、チェックボックス" がチェックされた状態のときにスタイルを指定します。
さらに次回に続きます。n
合わせて読むと役に立つかもなエントリー
今回のエントリーは完全にメモエントリーです。
CSS3からのセレクタの指定方法なんか、覚えているようで細かいところを忘れがちなので、今回のエントリーを書きました。
なのでこのエントリーは、下記の WWW WATCH さんのエントリーを参考にさせていただきました。（というかほぼコピー）
そちらのほうが詳細に書かれているのでぜひ参考にしてみてください。n
ユニバーサルセレクタ「*（アスタリスク）」は、すべての要素を対象とします。
（ワイルドカード、と言うと分かりやすい人もいるかもしれません。UNO のワイルドカードも同じ意味です。つまり「なんでも」ってこと）
使い方は下のような感じ。よくデフォルト CSS の初期化などで目にしますね。n
さらに、子孫セレクタとして使うこともできます。
下のサンプルだと、#fooという ID のついた div 要素の直接の子要素である span を除く span 要素（例えばdiv#foo p spanなど）にスタイルが適用されます。n
タイプセレクタは最も単純なセレクタです。要素名を指定することで、その要素に対してスタイルを適用します。n
ある要素の中で、指定した属性をもつ要素に対してスタイルを定義します。
下記のサンプルでは、class 属性を持った p 要素<p class="***">にスタイルを適用します。n
同じく属性セレクタです。
こちらは属性名と、その属性値まで含めてマッチしたものにスタイルを適用します。n
こちらも属性セレクタですが、を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、複数の属性値が指定されている場合は指定の属性値を含んでいればスタイルが適用されます。
（例えば、スペース区切りで複数の class が設定されている場合などに、指定した class 名が含まれている場合などです）n
こちらも属性セレクタですが、^を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、指定の文字で始まる属性値を含んでいればスタイルを適用します。
（正規表現の^と同じような使い方です）n
こちらも属性セレクタですが、$を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、指定の文字で終わる属性値を含んでいればスタイルを適用します。
（正規表現の$と同じような使い方です）
.pdfなど、特定の拡張子で href 属性が指定されている場合、アイコンを表示する、などの使い方ができます。n
こちらも属性セレクタですが、*を使用することで、指定されている属性値の判別が上記と異なります。
サンプルの場合、指定の文字を含む属性値を含んでいればスタイルを適用します。
（と比べて、"文字列" であることに注意してください。サンプルではexを含む文字列（例えばextternalなど）にマッチします。n
長くなってしまうので、続きは次回で。n
合わせて読むと役に立つかもなエントリー
今回、偶然遭遇した IE6 のバグ（？）をメモしておきます。
現象は、img 要素でマークアップした画像のボタンに a 要素の onclick なんかで処理をさせる場合のもの。n
今回、form の外から submit() を実行する必要があったので、onclick に関数を設定し、その関数内で処理を行ったあと、form の submit() を実行させたのですが・・。
なんでか、IE6 だけどうしても動かない。なにをしても動かない。
原因はよくわからないが、onclickに設定した関数のあとにreturn falseを追加したらうまく動いた。n
社内で協議の結果、a 要素自身の動作と onclick で設定した submit() の処理がぶつかっているのでは？ ということに。
その証拠になるかは分からないけど、submit 処理をたとえば
WWW WATCH さんのところで興味深い記事を見つけたので備忘録的に書いてみた。
タイトル通りだけど、どうやら IE7 の隣接セレクタにはバグがあり、HTML 文書でコメントアウトしている要素も"隣接"と認識してしまうもの、という感じ。
IE7 で見てもらうとわかるけど、確かにコメントがあるだけで隣接セレクタが効いていない。
（サンプルの上がコメントあり、下がコメントをつけただけで HTML、CSS 共にまったく同じ）n
まだ IE6 が全盛だけど、そろそろ IE7 へ自動更新が始まるから、そうなったら隣接セレクタにお世話になりそう。そのときにこういった類のバグは覚えておくとあとあと楽かも。n
▼ソースの紹介は以下から。n
なんだかよく分からない現象が発生したのでメモ。n
案件で、連続した英数字が入力された場合に、改行されずブロックが下に落ちてしまう現象が発生した。
（Firefox では問題ないが、IE では勝手にwidthを変更してしまうためfloatが崩れる）
そこで、widthは固定なのでoverflow:hiddenで横にはみ出すテキストを非表示にすることで対応した。が。n
なぜかブロック要素とも、インライン要素ともつかない変な挙動をしはじめた。
まず、内包しているインライン要素の幅が長くなると左にfloatしている要素のすぐ下、（見た目としてはfloatが落ちた感じ）になってしまった。
親要素にoverflow:hiddenを設定しているので、インライン要素がいくら横に伸びても親要素には影響ないはずだ。n
が、見る限り、そのインライン要素のせいで下に落ちてしまっている。（その長い部分を消すとちゃんと上にくる）
しかし、親要素にwidthを明示的に設定していなかったのを発見し、widthを設定してみる。n
これで問題解決か、と思いきや、今度はなぜか、設定していたmargin分、右にずれた。
しかし、本来このmarginはfloatしたボックスを回避するためのもので、floatされた要素に影響されないはずである。n
にも関わらず、設定したmarginが、floatしている要素の端からの計算になっていたのだ。
（つまり、たとえば 100px の左にfloatしたボックスに対して、110px のmarginを設定すると、そのfloatしたボックスから見て右に 10px の余白ができることになる）n
しかし、実際はoverflowを設定した要素は、上の例で言えば 110px 右にずれていたのだ。
推測するに、overflowを設定すると、floatボックスとなるのではないか、と思った。
（もし、当たり前の挙動だったらコメントください；）n
float下要素を表示させる、clearfix の中に、overflowを設定して背景を表示させるテクニックもあるが、おそらく、floatボックスとなることで背景が表示されるのではないか、と思う。n
今回もまた備忘録的なものです。n
IE の CSS 表示で、たまになんだか変な挙動になることありませんか？
高さがおかしくなったり、場所がずれたり。ちょっとどこで読んだか忘れてしまったんですが、どうやら特定のスタイルを適用すると、レンダリングが変わるんだかなんだかだとか。
hasLayoutがONになるプロパティを指定すると、CSS の解釈が変わります。（IE のみ）
なので、たまにheightやborderを設定すると表示が改善された、なんてことありませんか？
それらが、その「特定のスタイル」のようです。
だから、それらを設定することで正常に表示されたりするんですね。n
ただ、borderにしろheightにしろ、IE 用に適用させてしまうと、他のブラウザ（Firefox とか）に影響が出ちゃいますよね。n
そんなときにzoom:1です。
これは IE 独自スタイルにも関わらず、上で書いたように「特定のスタイル」の中に含まれます。
なので、heightなどで表示が改善されるような場合、そのスタイルにzoom:1を指定しておけば他のブラウザに影響を与えることなく IE だけにスタイルを適用することが可能となります。n
なんかで行き詰ったら試してみるといいかも？n
えぇ、これは完全に備忘録的記事です(;´д｀)
製作をしていて気づいたことがあったのでメモメモ。
なんか、とあるリンクをfloat:leftでざーっと並べたところ。
Firefox ではなんの問題もなかったんだけど、IE6、7 ではなぜかマウスオーバー時にずれが生じて、floatが崩れるという現象がッ。n
しばらく試行錯誤していたところ、
a 要素にbackground: none;を追加してやったところずれが生じなくなった。
もともと背景にはなにも指定していないのになぜだろう・・。n
なんとなく、挙動的にはマウスオーバー時にmarginだかheightだかが変更されるせいでずれが生じてるように見えてたんだけど、チェックのために背景を指定したらなぜかずれなくなったという・・(´・ω・｀)
とにかく解決してよかった(;´д｀)
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009-2010 CSS-EBLOG All Rights Reserved
