|
| CSS Reference_________ |
|
|
|
|
 |
| テーブル（表）と線、枠に対するスタイル指定 |
横幅のサイズを指定する。指定には「pt」、「em」、「in（inch）」等の算術指定の他、「%（パーセンテージ）」の指定もできる。
| <span style="width: 10em; background-color: #87cefa; color: #000000">横幅サイズ</span> と指定した場合は
横幅サイズ 10emの青色背景色の中に「横幅サイズ」という文字が表示される。また、<table style="border-width: thin; border-style: solid; width: 100%"> のように表の横幅のサイズ指定もできる。 |
縦幅のサイズを指定する。指定には「pt」、「em」、「in（inch）」等の算術指定の他、「%（パーセンテージ）」の指定もできる。
| <span style="height: 5em; width: 10em; background-color: #87cefa; color: #000000">縦幅サイズ</span> と指定した場合は
縦幅サイズ 高さ5em、幅10emの青色背景色の中に「縦幅サイズ」という文字が表示される。 |
枠線のスタイルを指定する。指定する際には下の「border-width」と必ずセットで使用し、「none」、「solid」、「double」、「groove」、「ridge」、「inset」、「outset」を指定できる。
| 枠線スタイルの見栄えはそれぞれ
none solid double groove ridge inset outset のようになる。また「dotted」は点線、「dashed」は破線を表現できるが、ブラウザによっては対応していないものがあるため注意が必要。 |
枠線のサイズを指定する。指定には「pt」、「em」、「in（inch）」等の他、細線の「thick」、標準線の「medium」、太線の「thin」が指定できる。
| <table style="border-width: thin; border-style: solid"> と指定した場合は
TABLE のようになる。また、「border-top-width」で上線を、「border-bottom-width」で下線を、「border-left-width」で左線を、「border-right-width」で右線をそれぞれ個別で指定できるが、ブラウザによっては対応していないものがあるため注意が必要。 |
枠線の色を指定する。指定は「カラーコード」で指定する。通常は「border-style」と「border-width」とセットで使用する。
| <table style="border-width: medium; border-style: solid; border-color: #0000ff"> と指定した場合は
TABLE のようになる。 |
枠線のスタイル指定である「border-width」、「border-style」、「border-color」をまとめて指定する。
| <table style="border: 1px soild blue">
もちろんすべての指定を行っても、またどれかを省略してもよい。 |
枠線の角を丸める。指定は%（パーセント）で指定する。MozillaとNetscapeのみの対応。
|
<table style="border-width: thin; border-style: solid; -moz-border-radius: 20%"> と指定した場合は
のようになる。 |
文字と枠線との間のサイズを指定する。指定には「pt」、「em」、「in（inch）」等の算術指定を使う。また、「padding-top」で上を、「padding-bottom」で下を、「padding-left」で左を、「padding-right」で右を指定できる。
| <table style="border-width: thin; border-style: solid"> <tr><td><span style="padding: 20pt">文字と枠線の幅</span></td></tr> </table> と指定した場合は
のようになる。指定場所、方法によりインターネットエクスプローラーとNetscapeでは表示方法が異なる場合があるので、注意が必要。 |
表の幅を固定する、または自動的に幅を設定する。通常あまり使い道はないが、例えば文字を縦に並べたい場合などに「width」とセットで使用する。
| <table style="border-width: medium; border-style: solid; table-layout: fixed; width: 30pt"> <tr> <td>表の幅</td><td>固定</td></tr><tr><td>表の幅</td><td>自動</td> </tr> </table> と指定した場合は
のようになる。 |
border-collapse: collapseまたはseparate
表の枠線の種類を「collapse」または「separate」で指定する。
「collapse」または「separate」それぞれのスタイルは
のようになる。これも「border-width」、「border-style」、「border-color」等との組み合わせで使用することが多い。 |
ある範囲のものをページ内のどこへ配置するかを指定する。位置には「絶対位置」と「相対位置」とがあり、それぞれ「position:absolute」、「position:relative」を使って指定する。指定には「pt」、「em」、「in（inch）」、「%（パーセンテージ）」等を使い、「top」、「left」、「right」、「bottom」を基準として指定する。
| <span style="position:relative; left: 10pt; top: 50pt">[本来の位置から左に10ポイント、下に50ポイント]</span> と指定した場合は
[本来の位置から左に10ポイント、下に50ポイント] のようになる。「絶対位置」と「相対位置」の違いは、「絶対位置」がそのページ全体を対象とした位置関係なのに対し、「相対位置」は本来の位置（普通に何も指定しなかった場合の位置）からの位置関係である。そういった性質から、「絶対位置は」ページ全体の大きな位置関係をコントロールする際に利用され、「相対位置」は小さな範囲の位置関係のコントロールに利用される。 |
文字や画像を重ねた場合の重ね順を指定する。指定は数字で指定し、数字の大きいほうが優先する。
| <span style="position: relative; z-index: 2; left: 3em; padding: 1em; background: blue; color: #000000">上側</span> <span style="position: relative; z-index: 1;l eft: -3em; padding: 1em; background: red; color: #000000">下側</span> と指定した場合は 上側 下側 のようになり、赤より大きい数字を指定した青が上に配置される。尚、指定に-（マイナス）数字を使うと表示が崩れる場合があるので注意が必要。 |
文章などの回りこみを指定する。「right」で左側に回りこみ、「left」で右側に回りこみを指定する。回り込ませないなら「none」を指定するが、そもそも「float」指定を使わなければ済みことである。
| <img border="0" src="../top/vaio_ico.gif" style="float: right" width="88" height="31"> <p>リンクアイコンをご利用の際はこちらをお使いください。</p> <img border="0" src="../top/vaio_ico.gif" style="float: left" width="88" height="31"> <p>リンクアイコンをご利用の際はこちらをお使いください。</p> と指定した場合はそれぞれ下のようになる。 |
|
リンクアイコンをご利用の際はこちらをお使いください。 
リンクアイコンをご利用の際はこちらをお使いください。 |
| CopyRight (C) 2000-2013 by T.Shiraishi All right reserved 無断転載禁止／リンクフリー |