CSSの設定機能

設定機能
1. 表示位置、サイズ
  <DIV>は区画（範囲）を示すタグです。この DIV にスタイルを指定し、top：上からの距離、left:左からの距離、width:幅を指定することができます。これで、指定したレイアウトで表示ができるようになります。
  
  <DIV STYLE="position:absolute; top:50; left:70; width:200;" >
  スタイルシートは指定した範囲に対し、<BR>
  表示の先頭位置、表示幅を指定することができます。
  </DIV>
  
  このように表示されます。
2. フォント、文字間、行間
  　使用するフォント、サイズ、スタイル、文字間や行間　を設定します。pxはピクセル単位の指定、150%は文字の高さに対する割合を指定します。
  
  < DIVSTYLE="font-family: 'ＭＳゴシック'; font-size: 16pt;
  　　font-style: italic; letter-spacing: 5px; line-height:150%" >
  スタイルシートは<BR>
  フォントやサイズ、スタイルを指定できます。
  </DIV>
  
  このように表示されます。
3. 境界線、パディング、背景色
  　境界線の太さ、線種、境界から表示文字までの間隔、背景色などを指定します。
  
  <DIV STYLE="border:2px solid gray; padding:3px; ;margin: 5px ;background-color: #c0c0c0;" >
  スタイルシートは指定した範囲に対し、<BR>
  表示の先頭位置、表示幅を指定することができます。
  </DIV>
  
  このように表示されます。
4. 半透明表示
  　スタイルシートを利用すると、複数のオブジェクトを重ねて表示できます。このとき、filter で、背景に対する透明度を指定できます。広い範囲に指定すると、「重い」処理になります。
```
<HEAD>
 <TITLE>filter</TITLE>
</HEAD>
<BODY  BACKGROUND="tiyogami.jpg">
  <DIV STYLE="filter:alpha(opacity=50);background-color:#E0C0C0;
        color:#606090;width:320px;padding:10px;">
   透明度（opacity）を指定して表示します
  </DIV>
</BODY>
```
  このように表示されます。
5. 表への適用例
  　表形式は便利な形式ですが、指定をしないと罫線と文字がくっついてしまいます。スタイルで、
  　td{ font-size:11pt;padding:5px; }
  と、タグ TD に対し、padding を指定すると、適度な間隔ができます。また、テーブルの幅も指定しないと、自動調整されるため、複数の表で出力する場合、幅が変化します。
  　table{width="600"}
  で、テーブルの幅を指定すると、すべてのテーブルの幅が揃います。
```
<HTML><HEAD>
<TITLE>message</TITLE>
<STYLE>


</STYLE></HEAD>
<BODY><h3>伊藤研究室ゼミ生名簿</h3><BR>
<TABLE BORDER>
<TR BGCOLOR="#CCCCFF"><TD>学籍番号）</TD><TD>h303xx<BR></TD></TR>
<TR><TD WIDTH="120">名前（よみ）</TD><TD>いしい...<BR></TD></TR>
<TR><TD>名前（漢字）</TD><TD>石井<BR></TD></TR>
<TR><TD>住所</TD><TD>豊田市</TD></TR>
<TR><TD>メール</TD><TD>unl_lbry@domo.ne.jp</TD></TR>
<TR><TD>携帯番号</TD><TD>090-999-4923</TD></TR>
<TR><TD>自宅電話番号　</TD><TD>0565-</TD></TR>
<TR><TD>一言メモ　</TD><TD>飛び出す絵本をパソコンで実現したい</TD></TR>
<TR><TD>卒研テーマ　</TD><TD>３D絵本システムの開発</TD></TR>
</TABLE>
<BR><BR>
<TABLE BORDER>
<TR BGCOLOR="#CCCCFF"><TD>学籍番号）</TD><TD>h304xx<BR></TD></TR>
<TR><TD WIDTH="120">名前（よみ）</TD><TD>こにし...<BR></TD></TR>
<TR><TD>名前（漢字）</TD><TD>小西　基之<BR></TD></TR>
<TR><TD>住所</TD><TD>名古屋市守山区八反....</TD></TR>
<TR><TD>メール</TD><TD>doshi@yoo.co.jp</TD></TR>
<TR><TD>携帯番号</TD><TD>0906077999</TD></TR>
<TR><TD>自宅電話番号　</TD><TD>0527999999</TD></TR>
<TR><TD>一言メモ　</TD><TD>卒論までに単位はとっておこう</TD></TR>
<TR><TD>卒研テーマ　</TD><TD>I2Cによる計測システム</TD></TR>
</TABLE>
```
  　この表はここから見ることができます。

設定機能

表示位置、サイズ

フォント、文字間、行間

境界線、パディング、背景色

半透明表示

表への適用例