- ベストアンサー
角丸テーブルのつくり方！
どうしてもホームページに角丸テーブルを作りたく、日々奮闘しておりますが、なかなかうまくいきません。。。http://d.hatena.ne.jp/tikeda/20060501/1146444788 こちらのサイトを見つけ、早速ＤＬし、９番の内側にシャドウがついた角丸を作成したく、以前の質問で教えて頂いた、 http://heo.jp/tag/kowaza/omoshiro/10.html を参考に、３×３のテーブルを挿入し、 セルに一づつＤＬした画像を・・・入れているのですが、どうもいまいちわかりません。ＤＬしたＺＩＰファイルを解凍すると色々出てくるのですが、９番のものは６個gif画像が入っていました。 こちらをただ、セルに挿入してTable Borderタグに、<Table Border Cellspacing="0" Cellpadding="0">を追記する・・・という手順はわかったのですが、Zipファイルの画像がどのセルにどこの画像をいれていいか（どこにどれを入れていいか）イマイチ解りにくくて本当に困っております。 やってはみたのですが、入れるセルと入れる画像が間違っているのか、 それともハナから私の角丸テーブルに対する概念が間違いなのか わけがわかりません。、<Table Border Cellspacing="0" Cellpadding="0">を追加したら、一番上の画像だけずれて表示されてしまうのです。 ご親切に教えてくれる方居ましたら、宜しくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
二つのサイトのやり方は違っています。お好みのものはテーブルを使っていません。 トラブルの原因は、違っているものを組み合わせていることによるためです。曰く、生兵法は怪我の元。 DLした中にある、curve.html がそのサンプル記述です。これをそのまま使うのが利口のようですが。 ９番の角丸のみを使いたいなら次のようなタグになります。↓ <html><head> <style TYPE="text/css"> <!-- /* ########## COMMON ########## */ .curve-09-body p { margin:0; padding:5px 10px; font-size:90%; } /* ############ 09 ############ */ .curve-09-head{ font-size:1px; height:7px; background:url(09-curve-right-head.gif) top right no-repeat; margin-top:5px; } .curve-09-head div{ font-size:1px; height:7px; background:url(09-curve-left-head.gif) top left no-repeat; } .curve-09-body{ background:url(09-curve-left-middle.gif) top left repeat-y; } .curve-09-body div{ background:url(09-curve-right-middle.gif) top right repeat-y; } .curve-09-bottom{ font-size:1px; height:7px; background:url(09-curve-right-bottom.gif) bottom right no-repeat; margin-bottom:5px; } .curve-09-bottom div{ font-size:1px; height:7px; background:url(09-curve-left-bottom.gif) bottom left no-repeat; } --> </style> </head> <body> <div class="curve-09-head"><div></div></div> <div class="curve-09-body"> <div> <p>09：内側にシャドウがついた角丸</p> </div> </div> <div class="curve-09-bottom"><div></div></div> </body> </html>
その他の回答 (1)
- RH01
- ベストアンサー率45% (37/82)
こんにちは。 No1の方のソースを丸ごとコピペしてみましたが きちんと表示されましたよ。 なので、もしかして画像ファイルの位置の問題ではないでしょうか。 ソースをコピペしたファイルと、画像ファイルは 同じフォルダ内に入っていますか？ 画像をimgフォルダにまとめていると表示されないと 思います。 （ソース側の相対パスを変更してもOKです） あとは、表示されない場合、どんな状態か書いてあると 回答もらえるかもです。
お礼
こんにちは。今週ずっと忙しく、やっとホームページ製作に再着手しております。 そして、＃２様のおっしゃる様に画像をHPを作っているフォルダに きちんと移動してコピペしたところ、見事にきちんと表示されました。 HPの仕組みが全くわかっておらず、相対パス絶対パスから検索してみました・・・ ビルダー１０使用で、「ソースにエラーが検出されたので修正しました」とでちゃうんですが、それでも表示されました。 うーん、すばらしいです。 有難うございました。 ＃２様のお陰で最終的に理解できましたが、先着順にさせていただきたいと思います。どうぞご了承くださいませ。 とかなら
補足
回答、ありがとうございます。 画像ファイル・・・同じフォルダに入ってないです。 多分それが原因です。 もしかして、９番をダウンロードして、そのファイルをHP作成しているフォルダに入れて、 ＃１様の書いてくださったソースを丸ごとコピペして表示すればよかったんでしょうか・・・ ホームページビルダー１０を使ってホームページを作っておりました。 今、すこしづつ、時間のあるときにHTML（の基本）から勉強しているレベルですので、そんな概念もやっとわかってきた次第です。 なので、RH01様にせっかく回答頂いた ＜画像をimgフォルダにまとめていると表示されないと ＜思います。 ＜（ソース側の相対パスを変更してもOKです） という、意味もイマイチわかっておらず^_^; ビルダーだととりあえずHTMLの勉強から入らなくても作れるものですから・・・ でも、「こうしたい」というのがでてくると、やはりタグ等の知識は不可欠になってくるんですね。 申し訳ありませんが、本日は試す暇がありませんので、 今週中、試してみます。その後結果なりをお礼欄から連絡させていただきますね。
お礼
早速、回答下さいましたのに、お礼が遅くなり申し訳ございません。 日々、角丸画像に奮闘しておりました。 二つのサイトのやり方が違うことすら解っておらず、恥ずかしい限りです。 とりあえず、書いて頂いたソースそのまんまコピペしてプレビューしたのですが、なんかそれも私の概念が間違っている様です。（きちんと表示されませんでした。） 恐らく、どっかを書き換えるのでしょうが、 とりあえずどうしても９番の角丸を使いたいので、 頑張ってみます。締め切りもう少し後になるかも知れませんが、 宜しくお願い申し上げます。