枠の種類には次のような物が使用できます。
none
(枠線無し) |
solid
(直線) |
double
(二重線) |
groove
(溝線) |
ridge
(谷線) |
inset
(沈み込み) |
outset
(盛り上がり) |
dotted
(点線) |
dashed
(破線) |
|
テーブルの枠にスタイルシートを使用する
<table border="0" style="border:線の太さ 線の種類 線の色">
<tr>
<td>表示する文字など1</td>
<td>表示する文字など2</td>
</tr>
</table> |
線の太さにはpxをつけてください。
線の種類は上記の中から選びます。
色は#をつけてＲＧＢ値で指定してください。
（#をつけないでpinkやblueなどといった指定の仕方もあります。）
では実際に次の物を表示してみます。
<table border="0" style="border:3px solid #aaaaff">
<tr>
<td>表示する文字など1</td>
<td>表示する文字など2</td>
</tr>
</table> |
スタイルシートを使用する際はborderには0を入力してください。
でないと次のようになってしまいます。
セルごとにスタイルシートを使用する
<table border="0>
<tr>
<td" style="border:線の太さ 線の種類 線の色">表示する文字など1</td>
<td" style="border:線の太さ 線の種類 線の色">表示する文字など2</td>
</tr>
</table> |
では実際に次の物を表示してみます。
<table border="0" style="border:3px solid #aaaaff">
<tr>
<td style="border:3px solid #aaaaff">表示する文字など1</td>
<td style="border:3px solid #ffaaaa">表示する文字など2</td>
</tr>
</table> |
枠の上下左右にそれぞれスタイルシートを使用する
<table border="0>
<tr>
<td style="border-top:線の太さ 線の種類 線の色">上のみに効果</td>
<td style="border-bottom:線の太さ 線の種類 線の色">下のみに効果</td>
<td style="border-right:線の太さ 線の種類 線の色">右のみに効果</td>
<td style="border-left:線の太さ 線の種類 線の色">左のみに効果</td>
</tr>
</table> |
では実際に線の太さを3、線の種類をsolid、線の色を#ffaaaaで表示してみます。
| 上のみに効果 |
下のみに効果 |
右のみに効果 |
左のみに効果 |
これはセルに使用してますがもちろん<table>にも使用できます。
ちなみに１つのセルの上下などに効果を働かせたい場合は
<td style="border-top:3px solid #ffaaaa;border-bottom:3px solid #ffaaaa">
のように;(セミコロン)を間に入れることで複数の効果を使うことが出来ます。
|
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・ＴＶ
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
