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



・インラインにおけるスタイル情報変更

    初級編1にあった内容です。
    <P>スタイルシートは、
    <SPAN STYLE="font-size:large;color:green">デザインが命</SPAN>
    です。</P>
    


    結果は以下のようにになります。

    スタイルシートは、 デザインが命 です。

    ★WIN+NN4.5では、<TABLE>タグの中で<P>タグを取ると、正常に機能しないようです。




・リンク文字の指定
    これまで<BODY>で指定していたリンクの属性は、<A>タグの擬似クラスとして指定します。これにより、訪問していないリンク、訪問したリンク、選択されたリンクに対して色だけでなく、さまざまなスタイルの指定が可能となりました。
    <STYLE TYPE="text/css">
    <!--
    A:link { color: red; font-style: italic; } /* 訪問していないリンク */
    A:visited { color: blue; font-size: small; } /* 訪問したリンク */
    A:active { color: lime } /* 選択されたリンク */
    -->
    </STYLE>
    <A HREF="hk_style21.htm">未訪問時イタリック</A>
    


    結果は以下のようにになります。

    未訪問時イタリック
    ★WIN+NN4.5では、正常に機能しないようです。




・フォントに関するプロパティ

    フォントファミリを指定します。
    <DIV STYLE="
        font-family: 'MS 明朝'
        ">font-family: 'MS明朝'</DIV>
    

    結果は以下のようにになります。
    font-family: 'MS明朝'
    ★WIN+NN4.5では、正常に機能しないようです。


    フォントの形状を指定します。
    <DIV STYLE="
        font-style: normal
        ">font-style: normal</DIV>
    <DIV STYLE="
        font-style: italic
        ">font-style: italic</DIV>
    <DIV STYLE="
        font-variant: normal
        ">font-variant: normal</DIV>
    <DIV STYLE="
        font-variant: small-caps
        ">font-variant: small-caps</DIV>
    <DIV STYLE="
        font-weight: normal
        ">font-weight: normal</DIV>
    <DIV STYLE="
        font-weight: bold
        ">font-weight: bold</DIV>
    

    結果は以下のようにになります。
    font-style: normal
    font-style: italic
    font-variant: normal
    font-variant: small-caps
    font-weight: normal
    font-weight: bold
    ★WIN+NN4.5では、font-variantには対応していないようです。


    フォントのサイズを指定します。
    <DIV STYLE="
        font-size: xx-small
        ">font-size: xx-small</DIV>
    <DIV STYLE="
        font-size: x-small
        ">font-size: x-small</DIV>
    <DIV STYLE="
        font-size: small
        ">font-size: small</DIV>
    <DIV STYLE="
        font-size: medium
        ">font-size: medium</DIV>
    <DIV STYLE="
        font-size: large
        ">font-size: large</DIV>
    <DIV STYLE="
        font-size: x-large
        ">font-size: x-large</DIV>
    <DIV STYLE="
        font-size: xx-large
        ">font-size: xx-large</DIV>
    

    結果は以下のようにになります。
    font-size: xx-small
    font-size: x-small
    font-size: small
    font-size: medium
    font-size: large
    font-size: x-large
    font-size: xx-large


    フォントに関するスタイルをまとめて指定します。
    <DIV STYLE="
        font: normal small-caps 120%/120% fantasy
        ">a shorthand property</DIV>
    

    結果は以下のようにになります。
    a shorthand property
    ★WIN+NN4.5では、正常に機能しないようです。




・色と背景に関するプロパティ

    <SPAN STYLE="
        color: #006666
        ">color: #006666</SPAN><BR>
    <SPAN STYLE="
        background-color: #00FFFF
        ">background-color: #00FFFF</SPAN><BR>
    <SPAN STYLE="
        color: #FFFFFF;
        font-size: xx-large;
        background-image: url(hana.jpg);
        ">花です。</SPAN><BR>
    


    結果は以下のようにになります。

    color: #006666
    background-color: #00FFFF
    花です。
    ★WIN+NN4.5では、正常に機能しないものがあるようです。





ホームページへ戻る