Webデザインレシピ

Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。

スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてないよーとか、こうした方がいいよーというものがあったら、教えていただけるとうれしいです！

初心者の頃ハマったCSS 目次

1. フォントサイズの指定についてのこと
2. 行間の指定：line-height の小技
3. 画像と回り込みしたテキストの関係
4. フロートの解除についてあれこれ

1. tableのセルの中、改行についてのあれこれ
2. IEのhasLayoutで起こる不具合
3. 何とかして欲しい、IE7の拡大表示機能での表示の崩れ
4. そんなIEのCSSをちょっと拡張するライブラリ

1. フォントサイズの指定についてのこと

フォントサイズの指定って、みなさんどうしてますか？フォントのサイズの指定方法には、たくさんの種類がありますよね。ひとつひとつ見ていくと、全部で 9個かな？私は今まで相対指定、「%」を使って指定していました。でもこれからは、「px」での指定でいいのかなと思っています。実際にもう全部「px」で指定している Webサイトもちらほら見かけますし …。まずはフォントのサイズと行間の指定方法、今気をつけていることをまとめてみました。

また、フォントサイズを「%」で指定しているがためのバグも後半登場します。

1.1. 相対指定と絶対指定

まず、フォントのサイズの指定方法には、相対単位で指定する方法と、絶対単位で指定する方法がありますよね。相対指定と絶対指定って何？っていう人のために少しおさらいです。

相対指定の単位

相対指定とは，基準となるサイズからどれくらいの比率で表示するかを指定する方法です。単位には以下のようなものがあります。

%：パーセント

これはポピュラーですよね。私もこれで指定しています。基準となるサイズからどれくらいのパーセントで表示するかを指定します。font-size : 120% とか。

em：エム

これも % と同じように基準となるサイズから比べてどれくらいで表示するかを指定します。1em で 100% と同じです。1em がひと文字分ですね。font-size : 1.5em など。

ex：エックスハイト

これは em と似てるんですけど、ひと文字分ではなくて、小文字の「x」のサイズを基準にします。全然使ってないです。

px：ピクセル

これはおなじみですね！何ピクセルで表示するか固定しちゃいます。固定なので絶対指定だと思うんですけど、違うみたいです。ピクセルは 72dpi や 96dpi など、モニタの解像度によって変わるので相対指定ってことらしいです。基準が 1px ってことですね。

絶対指定の単位

相対指定に対して、絶対指定はサイズそのものを、実寸で指定できます！

mm：ミリメートル

ものの大きさを実寸で示したいときなどに使います。実際のサイズを表示するときには便利！

cm：センチメートル

これも同じですねミリメートルの10倍です。

in：インチ

1インチ ＝ 2.54センチメートルです。一回も使ったことありません …。

pc：パイカ

1パイカ ＝ 12ポイントです。全然使ったことありません…。

こんなにたくさんあったんですねー！でも馴染み深いのは、px、%、em くらいでしょうか。私は前々からフォントは px 以外の相対単位、とくに「%」で指定しましょうって言われてきました。その理由は、ブラウザで見たときにフォントが小さいなーって感じた人が、大きさを変えられるようにするため。拡大とか、縮小とかができるようにとのことでした。

1.2. そろそろ px で指定してもいいんじゃないかなぁ …

px 以外の相対単位を使ってフォントサイズを指定しなさいというのは、px を使った場合、拡大や縮小をしても文字の大きさを変えられない（IE6）からでした。これはキーボードのショートカットキー command（Ctrl） + +（プラス）キー、command + -（マイナス）キーでもできますよね。

でも IE7 以降、最近のブラウザでは、拡大表示がフォントだけ大きくするんじゃなくて、ページそのものをズームしてくれます。ですから IE6 をターゲットにしないなら、px で指定しても別に問題ないんじゃないかなとも思ったりします。

Google Chrome の拡大機能

em や % でフォントサイズを指定していると、正確なフォントのサイズを計算したり、いろいろと面倒くさいこともありますよね。また、% や em だと、IE7 の拡大表示機能でレイアウトが変になることもあります。これは後で IE7 のバグをまとめてあるので、そっちで説明しますね！

% 指定でもきっちり px で表示できる Yahoo! UI Library

フォントのサイズをキッチリ決めたいデザインで、「%」を使う場合、YUI2: Fonts （Yahoo! UI Library Fonts）なんてものを使うこともできます。YUI font は色んなブラウザでフォントサイズを一定に保つCSSライブラリ。私も数回使ったことがあります。使ってみたい人は下記リンクから試してみてくださいね！

• YUI2: Fonts
• YUI 3: CSS Fonts

