 
【クリック募金】
【ウィルス対策】

【HTMLタグ】
【PCトラブル】
【ランキング】
【P R】





|
テーブル(表)
タグの簡易テスト(別窓)
| テーブルの基礎 | 行を増やす・減らす
| 列を増やす・減らす
| 行の結合 | 列の結合
| 右・左・中央寄せ
|
| 背景色 | かわいいテーブル
| 背景に画像 | 透けるテーブル
|
透けるテーブル(スケルトンテーブル)
スタイルシートを使ってテーブルを透けさせます。テーブル内の背景色や、画像、文字も一緒に透けます。
■ページ中のすべてのテーブルを透けさせる
スタイルシートは<body>〜</body>の表示部分とは別に、<head>〜</head>内に記述して使います。すると<body>〜</body>の表示部分は何もしなくてもよく、ページ全体にスタイルシートの内容が適用されます。
<html>
<head>
<title> </title>
☆スタイルシートはこの部分に記述します☆
</head>
<body>
</body>
</html>
| スタイルシート記述 |
<style type="text/css">
<!--
table { filter:Alpha(opacity=70);
background-color: #FFFFFF}
-->
</style> |
| スタイルシート解説 |
filter:Alpha(opacity=70) は、透け具合です。0に近いほど薄く、100に近いほど濃くなります。
background-color: #FFFFFF は、背景色です。お好きな色を。 |
■特定のテーブルを透けさせる
個別に使う場合は「クラス」というスタイルシートの方法を使います。スタイルシートは<body>〜</body>の表示部分とは別に、<head>〜</head>内に記述して使います。
この場合はクラスを記述します。
クラスは<body>〜</body>の使いたい場所に呼び出して使います。
<html>
<head>
<title> </title>
☆スタイルシート(クラス)はこの部分に記述します☆
</head>
<body>
<table class="クラス名">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
| スタイルシート記述 |
<style type="text/css">
<!--
.opaque { filter:Alpha(opacity=70);
background-color: #FFFFFF}
-->
</style> |
| スタイルシート解説 |
.opaque はクラスの名前です(正式には「クラスセレクタ」)。クラス名は自由に変えられます。.(ドット)の後にわかりやすい名前をつけてくださいね(ここでは
.opaque ですが、.sukeru
でも、何でもいいですよ)
filter:Alpha(opacity=70) は、透け具合です。0に近いほど薄く、100に近いほど濃くなります。
background-color: #FFFFFF は、背景色です。お好きな色を。 |
| 表示 |
記述 |
文字など
濃い背景に使うと文字が見やすくなりますね。 |
|
<table width="幅" height="高さ"
class="opaque">
<tr>
<td>
文字など
</td>
</tr>
</table> |
| 解説 |
テーブルを透けさせるので、<table>タグの中に class="opaque"
を記述し、スタイルシートを呼び出しています。
クラス名を変えた場合は間違えないように記述してくださいね。呼び出すときは.(ドット)は必要ありません。というか、つけちゃダメですよ。 |
このページのトップへ
|