色々なテーブル枠2

BACK TOP NEXT




リボン 色々なテーブル枠 2 リボン

【枠の色を徐々に変える】
ここに文章や画像を入れてね


<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px solid #好きな色;"><tr><td><table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #好きな色;"><tr><td><table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #好きな色;"><tr><td>文章や画像</td></tr></table></td></tr></table></td></tr></table>




ここに文章や画像を入れてね


<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px dashed #好きな色;"><tr><td><table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px dashed #好きな色;"><tr><td><table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px dashed #好きな色;"><tr><td>文章や画像</td></tr></table></td></tr></table></td></tr></table>




ここに文章や画像を入れてね


<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px double #好きな色;"><tr><td><table width="300" height="50" cellspacing="0" cellpadding="0" style="border:3px double #好きな色;"><tr><td><table width="300" height="50" cellspacing="0" cellpadding="0" style="border:3px double #好きな色;"><tr><td>文章や画像</td></tr></table></td></tr></table></td></tr></table>




【grooveをつかって枠に濃い影を】
ここに文章や画像を入れてね


<table width="300" height="50" style="border:10px groove #FF42BD;"><tr><td>文章や画像</td></tr></table>




【ridgeをつかって枠にうすい影を】
ここに文章や画像を入れてね


<table width="300" height="50" style="border:10px ridge #FF42BD;"><tr><td>文章や画像</td></tr></table>




【insetをつかって枠を立体的に】
ここに文章や画像を入れてね


<table width="300" height="50" style="border:6px inset #FF42BD;"><tr><td>文章や画像</td></tr></table>




【outsetをつかって枠を立体的に】
(insetの逆バージョン)
ここに文章や画像を入れてね


<table width="300" height="50" style="border:6px outset #FF42BD;background-color:#ffccff;"><tr><td>文章や画像</td></tr></table>


このように、スタイルシートをテーブルに組み合わせることで
枠のバリエーションを一気に増やすことができますニコ

template- yamato


© Rakuten Group, Inc.
X

Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: