tableのcellspacing=”0″が必要なことはかなり多い。
しかし、これと同じことをしてくれるCSSのプロパティ、border-spacing:0 は、IE7以下では対応していない。そこで登場するのがborder-collapse:collapse なのだけれど、これにもまた問題がある。そんなこんなを解決するTips。やりたいのはcellspacing=”0″を入れたくないってだけですが。

という一文。一文というより最後の一言がグッときましたね。
そうそう、HTML 側に余計なもの書き込みたくないんですよね。それだけ。

できるだけキレイな HTML、CSS を組みたいものです。
このブログはいろいろ汚いとこがあるので、ちょっとずつ直していきます…。

ということで、Takazudo さんの書いていた CSS を自分向けに改変したものをメモ。

table{
 width:auto;
 border-spacing:0;
 border-collapse:separate;
 /border-collapse:collapse; /* ie6,7 */
 border-right:1px solid #333333;
 border-bottom:1px solid #333333;
 table-layout:fixed;
 word-break:break-all;
 word-wrap:break-word;
}
th, td{
 border-top:1px solid #333333;
 border-left:1px solid #333333;
 padding:5px;
}

Takazudo さんのサンプルに追加して、「table-layout:fixed;」、「word-break:break-all;」、「word-wrap:break-word;」を指定しています（プロパティの順番も変更）。

追加したもの

table-layout:fixed;

この指定を入れておくと、セルの横幅が以下のようになります。

• 各セルの幅を指定していればそのサイズに
• 指定していない場合はセルの数で均等に分割

table-layout はデフォルトが auto なので、自動で幅を調整してくれる方がいいなら、この指定を外すか該当する箇所で上書きすればいいと思います。

また、この指定をしておくと最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあるそうです（参考: table-layout－スタイ ルシートリファレンス）。

回線速度自体が結構早くなっているので、そこまで気にする必要はないかもしれないですが。

word-break:break-all; と word-wrap:break-word;

これらの指定は、セル幅を超える長い単語や URL を強制的に折り返させるために入れています。
日本語をエンコードした URL が表示された場合などに word-wrap:break-word; の指定をしていないとセルを突き破って表示しちゃいます。

指定なし

IE6, IE8, Fx 3.6, Chrome 6.0, Safari 5 で突き破る

word-wrap:break-all; のみ指定

IE6, IE8, Fx 3.6, Chrome 6.0, Safari 5 でオッケー

word-break:break-all; のみ指定

Fx 3.6 で突き破る

両方指定

IE6, IE8, Fx 3.6, Chrome 6.0, Safari 5 でオッケー

ということで、セル内で改行させるという本来の目的は果たせているので、word-wrap:break-word; の指定だけでもいいのですが、その場合には IE だけ改行位置が変わってしまいます。

そもそもなんでこの指定（word-break:break-all;）を入れたのかを覚えていないのですが、word-break:break-all; を加えると、IE と他のモダンブラウザ間で表示が近くなるので外さずに残しています。

原因が分からないので、また時間があるときにでも調べてみようと思います。
原因が分かる方、うまくいかないパターンを発見された方がいらっしゃいましたら、ぜひ教えていただければと思います。

関連投稿

• デフォルトスタイルのリセット
  category: css tags: css+tips.
• Firefoxのキーボードショートカットのチートシート
  category: firefox tags: firefox+tips.
• display:inline-block; を使う
  category: css tags: css+inline-block+tips.

float:left; で横並びにしようとしたとき、各要素の高さが違うと

このようになってしまいます。
カッコ悪いですよね…。というよりデザイン通りになっていません。

display:inline-block; を使うと、

このようになります。素晴らしい！エクセレント！
display:inline-block; には、text-align および vertical-align が指定できるので、今まで面倒だったレイアウトが簡単に実装できるようになります。

と、そう簡単にはいきません

記述もシンプルになるし、変な崩れも起こらないし、完璧だー！なんていうふうに特に何も考えずにコーディングすると、IE6、IE7以外で隙間が生まれてしまいます。