フォントサイズの指定にはいろいろ制約もありましたけど、そろそろフォントサイズの指定は px でもいいんじゃないかなぁ … みなさんはどうしてますか？

2. 行間の指定：line-height の小技

フォントサイズの指定方法と同じような理由で、行間を指定する line-height も、相対的な指定をしてきました。そしてその単位にも気をつけなくてはなりませんでした。line-height の単位もいろいろ使うことができますよね。

フォントの大きさに対して 1.5em とか 150% とか。また直接 30px などで指定することもできます。でも、相対単位で指定するとちょっと表示が変になる場合があるので注意が必要です。（リセットCSSや、セッティングの書き方によってはこういう風になりません。あくまでこうなっちゃった場合の対処法です。）

ブログのタグクラウドなどでよく見かける、同じ行にフォントサイズの違うフォントがある場合では line-height の指定に注意が必要です。em や % で行間を指定しているとこんな風に文字同士がぶつかってしまいます。

文字同士が重なっている状態

ちょっとこれがイヤだなーという時は、一体どうすればいいでしょう。line-height のサイズ指定の単位を外しちゃいます！1.5em なら em を外して、1.5 とだけ指定します。するとどんなサイズのフォントにも、1.5倍の行間が指定されて、文字同士が重ならなくなります。

全部の文字に line-height が適応された状態

CSS

/* emで指定 */
p { line-height : 1.3em; }

/* 単位を外しちゃう！ */
p { line-height :1.3; } 

line-height のサイズ指定の単位を外しちゃいました。

3. 画像と回り込みしたテキストの関係

画像を配置して、テキストを回り込ませることってありますよね。そんなとき注意したいのが、画像のサイズとフォントサイズ、行間の関係です。

テキストを画像を取り囲むようにレイアウトした時、テキストと画像のサイズ、高さをを合わせた方がスッキリしていい感じです。左の画像とこのテキストがそんな関係になっています。文章だと説明しずらいので、下の画像で説明した方が分かりやすいかもしれません！

3.1. 画像の下端とテキストのベースラインを揃えたい

下の例では、写真の下端と、回り込んでるテキストのベースラインが揃ってなくて、少し雑な感じがしませんか？画像の高さを調整するだけで、簡単にテキストのベースラインと揃えることができます。

画像の下端とテキストのベースラインが合ってない場合

画像の下端とテキストのベースラインをキレイに揃えるためには、まずフォントのサイズと行間のサイズを基本にします。それを元にして画像のサイズ（高さ）を決めていきましょう。フォントと行間のサイズは、CSS の font-size、line-height で確認すればわかりますよね。vertical-align を baseline 以外にしてる時には、ちょっとずれてしまうので注意が必要です。

1行の高さは簡単に出ますよね。まず何行分の高さの画像にするか決まったら、1行分の高さ × 行数。そして最後の 1行のベースラインから下の分が余分です。

例えばフォントサイズが 14px で line-height が 1.5 だった場合、8行分の高さは、14px × 1.5 = 21。1行の高さは 21pxです。画像の高さはその 8行分なので、21px × 8 = 168px です。

でもこのままだとベースラインに合わないので、ここからフォントサイズの約半分を引きます（厳密にいうとベースラインより下なので 1/4なんですけど…）。168px – 7px = 161px になりました！これはあくまでも目安なので、あとは目で見て調整してくださいね。

画像の下端とテキストのベースラインを揃えた場合

• PHOTO

  Love and Bitter

これで画像の下端とテキストのベースラインがキレイに揃ってスッキリしました！

3.2. 画像の上端とテキストの上端を揃えたい

今度はさっきと逆のパターンです。画像を回り込むテキストが、見出しのように大きなフォントサイズ、行間だと、少し凹んで見えてしまいます。

普段はあんまり気にしないけど、グリッドでびしっとラインを意識させたい場合はちょっと揃えたくもなります。

この場合、画像を引き下げる方法と、テキストを引き上げる方法とありますが、画像を引き下げると他の要素とのレイアウト、グリッドが崩れるのでテキストの方を引き上げることにしました。例では h2 見出しに 1.5 の line-height を指定してあるので、テキストの上の部分の行間 0.25em をネガティブマージンで指定してあげれば OK です。

CSS

h2{
  font-size: 180%;
  line-height: 1.5;
  margin-top: -.25em;
}

たったこれだけなので大きなフォントを使うときは習慣にしたいですね。

• PHOTO

  bitzn pieces

4. フロートの解除についてあれこれ

