シンプル系スキンの表（table）の自動装飾機能について

ファンブログ表（table）の豆知識投稿日：2009年08月29日 18:30

ファンブログ　カスタマイズシンプル系スキン限定

最近の表（table）は、ひと昔前のホームページでよく見られました陰影がつくものでなく、Excel で作成した表のような細い実線で表示させるのが主流です。しかし、このような凝ったものを作ろうと思うとタグに多くの装飾を書いてしまうことになりますので、HTML をすっきりさせるために、ほとんどの Web サイトでは、表（table）の装飾は CSS で指定されています。

ファンブログ側からは何も説明がないのですが、シンプル系スキンは、記事（content）内の表（table）の装飾は CSS で、1px の黒い実線が引かれるように指定されています。
従いまして、線（ボーダー）の指定をしない透明の表（table）を記述すれば、1px の黒い実線が引かれた表（table）が作成できるようになっています。

シンプル系スキンには、スキン全体に table{ border-collapse: collapse;border-spacing: 0; } という、隣接するセルの罫線（border）を重ねて表示する記述がされていまして、CSS には以下のような、table の装飾の記述がされています。

#content table {
	border-top:1px solid #333;
	border-right:1px solid #333;
}
#content table td {
	border-bottom:1px solid #333;
	border-left:1px solid #333;
	padding: 4px;
}

言葉の説明ではつかみにくいお話になりますので、まずは通常の HTML の記述と、CSS で装飾を指定した場合での記述内容の違いを見てみましょう。

1行1列目　(´・ω・`) 1-1	1行2列目　(´・ω・`) 1-2	1行3列目　(´・ω・`) 1-3
2行1列目　(´・ω・`) 2-1	2行2列目　(´・ω・`) 2-2	2行3列目　(´・ω・`) 2-3

上記の表を作成する通常の HTML の記述内容

<table style="border-collapse: collapse; border-spacing: 0; 
border-top:1px solid #333; border-right:1px solid #333;">
<tr>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
1行1列目　(´・ω・`) 1-1
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
1行2列目　(´・ω・`) 1-2
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
1行3列目　(´・ω・`) 1-3
</td>
</tr>
<tr>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
2行1列目　(´・ω・`) 2-1
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
2行2列目　(´・ω・`) 2-2
</td>
<td style="border-bottom:1px solid #333; border-left:1px solid #333; padding: 4px;">
2行3列目　(´・ω・`) 2-3
</td>
</tr>
</table>

シンプル系スキン（CSS で装飾を指定）での HTML の記述内容

<table>
<tr>
<td>
1行1列目　(´・ω・`) 1-1
</td>
<td>
1行2列目　(´・ω・`) 1-2
</td>
<td>
1行3列目　(´・ω・`) 1-3
</td>
</tr>
<tr>
<td>
2行1列目　(´・ω・`) 2-1
</td>
<td>
2行2列目　(´・ω・`) 2-2
</td>
<td>
2行3列目　(´・ω・`) 2-3
</td>
</tr>
</table>

記述内容を見ていただければ、一目瞭然！装飾タグを全部CSSで指定することによって HTML に入力する記述はこんなに減ってシンプルになる訳なんです。

こんなに便利な機能がシンプル系スキンには搭載されているんですが、前回のファンブログのプレビュー画面では表（table）が正しく表示されないんです！でお話したとおり、ファンブログにはプレビュー画面に問題があり、しかも　CSS を指定した内容は、プレビュー画面にまったく反映されないんです。

▼ 上記のタグを入力しますと、プレビュー画面ではこんな感じで表示されてしまいます ▼

1行1列目　(´・ω・`) 1-1	1行2列目　(´・ω・`) 1-2	1行3列目　(´・ω・`) 1-3
2行1列目　(´・ω・`) 2-1	2行2列目　(´・ω・`) 2-2	2行3列目　(´・ω・`) 2-3

もちろん公開すれば正しく表示されるのですが、こうなりますと慣れるという範囲を超えて勘の世界です。
表（table）を多用しない方は、公開して確認しながら何回か修正することでなんとかなると思いますが、
多用していく方はパターンが決まらないとレイアウトがうまくできません。

ファンブログには、自分の記事の幅を知ろう！でお話したとおり、プレビュー画面と本来の記事の幅が違うという問題もありますので、少々奇天烈な方法ではございますが、これらの問題を解決する方法を考案しましたので、次回はその方法のお話をさせていただきます。ご興味のある方は、よろしくお付き合いくださいませ。(´・ω・`)ｂ

※ 2009年06月24日の記事を、加筆、修正して全文書き直しました。　

※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります

≪　前の記事に戻る　｜　次の記事を読む　≫