角が丸いテーブルをスタイルだけでやるには

角が丸いテーブルのタブメニューがよくお洒落なサイトで使われていますよね?

それと同じ事をしたいのですが、スタイルシートだけで出来るものなのでしょうか。　簡単なやり方などご存知でしたら教えてください。

お願いします。

No.3 ベストアンサー 回答者： SpiceGirl 回答日時： 2004/07/17 09:09

おはようございます。

参考URLの「角の丸い枠」

下のほうの「コメント用１個分のソースを書いてみます。」が参考になると思います。

参考URL：http://www.h7.dion.ne.jp/~nuru44/dhtml/ss.html

この回答へのお礼

サイトがとても参考になりました。
ありがとうございます。

お礼日時：2004/07/17 17:44

No.2 回答者： jun2249 回答日時： 2004/07/17 01:44

スタイルシートが良いわけが良くわからないのですが下記の方法はどうですか？

これは右下のみを丸くしてみました。
どうように３つの角も試してみてください。
body { background-color:#bfc48c; color:#000000; }
p#circle1 { background:#ffffff url(side1.gif) no-repeat 100% 100%; color:#000000; width:200px; margin:20px; padding:1em; font-size:0.8em; text-indent:1em; }


HTML側からの呼び出しは<p id="circle1">
というような感じです。
もしかして呼び出しもスタイルシートがいいのでしょうか？？

この回答へのお礼

それです！
ありがとうございます。

お礼日時：2004/07/17 17:43

No.1 回答者： jun2249 回答日時： 2004/07/17 01:29

こんにちは。

こんなふうにすればどうでしょうか？
また、一般的に使われているのは4つぶん角の形を画像で作っておいてテーブルに埋め込む方法ですね。
<TABLE cellspacing="0" cellpadding="0">

<TR>
<TD height="1" colspan="5"></TD>
<TD width="300" bgcolor="#000000" height="1"></TD>
<TD colSpan="5" height="1"></TD>
</TR>
<TR>
<TD width="1" height="1" colspan="3"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD width="300" bgcolor="#000000" height="1"></TD>
<TD bgcolor="#000000" height="1" width="5"></TD>
<TD bgcolor="#000000" height="1" width="3"></TD>
<TD width="1" height="1" colspan="3"></TD>
</TR>
<TR>
<TD width="1" height="1" colspan="2"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD bgcolor="#000000" colspan="5" height="1"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD width="1" height="1" colspan="2"></TD>
</TR>
<TR>
<TD width="1" height="1" rowspan="2"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD bgcolor="#000000" colspan="7" height="1"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD width="1" height="1" rowspan="2"></TD>
</TR>
<TR>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD bgcolor="#000000" colspan="7" height="1"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
</TR>
<TR>
<TD width="1" bgcolor="#000000"></TD>
<TD align="left" bgcolor="white" colspan="9" height="1">
<TABLE cellpadding="8" width="100%" bgcolor="#000000">

<TR>
<TD align="center" height="126" bgcolor="#000000"><FONT color="#ffffff">あああああああああ</FONT><BR>
<FONT color="#ff0066">＊＊＊＊＊＊＊＊＊＊</FONT><BR>
</TD>
</TR>

</TABLE>
</TD>
<TD width="1" bgcolor="#000000"></TD>
</TR>
<TR>
<TD width="1" height="1" rowspan="2"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD bgcolor="#000000" colspan="7" height="1"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD width="1" height="1" rowspan="2"></TD>
</TR>
<TR>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD bgcolor="#000000" colspan="7" height="1"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
</TR>
<TR>
<TD width="1" height="1" colspan="2"></TD>
<TD width="1" height="1" bgcolor="#330000"></TD>
<TD bgcolor="#000000" colspan="5" height="1"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD width="1" height="1" colspan="2"></TD>
</TR>
<TR>
<TD width="1" height="1" colspan="3"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD width="1" bgcolor="#000000" height="1"></TD>
<TD width="300" bgcolor="#000000" height="1"></TD>
<TD bgcolor="#000000" height="1" width="5"></TD>
<TD bgcolor="#000000" height="1" width="3"></TD>
<TD width="1" height="1" colspan="3"></TD>
</TR>
<TR>
<TD colspan="5"></TD>
<TD bgcolor="#000000" width="300"></TD>
<TD colspan="5"></TD>
</TR>

</TABLE>

この回答へのお礼

回答ありがとうございます。
テーブルタグを使わずにスタイルシートだけで同じ効果を出せないでしょうか。。。

お礼日時：2004/07/17 01:36