1月17日木曜日: empty-cells
empty-cellsプロパティは、空白セルのボーダーを表示するか（show）、しないか（hide）を指定します。
「空白セル」とは、テーブル（表）のセルでテキストや画像が入っていないセルのことを指しますが、 empty-cellsプロパティでは、visibilityプロパティがhiddenに指定されたセルのボーダーについても同様の扱いとなります。
border-spacingプロパティは、border-collapseプロパティの値がseparateのときに有効となります。
■値
show
空白セルの場合にもボーダーを表示します。
hide
空白セルの場合にはボーダーを表示しません。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
table.sample {
border: solid 1px #000000;
border-collapse: separate;
}
td.sample {border: solid 1px #ff0000; empty-cells: show;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<table class="sample">
<tr><td class="sample"></td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample"></td></tr>
</table>
</body>
</html>
「空白セル」とは、テーブル（表）のセルでテキストや画像が入っていないセルのことを指しますが、 empty-cellsプロパティでは、visibilityプロパティがhiddenに指定されたセルのボーダーについても同様の扱いとなります。
border-spacingプロパティは、border-collapseプロパティの値がseparateのときに有効となります。
■値
show
空白セルの場合にもボーダーを表示します。
hide
空白セルの場合にはボーダーを表示しません。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
table.sample {
border: solid 1px #000000;
border-collapse: separate;
}
td.sample {border: solid 1px #ff0000; empty-cells: show;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<table class="sample">
<tr><td class="sample"></td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample"></td></tr>
</table>
</body>
</html>
1月17日木曜日: border-spacing
border-spacingプロパティは、隣接するセルのボーダーとボーダーの間隔を指定する際に使用します。
border-spacingプロパティは、border-collapseプロパティの値がseparateのときに有効となります。
値を1つ指定した場合： [上下左右]の間隔が指定された値になります。
値を2つ指定した場合： 記述した順に[上下][左右]の間隔が指定された値になります。
■値
数値で指定
数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
table.sample {
border: solid 1px #000000;
border-collapse: separate;
border-spacing: 10px;
}
td.sample {border: solid 1px #ff0000}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<table class="sample">
<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
</body>
</html>
border-spacingプロパティは、border-collapseプロパティの値がseparateのときに有効となります。
値を1つ指定した場合： [上下左右]の間隔が指定された値になります。
値を2つ指定した場合： 記述した順に[上下][左右]の間隔が指定された値になります。
■値
数値で指定
数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
table.sample {
border: solid 1px #000000;
border-collapse: separate;
border-spacing: 10px;
}
td.sample {border: solid 1px #ff0000}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<table class="sample">
<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
</body>
</html>
1月17日木曜日: border-collapse
border-collapseプロパティは、隣接するセルのボーダーを重ねて表示するか（collapse）、間隔をあけて表示するか（separate）を指定します。
■値
collapse
隣接するセルのボーダーを重ねて表示します。
separate
隣接するセルのボーダーを間隔をあけて表示します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
table.sample1 {border: solid 1px #000000; border-collapse: collapse;}
table.sample2 {border: solid 1px #000000; border-collapse: separate;}
td.sample {border: solid 1px #ff0000}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<table class="sample1">
<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
<br>
<table class="sample2">
<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
</body>
</html>
■値
collapse
隣接するセルのボーダーを重ねて表示します。
separate
隣接するセルのボーダーを間隔をあけて表示します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
table.sample1 {border: solid 1px #000000; border-collapse: collapse;}
table.sample2 {border: solid 1px #000000; border-collapse: separate;}
td.sample {border: solid 1px #ff0000}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<table class="sample1">
<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
<br>
<table class="sample2">
<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
</body>
</html>
1月17日木曜日: caption-side
caption-sideプロパティは、テーブル（表）のキャプションの位置を指定する際に使用します。 指定できるキャプションの位置は、テーブルの上下左右（top、bottom、left、right）です。
■値
top
キャプションをテーブル（表）の上に表示します。これが初期値です。
bottom
キャプションをテーブル（表）の下に表示します。
left
キャプションをテーブル（表）の左に表示します。
right
キャプションをテーブル（表）の右に表示します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
caption {
color: #006633;
caption-side: left;
}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<table border="1">
<caption>ｽﾀﾝﾘｰ・ｷｭｰﾌﾞﾘｯｸの作品</caption>
<tr><td>１９５３年</td><td>恐怖と欲望</td></tr>
<tr><td>１９５６年</td><td>現金に体を張れ</td></tr>
<tr><td>１９５７年</td><td>突撃</td></tr>
<tr><td>１９６０年</td><td>スパルタカス</td></tr>
<tr><td>１９６２年</td><td>ロリータ</td></tr>
<tr><td>１９６４年</td><td>博士の異常な愛情</td></tr>
<tr><td>１９６８年</td><td>２００１年宇宙の旅</td></tr>
<tr><td>１９７１年</td><td>時計じかけのオレンジ</td></tr>
<tr><td>１９７５年</td><td>バリー・リンドン</td></tr>
<tr><td>１９８０年</td><td>シャイニング</td></tr>
<tr><td>１９８７年</td><td>フルメタル・ジャケット</td></tr>
<tr><td>１９９９年</td><td>アイズ・ワイド・シャット</td></tr>
</table>
</body>
</html>
■値
top
キャプションをテーブル（表）の上に表示します。これが初期値です。
bottom
キャプションをテーブル（表）の下に表示します。
left
キャプションをテーブル（表）の左に表示します。
right
キャプションをテーブル（表）の右に表示します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
caption {
color: #006633;
caption-side: left;
}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<table border="1">
<caption>ｽﾀﾝﾘｰ・ｷｭｰﾌﾞﾘｯｸの作品</caption>
<tr><td>１９５３年</td><td>恐怖と欲望</td></tr>
<tr><td>１９５６年</td><td>現金に体を張れ</td></tr>
<tr><td>１９５７年</td><td>突撃</td></tr>
<tr><td>１９６０年</td><td>スパルタカス</td></tr>
<tr><td>１９６２年</td><td>ロリータ</td></tr>
<tr><td>１９６４年</td><td>博士の異常な愛情</td></tr>
<tr><td>１９６８年</td><td>２００１年宇宙の旅</td></tr>
<tr><td>１９７１年</td><td>時計じかけのオレンジ</td></tr>
<tr><td>１９７５年</td><td>バリー・リンドン</td></tr>
<tr><td>１９８０年</td><td>シャイニング</td></tr>
<tr><td>１９８７年</td><td>フルメタル・ジャケット</td></tr>
<tr><td>１９９９年</td><td>アイズ・ワイド・シャット</td></tr>
</table>
</body>
</html>
1月17日木曜日: table-layout
table-layoutプロパティは、テーブル（表）の表示方法を指定する際に使用します。
通常、ブラウザはテーブル（表）全体を読み込んでから、内容に合わせて各縦列の幅を決定して表示を開始しますが、 table-layoutプロパティにfixedを指定すると、最初の横一行を読み込んだ時点で、各縦列の幅を決定して表示を開始するため、 表示が速くなるメリットがあります。
table-layoutプロパティにfixedを指定する場合には、必ず最初の行の各セルの幅を指定してください。 また、行によって内容量が一定でない場合には、2行目以降のセルで内容が収まりきらないことがあるので注意してください。
尚、table-layoutプロパティの使用例は、下記のページで確認すると分かりやすいでしょう。
http://msdn.microsoft.com/workshop/
samples/author/dhtml/refs/tables3.htm
■値
auto
テーブル（表）全体を読み込んでから、各縦列の幅を決定して表示します。これが初期値です。
fixed
最初の横一行を読み込んだ時点で、各縦列の幅を決定して表示を開始します。
■使用例
HTMLソース
<table border="1" width="500" style="table-layout: fixed;">
<tr>
<th bgcolor="#EE0000" width="140"><font color="#FFFFFF">メニュー</font></th>
<th bgcolor="#EE0000" width="180"><font color="#FFFFFF">説明</font></th>
<th bgcolor="#EE0000" width="180"><font color="#FFFFFF">豆知識</font></th>
</tr>
<tr>
<td bgcolor="#99CC00">ナポリタン</td>
<td bgcolor="#FFFFFF">ケチャップ味のパスタ</td>
<td bgcolor="#FFFFFF">ナポリタンというメニューは実はイタリアにはない</td>
</tr>
<tr>
<td bgcolor="#99CC00">ぺペロンチーノ</td>
<td bgcolor="#FFFFFF">ニンニクと唐辛子とオリーブオイルのパスタ</td>
<td bgcolor="#FFFFFF">ぺペロンチーノとは唐辛子のこと</td>
</tr>
<tr>
<td bgcolor="#99CC00">ボンゴレビアンコ</td>
<td bgcolor="#FFFFFF">あさりのパスタ</td>
<td bgcolor="#FFFFFF">ボンゴレとはあさり、ビアンコとは白のこと</td>
</tr>
<tr>
<td bgcolor="#99CC00">ボンゴレロッソ</td>
<td bgcolor="#FFFFFF">あさりとトマトソースのパスタ</td>
<td bgcolor="#FFFFFF">ボンゴレとはアサリ、ロッソとは赤のこと</td>
</tr>
<tr>
<td bgcolor="#99CC00">カルボナーラ</td>
<td bgcolor="#FFFFFF">玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor="#FFFFFF">カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00">ポモドーロ</td>
<td bgcolor="#FFFFFF">バジルとトマトソースのパスタ</td>
<td bgcolor="#FFFFFF">ポモドーロはトマトのこと</td>
</tr>
<tr>
<td bgcolor="#99CC00">ボロネーゼ</td>
<td bgcolor="#FFFFFF">ミートソースのパスタ</td>
<td bgcolor="#FFFFFF">ボロネーゼはボローニャ風という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00">ペスカトーレ</td>
<td bgcolor="#FFFFFF">エビとあさりの漁師風パスタ</td>
<td bgcolor="#FFFFFF">ペスカトーレは漁師風という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00">アマトリチャーナ</td>
<td bgcolor="#FFFFFF">ベーコンと唐辛子とトマトソースのパスタ</td>
<td bgcolor="#FFFFFF">アマトリチャーナは町の名前</td>
</tr>
<tr>
<td bgcolor="#99CC00">ジェノベーゼ</td>
<td bgcolor="#FFFFFF">バジルとにんにくと松の実ペーストのパスタ</td>
<td bgcolor="#FFFFFF">バジル、にんにく、松の実をすりつぶしたものをジェノバペーストと言う</td>
</tr>
<tr>
<td bgcolor="#99CC00">プッタネスカ</td>
<td bgcolor="#FFFFFF">アンチョビと黒オリーブのトマトソース</td>
<td bgcolor="#FFFFFF">プッタネスカとは娼婦風という意味</td>
</tr>
</table>
通常、ブラウザはテーブル（表）全体を読み込んでから、内容に合わせて各縦列の幅を決定して表示を開始しますが、 table-layoutプロパティにfixedを指定すると、最初の横一行を読み込んだ時点で、各縦列の幅を決定して表示を開始するため、 表示が速くなるメリットがあります。
table-layoutプロパティにfixedを指定する場合には、必ず最初の行の各セルの幅を指定してください。 また、行によって内容量が一定でない場合には、2行目以降のセルで内容が収まりきらないことがあるので注意してください。
尚、table-layoutプロパティの使用例は、下記のページで確認すると分かりやすいでしょう。
http://msdn.microsoft.com/workshop/
samples/author/dhtml/refs/tables3.htm
■値
auto
テーブル（表）全体を読み込んでから、各縦列の幅を決定して表示します。これが初期値です。
fixed
最初の横一行を読み込んだ時点で、各縦列の幅を決定して表示を開始します。
■使用例
HTMLソース
<table border="1" width="500" style="table-layout: fixed;">
<tr>
<th bgcolor="#EE0000" width="140"><font color="#FFFFFF">メニュー</font></th>
<th bgcolor="#EE0000" width="180"><font color="#FFFFFF">説明</font></th>
<th bgcolor="#EE0000" width="180"><font color="#FFFFFF">豆知識</font></th>
</tr>
<tr>
<td bgcolor="#99CC00">ナポリタン</td>
<td bgcolor="#FFFFFF">ケチャップ味のパスタ</td>
<td bgcolor="#FFFFFF">ナポリタンというメニューは実はイタリアにはない</td>
</tr>
<tr>
<td bgcolor="#99CC00">ぺペロンチーノ</td>
<td bgcolor="#FFFFFF">ニンニクと唐辛子とオリーブオイルのパスタ</td>
<td bgcolor="#FFFFFF">ぺペロンチーノとは唐辛子のこと</td>
</tr>
<tr>
<td bgcolor="#99CC00">ボンゴレビアンコ</td>
<td bgcolor="#FFFFFF">あさりのパスタ</td>
<td bgcolor="#FFFFFF">ボンゴレとはあさり、ビアンコとは白のこと</td>
</tr>
<tr>
<td bgcolor="#99CC00">ボンゴレロッソ</td>
<td bgcolor="#FFFFFF">あさりとトマトソースのパスタ</td>
<td bgcolor="#FFFFFF">ボンゴレとはアサリ、ロッソとは赤のこと</td>
</tr>
<tr>
<td bgcolor="#99CC00">カルボナーラ</td>
<td bgcolor="#FFFFFF">玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor="#FFFFFF">カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00">ポモドーロ</td>
<td bgcolor="#FFFFFF">バジルとトマトソースのパスタ</td>
<td bgcolor="#FFFFFF">ポモドーロはトマトのこと</td>
</tr>
<tr>
<td bgcolor="#99CC00">ボロネーゼ</td>
<td bgcolor="#FFFFFF">ミートソースのパスタ</td>
<td bgcolor="#FFFFFF">ボロネーゼはボローニャ風という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00">ペスカトーレ</td>
<td bgcolor="#FFFFFF">エビとあさりの漁師風パスタ</td>
<td bgcolor="#FFFFFF">ペスカトーレは漁師風という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00">アマトリチャーナ</td>
<td bgcolor="#FFFFFF">ベーコンと唐辛子とトマトソースのパスタ</td>
<td bgcolor="#FFFFFF">アマトリチャーナは町の名前</td>
</tr>
<tr>
<td bgcolor="#99CC00">ジェノベーゼ</td>
<td bgcolor="#FFFFFF">バジルとにんにくと松の実ペーストのパスタ</td>
<td bgcolor="#FFFFFF">バジル、にんにく、松の実をすりつぶしたものをジェノバペーストと言う</td>
</tr>
<tr>
<td bgcolor="#99CC00">プッタネスカ</td>
<td bgcolor="#FFFFFF">アンチョビと黒オリーブのトマトソース</td>
<td bgcolor="#FFFFFF">プッタネスカとは娼婦風という意味</td>
</tr>
</table>
1月16日水曜日: writing-mode
writing-modeプロパティは、W3Cで審議中のXSL（Extensible Stylesheet Language）の仕様の一部をInternet Explorerが独自に採用したもので、文字表記の方向（縦横）を指定する際に使用します。
■値
lr-tb
lr-tbとはLeft to Right - Top to Bottomの略です。横書きとなります。
tb-rl
tb-rlとはTop to Bottom - Right to Leftの略です。縦書きとなります。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {writing-mode: lr-tb;}
p.sample2 {writing-mode: tb-rl;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">
「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人皆同じ位にして、生れながら貴賎上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの者を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。
</p>
<p class="sample2">
「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人皆同じ位にして、生れながら貴賎上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの者を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。
</p>
</body>
</html>
■値
lr-tb
lr-tbとはLeft to Right - Top to Bottomの略です。横書きとなります。
tb-rl
tb-rlとはTop to Bottom - Right to Leftの略です。縦書きとなります。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {writing-mode: lr-tb;}
p.sample2 {writing-mode: tb-rl;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">
「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人皆同じ位にして、生れながら貴賎上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの者を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。
</p>
<p class="sample2">
「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人皆同じ位にして、生れながら貴賎上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの者を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。
</p>
</body>
</html>
1月16日水曜日: unicode-bidi
unicode-bidiプロパティは、Unicodeの文字表記の方向を上書きする際に使用します。
Unicode（ユニコード）とは、言語に関係なくすべての文字に独立した番号を与え、 文字コードの切り替えなしに、世界中の文字を統一された文字コードで表現しようとする規格です。
Unicodeでは英語や日本語は左から右へ、アラビア語やヘブライ語は右から左へというように、 言語により文字表記の方向が規定されていますが、 unicode-bidiプロパティは、この設定に新たに文字方向に関する指定を組み込んだり、設定を無効にする上書きを行います。 上書きする文字表記の方向は、directionプロパティで値を指定します。
■値
normal
Unicodeによる文字表記の方向設定がそのまま適用されます。これが初期値です。
embed
Unicodeによる文字表記の方向設定の中に、新たにdirectionプロパティで指定された値が組み込まれます。
bidi-override
Unicodeによる文字表記の方向設定を無効にします。この場合、文字表記の方向はdirectionプロパティで指定された値が適用されます。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {direction: rtl; unicode-bidi: bidi-override;}
p.sample2 {direction: ltr; unicode-bidi: normal;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">
いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに…
</p>
<p class="sample2">
どの帝の御代のことであったか、女御や更衣たちが大勢お仕えなさっていたなかに…
</p>
</body>
</html>
Unicode（ユニコード）とは、言語に関係なくすべての文字に独立した番号を与え、 文字コードの切り替えなしに、世界中の文字を統一された文字コードで表現しようとする規格です。
Unicodeでは英語や日本語は左から右へ、アラビア語やヘブライ語は右から左へというように、 言語により文字表記の方向が規定されていますが、 unicode-bidiプロパティは、この設定に新たに文字方向に関する指定を組み込んだり、設定を無効にする上書きを行います。 上書きする文字表記の方向は、directionプロパティで値を指定します。
■値
normal
Unicodeによる文字表記の方向設定がそのまま適用されます。これが初期値です。
embed
Unicodeによる文字表記の方向設定の中に、新たにdirectionプロパティで指定された値が組み込まれます。
bidi-override
Unicodeによる文字表記の方向設定を無効にします。この場合、文字表記の方向はdirectionプロパティで指定された値が適用されます。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {direction: rtl; unicode-bidi: bidi-override;}
p.sample2 {direction: ltr; unicode-bidi: normal;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">
いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに…
</p>
<p class="sample2">
どの帝の御代のことであったか、女御や更衣たちが大勢お仕えなさっていたなかに…
</p>
</body>
</html>
1月16日水曜日: direction
directionプロパティは、文字表記の方向（左右）を指定する際に使用します。 値がltr（Left To Right）のときは左から右、値がrtl（Right To Left）のときは右から左に表記されます。
directionプロパティをインライン要素に適用させる際には、 同時にunicode-bidiプロパティで値をembed、またはbidi-overrideに指定する必要があります。
尚、Internet Explorerでは、日本語にdirection: rtl; のみを設定しても、右から左の表記にはならず、 日本語の標準的な表記方向が優先されるようです。 日本語を右から左に表記させたい場合には、同時にunicode-bidi: bidi-override; を指定してください。 （右から左に表記される言語にはアラビア語やヘブライ語などがあります。）
■値
ltr
ltrとはLeft To Rightの略です。左から右に文字表記します。
rtl
rtlとはRight To Leftの略です。右から左に文字表記します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {direction: rtl; unicode-bidi: bidi-override;}
p.sample2 {direction: ltr;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">
いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに…
</p>
<p class="sample2">
どの帝の御代のことであったか、女御や更衣たちが大勢お仕えなさっていたなかに…
</p>
</body>
</html>
directionプロパティをインライン要素に適用させる際には、 同時にunicode-bidiプロパティで値をembed、またはbidi-overrideに指定する必要があります。
尚、Internet Explorerでは、日本語にdirection: rtl; のみを設定しても、右から左の表記にはならず、 日本語の標準的な表記方向が優先されるようです。 日本語を右から左に表記させたい場合には、同時にunicode-bidi: bidi-override; を指定してください。 （右から左に表記される言語にはアラビア語やヘブライ語などがあります。）
■値
ltr
ltrとはLeft To Rightの略です。左から右に文字表記します。
rtl
rtlとはRight To Leftの略です。右から左に文字表記します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {direction: rtl; unicode-bidi: bidi-override;}
p.sample2 {direction: ltr;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">
いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに…
</p>
<p class="sample2">
どの帝の御代のことであったか、女御や更衣たちが大勢お仕えなさっていたなかに…
</p>
</body>
</html>
1月11日金曜日: clip
clipプロパティは、ボックスを切り抜き表示（クリッピング）する際に使用します。 切り抜かれた外側の部分については、overflowプロパティで表示方法を指定します。 CSS2の仕様で指定できる切り抜きの形状は矩形のみです。
尚、clipプロパティによる指定は、positionプロパティでabsoluteが指定されている場合に有効となるようです。
■値
auto
切り抜きは行われず、ボックス全体が表示されます。
rect（上,右,下,左）
ボックスの上右下左それぞれの端から内側への距離を、数値に単位をつけて指定することになっていますが、実際にはボックスの左上を基準として上右下左のそれぞれの距離を指定する仕様のブラウザが多いようです。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
img.sample {
position: absolute;
clip: rect(auto 50px 80px auto);
overflow: hidden;
}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<img src="../images/img001.gif" alt="サンプル画像" class="sample">
</body>
</html>
尚、clipプロパティによる指定は、positionプロパティでabsoluteが指定されている場合に有効となるようです。
■値
auto
切り抜きは行われず、ボックス全体が表示されます。
rect（上,右,下,左）
ボックスの上右下左それぞれの端から内側への距離を、数値に単位をつけて指定することになっていますが、実際にはボックスの左上を基準として上右下左のそれぞれの距離を指定する仕様のブラウザが多いようです。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
img.sample {
position: absolute;
clip: rect(auto 50px 80px auto);
overflow: hidden;
}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<img src="../images/img001.gif" alt="サンプル画像" class="sample">
</body>
</html>
1月11日金曜日: visibility
visibilityプロパティは、ボックスの表示・非表示を指定する際に使用します。 非表示にした場合にも、ボックス自体がなくなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。
尚、ボックス自体をなくしてしまいたい場合には、displayプロパティでnoneを指定します。
■値
visible
ボックスを表示します。
hidden
ボックスを非表示にします。
collapse
テーブル（表）の行や列にこの値を指定すると、その部分を詰めて表示します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
img.sample1 {visibility: hidden; }
img.sample2 {visibility: visible; }
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<img src="../images/img001.gif" class="sample1" alt="サンプル画像"><br>
<img src="../images/img001.gif" class="sample2" alt="サンプル画像">
</body>
</html>
尚、ボックス自体をなくしてしまいたい場合には、displayプロパティでnoneを指定します。
■値
visible
ボックスを表示します。
hidden
ボックスを非表示にします。
collapse
テーブル（表）の行や列にこの値を指定すると、その部分を詰めて表示します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
img.sample1 {visibility: hidden; }
img.sample2 {visibility: visible; }
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<img src="../images/img001.gif" class="sample1" alt="サンプル画像"><br>
<img src="../images/img001.gif" class="sample2" alt="サンプル画像">
</body>
</html>
