中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

スタイルシート記述

.v0

{

visibility

:

hidden

;

}

HTML記述

<p>鳥啼く声す夢覚ませ</p>
<p class="v0">見よ明け渡る東を</p>
<p>空色<span class="v0">映えて</span>沖つ辺に</p>
<p>帆船群れ居ぬ靄の中</p>

表示例

鳥啼く声す夢覚ませ

見よ明け渡る東を

空色映えて沖つ辺に

帆船群れ居ぬ靄の中

display : none ; との表示の違いに注意

スタイルシート記述

.v1

{

visibility

:

collapse

;

}

HTML記述

<table border="1" summary="TABLE要素でのvisibilityプロパティ">
　<tr>
　　<td>cell 1-1</td><td>cell 1-2</td><td>cell 1-3</td>
　</tr>
　<tr class="v1">
　　<td>cell 2-1</td><td>cell 2-2</td><td>cell 2-3</td>
　</tr>
　<tr>
　　<td>cell 3-1</td><td>cell 3-2</td><td>cell 3-3</td>
　</tr>
</table>

表示例

cell 1-1	cell 1-2	cell 1-3
cell 2-1	cell 2-2	cell 2-3
cell 3-1	cell 3-2	cell 3-3

IE6 での表示。IE6/7 では反映されません。

IE8 での表示。表示領域が確保されていません。

Google Chrome での表示。表示領域が確保されています。