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

質問

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

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

お願いします。

回答No.3

SpiceGirl · ベストアンサー

おはようございます。

参考URLの「角の丸い枠」

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

参考URL：

http://www.h7.dion.ne.jp/~nuru44/dhtml/ss.html

お礼

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

回答No.2

jun2249

スタイルシートが良いわけが良くわからないのですが下記の方法はどうですか？
これは右下のみを丸くしてみました。
どうように３つの角も試してみてください。
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">
というような感じです。
もしかして呼び出しもスタイルシートがいいのでしょうか？？

お礼

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

回答No.1

jun2249

こんにちは。
こんなふうにすればどうでしょうか？
また、一般的に使われているのは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>

お礼

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