フロートの回り込みの解除ってみなさんどうしてますか？フロートの解除の方法は、私が知っているのは 4種類ほどありますが、それぞれいいところもあったりダメなところもあったり。初心者の頃にはなんでこうなるの？っていうことが多いフロートまわり。それぞれのやり方を振り返ってみます。

4.1. <br clear=”all”>タグ

昔はよく使ってました。<br> タグでフロートをクリアしちゃう方法です。でもスタイルはあくまでスタイルシートで！っていうのが基本なので、XHTML に直接書くこのタグはもう使ってません。

4.2. 後続の要素に clear プロパティ

一番簡単なのがこれですね。後続の要素に clear:both、clear:left などを指定する方法です。でも clear を指定している要素に margin-top を指定した場合、マージンが効かない場合があるので注意が必要です。なんでそんなことになるのかは、下の例を見てみてください。

• PHOTO

  bitzn pieces

CSS

/* フロートを含むボックス */
.box1{
  padding:20px;
}

/* フロートを解除するボックス */
.box2{
  clear:both;
  margin-top:20px;
}

後続の要素には clear : both を指定して、同時に margin-top: 20px を指定してあります。本当は画像の下端から 20px の余白をとりたいのですが、画像とボックスがピッタリくっついている状態です。

よく見ると、上のボックスが、画像をきちんと内包していません。これはバグではなくて CSS の仕様。でもこれはちょっと困りますね。CSS の仕様では、フロートされた要素の高さは、親要素では含まないという決まりがあります。なのでフロートされた画像を包んでいるボックスの高さは、テキストの分で終わっています。

ボックスの下端から、次の要素との間が 20px 以上離れているので、マージンが一切効いてない様に見えちゃっている状態です。ちなみに上のボックスには padding: 20px; も指定してありますが、画像に対しては下側の padding は効いてません。

4.3. 空のインライン要素 brタグに clear:both

上みたいな状態を回避するのに、インライン要素で空要素である <br> タグを使ったりします。<br>タグにクラスを指定して、CSS で clear:both を指定します。そうすれば後続の要素でのマージントップは有効になりますよね。

CSS

/* フロートを含むボックス */
.box1{
  padding:20px;
}

/* br タグでクリア */
br.clearboth { clear:both; }

/* 後続のボックス */
.box2{
  margin-top:20px;
}

<br> タグは高さも幅も持たないので、見た目的には全然影響ありません。レイアウトによってはブロックレベル要素が並んでる中に、ポツンとインライン要素が存在することになります。HTML 4.1 の時はダメでしたけど、XHTML 1.0 では別に問題なかったような …。

でもブロックレベル要素同士の間にインライン要素があるのが、何となくイヤだなって人にはおすすめできません。この方法でも上のボックスの padding-bottom は無視されます。

4.4. 親要素に clearfix を使う方法

clearfix はちょっと使い古された感がありますが、フロートを内包する親要素にこれを指定すると、キチンとフロートされてる子要素を内包してくれるという魔法のCSSですね！コードのバリエーションはいくつかあるようですが、こんな感じです。

CSS

/* clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
 /* IE6 */
* html .clearfix { zoom: 1;}
 /* IE7 */
*:first-child+html .clearfix { zoom: 1;}

HTML

<div class="clearfix">
  <p>
  <!-- この画像はフロート -->
  <img src="images/image01.jpg" alt="" />
  ここにテキスト。
  </p>
</div>

clearfix を使えば、今までみたいな悩みは全部解消されます！さすが魔法の CSS ですね！

after 疑似クラスで、高さ「0」のブロックレベル化した要素を作って、visibility プロパティで非表示にしてしまおうというもの。もちろん clear:both を指定しています。親要素に class=”clearfix” とするだけで OK です。この場合はさっきの clear ブロパティだけの時と違って、親要素の padding-bottom もちゃんと反映されるので、いちばん思った通りのデザインになるのではないかなーと思います。

4.5. 親要素に overflow:hidden を指定する方法

最近ではこれもポピュラーなのかな？clearfix の代わりに親要素に overflow:hidden を指定します。IE 用に zoom:1 を指定しておくと安心です。見た目的には clearfix を使ったときと同じ状態になります。

CSS

.box{
  padding:20px;
  overflow:hidden;
  zoom:1;
}

たったこれだけですが、clearfix を使った時と同じようになります。clearfix はちゃんと clear プロパティ使ってるけど、この場合はどうなってるんでしょう … 親要素でキレイにラッピングするけど、フロート自体は解除されてないのかな？でもこれがいちばん簡単ですね！

5. tableのセルの中、改行についてのあれこれ

