blog

coding

【IE7・IE8対応】コーディング初心者へ送る、覚えておくと便利なCSSの小技集【XHTML&CSS2編】

昨年の4月から新入社員の皆さんにコーディングを教えていますBayashiです。
基本的なことは皆さんすぐに覚えてくれるのですが、実際に書いてもらったコードを見ると、「ここはこうした方が良いのにな……」「実はこんな小技があるんだけどな……」と思うこともあったり。

そんな、ある程度のコーディングキャリアがある人なら知ってるけど、新人は知らない(と思われる)ものを小技集的にまとめてみました。

floatの小技

floatした要素のカラム落ちを防ぐCSS

ECサイトなど、ボックスをタイル状に並べたい時に。

20150710_01

jQueryなどで右端のボックスにclassを付けてもいいんですが、
そのためだけに毎回JavaScriptを動かしていてはパフォーマンスを落としかねません。

HTML

CSS

チョコっと解説

2行目でulにネガティブマージンを設定しているのがポイントです。
CSS3の::nth-child疑似要素を使うまでもないですね!

縦幅の違うバナー群を1つのulで組む

キャンペーンバナーだけ縦幅が違う、みたいな時に。

bayashi20150710_02

html

CSS

チョコっと解説

float:leftした要素は左上へ、float:rightした要素は右上へ動こうとするようなイメージを持っておくとスムーズにできるかもしれません。

最初だけor最後だけに適用させるCSS

bayashi20150710_03

サイドナビなどで、リストの最初や最後の項目だけスタイルを変更したい時などに。
class=”last”やclass=”top”からは卒業しましょう。

HTMLは共通です。

ネガティブマージンを使う

CSS

チョコっと解説

①の時にのみ使える小技です。
個々のリスト要素をネガティブマージンで1px上にズラすことでborder-bottomを隠してしまう感じでしょうか。

ただ、デザインによっては調整が少し難しいかも知れません。

疑似要素を使う

CSS

チョコっと解説

実は:first-child疑似要素は、IE7以上で対応しています。
何故か:last-childはIE9以上でないと使えませんが……。なんなんでしょ、この差は。

隣接セレクタを使う

チョコっと解説

意外と忘れられがちな隣接セレクタですが、慣れれば非常に便利です。
:first-child疑似要素を使う方法と比べると、どちらの場合でもCSSを上書きしないので、パフォーマンスの面で優れていると言えます。

その他のセレクタについて

隣接セレクタの他にも、間接セレクタや属性セレクタなど、IE7以降で使えるCSSの指定方法はたくさんあります。
どんどん使って余計なclassから卒業しましょう!

<おすすめ参考サイト>

テキスト関係の小技

2行目以降を文字下げする

テキストリストで、2行目以降をリストマーク分空けたい時に。

bayashi20150710_04

HTML

CSS

チョコっと解説

padding-leftでリスト全体を右に1文字分寄せてからtext-indentで1行目のみを1文字分左に飛び出させることで、2行目以降を文字下げしています。

改行をCSSで無効にする

<br ⁄>はCSSで消せます。
IE7というよりも、レスポンシブデザインやCMSを使ったサイト構築で役立つことの方が多いかも知れません。

個人的な感想ですが、これを初めて知った時は結構な衝撃でした。

CSS

発想を柔軟にするために

今回ご紹介したもの以外にも、CSSの小技は山ほどあります。
しかし、まずはCSSの基礎をしっかりと身につけましょう。(小技を紹介しておいてなんですが……。)

仕様書を読むのもオススメです。
きっと知らなかった意外なことに気付けると思います。

知識が深まれば、その分手段が増え、柔軟な発想をしやすくなるハズです!
がんばりましょう!!