先に出した成功例は、以下に示す解決法を実践したものだったのです…。
何も対応をしなかった場合、IE6、IE7以外ではこのようになってしまいます。

今回基準となるコードは以下。
CSS

ul{
}
li{
	width:100px;
	vertical-align:top;
	display:inline-block;
	/display:inline;
	/zoom: 1;
}

HTML

<ul>
	<li>inline-blockのサンプル1</li>
	<li>inline-blockのサンプル2</li>
	<li>inline-blockのサンプル3</li>
	<li>inline-blockのサンプル4</li>
</ul>

この隙間の原因は改行。
試しに改行を消してみるときれいに隙間が埋まります。

解決法は大きく分けて2つ。
HTMLで直すか、CSSで直すかです。

解決法1: HTML側で直す

解決法1-1:改行を削除

そのままですね。
改行コードが原因なので、改行を削除してしまえば隙間が埋まります。

<ul>
	<li>inline-blockのサンプル1</li><li>inline-blockのサンプル2</li><li>inline-blockのサンプル3</li><li>inline-blockのサンプル4</li>
</ul>

問題は、横並び要素を1行にまとめて書くので、ソースの可読性が低下する可能性が高いこと。

解決法1-2: コメントアウトを使う

よくある解決法ですね。

<ul><!--
	--><li>inline-blockのサンプル1</li><!--
	--><li>inline-blockのサンプル2</li><!--
	--><li>inline-blockのサンプル3</li><!--
	--><li>inline-blockのサンプル4</li><!--
--></ul>

こんなふうに改行部分をコメントアウトすれば、改行コードを隠すことができます。
解決法1-1のように可読性は落ちることはないです。

解決法1-3: 改行部分を変える

こちらもよくある解決法。

<ul
	><li>inline-blockのサンプル1</li
	><li>inline-blockのサンプル2</li
	><li>inline-blockのサンプル3</li
	><li>inline-blockのサンプル4</li
></ul>

このように改行位置を本来の位置からずらすことで、li間で改行をしてないことにする方法です。
こちらも解決法1-1のように可読性は落ちることはないです。

解決法2: CSS側で直す

解決法2-1: letter-spacing で調整

inline-blockを指定している要素とその親要素に以下の指定を加えるだけ。

ul{
	letter-spacing:-.40em;
}
li{
	letter-spacing:normal;
}

解決法2-2: font-size で調整

ul{
	font-size:0;
}
li{
	font-size:16px;
	width:100px;
	vertical-align:top;
	display:inline-block;
	/display:inline;
	/zoom: 1;
}

font-sizeをピクセルで指定しているので、IEで文字の拡大縮小ができません。
IE7以降はページのズーム機能がついているので問題ないとは思いますが…。

最終結果

個人的には解決法2-1のサンプルが一番使いやすいなと思っています。
基準にしたCSSと組み合わせると、以下のようになります。

ul{
	letter-spacing:-.40em;
}
li{
	letter-spacing:normal;
	width:100px;
	vertical-align:top;
	display:inline-block;
	/display:inline;
	/zoom: 1;
}

記述はシンプルだし、横幅を変更するだけで流用できるので汎用性が高いと思います。
解決法2-2でもいいのですが、修正箇所が解決法2-1に比べて1箇所増えるので次点としました。
IEでの文字の拡大縮小がちょっと気になりますしね。

CSSで修正したほうがスマートな方法かと思いますが、CSSをいじれない場合もあるかもしれません。
そういった場合には、HTMLをちゃちゃっといじっちゃってもオッケーだと思います。そこら辺は臨機応変に。

Firefox 2 について

inline-block 系の記事では、Firefox 2 用に display:-moz-inline-box; という指定がされているものが多いですが、Firefox 2 は、2008 年末で開発とサポートを終了しており、もう対象ブラウザからはずしちゃってもいいかなーと思っています。
アップグレードできないなら他のブラウザ使ってねーとMozilla も言ってますし（参考ページ： 次世代ブラウザ Firefox – 旧バージョンのダウンロード の下方）。

