とりあえずよく分からないけど、コンテンツを真ん中にしたい！ とか、メニューリストを横並びにしたい！ という要望を、コピペのみで使えるように HTML と CSS をまとめてみました。n
なので、細かい説明などは今回はしていません。使い方とか質問がありましたら 問い合わせフォーム からご連絡ください。（これを追加して！ という要望でも構いません）n
サンプルソース上部にある "view plain" をクリックするとコピペしやすい形でソースが表示されます。書かれている width や height などはサンプルなので適宜お好みのサイズに変更して使用してください。n
/* ※ */の部分は色や幅、高さなので使いたいサイズなどに変更してください。n
また、掲載されている HTML や CSS の ID や class 名は導入したいサイトで使われているものに変更するか、新しく制作する場合は下記のブログの ID 名 や class 名の一覧を参考にしてみてください。nもう、class名やid名で悩まないんだからっ！！ | CSS-HappyLife
ちょっと色々あって、後方互換モードのせいでハマって 1 時間あまり無駄にしたので、それを無駄にしないためにも記事を書いてみたり。
内容はタイトル通りで、モードで苦戦したので、修正しようとしているサイトがそもそもなんのモードで動いているのかを判定するブックマークレットを作ってみた。下のリンクをブックマーク（お気に入り）に入れて、色んなところで使ってみてください。
ちなみに補足ですが、document.compatModeで取得できる値は、標準準拠モードがCSS1Compat、後方互換モードがBackCompatです。
さて、今回はやや趣向を変えて IE6 に絞って話をしたいと思います。
先日、久々に IE6 で自分のブログを見たらなんだか微妙に変な感じに。n
よく見てみたら、各タイトル部分の背景が所々表示されていませんでした。
この「背景が表示されない」というバグ、IE6 では時折見かけます。
以前書いた peek-a-booバグ というのもそのひとつ。n
今まで自分が経験した中で、この背景が表示されない現象を回避したものをいくつか書いてみようと思います。n
これは IE6 だけに限った話ではありませんが、float を使用してレイアウトをしていると遭遇する問題です。
子要素がすべて float していると親要素は正常に高さを判別できません。そのため、まるで背景が消失したかのように見えてしまいます。
これの解決には clearfix というハックを用いて対処します。n
なぜ clearfix を使うと背景が表示されるのかについては、初心者が陥りそうなCSSの7の間違い で詳しく説明しています。n
zoom は、IE の独自プロパティであり、さらに IE に実装されている hasLayout の値を true にしてくれるプロパティです。
この hasLayout 、該当要素がレイアウト（ボックスモデル？）を持っているかどうか、を判定するもので、これが true になると高さや幅、marginなどの値が適用されるようになります。n
なので、CSSの解釈でFirefoxなどのモダンブラウザと比べてなんか違うな、と思ったらとりあえず指定してみると色々解決するかもしれません。n
IE6の場合、ネガティブマージン（マイナス値の margin）を使うと時々変な挙動をすることがあります。
そのひとつとして背景が表示されない、というものがあります。
これ、まさに自分のブログで起きた現象でした；n
しかも、すべて同じ class の要素なのにもかかわらず、背景が表示されるものと表示されないものがあるのが厄介でした。
よくよく見てみたら、margin-left にマイナスの値を設定していたので、もしや、と思って position: relative を指定してみたところ、正常に背景が表示されました。n
また、これとは別にネガティブマージンを指定した要素内に画像がある場合、本来表示されるべき場所からマイナス方向に移動した分が切れる（本来表示されるべき場所でマスクされた感じ）という現象があります。n
これも同様にして、画像の親要素に対して position: relative を指定することで正常に表示されるようになります。n
合わせて読むと役に立つかもなエントリー
今回は「CSS だけで作るシリーズ」です。
タイトル通り、CSS だけで作るマウスオーバーによる画像拡大です。
どうやら、これから説明する方法だと IE だとクリックが正常に動かなくなるみたいです・・。
ただ、画像の拡大がメインなのでそもそもリンクしないかな、と思ってとりあえずアップしてみました。nということで、デモは以下の通り。
カテゴリごととか、コンテンツごととか、div でひとくくりにして決まったレイアウトで並べていく、というのはよくあると思います。
その中で、ひとつの div 内に h1 要素や p 要素、ul 要素などが混在していると思います。
その div に全体の余白を設定するケースもよくあると思います。
しかし、h1 要素などのタイトル部分には余白を設定したくない、という状況も結構あるのではないでしょうか。（俺だけかな・・）
まぁサンプルを見るのが一番早いので↓こんな感じ。
サンプルタイトル
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
ぱっと見はわかりづらいかもしれませんが、全体を囲う div に padding を設定し、タイトル部分だけネガティブマージンで相殺しています。
これに気付く前は、その div からタイトル要素だけを外に出して...みたいなことをやってました。
が、コンテンツが増えていくとソースが見づらい上に編集もなんだかめんどくさい。
で、ネガティブマージンで解決できるだろうってことに気づいて適用してみたものの、なぜか IE では見た目的には余白が消えたものの、なぜか反対の余白がまだ残っているらしく、親ボックスの div の幅が伸びる。
さらに IE の「幅が勝手に伸びる」というバグも手伝って、float しているレイアウトの場合なんかはカラム落ちまでする始末。
なので、しばらくこの方法を封印していたのですが、なんと反対側の部分にもネガティブマージンを設定するときれいに余白が消えることを発見！（当たり前かもしれませんが、気づかなかった・・）
なのでメモ的にエントリーを書いてみました。ソースは以下から。
float させてリストを横に並べる機会は結構あると思います。
メニューなんかの場合はそれぞれのリスト要素を余白を空けずに並べたりしますが、
通常のリストなんかの場合は左右どちらかに余白を空けて並べるのが通常だと思います。n
その際、当然 margin を使ってそれぞれのリストとの余白を空けますが、
すべてが同じ CSS が適用されるため、margin を指定したくない（大概は最後の）要素が出てきます。
最後の部分に別途クラスを指定するか、CSS3 であれば 3 回に 1 回の部分は margin を消す、
なんていうフレキシブルな対応ができますが、CSS3 はまだまだ実装されてきているとは言えません。n
そこで、現状でも使えるプロパティのみで親要素の両端にぴったりとくっつくように
リスト要素を収める方法を書いてみました。n
Internet Quality さんの所の紹介エントリーにあったサイトで、IE6 だけにうまく CSS を適用しているサイトがあったので、自分のメモとしてもエントリー。n
サンプルを見ると、ごく簡単な処理になってます。
通常、importantを指定したスタイルが適用されますが、どうやら IE6 の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまうようです。
なので、IE6 だけに適用したいものなんかは、ハックを使わずにこんな感じで適用するとスマートかも。ただし、imporantを使ってるので、他のところで上書きしようとしてもできないので、通常のハック同様、乱用は禁物ですが・・・。n
合わせて読むと役に立つかもなエントリー
ということで、かなり独断と偏見によってこのエントリーを書いてますがｗ
Yahoo! 知恵袋のような質問系のところでたまに見かける問題や、
以前自分で陥った間違い（勘違い）についてまとめてみました。
知ってると大したことない問題でも、知らないとその修正にかなりの時間を費やしたりします。
そういう人たちに知っておいてもらいたいことを 7 個ほど書き出してみました。
書いていくうちに、すごい長くなってしまいました(;´д｀)
CSSのボックスレイアウトって色々複雑だよなぁと思っていて、もし自分がそれを、まだ理解してない人に教えるならなんて教えるかな？ とか考えてるときがありました。
元々、なにかに例えて説明するのが好きなので、身近なものでなにか説明できないかと考えたわけです。
出した答えがこれでした↓
すべてを家に例えるわけです。
まず、widthは "家の幅"、paddingは "庭の範囲"、borderは "家の壁の厚さ"、marginは "隣の家との距離" と。
そう説明した上で、"庭の範囲"（つまりはpadding）は自分の好みが反映される（つまり背景）。そして自分の敷地は壁までの範囲（つまりwidth＋padding＋border）。そして隣の家との距離はmargin。
こう例えると、なんとなくpaddingとmarginの違いがわかりやすいのかなぁと思ったわけです。
さらに、実際のボックスの幅がwidth＋padding＋borderとなる理由も、上記の説明でなんとなくイメージできるかなと。
そんなこんなを考えていて、ついに人にそれらを教える機会があり、参考資料として上の図と、下のツールを作るに至りました。
分かる方から見ても、この説明が分かりやすいか、分かりづらいか、そういった意見を頂きたいなぁと今回の記事を書いてみました。
もっといい説明があるよ！とか、なんでもいいのでコメントもらえたら幸いです。
ちなみにツールのコンセプトは「よくボックスレイアウトについて分かっていない人でも、動的に見ることでなんとなくでも概要をつかんでくれるかなー」と。
おかしい部分なんかありましたらコメントでももらえるとうれしいです(;´д｀)
今回もまた備忘録的なものです。n
IE の CSS 表示で、たまになんだか変な挙動になることありませんか？
高さがおかしくなったり、場所がずれたり。ちょっとどこで読んだか忘れてしまったんですが、どうやら特定のスタイルを適用すると、レンダリングが変わるんだかなんだかだとか。
hasLayoutがONになるプロパティを指定すると、CSS の解釈が変わります。（IE のみ）
なので、たまにheightやborderを設定すると表示が改善された、なんてことありませんか？
それらが、その「特定のスタイル」のようです。
だから、それらを設定することで正常に表示されたりするんですね。n
ただ、borderにしろheightにしろ、IE 用に適用させてしまうと、他のブラウザ（Firefox とか）に影響が出ちゃいますよね。n
そんなときにzoom:1です。
これは IE 独自スタイルにも関わらず、上で書いたように「特定のスタイル」の中に含まれます。
なので、heightなどで表示が改善されるような場合、そのスタイルにzoom:1を指定しておけば他のブラウザに影響を与えることなく IE だけにスタイルを適用することが可能となります。n
なんかで行き詰ったら試してみるといいかも？n
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009-2010 CSS-EBLOG All Rights Reserved
