人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: cakeismine
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS HTML サイズ セル ピクセル
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● STRing
●40ポイント

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...

◎質問者からの返答

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

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


2 ● b-wind
●40ポイント

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>

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

◎質問者からの返答

ありがとうございます。

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


3 ● tukimibito
●70ポイント ベストアンサー

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

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

◎質問者からの返答

ありがとうございます。

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

に対して

position: relative;

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

勉強になりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