というわけで、Firefox 2 用の指定は削除してあります。
そのため、Firefox 2 で見ると崩れているかと思います（display:inline-block; に対応していないため）。

もしFirefox 2 にも対応させたい場合は、ヨモツネットさんが公開してくれているスライドを参考にしてください。
参考ページ： 書籍などに紹介されていない display : inline-block について （ヨモツネット）

関連投稿

• cssでグラフを描く
  category: css tags: css.
• デフォルトスタイルのリセット
  category: css tags: css+tips.
• table に指定しておきたい CSS メモ
  category: css tags: css+tips.

このグラフは、縦軸と横軸部分を<ul>、グラフ本体を<dl>で描いています。
縦軸・横軸は単純に<li>を並べているだけなので割愛。

グラフ本体のhtmlは以下のように指定していく。

<dl>
<dt>Mon</dt>
<dd class="p36"><span><b>36</b></span></dd>
<dd class="sub p30"><span><b>30</b></span></dd>
</dl>

.subがついているほうが前面のグラフになり、.p30や.p36で高さを指定しています。
cssの記述（一部）は以下の通り。

dl#csschart{
background:url(../images/bg_chart.gif) no-repeat 0 0;
width:454px;
height:360px;
padding-left:11px;
}
dl#csschart dt{
display:none;
}
dl#csschart dd{
position:relative;
float:left;
display:inline;
width:33px;
height:330px;
margin-top:22px;
}
dl#csschart span{
position:absolute;
display:block;
width:33px;
bottom:0;
left:0;
z-index:1;
color:#555;
text-decoration:none;
}
dl#csschart span b{
display:block;
font-weight:bold;
font-style:normal;
float:left;
line-height:200%;
color:#fff;
position:absolute;
top:5px;
left:3px;
text-align:center;
width:23px;
}
/* Styling the Bars. */
dl#csschart span{
height:50%;
background:url(../images/bar.png) repeat-y;
}
dl#csschart .sub{
margin-left:-33px;
}
dl#csschart .sub span{
background:url(../images/subBar.png) repeat-y;
}

dl#csschart .p0 span{height:0%}
dl#csschart .p1 span{height:1%}
dl#csschart .p2 span{height:2%}
dl#csschart .p3 span{height:3%}
dl#csschart .p4 span{height:4%}
dl#csschart .p5 span{height:5%}

/*This continues until 100%*/

曜日ごとに<dd>を並べ、左揃えにしています。

これだけで充分きれいなんですが、文字のサイズを大きくすると後ろにあるバーの数字が読めなくなったり、縦横軸の数字が重なってしまったりします。
heightやwidthをemで指定して、文字の拡大縮小に対応できるようにしたらいいのかな。

あと、何よりも致命的なのは、前に来ているバーのほうが大きい数字の場合、後ろにいるバーは見えなくなっちゃうんですよねｗ

全く同じ見た目でやろうとすると使えない方法になっちゃいますが、半分だけ重ねて、数字はちょっと離れたところに表示、のようにすれば「前年度との比較」みたいな棒グラフが簡単に描けちゃいますね。

作者のページで画像入りのファイルをダウンロードできるので、気になった方はどうぞ。

関連投稿

• 背景画像付きのボックス
  category: css tags: css.
• リストマーカーの表示位置を揃える
  category: css tags: css.
• display:inline-block; を使う
  category: css tags: css+inline-block+tips.

CSS Spriteのメリットは複数の画像を1枚にまとめて作ることでHTTPリクエストを減らせたり、上手く組み合わせれば画像のトータルサイズを減らせたりできること。
個人的には管理する画像の数が減らせるのがうれしかったり（あんまり数が多くなりすぎると画像名見ただけじゃ何の画像か分からなくなってしまうんです…）。

ロールオーバー画像に使っていると、印刷時にFirefoxでおかしなことになるので、そういうところにはなかなか使いにくいです。
印刷用のCSSでメニューを表示させなければ問題ないですけどね。

