カテゴリごととか、コンテンツごととか、DIVでひとくくりにして決まったレイアウトで並べていく、というのはよくあると思います。
その中で、ひとつのDIV内にh1要素やP要素、UL要素などが混在していると思います。
そのDIVに全体の余白を設定するケースもよくあると思います。
しかし、h1要素などのタイトル部分には余白を設定したくない、という状況も結構あるのではないでしょうか。（俺だけかな・・）
まぁサンプルを見るのが一番早いので↓こんな感じ。
サンプルタイトル
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
ぱっと見はわかりづらいかもしれませんが、全体を囲うDIVにpaddingを設定し、タイトル部分だけネガティブマージンで相殺しています。
これに気付く前は、そのDIVからタイトル要素だけを外に出して…みたいなことをやってました。
が、コンテンツが増えていくとソースが見づらい上に編集もなんだかめんどくさい。
で、ネガティブマージンで解決できるだろうってことに気づいて適用してみたものの、なぜかIEでは見た目的には余白が消えたものの、なぜか反対の余白がまだ残っているらしく、親ボックスのDIVの幅が伸びる。
さらにIEの「幅が勝手に伸びる」というバグも手伝って、floatしているレイアウトの場合なんかはカラム落ちまでする始末。
なので、しばらくこの方法を封印していたのですが、なんと反対側の部分にもネガティブマージンを設定するときれいに余白が消えることを発見！（当たり前かもしれませんが、気づかなかった・・）
なのでメモ的にエントリーを書いてみました。ソースは以下から。
最近使っているCSSの管理の方法を書きたいと思います。
みなさんも色々工夫をしていると思いますが、CSSの管理はなかなか大変です。
それも、他人が書いたCSSを読むのはとても困難。
というのも、プログラムほどCSS同士の関連性が見えないせいだと思います。
そこで、色々なところで、後から見てもどんな処理をしているのかが分かるようにコメントをつけます。
その際、ある塊ができると思います。
たとえば、あるレイアウトを記述している際に、「#container h2」とか「#container .text span」みたいに「#container」を基準としたCSS群なんかができると思います。
そのCSSを記述する上部に、「#conainerの記述部分はここだよ」的なコメントを入れることが考えられます。
そのコメント部分に「[=toNext]」みたく、タグ(?)を挿入します。
また、この部分以外にも、各コメント部分に上記のタグのようなコメントを挿入するわけです。
これをすることのメリットは、あるプロジェクトなんかでCSSの記述方法のルール付けの際に、「CSSの頭だしは「[=toNext]」で検索すること、みたいにルールを作ります。
この方法に従って描かれたCSSファイルを閲覧するときは、この頭だしのコメントを検索することで各コメントごとへ飛んで行き、ざっとファイルの中身を把握するのに役立てる、ということです。
また、その頭だしされたコメントの中に、そのコメント以下に続く処理がなんなのかを書いておくと、さらに可読性があがると思われます。
・・と、最近やってることを書いて見ました。
みなさんも、こんな工夫をしてるよ、ってことをコメントくださるとうれしいです(*'-')
ちなみに、コメントのサンプルはこんな感じ↓
Internet Qualityさんの所の紹介エントリーにあったサイトで、IE6だけにうまくCSSを適用しているサイトがあったので、自分のメモとしてもエントリー。
Example: margin: 20px !important; margin: 10px;
サンプルを見ると、ごく簡単な処理になってます。
通常、importantを指定したスタイルが適用されますが、どうやらIE6の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまうようです。
なので、IE6だけに適用したいものなんかは、ハックを使わずにこんな感じで適用するとスマートかも。ただし、imporantを使ってるので、他のところで上書きしようとしてもできないので、通常のハック同様、乱用は禁物ですが・・・。
©2008 CSS-EBLOG. All Rights Reserved
