「属性値」について

実例に就いては本ページのソースをご覧ください。スタイル設定項目毎に「属性」の説明が記載してあります。
カラー表示を除いた「値」が約180個近くあります。今後できる限り整理した上、順次本ページに記載したいと思っています。

サイトを訪問した際、先ず目に映るものに「装飾された文字」、「画像とその配置」、「背景色」、「スクロールバーの色」及び「リンク文字列の変化」等の５つが挙げられると思います。

先ず手始めにhtmlソースの「head」部に記述される「スクロ−ルバー」から考えてみます。

スクロールバーに色を付ける

外枠外側上と左、同下と右、外枠内側上と左、同下と右、▲と▼の色、バーとボタンの表面色等個別に設定します。

リンク文字列に、状況に応じて色の変化を与えることも便利な機能の一つです。

特殊なセレクタ「a:擬似クラス名」に就いて

●擬似クラス
セレクタには、「擬似クラス」と「擬似要素」というものもあります。
擬似クラスは、要素の状況やタイミングに対しスタイルを設定します。 

       color:　　　　　　リンク文字列のカラー（カラー名orコード#、例えばred)
       background: 　　　リンク文字列の背景色（カラー名orコード#、例えば#00ff00)
       font-style: 　　　斜体(italic)
       text-decoration:　ナシ(none)
       text-decoration:　下線（underline）

特殊なセレクタ「 要素名:擬似要素名 」に就いて

●擬似要素

「特定な箇所」といいば「インデント」も特定な箇所といえなくもないですが。

インデント（字下げ）の設定

「ブロックレベルタグ」は別名「段落タグ」と呼ばれる程段落を形成するものが多いのです、
その書き出し部分で、洋の東西を問わず「字下げ」の習慣が定着しています。（私のHPでは実施していませんが）その際、使用する便利な属性が「text-indent」です。

インライン方式で body 内タグに直接設定する。

<要素>タグのフォント・サイズ設定値に合わせると丁度１字下がります。
<div style="text-indent: 12pt">内容</div> （12ptは絶対サイズです。）
相対サイズ「em」を使い「4」を当てはめた場合です。
<div style="text-indent: 4em">Abcdefghi----</div>これで４字分字下げされます。

エンベデイング方式で head 部セレクタに設定する。

p { text-indent: 12pt; }
div { text-indent: 1em; }
[値]には後述の「相対サイズ」「絶対サイズ」等の数値を使用します。

実例：この項、小見出しは「２字分字下げ」してあります。上の小見出しと比較してください。
記述は：　<h3 style="text-indent: 2em;">内容</h3>　です。

スタイルシートの記述法

関連用語と設定の説明

「要素」とは

文書を構成する各部分の名称です。見出し、段落、リスト、テーブル、ライン、イメージ・・・などがあります。
夫々 Hn、p、リスト関係では ol、ul、li、dl、dt、dd 、テーブル関係では table、caption、tr、td、 th 、ラインは hr 、画像は img のように規定されています。
「タグ」とは

上の「要素名」を、小なり括弧 < と大なり括弧 > で囲んだ形のものを言います。
<要素> タグはメモ帳のような最低機能のワープロで作る「普遍性のある文字列」（テキストともいう）に「この部分は、こうします」と「マークアップ」する「タグ」で < と > はその区切りの役目をしています。

上述のとおり先ず要素とタグは違うといことです。理屈っぽいと言われましょうが、例えば <div> タグは、殆どのタグがそうであるように終止形 </div> タグを伴って出現します。開始タグも終了タグもタグです。<p> は終止形省略可能なタグもあり、また <img> タグのように終止形を伴わないタグもあります。（<img> には「内容記述」がありません。）また、 <br> は今まで無かったのですが、新しいXHTMLでは <br/> の形で付けるようです。）

「 p 」のことを「 p 」タグ」と言うように、要素のことをタグという人もいますが間違いです。ここでも要素は要素であり、タグはタグであるということです。

「セレクタ」とは
スタイルの設定対象のことです。
「タグにスタイルを設定」するには
「タグ」を「セレクタ」にします。つまり要素の形にします。
「セレクタ」に数種類のスタイルが同時に設定できます。
｛属性：値；属性：値；属性：値；｝のように、｛　｝内に「属性」「コロン」「値」「セミコロン」の形で繋げればいくらでも設定できます
複数の「セレクタ」に対して、同じスタイルをまとめて設定したいときには、
「セレクタ」を[ , ]カンマで区切って並べその「セレクタ群」に対して同一のスタイルを設定します。
body 内の「タグ」に対してはこのような器用なことはできません。スタイルシートの長所の一つです。
「属性」とは
「セレクタ」の何に対してスタイルを設定するかを示す部分です。
「セレクタ」という用語は head 部記述の専用語であるため、body 部の html 記述では「タグ」の何に対してスタイルを設定するかを示す部分。ということになります。どちらか一方のみ用いても全く同じことを指していますので、こだわる必要はないのですが。
属性は大文字小文字を区別（＝識別）しません。しかし、XHTML1,1では英数小文字に統一されますので、今から小文字使用を薦めします。（ただし、フアイル名、フォント名、URLは実物どおりの記述になります。）
「値」とは
値は属性に対してどのようなスタイルを設定するかを示す部分です。
属性ごとに使用する値が決められています。例えば、color に対しては、カラーコード、カラー名及びR数値G数値B数値が対応していて、そのうちのどれを使用しても反映されることになっています。
（プラットホーム、ブラウザ及びそのバージョン等のユーザー環境や設定の如何によっては忠実な反映が保障されないことは、総てについていえることです。）

