スタイルシートで書いてみよう！
（初級編３）
初級編３では、実際の効果を見ながら、プロパティと値について説明します。



・テキストに関するプロパティ

    単語間、文字間の間隔を指定します。 
    <DIV STYLE="
    word-spacing: 10pt
    ">word-spacing: 10pt</DIV>
<DIV STYLE="
    letter-spacing: 10pt
    ">letter-spacing: 10pt</DIV>

    結果は以下のようにになります。
    word-spacing: 10pt
    letter-spacing: 10pt
    ★WIN+NN4.5、WIN+IE4それぞれ、正常に機能しないものがあるようです。


    テキストの装飾を指定します。 
    <DIV STYLE="
    text-decoration: underline
    ">text-decoration: underline</DIV>
<DIV STYLE="
    text-decoration: overline
    ">text-decoration: overline</DIV>
<DIV STYLE="
    text-decoration: line-through
    ">text-decoration: line-through</DIV>
<DIV STYLE="
    text-decoration: blink
    ">text-decoration: blink</DIV>

    結果は以下のようにになります。
    text-decoration: underline
    text-decoration: overline
    text-decoration: line-through
    text-decoration: blink
    ★WIN+NN4.5、WIN+IE4それぞれ、正常に機能しないものがあるようです。


    縦位置の配置を指定します。 
    <SPAN STYLE="
    font-size: xx-large
    ">愛</SPAN>
<SPAN STYLE="
    vertical-align: top
    ">vertical-align: top </SPAN>
<SPAN STYLE="
    vertical-align: middle
    ">vertical-align: middle </SPAN>
<SPAN STYLE="
    vertical-align: bottom
    ">vertical-align: bottom </SPAN>

    結果は以下のようにになります。
    愛 vertical-align: top vertical-align: middle vertical-align: bottom
    ★WIN+NN4.5、WIN+IE4それぞれ、正常に機能していないようです。


    大文字、小文字の変換を指定します。 
    <DIV STYLE="
    text-transform: capitalize
    ">text-transform: capitalize ABC</DIV>
<DIV STYLE="
    text-transform: uppercase
    ">text-transform: uppercase ABC</DIV>
<DIV STYLE="
    text-transform: lowercase
    ">text-transform: lowercase ABC</DIV>

    結果は以下のようにになります。
    text-transform: capitalize ABC
    text-transform: uppercase ABC
    text-transform: lowercase ABC
    ★WIN+NN4.5では、正常に機能しないようです。


    横位置の配置を指定します。 
    <DIV STYLE="
    text-align: left
    ">text-align: left</DIV>
<DIV STYLE="
    text-align: right
    ">text-align: right</DIV>
<DIV STYLE="
    text-align: center
    ">text-align: center</DIV>
<DIV STYLE="
    text-align: justify
    ">text-align: justify</DIV>

    結果は以下のようにになります。
    text-align: left
    text-align: right
    text-align: center
    text-align: justify
    ★WIN+NN4.5、WIN+IE4とも、justifyには対応していないようです。


    インデントを指定します。 
    <DIV STYLE="
    text-indent: 3em
    ">text-indent: 3em</DIV>

    結果は以下のようにになります。
    text-indent: 3em
    ★WIN+NN4.5、WIN+IE4で、インデント量がかなり異なるようです。


    行の高さを指定します。 
    <DIV STYLE="
    line-height: 1.2
    ">line-height: 1.2</DIV>

    結果は以下のようにになります。
    line-height: 1.2




・ボックスに関するプロパティ

    マージン、パディング、ボーダーの属性を指定します。 
    <HR>
<DIV STYLE="
    margin-top: 10pt;
    margin-right: 20pt;
    margin-bottom: 30pt;
    margin-left: 40pt;
    padding-top: 10pt;
    padding-right: 20pt;
    padding-bottom: 30pt;
    padding-left: 40pt;
    border-top-width 10pt;
    border-right-width 20pt;
    border-bottom-width 30pt;
    border-left-width 40pt;
    border-color: white green red gray;
    border-style: solid double inset outset;">1:最初の<DIV>タグです。</DIV>
<HR>
<DIV STYLE="
    margin: 10pt 20pt 30pt 40pt;
    padding: 10pt 20pt 30pt 40pt;
    border-width: 10pt 20pt 30pt 40pt;
    border-color: white green red gray;
    border-style: solid double inset outset;">2:これは同じ定義です。</DIV>
<HR>
<DIV STYLE="
    margin: 10pt, 20pt, 30pt, 40pt;
    padding: 10pt,20pt,30pt,40pt;
    border-top: 10pt solid white;
    border-right: 20pt double green;
    border-bottom: 30pt inset red;
    border-left: 40pt outset gray;">3:これも同じ定義です。</DIV>
<HR>
<DIV STYLE="
    margin: 10pt;
    padding: 10pt;
    border: 10pt solid green;">4:これはシンプルです。</DIV>
<HR>

    結果は以下のようにになります。
    1:最初の<DIV>タグです。
    2:これは同じ定義です。
    3:これも同じ定義です。
    4:これはシンプルです。
    ★WIN+NN4.5では正常に機能しないものが多く、WIN+IE4でも正常に機能しないものがあるようです。


    ボーダーの種類を指定します。 
    <DIV STYLE="border: 20pt solid #9999FF">solid</DIV>
<DIV STYLE="border: 20pt double #FF9999">double</DIV>
<DIV STYLE="border: 20pt inset #FF99FF">inset</DIV>
<DIV STYLE="border: 20pt outset #99FF99">outset</DIV>
<DIV STYLE="border: 20pt groove #99FFFF">groove</DIV>
<DIV STYLE="border: 20pt ridge #FFFF99">ridge</DIV>

    結果は以下のようにになります。
    solid
    double
    inset
    outset
    groove
    ridge
    ★WIN+NN4.5とWIN+IE4でデザインが異なるようです。


    高さ、幅を指定します。 
    <DIV STYLE="
    border: 1 solid blue;
    width: 100px; height: 100px;
    ">width: 100px;<BR>height: 100px;</DIV>

    結果は以下のようにになります。
    width: 100px;
    height: 100px;
    ★WIN+NN4.5では、正常に機能しないようです。


    左右の配置を指定します。 
    <IMG STYLE="float: left" SRC="hana.jpg">
float: leftにすると、<BR>
左配置となります。<BR>
テキストは右側に<BR>
回り込みます。<BR>
<SPAN STYLE="clear: left">
clearで回り込みをクリアします。</SPAN><BR>
<HR>
<IMG STYLE="float: right" SRC="hana.jpg">
float: rightにすると、<BR>
右配置となります。<BR>
テキストは左側に<BR>
回り込みます。<BR>
<SPAN STYLE="clear: right">
clearで回り込みをクリアします。</SAPN><BR>

    結果は以下のようにになります。
    float: leftにすると、
    左配置となります。
    テキストは右側に
    回り込みます。
    clearで回り込みをクリアします。
    float: rightにすると、
    右配置となります。
    テキストは左側に
    回り込みます。
    clearで回り込みをクリアします。
    ★WIN+NN4.5では、画像がどこかに飛んで行ってしまいました(^^;




ホームページへ戻る