スタイルシートを学ぶに当たって、どうしても把握しておきたいことがあります。解説書には「ブロックレベル要素」とか「同タグ」とか、また、「インライン要素」とか「同タグ」と言った言葉が頻繁にでてきます。
「より正確なスタイルシート」を記述するには、要素がどんなタイプに属するかを覚えておく必要があるのです。それが「スタイルシート習得」の早道でもあります。
と言ってもこれらは、使用しているうちに自然に身に付くものですから、使いまくること、そしてミスを沢山経験することです。ミスを克服するからこそ幅広い知識が身につくことになるからです。私のホームページでも必要以上ごてごてと盛り込んで行きたいと思っています。目標とする「すっきりした爽やかなページ」はその後の問題と考えています。
このページのhtmlソースをご覧ください。「セレクタや属性」がテンコ盛です。不必要なセレクタや属性項目を削除すればホームページができあがります。テーブル就いてはこちらを参照願います。（また、イメージ、フレーム、フォームに就いては近いうちに書きたいと思っております。）
htmlの歴史を見ますと、Windows95発売直前に
html2.0 が w3c から勧告され、1996年代に別物と言える html3,2 が登場し以降1997年12月の html4.0
で「タグ１０個位が追加」されたものの1999年12月24日版の HTML4.01
（現在一番使用されている）までは大きな変革も無しに推移してきました。（ただし、アクセサビリティの概念や、意味と見栄えの分離の原則などが強化され、厳格な Strict、過渡期のTransisionalのふたつのレベルの仕様が定義されました。）パソコン界の他の進歩に比べるとスローテンポであるとの指摘はまぬかれませんでした。
しかし、昨年 w3c から xhtml 1.1 という非常に厳格なhtml文書規定が勧告されました。ここでも「html4.01 Transisional 」的な過渡期としての猶予期間が○年とられるはずですが、そうのんびり構えては居られません。電子商取引等で必要とされる正確で細かい表現が可能な「ＸＭＬ仕様」移行への「つなぎhtml」とのことです。
「意味と見栄えの分離の原則などが強化」されたことは、とりもなおさず、「スタイルシート」のウエイトが増大したことになるのです。そこで、なにか見易い早見表がないかと思って下記一覧表を整備し１つのページにまとめてみました。
●ブロックレベル要素の性質
１．ブロックレベル要素とは見出しや段落など一つのまとまりを構成する要素です。表示上からみると、これらの要素は全て、ブラウザに表示させると、改行されて新たな行からテキストを書き始めます。感覚的には一つの纏まったグループ（＝ブロック）が形成されていたものが、ブロックレベルタグの使用で、前後に改行が施され、新たなブロックに移行させる形をとります。
一方その意味するところは、夫々の要素が「文書の論理構造上の意味を持っている」ということです。従ってそれなりのタグをぺたぺた配置してコンテンツを記述すれば統制のとれた文書ができることになるのです。
簡単な例ですが、<h1> で見出しを大きく書いた後 <p> で区切りをつけ「段落文章」を書き込み、更に <h2> で中見出しを付けるといった具合です。
２．もう一つの大きな特徴があります。
それは、領域枠といって、テーブルの１個のセル並に「段落集合体や文字列の周囲にボックスを持つ」ことです。ボックス領域はマージン（margin）、パディング（padding）、ボーダー（border）（枠線）とコンテンツから成り立っています。これらは今までのワープロ感覚ではあまり見られないの手法（私の個人的知識の段階では）なので、ともするとテーブル使用にならざるを得ませんでした、
ボックスという概念はスタイルシートの登場で初めて具現化したそうです。ボックスをスタイルシートなしで表現するのは少し無理がありそうです。
●インライン要素の性質
文字と同じレベルで扱われる要素で、一般的には前後に改行は行われません。インライン要素の場合、パディング、マージンという概念がありません。そのためタグで囲った周囲にスペースはありません。そこで余白はスペースキーの操作になりますが、ブラウザによっては不確実性がまぬかれません。
代表的なタグに <img> があります。画像の挿入タグです。どんなに大きな画像でも、普通の文字列と同等に扱われ、極言すれば文字１字分の存在にしか過ぎません。つまり、１つの段落にはなり得ないのです。
●ブロックレベル、インライン要素間の決まり事
１．ブロックレベル要素の中にはブロックレベル要素を含めることができますが、インライン要素の中にブロックレベル要素を含めることはできません。つまり、インライン要素はブロックレベル要素内に記述する必要があります。
２．インライン要素内にインライン要素を含めることは可能です。ただし、正しい入れ子の関係になっている必要があります。
<div> タグは「包括的なとか汎用的なブロックレベル要素」と言われ、特に定まった意味付けはなされていません。その「内容部分」を「ブロックレベル要素に設定」するための構造的な意味を与えるためのタグです。ただ、数少ない「ブロックコンテナ」タグの一つ（他にbodyタグ有り）で、子要素に他のブロックレベル要素を持てる性質が有るので、段落タグ p の上位にランクされます。
段落の塊を示す <p> や見出しを示す <Hn>等のブロックレベルタグとは異なり、性質だけがブロックレベルタグに相当し、段落タグ同様の属性が設定できるのです。しかも、この<div>タグは他のブロックレベルタグとは異なって、上下に改行を伴わないという特徴があり、改行間隔を無くしたいときに重宝です。
また、classやid属性により、自由に意味付けをすることが出来ますし、全く意味を持たせずにこれを利用することも出来るという非常に便利なタグで「div病」の言葉ができるほど使い勝手が良いのです。ホームページビルダーの「どこでもモード」はdivタグを多用しているようです。（参照⇒div病）
<span> タグは「汎用的なインライン要素」に分類され、特に定まった意味付けはなされていません。その内容をインライン要素に設定するための構造的な意味を与えるタグでそれ以外の影響は与えません。
文字どおり短いスパンに対して気軽にインライン属性が設定できます。
●HTML4.01strict
準拠の「ブロックレベル要素」と「インライン要素」を下に記しました。
（尚 XHTML1.1 のルピ関連６点も入れました。）
| ｢ブロックレベル要素｣と｢インライン要素｣ | |||
| ブロックレ ベル要素 |
概 要 | インライン レベル要素 |
概 要 |
| ADDRESS | 署名ー作者に関する情報 | A | リンクをはる、リンクの出発点・到達点 を指定する（アンカー） |
| BLOCKQUOTE | 区分が引用文であることを表す（比較 的長い引用文に使用。Blockコンテナ) |
ABBR | 頭字語以外略語であることを表す (＝省略語)(html4.01加入) |
| CENTER | 区分の中央化 (HTML4.01 transitional迄使用可能) |
ACRONYM | 頭字語の略語であることを表す (html4.01加入) |
| DIR | リストを表示する (HTML4.01 transitional迄使用可能) |
B | テキストを太文字にする |
| DIV | ブロックレベル要素の包括的な文書 のグループ化(Blockコンテナタグ) |
||
| DL | 定義付きリスト | BASEFONT | テキストの基準サイズ･基準色･基準フォント を指定(HTML4.01 transitional迄使用可能) |
| FIELDSET | フォーム制御操作のクループ化 (html4.01加入) |
BDO | 文字表記の方向を指定する BiDiの上書き(html4.01加入) |
| FORM | 相互交換フォームを作る | BIG | テキストサイズをひと回り大きくする |
| H1 | 章 chapterに相当使用 | BR | テキストを強制改行する |
| H2 | 節 section 同上 | CITE | 引用元出典を示す |
| H3 | 項(小節)subsection 々 | CODE | プログラムのソースコード であることを示す |
| H4 | 目(小々節)subsubsection 々 | DFN | 用語定義例（text関連） |
| H5 | 段落小見出し 々 | EM | 強調（text関連） |
| H6 | 小段落小見出し 々 | FONT | 文字変更 (HTML4.01 transitional迄使用可能) |
| HR | 水平線・横罫線 | I | テキストを斜体にする |
| ISINDEX | 検索キーワードの入力欄を作る (HTML4.01 transitional迄使用可能) |
IMG | インライン画像を表示する |
| MENU | メニュー・リストの表示 (HTML4.01 transitional迄使用可能) |
INPUT | 入力欄ボタン等の入力書式 （フォーム関連） |
| NOFRAMES | フォーム代替え内容 (HTML4.01 transitional迄使用可能) |
KBD | 入力されるテキスト |
| NOSCRIPT | スクリプト代替内容(html4.01加入) | LABEL | フォーム領域のラベル(html4.01加入) |
| OL | 順番付きリスト | Q | 短い引用（text関連）(html4.01加入) |
| P | 一つの段落・塊（パラグラフ）を示す | RB | ルビをふる文字を指定する(XHTML1.1加入) |
| PRE | 整形文ソースをそのまま表示する |
RP | ルビを囲む記号を指定する(XHTML1.1加入) |
| TABLE | テーブル（表）を作成する | RT | ルビの内容を指定する(XHTML1.1加入) |
| UL | 順番無しリスト | RUBY | ルビの範囲を指定する(XHTML1.1加入) |
| <!DOCTYPE>・・・ドキュメントタイプを宣言する | S | テキストに抹消線を引く (HTML4.01 transitional迄使用可能) |
|
| HTML文書型宣言 | SAMP | サンプル出力 | |
| HTML | HTML文書宣言し全体を包含する | SERECT | セレクトボックスを作成する |
| HEAD部に記述するタグ | SMALL | テキストサイズをひと回り小さくする | |
| HEAD | 文書の情報を表すhead部である | SPAN | 包括的なインラインコンテナ、フレーズのグループ化(html4.01加入) |
| TITLE | 文書の標題 | STRIKE | テキストに抹消線を引く (HTML4.01 transitional迄使用可能) |
| META | 文書に関する各種情報 | STRONG | より強調（text関連） |
| BASE | 相対パスの基準URIを指定する | SUB | 下付き文字を表示（文字装飾） |
| LINK | 外部の関連する文書ファイルを指定する |
SUP | 上付き文字を表示（文字装飾） |
| STYLE | スタイルシート定義 |
TEXTAREA | 複数行の入力フィールドを作成する |
| BODY部記述タグ | TT | 等幅フォントで表示する | |
| BODY | 文書の本体であることを宣言(Blockコンテナタグ) | U | テキストに下線を付ける (HTML4.01 transitional迄使用可能) |
| TBODY | テーブル（表）の本体部分 を定義する(html4.01加入) (ブロックレベルに見なされる) |
VAR | <NOBR>内で改行しても良い位置を指定 する変数や引数であることを示す |
| CAPTION | テーブルの標題 | ||
| TR | テーブル（表）の横方向の一行を定義する (ブロックレベルに見なされる) |
以下の要素は ブロックレベル要素かインライン要素 として使われます。インライン要素として( e.g.､別 のインライン要素や P 内で）使われる場合、これら の要素はブロックレベル要素を取ってはいけません｡ |
|
| TH | テーブル（表）の見出しセルを作成する (ブロックレベルに見なされる) |
||
| TD | テーブル（表）のデータセルを作成する (ブロックレベルに見なされる) |
APPLET | Java Applet (HTML4.01 transitional迄使用可能) |
| THEAD | テーブルの標題(html4.01加入) (ブロックレベルに見なされる) |
BUTTON | ボタンを作成する(フォーム関連) (html4.01加入) |
| COL | 表の縦列の属性をまとめて 指定する(html4.01加入) |
DEL | テキストｰ抹消文・削除 (html4.01加入) |
| TFOOT | テーブルの末尾(html4.01加入) (ブロックレベルに見なされる) |
IFRAME | インライン・フレーム (HTML4.01 transitional迄使用可能) |
| COLGROUP | テーブル列のグループ化(html4.01加入) | INS | 追加された部分であることを示す |
| DT | 定義型リスト項目の標題 (ブロックレベルに見なされる) |
MAP | イメージマップひとつの画像に複数のリンクを設定する（クライアントサイドイメージマップ） |
| DD | 定義した用語の説明を記述する (ブロックレベルに見なされる・ 子にブロック-レベル要素を取る) |
OBJECT | 汎用オブジェクト 文書にデータを埋め込む (html4.01加入) |
| LI | リスト項目の記述 (ブロックレベルに見なされる) |
SCRIPT | 文書にスクリプトを埋め込む （クライアントサイド） |
| OPTI0N | セレクトボックスの選択肢を 指定する（フォーム関連） |
||
| NOFRAMES | フレーム代替え内容の指定(html4.01加入) | ||
| OPTGROUP | セレクトボックスの選択肢を グループ化する(html4.01加入) |
便利で有名なタグだが、[IE][NN]独自タグのため W3Cのタグリストに無いタグ（非推奨） |
|
| PARAM | オブジェクトノパラメータ指定 | marquee | 文字列がスクロールする。 （マイクロソフト独自タグ） |
| AREA | クライアントサイドイメージマップ の領域を設定する |
blink | 文字列が点滅する。 （ネットスケープ独自タグ） |
| FRAMESET | ウィンドウをフレームに分割する (ブロックレベルに見なされる) |
EMBED | プラグインデータ(音声調整パネル)を埋込む (ネットスケープ独自タグ、IEサポート) |
| LEGEND | フォームの入力項目グループに タイトルを付ける(html4.01加入) |
. | . |
| LISTING | 整形済みテキスト (HTML4.0 で廃止。preを使いましょう。) |
. | . |
| xmp | 整形済みテキスト (HTML4.0 で廃止。preを使いましょう。) |
. | . |
| PLAINTEXT | 整形済みテキスト (HTML4.0 で廃止。preを使いましょう。) |
. | . |
HTML4.0および4.01で「非推奨（Deprecated）」および廃止になった要素リストです。
非推奨要素 ：applet、basefont、center、dir、font、isindex、menu、s、strike、u
HTML4.0で廃止；listing、xmp、plaintext
実は、「テキストをそのまま表示するタグ」に「どのようなスタイルが設定」できるかの 一覧表（「約５０種の属性」と夫々の属性に対応する「値」）いうものが手元にありましたので、そのなかからピックアップして記述しています。全部そっくりは表示できませんが半数以下を挙げてみました。著作権もありますので。
| スタイルシート属性と値一覧表（一般形） | ||
| 使用可能なスタイル | スタイルの機能 | 値 |
| color | 文字色 | カラー名、カラーコード |
| background | １.背景色 ２.背景画像のURL ３.繰り返し方法 ４.背景画像の固定指定 ５.背景画像の表示位置等スタイルの一括指定 | １.同上 2.url, なしはnone 3.repeat,repeat-x,repeat-y,no-repeat/ 4.scrol,fixed/ 5.left.right,top,bottom,center |
| background-color | 背景色 | カラー名、カラーコード |
| font-style | 文字形状 | normal正常,italic,oblique |
| font-family | 書体名 | 例ＭＳ 明朝、ＭＳ ゴジック等 |
| text-decoration | 文字装飾 | noneしない,underline,overline line-through,(blink:NNのみ) |
| letter-spacing | 文字間隔 （値normalで正常） | 絶対サイズin,cm,mm,pt,pc,px 相対サイズem,ex,% |
| >word-spacing | 単語間隔 （値normalで正常） | 同上 |
| border | 枠形式一括指定（上下左右の４辺) | 太さ色形状の３つについて一括 |
| border-width | 枠線幅一括指定 | n,cm,mm,pt,pc,px。em,ex。 枠の太さthin,thicj,medium |
| border-top-width | 上枠線幅（下枠bottom-width有） （値に絶対、相対サイズ有） |
in,cm,mm,pt,pc,px。em,ex。 枠の太さthin,thick,medium |
| border-left-width | 左枠線幅(右枠線幅有)（値同上) | 同上 |
| border-top-color | 上枠色（下枠bottom-color有） | カラー名、カラーコード |
| border-left-color | 左枠色（右枠ｒight-cokor有） | 同上 |
| border-left-style | 左枠形状ー右有(丸い点線四角い点線、凹凸、実践や浮き出し感じ) | dotted,dashed,solid,double,groove ridge,inset,outset。 ナシはnone､hidden |
| padding | パデング一括指定（上下左右の４辺）領域枠と枠内文章間の余白 | 絶対サイズin,cm,mm,pt,pc,px 相対サイズem,ex,% |
| padding-top | 上パデング(下有)枠と枠内文章間の上余白 | 同上 |
| padding-left | 左パデング(右有)枠と枠内文章間の左余白 | 同上 |
| text-underline-position | 下線表示位置 | . |
このページのソースの<head>部をご覧下さい。上の「属性と値の表」よりも更に細かく実践的に記述し解説を付けてあリます。 また分かり易く各セレクタ毎に解説してあります。