スタイルシートの基礎

 ● スタイルシートとは

 スタイルシートは、WEBページ上の「見栄え」を設定するためのタグです。HTML は本来文書内容を記述するものでありました。 見た目を重視したWebページが増えるに従って、HTML に対するデザイン面の要求が高まっていきました。 このように、HTML に対するデザイン面を専門に担当するのがスタイルシートでです。 スタイルシートを適用前のページと、 適用後のページの違いを見てみ比べてみてください。 記述内容が同じでもまったく異なった見栄えになることが実感して頂けると思います。

 ● スタイルの基本的な記述

 スタイルの記述方法には、タグ要素での設定ページ単位での設定スタイルファイルでの設定と3つの種類あります。
  同じ属性が設定されている場合は、例外 を除いて、狭い範囲の設定が優先します。すなわちタグ要素での設定が最優先で、次がページ全体というように優先順位が下がってゆきます。
  • タグ要素でスタイルを設定する
  • HTMLソース ブラウザ画面表示
    <html>
    <head>
      <title>タグ要素でスタイル設定</title>
    </head>
    <body>
      <p  style="color:aqua;background-color:yellow;">スタイル1</p> ・・・A
      <p  style="padding:1em 3em;border:2px dotted red;">style2</p> ・・・B
    </body>
    </html>
     タグ要素でスタイル設定 - Microsoft・・・・
    File Edit  View fAvorite Tool Help 

    スタイル1        ・・・A

    style2      ・・・B
     
    サンプルページ
     この例のようにタグ要素内にスタイルを記述するには、style属性で style="○○:**; △△: ++;" のように指定したいスタイル [ 属性(○○):値(**); ] を、[ " ] で囲み、 [ ; ]で区切って並べて記述します。


  • <style>タグでスタイルを設定する
  • HTMLソース ブラウザ画面表示
    <html><head>
      <title>style タグでスタイル設定</title>
      <style type="text/css">              ・・・@
        <!--
          h2 {color:fuchsia}  
          p {background-color:lime;}
        -->
      </style>
    </head>
    <body>
      <h2>スタイルA</h2>               ・・・A
      style タグ記述で、指定タグのスタイルを設定      ・・・B
    </body></html>
     style タグでスタイル設定 - Microsoft・・・・
    File Edit  View fAvorite Tool Help 

    スタイルA              ・・・A

    style タグ記述で、指定タグのスタイルを設定  ・・・B
     

    サンプルページ
     上述のように<head>〜</hesd>タグ内でスタイルをまとめて記述する場合には、<style type="text/css"><!-- 〜 --></style> タグ内で [ タグ属性 {○○:**; △△: ++;} ] のように記述します。
      幾つかのタグ属性に同じスタイルを適用するときは、[ タグ属性 , タグ属性 { ○○:** ; △△: ++; } ] のように、 タグ属性を、カンマ[ , ]で幾つか並べて記述します。 スタイルを細分して記述する場合には、クラスや、IDで区分します。


  • スタイルシートファイルでスタイルを設定する
  • HTMLソース ブラウザ画面表示
     【HTMLファイル】
    <html><head>
      <title>スタイルファイルで設定</title>
      <link rel="stylesheet" href="sheet.css" type="text/css">   ・・・@
    </head>
    <body>
      <p>スタイルシート</p>                     ・・・A
      <span>スタイルシートファイルでスタイル設定</span>      ・・・B
    </body></html>

     【スタイルシートファイル: [sheet.css] 】              ・・・C
    /* スタイルシート内にコメントを書きたいときは、このように書きます */ ・・・D
    p{color:#339933;text-align: center;letter-spacing:1.0em;}
    span{background-color:lime;direction:rtl;unicode-bidi:bidi-override;}
     スタイルファイルで設定 - Microsoft・・・・
    File Edit  View fAvorite Tool Help 

    スタイルシート
                        ・・・A

    スタイルシートファイルでスタイル設定
                        ・・・B  

    サンプルページ
    スタイルシートファイルは、@の様に、<link> で [ href="□□.css" ] のようにファイルを指定します。またスタイルシート内にコメントを書きたいときは、Dの様に、/* 〜 */ で囲んで記述します。