スタイル設定シリーズ 第ｎ回

スタイルシートの記述

１．スタイルシート設定の場所

　
  1. リンキングスタイル方式：
    外部に別のフアイル（拡張子が.css ）を作り、<head>〜</head>内から「<LINK rel=･･･」で読み込み、そのコマンドを実行する法。（１つのフアイル（拡張子が.css ）で複数のページにスタイルが設定でき、サイト全体に統一感が得られます。）

  2. エンベデイングスタイル方式：(埋め込み方式)
    html文書の<head>〜</head> 内にスタイルを埋め込む方法で、ソースがすぐ見られるので分かり易く改変に便利。 「１．のフアイル」を作らない時とか、「１．との差分」を記述するとか、状況次第で選択することになります。）
  3. インラインスタイル方式
    <body>〜</body>内で使用されている特定のタグ内に直接記述する方法。（スタイルが記述された部分にのみ有効です。滅多に無いような一時的設定に使用します。しかし、行内の局所にを対象にした <span> タグでは頻繁に使用されます。）

２．スタイルシートの記述法

    スタイルシート(以下スタイル)の記述は、用途や状況によって属性: 値;の組み合わせが幾通りのもなります。

  1. リンキングスタイルの記述：
    先ず「要素」を「セレクタ」に採り、下記のとおり記述します。
    （ここの例では、p　div　が「セレクタ」です。なお、設定項目の属性：値；は複数でも単数でも構えません。）

    p 　{ 属性: 値; 属性: 値; 属性: 値; 属性: 値; }
    div { 属性: 値; } 　

  2. エンベデイングスタイルの記述：（埋め込み方式）
    先ず「要素」を「セレクタ」に採ります。記述法は上のリンキングと同じです。
    （ここの例では、h1　ul　が「セレクタ」です。なお、設定項目の属性：値；は複数でも単数でも構えません。）

    3. <style type="text/css">
    <!--
    h1 { 属性: 値; 属性: 値; 属性: 値; 属性: 値; }
    ul { 属性: 値; }
    -->
    </style>
    注）閉じ括弧[ } ]の前の[ ; ]セミコロンは付けなくても差し支えありません。また半角スペースも不要 ですが、私は両方共用いています。特にセミコロンは、属性、値の場所を変えたときセットにしておかないと記入漏れをきたす 恐れがあるからです。順序の整理で位置の移動を行うことは度々生じます。

  3. インラインスタイル記述：(style 属性による設定) 直接タグにスタイルを設定する方法です。

    4. 例えばｐタグの場合：
    <p style="属性: 値; 属性: 値; 属性: 値;"> 段落文章 </p>
    属性コロン半角スペース値セミコロン半角スペース属性コロン半角スペース値セミコロン半角スペース

    または、<p style="属性:値; 属性:値; 属性:値;"> 段落文章 </p>
    属性コロン値セミコロン半角スペース属性コロン値セミコロン半角スペースでも構えません。

    例えば div タグの場合：
    <div style="属性: 値; 属性: 値; 属性: 値;"> div ブロック内 </div>

    例えば span タグの場合：
    <span style="属性: 値; 属性: 値; 属性: 値;"> 文字列 </span>
    のように記述します。

３．エンベデイング方式の記述例(<head> 〜 </head>)

スタイルシートを宣言する

スタイルシート宣言 <style type="text/css"> から始めます。
<!-- はコメントをあらわし、--> までの区間はブラウザに表示(IEとかNNといったブラウザで表示される画面のことです。)されません。ただし、その中にあるスタイル記述は同じ要素名を持つ「body内のタグ」によって「ブラウザ」に反映されます。
終了形 </style> タグを伴います。

<!-- 〜 --> 内ので記述

