スタイルシートの記述

 ● スタイルシートの記述補助法あれこれ

　前述のスタイルシートの基本３記述には、幾つかの補助的な記述があります。ここではこれらを紹介しておきましょう。
  • 特定の範囲内でスタイルを設定する
    • スタイルに class{□.★}や id{□#◆}という識別子を付けて 特定の範囲にスタイルを設定することが出来ます
    classは複数要素にも同じものを使えますが、IDは複数の要素に同じものを使う事は出来ません
    HTMLソース ブラウザ画面表示
    <!DOCTYPE html>
    <html><head>
      <meta charset="UTF-8">
      <title>特定の範囲内でスタイルを設定</title>
      <style>
         .back-ki {background-color:yellow;} 　　　　･･･①
         #back-momo {background-color:pink;}　　　･･･②
          li.ao {color:blue}　　　　　　　　　　　　　･･･④
          li#aka {color:red;} 　　　　　　　　　　　　 ･･･⑤
      </style>
    </head>
    <body>
      <h3 class="back-ki">背景黄色</h3>　　　　　　･･･①
      <ul><li class="ao">このリストは青　　　　　　･･･④
        <li id="aka">このリストは赤　　　　　　　　　･･･⑤
        <li>このリストは規定色</ul> 　　　　　　　　　･･･⑥
      <h3 id="back-momo">背景桃色</h3> 　　　　　･･･②
      <h3>背景規定色</h3>　　　　　　　　　　　　　･･･③
    </body></html>
     特定の範囲内でスタイルを設定 - Microsoft････
    File　Edit　View　fAvorite　Tool　Help　

    背景黄色　　　　　　　　　　　　･･･①
    • このリストは青 　　　　　　　･･･④
    • このリストは赤 　　　　　　　･･･⑤
    • このリストは規定色 　　　　　･･･⑥
    背景桃色　　　　　　　　　　　　･･･②

    背景規定色 　　　　　　　　　　･･･③
    　
    サンプルページ

  • ＩＤでスタイルを細分設定する
    • 同じタグ要素にＩＤを付けてスタイルに細分設定することが出来ます
    HTMLソース ブラウザ画面表示
    <!DOCTYPE html>
    <html><head>
      <meta charset="UTF-8">
      <title>ＩＤでスタイルを細分設定</title>
      <style>
          #s1{color:aqua;background-color:yellow;}　　　　　　･･･②
          p#s2{padding:1em 3em;border:2px dotted red;} 　　　･･･③
        </style>
    </head>
    <body>
    　 <p  id="s1">スタイル１</p>　　　　　　　　　　　　　　･･･②
    　 <p  id="s2">style２</p>　　　　　　　　　　　　　　　　･･･③
    </body></html>
     ＩＤでスタイルを細分設定 - Microsoft････
    File　Edit　View　fAvorite　Tool　Help　

    スタイル１　　　　　　　　･･･②

    style２　　　　　　　･･･③
    　
    サンプルページ

  • クラスでスタイルを細分設定する
    • クラス名を付けてスタイルを定義したり、同じタグ要素を細分設定することが出来ます。
    [ .** ] のように記述すれば全てのタグに、[ タグ要素 .** ] のように記述すればそのタグ要素に対して、スタイルを適用できます。
    また、クラスを合わせて書くと重複した指定(①+②)ができます。
    HTMLソース ブラウザ画面表示
    <!DOCTYPE html>
    <html><head>
      <meta charset="UTF-8">
      <title>クラスでスタイルを細分設定</title>
      <style type="text/css">
          .s1{font-style:italic;padding-left:2em;}　　　　　　　　　･･･①
          p.s2{color:aqua;background-color:yellow;}  　　　　　　･･･②
      </style> </head>
    <body>
    　 <div  class="s1">スタイルＤ</div>  　　　　　　　　　　　･･･①
    　 <p  class="s2">スタイル２</p>　　　　　　　　　　　　　･･･②
    　 <p  class="s1 s2">スタイルＤ+２</p>　　　　　　　　　　･･･①+②
    </body></html>
     クラスでスタイルを細分設定 - Microsoft････
    File　Edit　View　fAvorite　Tool　Help　
    スタイルＤ　　　　　　　　･･･①

    スタイル２　　　　　　　　　　･･･②

    スタイルＤ+２ 　　　　　　･･･①+②
    　
    サンプルページ

  • 状況に応じてスタイルを設定
    • 擬似クラス、擬似要素の状況に応じてスタイルを設定することが出来ます。 また⑦のように細分クラスを付けることも出来ます。
    HTMLソース ブラウザ画面表示
    <!DOCTYPE html>
    <html><head>
      <meta charset="UTF-8">
    <title>状況に応じてスタイルを設定</title>
      <style type="text/css">
         h3:first-letter{padding-left:20pt;font-size:18pt;}　　　　･･･①
         div:first-line {background-color:yellow;}　　　　　　　･･･②
         a:link {background-color:yellow;color:blue;}　　　　　･･･③
         a:visited {background-color:lime;color:maroon;}　　　･･･④
         a:active {color:red;}  　　　　　　　　　　　　　　　　･･･⑤
         a:hover {background-color:aqua;color:fuchsia;} 　　　･･･⑥
         a.a7:hover {background-color:silver;} 　　　　　　　　･･･⑦
      </style> </head>
    <body>
      <h3>擬似クラス・要素に適用</h3>　　　　　　　　　　　　･･･①
      <div>擬似クラスや擬似要素については状況に応じて<br>　　･･･②
      スタイルが適用されるようになります</div><br>
      リンクの例です<br>
      <a href="s11-inline.html">タグ要素</a>の例<br> 　　　　　･･･③
      <a href="s12-tag.html">スタイルタグ</a>の例<br>　　　　 ･･･④
      <a href="s13-sheet.html">スタイルファイル</a>の例<br>　 ･･･⑥
      <a class="a7" href="s23-hani.html">スタイル範囲</a><br> ･･･⑦
    </body></html>
     状況に応じてスタイルを設定 - Microsoft････
    File　Edit　View　fAvorite　Tool　Help　

    　　 擬似クラス・要素に適用　　　･･･①

    擬似クラスや擬似要素については状況に応じて ･･･②
    スタイルが適用されるようになります

    　　 リンクの例です
    　　 タグ要素の例 　　　　　　　　　　　　　･･･③
    　　 スタイルタグの例 　　　　　　　　　　　･･･④
    　　 スタイルファイルの例 　　　　　　　　　･･･⑥
    　　 スタイル範囲 　　　　　　　　　　　　　･･･⑦
    　

    サンプルページ
    　＊擬似(定義済み)クラス/ :link　:visited　:active　:hover　　 擬似要素/ :first-letter　:first-line

  • スタイルを最優先に設定する
    • 最優先させたいスタイルに !important をつけてインラインスタイルより優先させることが出来ます　　 優先変更前
    HTMLソース ブラウザ画面表示
    <!DOCTYPE html>
    <html><head>
      <meta charset="UTF-8">
      <title>スタイルを最優先に設定</title>
      <style>
          p{color:#eeccff;background-color:#33bb99 !important;}　　　　･･･①
      </style>
     </head>
    <body>
    　 <p  style="color:aqua;background-color:yellow;">スタイル１</p> ･･･②
    　 <p  style="padding:1em 3em;border:2px dotted red;">style２</p> ･･･③
    </body></html>
     スタイルを最優先に設定 - Microsoft････
    File　Edit　View　fAvorite　Tool　Help　

    スタイル１　　　　　　　　･･･②

    style２ 　　　　　　　･･･③
    　
    サンプルページ

  • 複数のスタイルシートを読み込む
    • スタイルシートに他のスタイルシートを、@import で読み込んで利用出来ます。　(@importは他のスタイルより前に置きます)
    HTMLソース ブラウザ画面表示
    <!DOCTYPE html>
    <html><head>
      <meta charset="UTF-8">
      <title>スタイルファイルで設定</title>
      <link rel="stylesheet"
    　　 href="sheet.css" type="text/css">     　　 ･･･①
    </head>
    <body>
    　 <div>スタイルＷ</div>
    　 <span>複数のスタイルシートを読み込む</span>
    </body>
    </html>     		　【ファイル: [sheet.css] 】 　　　　　　　　　　　･･･①=②+③+α
    @import url("file01.css");
    @import "file02.css";
    body {background-color:lightgreen;}


    　【ファイル: [file01.css] 】 　　　　　　　　　　　　　　　･･･②
    div{color:#339933;text-align: center;letter-spacing:1.0em;}

    　【ファイル: [file02.css] 】 　　　　　　　　　　　　　　　･･･③
    span{background-color:lime;direction:rtl;
    unicode-bidi:bidi-override;}

  • タグの相関関係でスタイルを設定
    • タグの該当関係にあるものに対してだけスタイルを設定することが出来ます
    要素の間にカンマ「 , 」があると両要素にスタイルを定義したことになり、意味が異なってきます。
    HTMLソース ブラウザ画面表示
    <!DOCTYPE html>
    <html><head>
      <meta charset="UTF-8">
    <title>タグの相関関係でスタイルを設定</title>
      <style>
         /* 特定の親子関係のある要素タグにスタイルを設定 */
         p b {background-color:purple;color:lime;}　　　　　　･･･①
        </style>
    </head>
    <body>
      <p>この<b>太字は p b の関係</b>から適用され、</p> 　･･･①
      <div>この<b>太字は div b の関係</b>のため不適用</div>
    </body></html>
     親子関係タグにスタイル設定 - Microsoft････
    File　Edit　View　fAvorite　Tool　Help　

    この太字は p b の関係から適用され、　　･･･①

    この太字は div b の関係のため不適用
    サンプルページ

  • 具体的なスタイル記述タグ
    • タグの具体的な記述は下記のサイト等も参考にして下さい。
    １．とほほのスタイルシート入門　　　 他のタグ等も含めて、簡潔に紹介されています。
    ２．スタイルシートリファレンス　　　 スタイルシートをリファレンス一覧で紹介されています。
    ３．スタイルシート例文辞典　　　　　 多くのスタイルシート例文をタグ記述例と実行例で紹介されています。
    ４．TAG StyleSheet　　　　　　　　　 スタイルシートタグを一覧で紹介されています。