スタイル設定の場所における適用範囲

１．外部に[スタイル・フアイル.css ]を用意して読み込む

リンキング・スタイルシートと称します。１個のフアイルを作るだけで、複数のhtml文書に適用ができてサイト全体の統一が図られます。記述法はスタイルシート記述です

２．html文書内「head」部に纏めて設定する

エンベデイング・スタイルシートと称します。そのページ全体に作用を及ぼします。記述は上同様だが、同じページ内にあるので編集がやり易い

３．ページ内「body」部の当該タグに直接スタイルを組み込む

インライン・スタイルシートといいます。ページ内の個別の要素（ここの表現は要素が適切）に部分的にスタイルを設定したい場合に適しています。マーク付けした要素（＝タグ）に括られた部分にのみ作用します。
上の２通りで「あらかたの設定」の設定を済ましたとしても、なを細部設定を必要とするとき、また、第一優先権を利用して、上の２方法に対して「一時的上書き」ができて便利です。記述法は「html記述」の後部に「スタイル記述」を取り付けます。

上記３っつの適用優先順位はローカルから、即ち３，２，１の順です。夫々の特徴を生かし、目的に応じ「セレクタ」や「タグに直接」または重複を承知で両方に、などと使い分ければさまざまな範囲にスタイルシ−トを適用することができることになります。

インライン・スタイルシート構図：<要素名 style="＊＊＊">

例えば <p>タグにスタイル設定： <p style="text-indent:1em">内容部分</p>

<要素名 style="　　"> " "内の＊＊＊部分に属性と値、例えば text-indent:1em を記述（複数可）して完成します。
<p>は勿論タグですが「属性:値;">」 までを、タグということができます。また、内容を含め </p> 迄タグという人も居るなどさまざまです。そのときの文脈で判断することになります。

従来のhtml文書では「 <p align="center"><font color="#000080" size="3" face="ＭＳ 明朝">内容部分</p> 」でした。現在もHTML 4.01 Transitionalでは「非推奨」としながらも <font> タグが通用しています。

「文字の見映えと装飾」に就いて考えます。

一つのページを見た時何よりも「文字」表現が多彩に変化しているのが分かります。

文字の見映えの観点から

注：見映えとは、文字が相似形に変化するものと「私的に解釈」しています。?

  1. 文字色の指定　（属性は [color] を使用します。）
  2. 文字の大きさを指定　（属性は [font-size] を使用します。）
  3. 書体名の指定 （属性は [font-family] を使用します。）
  4. 文字列の行間隔の指定（本頁では「ｐ」と「div」タグに140％を設定 ：head 部ソースでセレクタ参照）

文字の装飾の観点から

注：装飾とは文字が変形したり、デコレーションが付いたものと「私的に解釈」しています。?

  1. 文字の太さの指定(属性 [font-weight] を使用します。
  2. 取り消し線とアンダーライインの位置：実例付（属性 [text-decoration] を使用します。）
  3. 斜体＝イタリック体：実例付 （属性 [font-style] を使用します。）

文字の位置指定に就いて

  1. 水平位置＝行揃え（属性 [text-align] を使用します。）
    2. 　　
  2. なお、非常に便利な「center」タグはhtml4.01 Transitional では非推奨となっています。

ブロックタグの持つ「領域枠」から「テキスト」までの余白指定（テーブルの場合は「セル枠」）

    　
  1. 水平距離＝左右余白（属性は [padding-left] [padding-right] を使用）
  2. 上下距離＝上下余白（属性は [padding-top] [padding-bottom] を使用）

ブラウザの画面（＝デスプレー画面）から「領域枠」までの上下左右距離＝周囲の余白

  1. （属性は[margin-top] [margin-bottom] [margin-left] [margin-right]を使用）

上の２例のように行揃えに関しては、ケース･バイ･ケースで余白を２回設定できる上、更にリストで３段階の行揃えができることになります。（余白の統一と美学を楽しんでください。）
以上は文字の、[色] [サイズ] [書体] [斜体] [太さ] [下線] [上線] [取り消し線] [行揃い(リストでは自動で一定間隔字下げになりますが、さらに padding で下げられます。)そうして、[水平方向の位置]と[縦方向の位置]等に就いて説明しました。

ブロックレベル・タグの持つ領域の[色] [枠幅] [枠形状]に就いて
（以下属性ー値の順で記載）

領域色（領域の背景色のことです。背景色、背景画像の属性には総て[background- ]を使用します。）

  1. background-color: カラー名またはカラーコード;

領域枠幅（枠関係に就いての属性は総て[border- ]からの記述になります。

  1. 四周一括設定の場合[border: 値;]の記述になります。
  2. 四周個別指定の場合ですが、「値」の適用は上と同じです。


トップへ戻る     スタイルシート目次へ戻る
要素と属性へ戻る     css記述法へ進む inserted by FC2 system