coding
【IE7・IE8対応】コーディング初心者へ送る、覚えておくと便利なCSSの小技集【XHTML&CSS2編】
昨年の4月から新入社員の皆さんにコーディングを教えていますBayashiです。
基本的なことは皆さんすぐに覚えてくれるのですが、実際に書いてもらったコードを見ると、「ここはこうした方が良いのにな……」「実はこんな小技があるんだけどな……」と思うこともあったり。
そんな、ある程度のコーディングキャリアがある人なら知ってるけど、新人は知らない（と思われる）ものを小技集的にまとめてみました。
floatの小技
floatした要素のカラム落ちを防ぐCSS
ECサイトなど、ボックスをタイル状に並べたい時に。
jQueryなどで右端のボックスにclassを付けてもいいんですが、
そのためだけに毎回JavaScriptを動かしていてはパフォーマンスを落としかねません。
HTML
|
1 2 3 4 5 6 7 8 9 |
<ul> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 |
ul { margin-right: -25px; overflow: hidden; } ul li { float:left; width: 100px; margin: 0 25px 25px 0; } |
チョコっと解説
2行目でulにネガティブマージンを設定しているのがポイントです。
CSS3の::nth-child疑似要素を使うまでもないですね！
縦幅の違うバナー群を1つのulで組む
キャンペーンバナーだけ縦幅が違う、みたいな時に。
html
|
1 2 3 4 5 6 7 8 |
<ul> <li><img src="/img/bnr01.jpg" alt="" width="180" height="120"></li> <li><img src="/img/bnr02.jpg" alt="" width="180" height="50"></li> <li><img src="/img/bnr03.jpg" alt="" width="180" height="50"></li> <li class="right"><img src="/img/bnr04.jpg" alt="" width="180" height="120"></li> <li><img src="/img/bnr05.jpg" alt="" width="180" height="50"></li> <li><img src="/img/bnr06.jpg" alt="" width="180" height="50"></li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ul { overflow: hidden; } ul li { float: left; width: 180px; margin: 0 10px 10px 0; padding: 0; } ul li.right { float: right; } |
チョコっと解説
float:leftした要素は左上へ、float:rightした要素は右上へ動こうとするようなイメージを持っておくとスムーズにできるかもしれません。
最初だけor最後だけに適用させるCSS
サイドナビなどで、リストの最初や最後の項目だけスタイルを変更したい時などに。
class=”last”やclass=”top”からは卒業しましょう。
HTMLは共通です。
|
1 2 3 4 5 6 7 |
<ul> <li>menu</li> <li>menu</li> <li>menu</li> <li>menu</li> <li>menu</li> </ul> |
ネガティブマージンを使う
CSS
|
1 2 3 4 5 6 |
/* ①の場合 */ li { margin-top: -1px; border-top: 1px solid #47803a; border-bottom: 1px solid #47803a; } |
チョコっと解説
①の時にのみ使える小技です。
個々のリスト要素をネガティブマージンで1px上にズラすことでborder-bottomを隠してしまう感じでしょうか。
ただ、デザインによっては調整が少し難しいかも知れません。
疑似要素を使う
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* ①の場合 */ li { border-bottom: 1px solid #47803a; } li:first-child { border-top: 1px solid #47803a; } /* ②の場合 */ li { border-top: 1px solid #ffae00; } li:first-child { border-top: none; } |
チョコっと解説
実は:first-child疑似要素は、IE7以上で対応しています。
何故か:last-childはIE9以上でないと使えませんが……。なんなんでしょ、この差は。
隣接セレクタを使う
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* ①の場合 */ li { border-top: 1px solid #47803a; } li + li { border-bottom: 1px solid #47803a; } /* ②の場合 */ li + li { border-top: 1px solid #ffae00; } |
チョコっと解説
意外と忘れられがちな隣接セレクタですが、慣れれば非常に便利です。
:first-child疑似要素を使う方法と比べると、どちらの場合でもCSSを上書きしないので、パフォーマンスの面で優れていると言えます。
その他のセレクタについて
隣接セレクタの他にも、間接セレクタや属性セレクタなど、IE7以降で使えるCSSの指定方法はたくさんあります。
どんどん使って余計なclassから卒業しましょう！
<おすすめ参考サイト>
テキスト関係の小技
2行目以降を文字下げする
テキストリストで、2行目以降をリストマーク分空けたい時に。
HTML
|
1 2 3 4 5 |
<ul> <li>※注意事項そのいち</li> <li>※注意事項そのに</li> <li>※注意事項そのさーーーーーーーーーーーん</li> </ul> |
CSS
|
1 2 3 4 |
li { padding-left: 1em; text-indent: -1em; } |
チョコっと解説
padding-leftでリスト全体を右に1文字分寄せてからtext-indentで1行目のみを1文字分左に飛び出させることで、2行目以降を文字下げしています。
改行をCSSで無効にする
<br ⁄>はCSSで消せます。
IE7というよりも、レスポンシブデザインやCMSを使ったサイト構築で役立つことの方が多いかも知れません。
個人的な感想ですが、これを初めて知った時は結構な衝撃でした。
CSS
|
1 2 3 |
br { display: none; } |
発想を柔軟にするために
今回ご紹介したもの以外にも、CSSの小技は山ほどあります。
しかし、まずはCSSの基礎をしっかりと身につけましょう。（小技を紹介しておいてなんですが……。）
仕様書を読むのもオススメです。
きっと知らなかった意外なことに気付けると思います。
知識が深まれば、その分手段が増え、柔軟な発想をしやすくなるハズです！
がんばりましょう！！