テーブルのセルの中、結構悩んだ経験ありませんか？表のラベルにあたる th 要素の部分は改行したくないのに改行されちゃったり、長い URL などを入れると、テーブル自体の幅が広がってしまったり…。th や td に、width を必死になって指定したこともありました …。

5.1. テーブルセルの中で改行させない

初心者のころ、テーブルのセルの中で改行されるのがいやで、th に width を広めにとって指定したりしていました。でももっと簡単に改行させない方法があります。white-space プロパティを使って、改行を禁止しちゃいましょう。

住所	静岡県静岡市葵区XX-XXXX
電話番号	XXX-XX-XXXX
名前	高橋 のり

住所	静岡県静岡市葵区XX-XXXX
電話番号	XXX-XX-XXXX
名前	高橋 のり

CSS

th { white-space:nowrap; }

たった一行です ;D

5.2. テーブルセルの中で長いURLなどが改行されずに困る

今度はさっきとは逆のパターンです。URL など、スペースを含まない長い英語を入れると、改行されないでセルが広がってしまう場合があります。そんなときは word-break プロパティを使えばちゃんと改行されます。word-break プロパティは、もともと IE だけの独自拡張でしたが、CSS3 では標準仕様になりました。

CSS

th { word-break:break-all; }

これもたった一行です ;D

6. IE の hasLayout で起こる不具合

IE6、IE7 で何が原因がよくわからないけど、あるはずの背景が表示されなかったり、マージンがうまく反映されなかったり、とにかくレイアウトがおかしくなるバグがよくあります。このブログ、Webデザインレシピのスタイルシートを書いたときにも、数カ所でそんなことがありました。

その不具合の原因は大体が、IE6、IE7 の hasLayout という仕様によるもの。ちゃんとスタイルシートを書いているのに、IE6、7 でおかしいぞっていうときには、この hasLayout を疑ってみると解決が早いかもしれませんね。

6.1. hasLayout って何？

そもそも hasLayout っていうのは何でしょう？hasLayout は名前の通り、対象となる要素がレイアウトに関する情報、例えば幅とか高さとかを持っているかどうかっていうこと（でいいかしら？）。

IE6、IE7はこの hasLayout の値が true なのか、false なのかで挙動が違ってしまいます（IE8 からは、hasLayout は実装されてないはず）。大体変な表示になるのは、この hasLayout が false になっちゃてる場合です。

例えば div を作ったとき、わざわざ幅を指定しなくても、親要素一杯に広がりますよね。普通は width などを指定しなくても、IE6、IE7でも hasLayout の値は true になって問題ないはずです。でもときどき何かの拍子に hasLayout の値が false になって思わぬ表示になって慌ててしまいます。

私の経験からは、フロートを解除するために clear:both を指定してあるブロックレベル要素や、直接 clear:both を指定していなくても、フロートの次のブロックレベル要素あたりでよく起きるような気がします。

このブログでは、コメント欄で各コメントを表示しているところの点線のボーダーが、IE7 では表示されなかったり、フッターに指定してある背景画像がまったく表示されなかったり …。でも、なぜかスクロールすると表示される … など、変な表示になりました。

6.2. hasLayout の不具合を解決するには？

上記のような問題をを解決するためには、hasLayout の値を true にしてあげればいいだ
けです。hasLayout の値が true に切り替わるプロパティには、以下のようなものがあります。

displayプロパティに inline-block を指定する。

これは通常サイズ指定できないインライン要素を、サイズを指定できるインライン要素にするというもの。

height や width を指定する。

width:100% とかでもOKです。

zoom プロパティを指定する。

zoom:1 にすれば等倍ズームなので、表示サイズの大きさは変わりません。

他にもあるようですが、見た目的な表示に変化があってもまずいので、私はこの 3つしか覚えてません。よくやるのが width:100% です。zoom は IE だけの独自実装プロパティ。zoom を指定する場合は、等倍を意味する 1を指定してあげれば OK です。zoom:1。よく見かけますよね。

IE6、IE7 で、何でだか分からないけど、表示がおかしいっていうときはこの hasLayout を疑ってみるといいかもです！

6.3. おまけ：フッターの下になぜか隙間が …

過去に何度か遭遇したことがあるんですけど、IE7 だけフッターの下になぜか隙間ができちゃうことがありました。フッターの下に Javascript のコードを埋め込んでるときとかに、こうなることがたまにあるよーな …。その時は hasLayout がらみかどうか確認しなかったんですが、応急処置的に html と body に height: 100% を入れて対応しました。あれも hasLayout がらみだったかもしれません …

CSS

html, body { height:100%; }

ちなみに隙間ではないんですけど、 WordPress で WordPress.com Stats というアクセス解析のプラグインを使っていると、フッターの一番したに顔文字が出ます。:-) ← こんな感じの。確か画像だったような …。これがちょっとイヤだなーって人は、下のコードで消しちゃうましょう。

CSS

#wpstats { display:none }

7. 何とかして欲しい、IE7の拡大表示機能での表示の崩れ

フォントの相対指定のところでちょっと触れましたけど、文字が小さいなーって思うときに使う、ブラウザの表示拡大機能。フォントのサイズを相対指定していて、IE7 でブラウザの表示を拡大すると、表示がおかしくなる場合があります。このブログの場合は 2カ所ほどありました。

Tag Cloud – IE7

フッターが消えた？ – IE7

7.1. 親要素に letter-spacing:0

これを解決するのには、親要素に letter-spacing プロパティを指定してあげると直ることがほとんどです。letter-spacing は文字と文字の間を指定するプロパティですが、これに 0 をつけて、letter-spacing: 0 とするのが有名ですね。ちょっと気持ちわるいけど …。おまじないとして、ユニバーサルセレクタを使って *{ letter-spacing: 0 }としてる人も見かけますね！（私もです …）

7.2. 親要素に position:relative など

それでも解決しない場合もあります …。そんな時は親要素に position: relative を指定すると直ったりします。このブログでも IE7 で拡大したときに、フッターの上部にありえないくらいの余白ができてしまいましたが、body に position: relative を指定して OK でした。他の要素との兼ね合いで position:relative を指定できないときには width: auto を指定したりすると OK の場合もありました。

• Via – 0から目指すWebマスター

  IE7の拡大機能、仕様？バグ？

8. そんな IE の CSS をちょっと拡張するライブラリ

とまぁいろいろ CSS がらみの不具合には、IE が絡むことがよくあります。そんな IE ですが、Javascript ライブラリを使って、機能を拡張させることもできるので、どうしても CSS だけでは無理な場合には、使ってみるのもいいかもしれませんね！

8.1. IE7.js、IE8.js、IE9.js

IE7.js、IE8.js、IE9.js という、名前そのままの Javascript ライブラリが Google code で公開されています。ダウンロードして使ってもいいし、そのまま Google code から読み込んでも OK です。リンク先でダウンロード、またはコードを入手してください。

IE7.js

IE5.5、IE6 を、IE7 と同じようにするスクリプト

IE8.js

IE5.5、IE6、IE7をIE8と同じようにするスクリプト。最近ではこっちの方がいいですね。

IE9.js

これはまだ一度も使ったことがないですけど、IE5.5 、IE6、IE7、IE8 を IE9 と同じようにするらしいです。

8.2. CSS3Pie

IE6、IE7、IE8 でも、CSS3 のボックス系のエフェクト、丸角、グラデーション、シャドウなどを使えるようにする JS ライブラリです。過去記事：IE でも CSS3 のプロパティ、エフェクトを表現できるようにするリソース＆リファレンスでも紹介したことがあります。

8.3. csshover3

IE6 では、<a> タグ以外に :hover疑似クラスが使えませんでした。また、IE7 では :focus疑似クラスが使えません。それを解決してくれる Js ライプラリが csshover です。現在では Ver.3 にまで拡張されています。Ver.1 のころからお世話になってます！

使い方は簡単。ダウンロードしたら、CSS の body 要素のスタイルに、IE だけの独自拡張 behavior プロパティを使って読み込むだけで OK です。

CSS

body {
   behavior:url("csshover.htc");
}

8.4. DD_belatedPNG

IE6 でも透過 PNG を使えるようにする Javascript ライブラリです。私もこれには大変お世話になりました。

ダウンロードしたら、HTML の <head> 内に以下を記述。

HTML

<!--[if IE 6]>
     <script src="js/DD_belatedPNG.js"></script>
     <script type="text/javascript">DD_belatedPNG.fix('.dd-belated-png');</script>
<![endif]-->

こうすれば、class="dd-belated-png" とした要素の透過 PNG が、IE でもキレイに透過されます！

9. 最後に …

初心者のころは、よく上記のようなことで悩んだものでした …。とくにフロート関連、IE の hasLayout など、半日とか丸一日とかはまったこともありました X( これからブラウザがどんどん進化していって、HTML5 や、CSS3 になっていくと思うけど、その度にまたハマることもあるのかなぁって …。

また IE7 のバグっぽいのについてや、CSS の tips は、過去記事でも少し触れてますのでよかったら読んでみてください！

• 過去記事

  この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ

また、こんな風にしたらいいよーとか、それはダメな書き方だなどがあったら、教えていただけるとうれしいです！