A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
背景画像の上に角丸の画像を表示すれば可能です。
角丸tableの作り方は分かっている前提で…
まず背景画像を目的のtableのサイズに合わせて9つに切り分けます。
(これをしないとブラウザによってtableのセルごとに画像が表示されますので切れ目で不連続になります。)
そして、角には背景画像を表示させた上でtableの内容として透過gifで作った角丸画像を置きます。
欠点として、tableのサイズを変更することができません。
ちなみに背景画像が1枚の画像でなく小さな画像を繰り返すタイプの場合、背景画像のサイズと角丸のサイズを合わせておく必要があります。
No.3
- 回答日時:
角の丸いテーブルを作る
http://atp.boo.jp/act/html/04.html
応用編の8つの画像で、白の部分を透過にする。
さらに、角の画像はグレイ部分をページの背景色と同色にする。
1*1ピクセルの透過GIFファイルを用意する。
これを利用してテーブルの背景に画像が置けると思います。
<table border="0" align="center" cellpadding="0" cellspacing="0" background="back.jpg">
<tr>
<td><img src="01.gif" width="8" height="8"></td>
<td background="02.gif"><img src="spacer.gif" width="1" height="1"></td>
<td><img src="03.gif" width="8" height="8"></td>
</tr>
<tr>
<td background="04.gif"><img src="spacer.gif" width="1" height="1"></td>
<td>本文 本文 本文</td>
<td background="05.gif"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td><img src="06.gif" width="8" height="8"></td>
<td background="07.gif"><img src="kara.gif" width="8" height="8"><img src="spacer.gif" width="1" height="1"></td>
<td><img src="08.gif" width="8" height="8"></td>
</tr>
</table>
No.2
- 回答日時:
テーブルの角を丸くする機能はありませんので
丸くなったように見せる・・・ということになりますが、
●テーブルの背景に画像を使うのならばその画像をテーブルと同じサイズにして角丸に見えるようにカド四箇所を背景と同じ色で丸く塗っておく。もしくはGIF画像でカドを透明処理しておく。
●テーブルごと画像として作成して張り込む。
●テーブル四隅にHPの背景色と同じ色の角丸画像を配置する。
(わかりにくいかもしれませんが、HPの背景色と同じ■を四隅に配置したら角っとへこんだ画像に見えますよね。この■を形をかえてやればいろんなカドの形にできます。)
ということしか思いつきませんね。
ただ、その際、テーブルのボーダーは0でないと変です。
(すべてFlashで作成すればそのような苦労はなくなりますが・・・^^:)
No.1
- 回答日時:
丸角といってもいろいろな形がありますよね。
外側の角が丸く内側が四角いものと、内も外も丸いものと…
どんなタイプの丸角テーブルですか?
丸角といっても元は四角い画像ですから、その中に画像を入れると
だいたい想像つくと思います。
外側が丸で内側が角なら画像は変な余白なしに収まりますが、
外も内も丸なら変な余白が出来ます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
【CSS】左右可変、中央固定の3...
-
ヘッダー固定のスクロールが可...
-
背景色を2色表示させたい
-
html+CSSでテーブルのスクロー...
-
更新するとずれる?
-
テーブル内に画像を表示したい。
-
TABLEのセルの中の文字を行単位...
-
html でのテキスト結合について
-
CSSで特定のテーブルだけに...
-
テーブルの行を折りたたみたい...
-
DreamWeaverで複数ワードを一気...
-
tableタグとformタグの組み合わせ
-
CSSだけで<table>の<td>や<tr>...
-
Tableタグで作成した表の縮小
-
チェックボックスが複数チェッ...
-
htmlでテキストを画面の中央に...
-
HTMLで文とテーブルの間が空く。
-
tableでcolspanを使うと次行以...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
テーブルの横に画像を
-
HTMLでテーブルを横に並べる方法
-
テーブル内に画像を表示したい。
-
2つのテーブルを左右に表示した...
-
ウィンドウのサイズを変えても...
-
tableのheight指定が効かない
-
画像の横にテーブルを。。。
-
箇条書きリストのすぐ横に画像...
-
【CSS】縦横スクロールテーブル...
-
プルダウンの表示位置
-
テーブルでスクロールを同期したい
-
DWで、デザインビューに表示さ...
-
更新するとずれる?
-
table内にiframeでテーブルが崩...
-
画像と、セルのつなぎ目に白い...
-
HTMLでページの幅を設定し...
-
CSSで文字を一番下の中央に表示...
-
インラインフレームのスクロー...
おすすめ情報