[CSS] CSSについての質問です。HTMLのテーブル(table)の中に、いくつかセル(td)があります。いくつかのセルについては、右下に小さな画像(10ピクセル四方ぐらい)を置きたいのですが、それをどう実現したらいいでしょうか。ただし、この画像のために、セルのサイズが大きくなるのは困ります(つまり、単純にセルの本文の最終行に画像を置いて、右寄せするというのはだめです)。できる限り小さな画像を、セルの隅に置きたいのです。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/11/12 23:56:42
  • 終了:2006/11/13 09:03:14

ベストアンサー

id:tukimibito No.3

tukimibito回答回数11ベストアンサー獲得回数32006/11/13 03:13:26

ポイント70pt

どういったものか、いまいちイメージできないのでヘンテコな回答かもしれませんが…

1)まず必要なセル内に画像を配置し、それにリンクを貼る。

2)次にその画像に任意のクラス(例えば class="rightbottom"など)を与え、

.rightbottom{

position: absolute;

right: 0;

bottom: 0;

}

というような形で位置を指定します。

3)そして、そのセルの<td>タグにも適当なクラス(例えば class="abc")を与えて

.abc{

position: relative;

}

と相対配置にする。

以上でセル内の右下に画像が引っ付きます。

ただ、画像と本文が重なってしまうかもしれないのでそれを回避したい場合はなんらからの調整が必要です。

参考 http://www.seo-equation.com/html/css/position

id:cakeismine

ありがとうございます。

まさにドンピシャでした。

に対して

position: relative;

を与えることが大事だったんですね。

勉強になりました。

2006/11/13 09:01:28

その他の回答(2件)

id:STRing No.1

STRing回答回数351ベストアンサー獲得回数362006/11/13 00:56:31

ポイント40pt

CSS

.sa {
    background: url(dot.png) no-repeat right bottom;
    }

HTML

--あいうえおかきくけこさしすせそたちつてと
1あいうえおかきくけこ
2さしすせそたちつてと

こうすれば、 class="sa" 指定されているところに、

dot.png を繰り返し無しで、右、下、に配置されます。

もっと美しく簡単にやるには col/colgroup を利用するのですけど、

thead だけに、などといった指定の方法が判らなかったので逃げています。


http://www.ne.jp/asahi/minazuki/bakera/html/css/colors.html#back...

id:cakeismine

回答ありがとうございます。

できれば、その画像にリンクを張りたいのですが、backgroundだとそれが可能でしょうか。

2006/11/13 01:15:38
id:b-wind No.2

b-wind回答回数3344ベストアンサー獲得回数4402006/11/13 01:09:37

ポイント40pt

http://www.htmq.com/style/background-image.shtml

http://www.htmq.com/style/background-position.shtml

http://www.htmq.com/style/background-repeat.shtml

を参考に

td.bgimage {
  background-image: url("images/image.jpg");
  background-repeat: no-repeat;
  background-position: right bottom
}

という CSS を設定。画像を表示したいセルのみ

<td class="bgimage">内容</td>

とすることで実現できると思います。

id:cakeismine

ありがとうございます。

先の方の回答でも書いたのですが、background指定だと、そこにリンクを張ることが不可能なのではないか、と。すみません、そこからリンクを張りたいのです。

2006/11/13 01:16:59
id:tukimibito No.3

tukimibito回答回数11ベストアンサー獲得回数32006/11/13 03:13:26ここでベストアンサー

ポイント70pt

どういったものか、いまいちイメージできないのでヘンテコな回答かもしれませんが…

1)まず必要なセル内に画像を配置し、それにリンクを貼る。

2)次にその画像に任意のクラス(例えば class="rightbottom"など)を与え、

.rightbottom{

position: absolute;

right: 0;

bottom: 0;

}

というような形で位置を指定します。

3)そして、そのセルの<td>タグにも適当なクラス(例えば class="abc")を与えて

.abc{

position: relative;

}

と相対配置にする。

以上でセル内の右下に画像が引っ付きます。

ただ、画像と本文が重なってしまうかもしれないのでそれを回避したい場合はなんらからの調整が必要です。

参考 http://www.seo-equation.com/html/css/position

id:cakeismine

ありがとうございます。

まさにドンピシャでした。

に対して

position: relative;

を与えることが大事だったんですね。

勉強になりました。

2006/11/13 09:01:28

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません