PR
テクニカルライター
株式会社メディアリュウム/株式会社WEBサクセス所属 テクニカルライター＆Webライターが、 コンテンツ作成について語るブログです。
2026/08
2026/07
2026/06
2026/07
2026/06
2026/05
2026/04
2026/03
2026/04
2026/03
ＡＩに編集してもら…
ＬＤ菊池さん
どさんこ営業マン「… くりりん630さん
ＰＬＡ＋ＮＥＴＳク… ａｙｕｍｙｕさん
天使の導き 安寿ーあんじゅさん
新川てるえの家族の… 新川てるえさん
おもしろき ことも… kenkenppaさん
プリプレス･センター… プリプリ人さん
駐妻の光と影 pumpkin2005さん
にわとりのあたま にわとりのあたまさん
カラーセラピーＲｏ… rosa_mihoさん
どさんこ営業マン「… くりりん630さん
ＰＬＡ＋ＮＥＴＳク… ａｙｕｍｙｕさん
天使の導き 安寿ーあんじゅさん
新川てるえの家族の… 新川てるえさん
おもしろき ことも… kenkenppaさん
プリプレス･センター… プリプリ人さん
駐妻の光と影 pumpkin2005さん
にわとりのあたま にわとりのあたまさん
カラーセラピーＲｏ… rosa_mihoさん
2004/09/22
テーマ： 裏ワザ・便利ワザ(461)
カテゴリ： カテゴリ未分類
罫線が１ピクセルのtableを作りたい！ と思って
どうも想像したよりも太い気がしませんか？
そう、この指定では２ピクセルの罫線になってしまうのです。
洗練された雰囲気を出したいときなどには
どうしても１ピクセルの罫線にしたいものですが、
これを実現する方法は何通りかあります。
よく見かける（？）のは、透過gifを使う方法です。
以下のようにtdを区切り、周囲のtdに透過gifを挿入します。
└┘└─────┘└┘
┌┐┌─────┐┌┐
│││ │││
│││ │││
│││ │││
│││ │││
└┘└─────┘└┘
┌┐┌─────┐┌┐
└┘└─────┘└┘縦1ピクセル
幅1ピクセル 幅1ピクセル
※↑ブラウザのフォントの設定を等幅フォントにすると、
…この図で伝わるかどうか自信がありませんので、
タグを掲載しておきましょう。
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="1" bgcolor="#006600"><img src="transparent.gif" width="1" height="1"></td>
<td width="1" height="1" bgcolor="#006600"><img src="transparent.gif" width="1" height="1" bgcolor="#006600"></td>
</tr>
<tr>
<td width="1" height="50" bgcolor="#006600"><img src="transparent.gif" width="1" height="50" bgcolor="#006600"></td>
<td bgcolor="#FFFFFF">こんなかんじになります</td>
<td width="1" height="50" bgcolor="#006600"><img src="transparent.gif" width="1" height="50" bgcolor="#006600"></td>
</tr>
<tr>
<td width="1" height="1" bgcolor="#006600"><img src="transparent.gif" width="1" height="1" bgcolor="#006600"></td>
<td width="120" height="1" bgcolor="#006600"><img src="transparent.gif" width="120" height="1"></td>
<td width="1" height="1" bgcolor="#006600"><img src="transparent.gif" width="1" height="1" bgcolor="#006600"></td>
</tr>
</table>
コピペして使ってみてください。
えーと、透過gifはtransparent.gifという名前で
高さ1、幅1ピクセルのものを、
同じディレクトリに保存しておく必要があります。
できましたね？？
…ううむ、確かに実現しましたが、ちょっと面倒ですね。
このタグの欠点は、編集しているうちに
たまに訳わからなくなってしまうことです(^_^;)
もっとかんたんなタグはないの？？？
はい、あります。
もっと単純で、
スタイルシートも使わずに
簡単に1ピクセルの罫線が実現できるタグが…。
ということで、次回に続きます。
最初からそっちを教えてよ、というご指摘は
ご遠慮ください。（笑）
どうも想像したよりも太い気がしませんか？
そう、この指定では２ピクセルの罫線になってしまうのです。
洗練された雰囲気を出したいときなどには
どうしても１ピクセルの罫線にしたいものですが、
これを実現する方法は何通りかあります。
よく見かける（？）のは、透過gifを使う方法です。
以下のようにtdを区切り、周囲のtdに透過gifを挿入します。
└┘└─────┘└┘
┌┐┌─────┐┌┐
│││ │││
│││ │││
│││ │││
│││ │││
└┘└─────┘└┘
┌┐┌─────┐┌┐
└┘└─────┘└┘縦1ピクセル
幅1ピクセル 幅1ピクセル
※↑ブラウザのフォントの設定を等幅フォントにすると、
…この図で伝わるかどうか自信がありませんので、
タグを掲載しておきましょう。
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="1" bgcolor="#006600"><img src="transparent.gif" width="1" height="1"></td>
<td width="1" height="1" bgcolor="#006600"><img src="transparent.gif" width="1" height="1" bgcolor="#006600"></td>
</tr>
<tr>
<td width="1" height="50" bgcolor="#006600"><img src="transparent.gif" width="1" height="50" bgcolor="#006600"></td>
<td bgcolor="#FFFFFF">こんなかんじになります</td>
<td width="1" height="50" bgcolor="#006600"><img src="transparent.gif" width="1" height="50" bgcolor="#006600"></td>
</tr>
<tr>
<td width="1" height="1" bgcolor="#006600"><img src="transparent.gif" width="1" height="1" bgcolor="#006600"></td>
<td width="120" height="1" bgcolor="#006600"><img src="transparent.gif" width="120" height="1"></td>
<td width="1" height="1" bgcolor="#006600"><img src="transparent.gif" width="1" height="1" bgcolor="#006600"></td>
</tr>
</table>
コピペして使ってみてください。
えーと、透過gifはtransparent.gifという名前で
高さ1、幅1ピクセルのものを、
同じディレクトリに保存しておく必要があります。
できましたね？？
…ううむ、確かに実現しましたが、ちょっと面倒ですね。
このタグの欠点は、編集しているうちに
たまに訳わからなくなってしまうことです(^_^;)
もっとかんたんなタグはないの？？？
はい、あります。
もっと単純で、
スタイルシートも使わずに
簡単に1ピクセルの罫線が実現できるタグが…。
ということで、次回に続きます。
最初からそっちを教えてよ、というご指摘は
ご遠慮ください。（笑）
お気に入りの記事を「いいね！」で応援しよう
最終更新日
2004/09/22 01:23:22 PM
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