見易くするために★色★、★文字色★などの「値」と称される部分に 「実際の数値や用語」を入れました。 
     <style type="text/css">
     <!--
     A:link    { color: red; }           カラーは赤色
     A:visited { color: #ff0000; } 　　　これも赤色
     A:hover   { color: #f00; }　　　　　こう書いても赤色
     A:active  { color: green; } 　　　　カラーは緑色

   BODY  {
    color: #0f0;   　　　                これも緑色
    background-color: #00f;              これは青色です。
    margin-left: 10px;     ブラウザの画面左端から10px離してbodｙ画面に
    margin-right: 10px;　同ブラウザの画面右端から10px離してbodｙ画面に　　　
    margin-top: 5px; 　　同ブラウザの画面上端から5px離してbodｙ画面に
    margin-bottom: 5px;　同ブラウザの画面下端から5px離してbodｙ画面に
    line-height: 140%;   同ブラウザのデホルトの標準行間隔の1.4倍
         }
    -->
    </STYLE>
    </HEAD>
    <BODY
    background=" ★背景画像URL★"
    bgcolor="#00f★背景色★" 
    text="#00f   ★文字色★" 
    link="       ★リンク色★"
    vlink="      ★リンク色★"
    alink="      ★リンク色★">

</BODY>

スタイルシートの構成と使用する記号について

    　　A:link { color: red; }
    　　A:visited { color: #ff0000; }
    　　A:hover { color: #f00; }
    　　A:active { color: green; }

    上記の４項目はリンク付けしてある文字列（テキスト）に対して、上から未リンク、リンク済み、 マウスを載せた時、リンク中状態などの状況に応じて色を変化さるものです。
    「 A:link 」のように「 : 」で繋がった形のものは滅多に見かけません。アンカータグ<a>に 「擬似クラス(要素の状況やタイミングに応じてスタイルを設定)」と呼ばれる「link 」「visited 」など がくっついたものですが「 { 」「 } 」が夫々に付いていますので、逆にいうと夫々独立したものです。 （このようにタグに「 : 」を付けて「特定の条件」を加味したものに、行頭１文字だけを対象にする 「擬似要素」と呼ばれるものもあります。）
    ４項目を見比べると、なんとなく共通点が感じとれるかと思います。

  1. 記述上の約束ごと。
    (例題に挙げた上記「A:link」等は特殊な形態をした要素ですが、全体を要素と思ってください。)
    2. １番目
    「セレクタ」と呼ばれ「要素名」をそのまま、記述します。
    ２番目
    「 { 」の括弧始めから次に現れる「 } 」括弧閉ず迄が、１箇のセレクタの記述内容です。 セレクタはこの記述内容を｢同じ要素名」を持つ <要素> タグに伝え、タグはそれを実行する 図式になっています。言い換えると <要素> タグは、いちいち手元で受け付けるとソースが汚く なるので「アンケート箱」を <head> 内に置いたようなもので、記述が正しければすべて実行 されます。
    ３番目
    「 属性名 」は「セレクタ」した要素に対し、適用可能な「属性名」をそのまま記述し、必ずコロン「 : 」で区切ります。
    ４番目
    「 値 」属性に対して適用可能な名称、数値等を記述。必ずセミコロン「 ; 」で区切り１つの設定は終わり、次に移ります。
    （注意１：一番最後の「 ; 」は付けても付けなくても構いませんが、付ける習慣の方がミスを防げます。）
    ５番目
    「 } 」括弧を閉じ「１つのセレクタ」の記述を終了します。
    （注意２：「 [ 」「 : 」「 ; 」「 } 」の４っつのどれが欠けても、正常に表示されなくなります。）

  2. 「スタイル」の設定は、各要素名の直後に｢ { 」と｢ } 」で囲んだ部分、これを「宣言部」と 言いますが、ここに記述します。宣言部は「属性：」と「値；」を記述しますが、複数あってもかまい ません。属性の後にコロン、値の後にセミコロンを付ければ何個でも繋げることができます。


  3. スタイルシート[「 <head> 部」記述様式

    4. セレクタ｛ 属性名:値; 属性名:値; 属性名:値; 属性名:値; 属性名:値; ｝
    選択部　｛←　ー　ー　ー　ー　ー 宣言部 ー　ー　ー　ー　ー　ー　→｝

本ページの記述例

このページでも「 セレクタ h3 」に下記のとおり「スタイル」して使用しています。
H3 { font-size: 14pt; font-weight: bolder; text-align: center; height: 25px; background-color: #fffaf0; } 

サンプルに挙げた「body」には７項目の「スタイル」が設定してあります。



    BODY  {
           color: #0f0; 
           background-color: #00f;
           margin-left: 10px;
           margin-right: 10px;
           margin-top: 5px;
           margin-bottom: 5px;
           line-height: 140%;
          }

記述項目が、サンプルのため非常に少ないですが（多くても同じことです。このページのソースを ご覧ください。９０個のスタイルが設定してあります。それは次に述べるコピー・貼り付けにより、 いとも簡単だからです。）、これ全部をコピーした上、「 body 」を次 に示す「各要素」のセレクタ形態に置き換えるだけで、「各要素」のスタイルシート記述となります。勿論「属性」の増減「値」の変更等必要に応じて随意です。

たとえば、段落タグの「 p 」や見出し文字「 h1 」同類の「 h2〜6 」また段落 ｐ の兄弟のような 「 div 」それにリスト関係の「 ol 」等、またはラインの「 hr 」と言った具合です。

ここでは、１つの例として「 div 」を増やして「値」を替えてみました。すると、下記になります。 

   BODY   {
           color: #0f0;
           background-color: #00f;
           margin-left: 10px; 
           margin-right: 10px;
           margin-top: 5px;
           margin-bottom: 5px;
           line-height: 140%;
           }

  div     {
           color: #fffff7; 
           background-color: white;
           margin-left: 25px; 
           margin-right: 25px;
           margin-top: 3px; 
           margin-bottom: 3px;
           line-height: 140%;
          }

実は「div 」の記述でセミコロン「 ; 」の前の数値やカラー名、カラー＃などが、「body」と 全く同じなら新たに「div 」項目を設定する必要は全くありません。その理由は 「要素の親子関係」という問題で「body」タグは「html,head部使用のtitle,meta,link等以外の全てのタグ」の親要素であるからです。
そうしてhtml文法では親子関係が成立するタグ間にあっては、親の持つ性質は子に 「継承」される決まりになっているからです。

「div」にある「line-height: 140%;」は「body」と同じなので不用です、記述しなくても実行されます。 また、記述してあっても害にはなりません。

ソース上での文字の並べ方

左から余白をとって「divセレクタ」があり、少し間をとって２番目の「 { 」に繋がっています。次は 改行されてから属性colorになっています。
このように次が空白になっているとか、改行されているとかですが一向差し支えありません。 このページのソースを開いて color の ｃ 左から半角設定で戻してください。１段繰り上が ると必ず「 { 」に密着するはずです。（いや、それどころかhtmlソースでは空白は問題にしないようです。）

html記述上では半角スペースをいくら繰り返しても最初の１回しか認めないのです。（確かブラウザ上で もそのような問題がありました。）ですから、半角スペースで空きすぎていると思っても半角１つのスペ ースと全く同等になり「文法が成立する」のです。
ちなみに、「 { 」の次は半角スペース「 : 」の後に半角スペース「 ; 」と「} 」間にの後に半角スペースを入れた方が良いとされています。しかし、くっついていても同じに表現されるのは「半角スペース」は繋がっているということになります。

というわけで、いくらでも自由にそうして見易く並べることができるのです。(テストする場合 <br> は無視して考えてください。 <br> は当画面編集上付けてるものですから)

（補記）
「color:」や「background-color:」は「属性」ですが、color のように「 - 」が無いもや「 - 」を ２つも付けた「text-underline-position」などがあります。これは、きめ細かな定義であって「 - 」で繋がる全体が「属性名」です。

４．「属性」について

属性の一覧表を作成してあります。全てではありませんが⇒「こちら」を ご覧ください。
また⇒「こちら」のページのソースには１０３箇の属性を設定してあります。 (同じ内容ならば、親要素の「 body セレクタ」の仕様を適用するように整理し、短く纏めることになり ますが、説明はこの方が分かり易いのではないでしょうか。)

「一覧表」で漏れた部分も入っていますのでご参照ください。 「table」は⇒「こちら」の一覧表をご覧ください。「フォント関係」 は「 body セレクタ」に「スタイル」したものを適用しています。

以上で９５％位の「属性」は使用すみと思います。ですから、スタイルシートは「htmlタグ」に添え書き する部分なのです。添え書きの「テクニック」そのものは実際に入力や変更を実行すれば簡単に身に付き ます。ただ、或る「属性」を使用し「値」を入力・変更を行った「ケース」と「結果の仕上がり」即ち 「こうしたら、こうなった」はを覚えることで自在な、そうしてイメージどおりの編集が可能になります。 ここまでくると、問題点は原点に戻り、いろいろな「要素の使用法の学習」ということになります。

トップへ戻る     いろいろな関数目次へ戻る
値についてへ戻る     class属性とid属性へ進む

inserted by FC2 system