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.

Dreamweaverにデフォルトでついているショートカットなのに、なぜ今まで探さなかったのかと思います。
知っている人も多いネタかとは思いますが、発見した喜びで思わずポストしちゃいます。
※Mac版はCtrlをCommandに置き換えて読んでください。

親タグを選択

Ctrl+[

選択範囲をたたむ

Ctrl+Shift+C

選択範囲を展開

Ctrl+Shift+E

上記の3つは本当によく使ってます。便利！
コードの折りたたみ機能はよく使っていましたが、毎回マウスに持ち替えて、ボタンをポチっとしてたんですよね。
今考えると、なんて面倒なことをやっていたなと。

似たようなショートカットだと以下のようなものがありますが、覚えられない使わないですね。

子タグを選択

Ctrl+]

選択範囲以外をたたむ

Ctrl+Alt+C

フルタグをたたむ

Ctrl+Shift+J

選択範囲以外のフルタグをたたむ

Ctrl+Alt+J

すべて展開

Ctrl+Alt+E

不要なコードを折りたたんでおけば可読性が高まるし、長くなったページをスクロールする手間も省けます。
各ページ共通のところなどは 1回ちゃんと作っておけば毎回見る必要もないですしね。

Zen Codingのように2倍、3倍早くなる！というわけではありませんが、ちょっとだけ作業が早くなる小ネタでした。

関連投稿

• Firefoxのキーボードショートカットのチートシート
  category: firefox tags: firefox+tips.
• Dreamweaverの作業効率を上げるためのメモ
  category: tool tags: Dreamweaver+tips+tools.

RC版でSimple Tagsが動かないという話が出ていていましたが、現在も対応版プラグインが出てないようなので、サポートフォーラムで対処法を参考に本体のアップデート前に修正をし、無事に動作しました。
フォーラムの内容は2.9 RC版について書かれていますが、正式版でも問題なく動作する修正です。

参考にしたスレッド
WordPress › Support » Simple Tags can’t work with WordPress 2.9 RC

Simple Tags.php は、WordPressのバージョンをチェックして、使用するファイルを切り替えています。
現バージョン（1.6.6）ではチェック対象が2.8までなので、2.9にアップデートすると動かなくってしまうのです。

チェックさえちゃんと通ればプラグインは動くので、修正といってもバージョンチェックの部分をちょっといじるだけです。
いじるのは、simple-tags.phpだけ。

simple-tags.phpの35行目

if ( strpos($wp_version, '2.7') !== false || strpos($wp_version, '2.8') !== false  ) {

を

if ( strpos($wp_version, '2.7') !== false || strpos($wp_version, '2.8') !== false || strpos($wp_version, '2.9') !== false ) {

に変更するだけ。
見て分かるように、分岐の条件に2.9を追加しただけです。

Simple Tagsを使用している＆上記のような対応をしていない方は、ひとまず自分で修正しておいて、作者さんのアップデートを待ちましょう。

関連投稿

• 今入れてるプラグイン
  category: WordPress tags: plugin+WordPress.
• 「続きを読む」をクリックしたときの挙動2
  category: WordPress tags: plugin+WordPress.
• 日付が表示されないのはなんで？
  category: WordPress tags: tips+WordPress+日付.

キーボード上にショートカットの説明を載せているタイプってあんまり見たことないです（あくまで僕は）。
こういう形だと関係が分かりやすいし、視覚に訴えてくるぶん覚えやすいなと思います。

遠目で見ると元素の周期表みたいなのも個人的にはツボ。

画像にも書いてありますが、ショートカットキーの文字色の意味は以下の表の通り。

有名なところだと、F5でページのリロードですかね。
このチートシートだと、F5は黒と茶があって、
黒→ページのリロード
茶→強制リロード
となっています。

Ctrl + Wでタブを閉じるのは知ってましたが、
Shift + Ctrl + Wでブラウザごと閉じられるのは知らなかったです。

そのほかにもいろいろなショートカットキーがあるので、じっくり眺めてたら「お！これは！」というようなショートカットを発見できるかもしれません。
毎日のように使うものなので、ちょっとでも便利に使っていきたいですね。

Firefox Graphical Cheatsheet For Keyboard Shortcuts

リンク先では表形式でもショートカットキーを説明していますが、一度画像タイプのものを見ちゃうと見づらく感じてしまうかもしれませんｗ

関連投稿

• Dreamweaverの便利なショートカット
  category: tool tags: Dreamweaver+tips+tools.
• Firefoxをもうちょっと便利にしてくれるアドオン
  category: firefox tags: addon+firefox.
• アドオン一覧を出力するアドオン
  category: firefox tags: addon+firefox.