 ハイライトON、OFF 変更削除不可 TIME指定 JavaScript指定 スタイルシート指定 カスタマイズ箇所
DIV（レイアウトコンテナ）タグを使って角の丸いボックスを作成します。
|
画像を使用せずに角の丸いボックスを作成します。
カスタマイズ箇所の値を変えればすぐにお好きなように変えられます。
|
<HTML>
<HEAD>
<TITLE>画像なし角丸ボックス</TITLE>
<STYLE type="text/css">
.d_corner{font-size:1px;background-color:#ff6688;height:1px;}
#d_center{font-size:12px;background-color:#ff6688;padding:5;align:center;}
</STYLE>
</HEAD>
<BODY>
<table><tr><td align="center">
<DIV style="width:340;" class="d_corner"></DIV>
<DIV style="width:344;" class="d_corner"></DIV>
<DIV style="width:346;" class="d_corner"></DIV>
<DIV style="width:348;" class="d_corner"></DIV>
<DIV style="width:350;" id="d_center">画像なし角丸ボックス</DIV>
<DIV style="width:348;" class="d_corner"></DIV>
<DIV style="width:346;" class="d_corner"></DIV>
<DIV style="width:344;" class="d_corner"></DIV>
<DIV style="width:340;" class="d_corner"></DIV>
</td></tr></table>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>画像なし角丸ボックス</TITLE>
<STYLE type="text/css">
.d_corner{font-size:1px;background-color:#000000;height:1px;}
#d_center{font-size:12px;background-color:#000000;padding:5;align:center;}
</STYLE>
</HEAD>
<BODY>
<TABLE><tr><td align="center">
<DIV style="width:340;" class="d_corner"></DIV>
<DIV style="width:344;" class="d_corner"></DIV>
<DIV style="width:346;" class="d_corner"></DIV>
<DIV style="width:348;" class="d_corner"></DIV>
<DIV style="width:350;" id="d_center">
<TABLE border="0" width="95%" height="90%">
<TR><TD align="center" bgcolor="#ffffff">
<BR>外かど丸、内かど角<BR><BR>
</TD></TR></TABLE>
</DIV>
<DIV style="width:348;" class="d_corner"></DIV>
<DIV style="width:346;" class="d_corner"></DIV>
<DIV style="width:344;" class="d_corner"></DIV>
<DIV style="width:340;" class="d_corner"></DIV>
</td></tr></TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>画像なし角丸ボックス</TITLE>
<STYLE type="text/css">
.d_corner{font-size:1px;background-color:#ffffff;height:1px;}
#d_center{font-size:12px;background-color:#ffffff;padding:5;align:center;}
</STYLE>
</HEAD>
<BODY>
<TABLE border="0" bgcolor="#000000" cellpadding="10"><TR><TD>
<BR>
<TABLE bgcolor="#000000"><tr><td align="center">
<DIV style="width:340;" class="d_corner"></DIV>
<DIV style="width:344;" class="d_corner"></DIV>
<DIV style="width:346;" class="d_corner"></DIV>
<DIV style="width:348;" class="d_corner"></DIV>
<DIV style="width:350;" id="d_center">外かど角、内かど丸</DIV>
<DIV style="width:348;" class="d_corner"></DIV>
<DIV style="width:346;" class="d_corner"></DIV> <DIV style="width:344;" class="d_corner"></DIV>
<DIV style="width:340;" class="d_corner"></DIV>
</td></tr></TABLE>
<BR>
</TD></TR></TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>画像なし角丸グラデボックス</TITLE>
<STYLE type="text/css">
.d_corner{font-size:1px;height:1px;}
#d_center{font-size:12px;background-color:#ff6688;padding:5;align:center;}
</STYLE>
</HEAD>
<BODY>
<table><tr><td align="center">
<DIV style="width:340;background-color:#FFD7EB;" class="d_corner"></DIV>
<DIV style="width:344;background-color:#FFB7DE;" class="d_corner"></DIV>
<DIV style="width:346;background-color:#FF8EC7;" class="d_corner"></DIV>
<DIV style="width:348;background-color:#FF59AC;" class="d_corner"></DIV>
<DIV style="width:350;background-color:#FF0080;" id="d_center">
グラデーションバージョン</DIV>
<DIV style="width:348;background-color:#FF59AC;" class="d_corner"></DIV>
<DIV style="width:356;background-color:#FF8EC7;" class="d_corner"></DIV>
<DIV style="width:344;background-color:#FFB7DE;" class="d_corner"></DIV>
<DIV style="width:340;background-color:#FFD7EB;" class="d_corner"></DIV>
</td></tr></table>
</BODY>
</HTML> |