楽天コミュニティBlog

まずは、最もシンプルな形から。

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:1px solid #ff6600;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

「border:1px」は、枠の太さを表し、数字を大きくすると枠が太くなります。
いままでと違い、数字に単位（px）がついている点に注目ですね。

「#ff6600」は枠自体の色。おなじみのRGBカラーや色名で好きな色にできます。

「solid」は、線状の枠を指定する値です。

ちなみに「background-color:#ffcc99;」をプラスすると・・・

このように背景をつけることができました。

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:1px solid #ff6600;background-color:#ffcc99;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■「dashed」をつかって枠を点線に。

「border:1px」のとき

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:1px dashed #339933;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■「border:3px」「background-color:#ccffcc;」のとき

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:3px dashed #339933;background-color:#ccffcc;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■「double」をつかって枠を2重に。(「border:2px」以下だと2重になりません)

「border:3px」のとき

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:3px double #3300ff;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■「border:4px」「background-color:#ccccff;」のとき
(外側の枠が太くなりました）

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:4px double #3300ff;background-color:#ccccff;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■「dotted」をつかって枠をかわいく。

「border:3px」のとき

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:3px dotted #6600ff;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■「border:4px」「background-color:#ccccff;」のとき

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:4px dotted #6600ff;background-color:#ffccff;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■枠の色を徐々に変える。

ここに文章や画像をいれま

入力ソースはこちら。

<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px solid #ffff00;"> <tr><td> <table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #ff9900;"> <tr><td> <table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #ff0000;"> <tr><td>ここに文章や画像をいれます </td></tr></table></td></tr></table></td></tr></table>

ここに文章や画像をいれま

↑

上のソースの「solid」を「dashed」に。「border:1px」を「border:2px」に。 （「#ccffcc」→「#66cc66」→「#009900」と色も変えています）

ここに文章や画像をいれま

↑

上のソースの「solid」を「double」に。「border:1px」を「border:3px」に。 （「#ccffff」→「#6699ff」→「#0033ff」と色も変えています）

■「groove」をつかって枠に濃い影を。

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:10px groove #c0c0c0;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■「ridge」をつかって枠にうすい影を。

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:10px ridge #c0c0c0;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■「inset」をつかって枠を立体的に。

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:6px inset #c0c0c0;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

■「outset」をつかって枠を立体的に。(「inset」の逆バージョン)

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:6px outset #c0c0c0;background-color:#ffccff;"> <tr><td>ここに文章や画像をいれます</td></tr></table>

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

[サイトマップ]

[楽天市場]

[Home]