前置きはこんなもんで本題に。

CSS Spriteって、「アイコンとかロゴを1枚にまとめとけー！」みたいなイメージだったけど、[CSS]一枚の画像で、四隅が角丸のパネルを実装するスタイルシートという記事で紹介されていた使い方は、便利だなぁと思った。

具体的には、

このボックスを

をこの画像で作る。
作者のデモを見る

見れば分かるけど、構造はこのようになっている。

div, hx, p{
background-image:url(img.png);
}
div{background-position:left bottom;
}
hx{
background-position:left top;
}
p{
background-position:right top;
background-repeat:repeat-y;
}

今までこういうタイプのボックス作るときには、上・真ん中・下の3つの画像に分けて書き出してました。
これが1枚の画像（box.gifみたいに）で作れれば、画像管理がちょっとだけ楽になるかも。

この使い方一般的だったらすいません…
こんな賢い使い方あるなんて知りませんでした(-_-;)

このサンプルだと文字数とか文字サイズによって見出しが崩れますが、見出しの背景に色を付けないなど工夫をすればもっと使いやすいものを作れそうですね。
もっとも、分かりやすくするために色を付けてるだけかもしれませんが。

全パーツを1枚にまとめるとパーツの追加・変更などがあったときに編集するのが面倒なので、1パーツ1画像みたいに使ったほうがよりスマートかなと思います。

関連投稿

• cssでグラフを描く
  category: css tags: css.
• リストマーカーの表示位置を揃える
  category: css tags: css.
• table に指定しておきたい CSS メモ
  category: css tags: css+tips.

「原因はhaslayoutの値がfalseになっているから」
隣にいた同僚にそう教えてもらってなんとかズーム機能に対応はできましたが、今後同様の事例が出た時に困らないようにメモ。

でhasLayoutって何？

hasLayout は IE 独自のプロパティで、各要素がレイアウト情報を持っているかどうかを示すもののようです。
上に書いた背景画像の拡大・縮小時のバグはhasLayoutプロパティの値がfalseになっている場合に起こるそうです。

その他のバグの情報はMicrosoftのInternet Explorer 7 におけるズーム機能の問題で紹介されてます。
ここで回避策として ZOOM 機能を無効化するという方法が書かれていますが、本末転倒というか全く意味ないですｗ

とにかく、haslayoutの値がfalseになってるからバグるなら、値ををtrueにすればバグらないはず。
cssで下の表に示すプロパティを指定すればhaslayoutに伴うバグを回避できます（参考：MSDN hasLayout Property (A, ABBR, ACRONYM, …)）。

これを使って一番てっとり早くバグを解消するには、

*{
zoom:1;
}

を指定すること。

これを指定するだけで、拡大・縮小時のバグが解消されてハッピー！となれば良かったんですが、そうはいかないのがさすがIE…。

*{zoom:1;}の落とし穴

全称セレクタを使ってhaslayoutの値をtrueにしたら、今まで発生しなかったバグが発生してしまいました…。

記事を書いていたら、olのリスト番号が表示されない！
zoom:1を指定するまではちゃんと表示されていたので、原因は間違いなくこれ。

それで調べてみたら、hasLayoutプロパティがtrueで発生するバグ – Webtech Walkerで解説されていました。
サンプルページもあり、非常にわかりやすかったです。

前の記事で全称セレクタについて書きましたが、全称セレクタを使うってことは二次災害的なデメリットが生まれるし、良くないんだなと改めて痛感しました。

そこで全称セレクタではなく、バグる要素にだけzoom:1を指定することでひとまず解決しました。

IE８からhaslayoutはなくなるらしいですが、ブラウザの移行がすんなり進むとも考えにくいので、これからもしばらくはhaslayoutに頭を悩ませることになりそうですね。

※2009年10月20日17時42分　追加

せっかくなので、haslayoutをfalseにする指定も。
こちらは、毎度勉強させてもらってるヨモツネットさんから。
hasLayout を false にするには | ヨモツネット

関連投稿

関連投稿はまだありません。