HTML5 & CSS3 の基本事項

■ 概要

項 目詳細項目
基本用語
ハイパーテキスト(HyperText), WWW(World Wide Web),
HTML(HyperText Markup Language), HTTP(HyperText Transfer Protocol),
プロトコル(Protocol), URL(Uniform Resorce Locater), サーバー, クライアント,
Webサーバー, ブラウザー, Webページ, コンテンツ, マークアップ
HTML5 用   語
(必須知識)
タグ, 要素, 属性(コンテンツ属性), インベントハンドラ,
カテゴリー, コンテンツ・モデル, トランスペアレント
要素の分類(1)
(カテゴリー)
  • メタデータ・コンテンツ (Metadata content)
  • フロー・コンテンツ (Flow content)
  • セクショニング・コンテンツ (Sectioning content)
  • ヘッディング・コンテンツ (Heading content)
  • フレージング・コンテンツ (Phrasing content)
  • エンベッディッド・コンテンツ (Embedded content)
  • インタラクティブ・コンテンツ (Interactive content)
  • パルパブル・コンテンツ (Palpable content)
要素の分類(2)
(機能別)
  • ルート要素 (The root element)
  • ドキュメントのメタデータ (Document metadata)
  • スクリプティング (Scripting)
  • セクション (Sections)
  • コンテンツのグループ化 (Grouping content)
  • テキストレベルの意味づけ (Text-level semantics)
  • 訂正 (Edits)
  • 組み込みコンテンツ (Embedded content)
  • テーブルのデータ (Tabular data)
  • フォーム (Forms)
  • リンク (Links)
文書形式(1)
最も簡単な形HTML4.01 からの変更点
文書形式(2)
一般的な文書の形
CSS3
用   語
(必須知識)
CSS, セレクタ, プロパティ, , クラス, コメント,
長さの値, 色の値, 主軸, 副軸, アットルール, 継承
セレクタ
  • セレクタのグループ化 (Groups of selectors)
  • 型セレクタ (Type selector)
  • 全称セレクタ (Universal selector)
  • 属性セレクタ (Attribute selectors)
  • クラスセレクタ (Class selectors)
  • IDセレクタ (ID selectors)
  • 擬似クラス (Pseudo-classes)
  • 擬似要素 (Pseudo-elements)
  • 子孫結合子(子孫セレクタ) (Descendant combinator)
  • 子供結合子(子供セレクタ) (Child combinators)
  • 隣接結合子(隣接セレクタ) (Sibling combinators)
プロパティ
主要なキーワード, ABC 順索引, 機能別一覧,
知っておくとよいプロパティ
値と基準値
長さの値, 色の値, 要素のボックス, ベースライン(基準線)

CSS3 の用語

■ CSS (Cascading Style Sheets)

CSS(Cascading Style Sheets)は、Webページのスタイル(各部分のサイズ、色、余白、配置、フォントの種類、背景、境界などについての形式や指定)を記述するための言語です。 HTML が Webページの論理構造を記述するための言語であるのに対して、CSS は見栄えや装飾を記述するための言語ということができます。

従来の HTML4.01 までは、<font> や <center> などの要素タグ)、また、align,background,bgcolor などの属性に、HTML にもスタイルに関する指定が一部残っておりました。 HTML5 では、この切り分けが徹底した形となって、これらはすべて廃止になりました。

そのため、HTML5 においては、見栄えのよい Webページを作成するためには CSS に関する知識が必須となっています。

とはいえ、従来の HTML4.01 までの要素タグ)や属性で記述していた見栄えや装飾の指定を CSS のスタイルシートに置き換える程度なら、簡単な記述だけで済みます。 つまり、書き方が変わっただけで、とくに記述が難しいわけではありません。 あまり難しく考えずに、見栄えや装飾に関する部分の書き方が少し変わった程度に捉えてもらってよいと思います。

■ CSS の歴史

現在までの CSS のバージョンには、つぎのものがあります。

現在策定中の CSS3 では、境界の角に丸みを付けたり、段落の先頭の文字など特定の部分に関する設定、グラデーション、透明度、アニメーションなどに関する設定などの新しい機能が追加されることになっています。

HTML4.01 による Webページの作成では、CSS2 と CSS2.1 の仕様を意識して Webページを作成するのが普通です。

しかし、現状で、IE9,FireFox,Opera,Safari,GoogleChrome などの新しいブラウザーでは、すでに CSS3 の機能の一部が先行してサポートされています。 そして、この傾向は HTML5 の普及とともに、さらに進んでいくものと思われます。

■ CSS の基本書式

CSS によるスタイル設定の基本書式は、

   セレクタ { プロパティ名 : }

という形式です。 ここで、セレクタスタイル設定の対象となる要素を指定する部分のことです。 また、プロパティは適用するスタイルの種類で、スタイルの指定内容を表すが、":"(コロン)を挟んでこれに続きます。

同一のセレクタに対して複数のプロパティを同時に適用したい場合は、

   セレクタ { プロパティ名1 : 値1 ;  プロパティ名2 : 値2 ;  ・・・ ;  プロパティ名n : 値n ; }

という形に、";"(セミコロン)を挟んでプロパティと値のペアを並べます。 一番最後の ";" は省略可能ですが、上記のように書いてあっても間違いではありません。

なお、CSS による記述では、半角スペースタブ改行はいずれも無視されて意味を持ちませんので、これらを用いて見やすい形に記述しても問題ありません。 たとえば、上の複数のプロパティを同時に適用する場合では、

   セレクタ {
          プロパティ名1 : 値1 ;
          プロパティ名2 : 値2 ;
            ・・・ ;  
          プロパティ名n : 値n ;
   }

のような書き方もできます。

■ コメント(Comment)

CSS によるスタイル設定の中のコメントは、"/*"と"*/"で挟んで記入します。 たとえば、

p { color: blue; line-height: 1.2 } /* 赤色で表示して行の高さを 1.2 倍にする */

のような形式です。 ただし、"{" と "}" に挟まれた部分には記入しないようにしましょう。

■ CSS の設定を HTML 文書に適用する方法

CSS の設定内容を HTML 文書に反映させるために、つぎの3つの方法で、HTML ファイルから CSS による記述を参照することができます。 (これらの方法のうち2つ以上を併用することも可能です。)

  1. CSS の内容を独立した別のファイルに保存して HTML 文書から読み込む。
  2. HTML 文書の先頭部分の <head> ~ </head> の間にまとめて書く。
  3. HTML 文書内の個々の要素に対してスタイルの指定を書く。

3つの方法のうち、方法 1 が文書管理上はもっとも好ましいといえます。 しかし、同じスタイルの文書を作成する機会があまりないと思われる場合は、方法 2 でもかまいません。

方法 3 は、HTML4.01以前の <font size="5"> ~ </font> や <div align="center"> ~ </div> などとほぼ同様に使えて便利だと思う人がいるかもしれません。 しかし、文書中で同じ指定をほとんど行わない場合はこの方法でよいのですが、同じ指定を何度も行うときは方法 1 や方法 2 の方が向いています。 実際、定型の文書では文中に同じ指定が何度も現れるのが普通です。 この場合、後になって指定の内容(たとえばフォントのサイズ)を変更したりするときには、方法 1 や方法 2 の方がずっと便利です。

■ CSS の設定を HTML 文書に適用する方法1: 独立したファイルに保存し読み込む

CSS による設定を HTML 文書ファイル内ではなく、独立したスタイルシートのファイルに保存した場合には、適用したい HTML ファイルの <head> ~ </head> の間に、<link> 要素を用いて以下のように記述します。 たとえば、スタイルシートを style.css というファイル名で保存した場合では、

HTMLソース
<head> ~ </head>

 <link rel="stylesheet" href="style.css">


のように書きます。 この方法では、HTML 文書内での記述は <head> ~ </head> 間の1行のみですので、文書の論理構造(HTML)とスタイル(CSS)が、ほぼ完全に分離された形となり、両者を別々に管理することが可能です。

また、この方法は、 <head> ~ </head> の間に、<link> の単一要素を記入をするだけでよいので、複数の HTML 文書に同じスタイルシートを適用する場合には便利 です。

■ CSS の設定を HTML 文書に適用する方法2: <head> ~ </head> の間にまとめて書く

CSS による設定を HTML 文書ファイル内の <head> ~ </head> の間にまとめて書く場合は、<style> 要素を用いて、 

HTMLソース
<head> ~ </head>
<style type="text/css">
<!--
   body { color: #003333; }
   h2 { width: 100%; color: #ffffff; background-color: #ee8484; }
-->
</style>

のように書きます。 この方法には、HTML 文書の作成中に CSS の設定内容を簡単に確認できる利点があります。 したがって、HTML 文書の作成中に CSS の設定を同時に行う場合には便利です。 しかし、設定したスタイルを他の HTML 文書でも使用する可能性がある場合には、スタイルシートの入力が終わってスタイルがほぼ確定した時点で、方法1に移行する方がよいと思います。 その際には、<!-- ~ --> 間にある CSS の記述を ".css" を拡張子としてもつファイル名で保存します。

■ CSS の設定を HTML 文書に適用する方法3: 各要素ごとに style=" " 属性を用いて指定する

CSS による設定を HTML 文書ファイル内の各要素ごとに style=" " 属性を用いて指定する場合は、 

HTMLソース
<body> ~ </body>
<body style="color: #003333;">
   <h2 style="width: 100%; color: #ffffff; background-color: #ee8484;">
      style 属性を用いてスタイルを適用する
   </h2>
</body>

のように書きます。 この方法では、個々の HTML 要素属性としてスタイルを記述するため、スタイルの指定対象は style=" " 属性を指定した要素のみとなります。 したがって、セレクタは書きません。 つまり、一見指定方法は簡単に見えますが、同種類・別種類の要素を問わず、セレクタを使用した場合のように、複数の HTML 要素に対して同じスタイルを指定することはできません。(たとえば、方法2の例では、すべての <h2> 要素にスタイルが適用されますが、この例では指定されるのは単一の <h2> 要素のみです。) そのため、スタイル指定の記入効率が悪く、一般的に HTML 文書のソースの記述も煩雑になります。 また、そればかりではなく、文書のスタイルも統一感のあるものになりにくくなります。 なおかつ、修正や設定変更のときにも大変手間がかかることになるので、あまりお勧めできません

■ セレクタ (Selectors)

セレクタ(Selector)は、CSSスタイルの適用対象となる HTML要素 を指定するための記述部分です。 単一の HTML要素名を書く単純なものから、ある特定の条件を満たす複数の HTML要素を指定するものまで、様々な書式があります。

とくに、CSS3 においては、セレクタ (Selectors)の書式は、@namespace の新規導入などにより、大幅な拡張が行われて、スタイルの適用範囲を自由かつ柔軟に指定可能になります。

現在の W3C の CSS3 のセレクタに関する規定は、この拡張された形で記述されているので、HTML による Webページ作成の初心者にとってはわかりやすいものではありません。 しかし、一方で、初心者がこの拡張された書式を必要とする場面がそれほど多くあるとは思えません。

そこで、以下では、つぎの各項目について、名前空間の導入によるセレクタ書式の拡張部分を除いて、比較的単純な形式でセレクタを記述する場合に絞って説明を書くことにします。 なお、アットルール:@namespace の使い方や名前空間の概念が理解できる人であれば、これらを使用してセレクタを拡張された書式で記述することは、それほど難しくはないと思われます。 (名前空間 を含めたセレクタの使い形ついては、以下の 【参考ページ】 を参照。)

  • セレクタのグループ化 (Groups of selectors)
  • 型セレクタ (Type selector)
  • 全称セレクタ (Universal selector)
  • 属性セレクタ (Attribute selectors)
  • クラスセレクタ (Class selectors)
  • IDセレクタ (ID selectors)
  • 擬似クラス (Pseudo-classes)
  • 擬似要素 (Pseudo-elements)
  • 子孫結合子(子孫セレクタ) (Descendant combinator)
  • 子供結合子(子供セレクタ) (Child combinators)
  • 隣接結合子(隣接セレクタ) (Sibling combinators)

【参考ページ】

■ プロパティ(Properties)

プロパティ(Properties)は、スタイルの種類を指定するためのものです。 プロパティの名前の付け方は、スタイルの種類を説明するキーワードを "-"(ハイフン)でつないだ形の単純な形式であるため、名前から何のために使用するものであるかは、おおよそわかります。 ただし、キーワードは英語であるため、大半のものは意味が明らかですが、中には意味のわかりにくいものもあります。

プロパティの名前で使用されている主要なキーワードを以下に示します。

プロパティ名の主要なキーワード
  • after (~の後)
  • alignment (位置揃え)
  • animation (アニメーション)
  • appearance (表示の形式)
  • background (背景)
  • before (~の前)
  • border (境界)
  • bottom (下部)
  • clip (表示の切捨て)
  • color (色)
  • font (フォント)
  • height (高さ)
  • image (画像)
  • left (左)
  • margin (要素外部の余白)
  • marquee (文字のスクロール)
  • max (最大)
  • min (最小)
  • padding (要素内部の余白)
  • radius (丸み付けの半径)
  • repeat (繰り返し)
  • right (右)
  • rotation (回転)
  • ruby (ルビ)
  • size (サイズ)
  • style (スタイル)
  • target (処理の対象)
  • text (文字列)
  • top (上部)
  • voice (音声)
  • width (幅)

CSS1CSS3 までのプロパティには以下の 273 個のものがあります。

種 類プロパティ名
背 景
backgroundbackground-attachmentbackground-clip *background-color
background-imagebackground-origin *background-position
background-repeatbackground-size *
文 字
direction ?fontfont-familyfont-sizefont-size-adjustfont-stretch *
font-stylefont-variantfont-weighthyphenate-after *hyphenate-before *
hyphenate-character *hyphenate-lines *hyphenate-resource *hyphens *
letter-spacingmarquee-direction *marquee-loop *marquee-play-count *
marquee-speed *marquee-style *string-set *text-aligntext-align-last *
text-decoration ?text-emphasis *text-height *text-indenttext-justify *
text-outline *text-shadowtext-transform ?text-wrap *unicode-bidi ?
white-spacewhite-space-collapse *word-break *word-spacingword-wrap *
余 白
marginmargin-bottommargin-leftmargin-rightmargin-top
paddingpadding-bottompadding-leftpadding-rightpadding-top
境 界
borderborder-bottomborder-bottom-colorborder-bottom-left-radius *
border-bottom-right-radius *border-bottom-styleborder-bottom-width
border-collapse ?border-colorborder-image *border-image-outset *
border-image-repeat *border-image-slice *border-image-source *
border-image-width *border-leftborder-left-colorborder-left-style
border-left-widthborder-radius *border-rightborder-right-color
border-right-styleborder-right-widthborder-spacing ?border-style
border-topborder-top-colorborder-top-left-radius *border-top-right-radius *
border-top-styleborder-top-widthborder-width
配 置
alignment-adjust *alignment-baseline *baseline-shift *bottom ?
break-after *break-before *break-inside *caption-side ?clear
column-count *column-fill *column-gap *column-rule *
column-rule-color *column-rule-style *column-rule-width *
column-span *column-width *columns *displaydominant-baseline *
drop-initial-after-adjust *drop-initial-after-align *drop-initial-before-adjust *
drop-initial-before-align *drop-initial-size *drop-initial-value *float
float-offset *hanging-punctuation *heightleft ?line-heightline-stacking *
line-stacking-ruby *line-stacking-shift *line-stacking-strategy *max-height
max-widthmin-heightmin-widthorphansoutlineoutline-offset *
outline-styleoutline-widthoverflowoverflow-style *overflow-x *
overflow-y *punctuation-trim *right ?ruby-align *ruby-overhang *
ruby-position *ruby-span *sizetable-layout ?top ?vertical-alignwidth
表 示
clip ?crop *cursorempty-cells ?grid-columns *grid-rows *icon *
list-stylelist-style-imagelist-style-positionlist-style-type
opacity *outline-colorpresentation-level *quotesrendering-intent *
visibilityz-index ?
変 形 *
backface-visibility *fit *fit-position *move-to *resize *rotation *
rotation-point *transform *transform-origin *transform-style *
ボックス *
box-align *box-decoration-break *box-direction *box-flex *
box-flex-group *box-lines *box-ordinal-group *box-orient *box-pack *
box-shadow *box-sizing *inline-box-align *
画 像 *
image-orientation *image-rendering *image-resolution *
アニメーション *
animation *animation-delay *animation-direction *animation-duration *
animation-iteration-count *animation-name *animation-play-state *
animation-timing-function *perspective *perspective-origin *transition *
transition-delay *transition-duration *transition-property *
transition-timing-function *
音 声
azimuth ?cuecue-aftercue-beforeelevation ?mark *mark-after *
mark-before *markspausepause-afterpause-beforephonemes *
pitch ?pitch-range ?play-during ?position ?rest *rest-after *rest-before *
richness ?speakspeak-header ?speak-numeral ?speak-punctuation ?
speech-rate ?stress ?voice-balance *voice-duration *voice-family
voice-pitch *voice-pitch-range *voice-rate *voice-stress *
voice-volume *volume ?
ブックマーク *
bookmark-label *bookmark-level *bookmark-state *bookmark-target *
その他
appearance *binding *bleed *colorcolor-profile *content
counter-incrementcounter-resetnav-down *nav-index *nav-left *
nav-right *nav-up *pagepage-break-afterpage-break-before
page-break-insidepage-policy *target *target-name *target-new *
target-position *widows

"*" つきのプロパティは、CSS3 で新規導入予定のものです。   

"" つきのプロパティは、CSS3 で廃止が予想されるものです。   
(各プロパティの詳細については、解説ページを参照してください。)

上の表を見ればわかるように、CSS3 では非常に多くのプロパティが新規に導入されて、スタイルの指定がきめ細かにできるようになっております。 ただし、現状では、CSS3 で新規に導入されたプロパティは、ブラウザーではまだサポートされていないものありますので、使用に際してはブラウザーの対応状況を確認する必要があります。

■ 知っておくとよいプロパティ

上記の通り、CSS のプロパティ(Properties)は、合計273個もあります。 しかし、従来 HTML4.01 までで作成していた文書を HTML5 に移行して作成する程度のことであれば、それほど多くのプロパティが必要になるわけではありません。

ここでは、これまで HTML4.01 までによりスタイルシートをほとんど使用しないで Webページを作成していた人が、HTML5 と CSS による作成に移行する際に必要となると思われるものに絞って、CSS プロパティ(40個)をリストアップしておきます。

対 象プロパティ名
フォント
fontfont-familyfont-sizefont-style
font-variantfont-weightline-height
colorbackground-colorborder-color
背 景
backgroundbackground-colorbackground-image
background-positionbackground-repeat
余 白
marginmargin-bottommargin-leftmargin-rightmargin-top
paddingpadding-bottompadding-leftpadding-rightpadding-top
境界
borderborder-colorborder-styleborder-width
border-bottomborder-leftborder-rightborder-top
配 置
caption-sideclearfloatheightline-height
text-alignvertical-alignwidth
リスト
list-stylelist-style-type

■ 値(Values)

スタイルの種類を表すプロパティに対して、スタイルの指定内容を具体化するためのデータをといい、プロパティに続いて ":"(コロン)を挟んで書きます。

値の中には、

  1. 数値で入力するもの
  2. 既定の値のグループの中から選択するもの
  3. Web ページ作成者が自身の環境や目的に応じて自由に設定するもの
などの何種類かのパターンがあります。 たとえば、幅・高さなどを指定する場合は 1 であり、境界線の引き方(実線・破線・点線・なし等)の場合は 2 になります。 また、ファイル名を指定するような場合は 3 になります。

とくに、多くのプロパティの値として、長さの値があり、これは、色々な単位を使って指定が可能です。 また、同様に、多数のプロパティで色の値が使われています。

■ 長さの値(Values of Length)

CSSプロパティ長さで指定する場合には、つぎのような単位が使用できます。

単 位意  味
%
親要素のサイズや初期値を基準とした割合( % )による相対的なサイズの指定
em
文字の高さを 1em とした単位
ex
小文字 "x" の高さを 1ex とした単位
px
スクリーンの1ピクセルの長さを 1px とした単位
mm
ミリメートル
cm
センチメートル ( 1cm = 10mm )
in
インチ ( 1in = 2.54cm )
pt
ポイント ( 1pt = 1/72in )
pc
パイカ ( 1pc = 12pt )

これらのうち、%(パーセント),em(エム),ex(エックス)は、ブラウザーで表示したときの表示領域や他の要素のサイズを基準とした相対的なサイズ指定です。 たとえば、ブラウザーで文字サイズが変更になっても、em による指定であれば同じ文字数分の長さとして柔軟な指定が可能です。

一方、px(ピクセル)は、モニタ画面全体の中での表示レイアウトを揃えるのに有効ですが、実際の表示サイズはモニタの解像度に依存して変化しますので注意が必要です。

残りの mm(ミリメートル),cm(センチメートル),in(インチ),pt(ポイント),pc(パイカ)などの物理単位は、主に印刷のために使用されます。

■ 色の値(Values of Color)

CSS のプロパティのの中でも、はよく使われるものの一つでしょう。

色の指定方法には、大きく分けてつぎの2つの方法があります。

  1. "red","blue","yellow" などの色の名前で指定する方法。
  2. 光の三原色の赤・緑・青の各色(RGB)の割合をそれぞれ 256段階の数値として16進数で表した、#FFFFFF(白),#FF0000(赤),#00FF00(緑),#0000FF(青)などの表記方法。
なお、色の名前の一覧原色大辞典ブラウザで名前が定義されている140色の色名,RGB の 16進数による色の一覧は、同じくカラーコード順のカラーチャートなどを参照してください。

CSS3 では、色の名前16進数による色指定 のほかに、RGBカラー(rgb( ))RGBAカラー(rgba( ))HSLカラー(hsl( ))HSLAカラー(hsla( )) などによる色指定の方法が提供されています。 ただし、ブラウザーがこれらの色指定方法に対応してない場合には、 色指定が無視された形の表示になりますので、注意が必要です。

また、CSS3 では、色を表すキーワード として、次のものが使用できます。

キーワード表 示 色
 transparent 透明であるかのように背景色で表示されます。
 currentColorcolorプロパティ の色の値を参照するときに 使用できます。 colorプロパティ での指定色で用いた場合は inherit と同様になります。

■ 要素のボックス (Boxes of Elements)

各要素には配置や表示の基準となる次の 3つのボックス境界画像領域 があります。

ボックス名範  囲
 1. 境界ボックス(border-box)
要素の一番外側境界線 まで含めたボックス
 2. パディングボックス(padding-box)
要素の境界線を除いた それより内側のボックス
 3. コンテンツボックス(content-box)
要素内容の表示範囲 となるボックス
 4. 境界画像領域(border image area)
画像による境界 の表示 の限界となる領域

これから、明らかに、3つのボックス については、
  1. 境界線の幅(border-width) が 0 の場合は、境界ボックスパディングボックス と同一。
  2. 上下左右すべての padding の値が 0 の場合は、パディングボックスコンテンツボックス と同一。
ということがわかります。 従って、上下左右すべてについて、境界線の線幅padding が、 ともに 0 の場合には、上の3つのボックスはすべて同一になります。

一方、境界画像領域(border image area) は、画像による境界 の表示範囲の上下左右の限界を与える領域で、 画像による境界 は この内部に表示されます。  border-image-outset プロパティ が初期値("1")のときには、境界ボックス の内部に一致しますが、 border-image-outset の指定によって、その外側まで含めたより広い領域(親要素や隣接要素の領域も含む) となり、その範囲まで画像による境界を表示することができます。

■ テキストの配置とベースライン (Baselines)

各要素には、コンテンツやテキストの配置基準となる次の位置やベースライン(基準線)があります。

位置・ベースライン位  置
 1. before-edge
要素のコンテンツ表示範囲の上限の位置





 2. text-before-edge baseline (TBE)
テキストの em正方形の上辺 の位置
 3. hanging baseline (H)
上の位置に表示される (')、(") や (^) などの配置の基準線
 4. mathematical baseline (MA)
分数式の分子などの配置の基準線
 5. middle baseline (MID)
テキストの em正方形 の上下中央の位置
 6. alphabetic baseline (A)
英大文字の配置の基準線
 7. ideographic baseline (I)
漢字など表意文字の配置の基準線
 8. text-after-edge baseline (TAE)
テキストの em正方形の下辺 の位置
 9. after-edge
要素のコンテンツ表示範囲の下限の位置

上の表の各項目は高い方から順に並んでします。

さらに、ベースラインに関連した用語として、

  1. アセンダー(ascender): アルファベットの小文字表記において、エックスハイトと呼ばれる小文字の "x" の高さより上にはみ出した部分(TBE までの長さ)のことです。
  2. ディセンダー(descender): アルファベット小文字の "g" や "y" 等で、ベースライン(A)よりも下にはみ出す部分(TAE までの長さ)のことです。
があります。

■ フレキシブル・コンテナと行ボックスの配置

フレキシブル・コンテナ(flex containers) と内包する行ボックスの配置に関しては、以下のような用語が定義されております.

用  語
(日本語)
用  語
(英 語)
説  明
 主 軸 main axis フレキシブル・コンテナの 主軸 とは内包要素(flex items)を置いて並べる 行方向(行頭→行末)の軸をさします。 この方向の自由度を 主軸次元 といいます。
 主軸次元 main dimension
 主開始端 main-start フレキシブル・コンテナの内包要素(flex items)を主軸方向に並べる開始位置を主開始端、終了位置を主終了端 といいます。
 主終了端 main-end
 主軸方向サイズ main size 内包要素(flex items)の幅と高さのうち主軸に一致する方向の寸法を主軸方向サイズ、また、内包要素のそれを指定するプロパティ名 (width、または、height)を主軸方向サイズ・プロパティ といいます。
 主軸方向サイズ
 ・プロパティ
 main size
 property
 副 軸 cross axis フレキシブル・コンテナの 副軸 とは、主軸 に垂直な軸をさします。 複数行の場合は 行送りの方向 です。 この方向の自由度を 副軸次元 といいます。
 副軸次元 cross dimension 
 副開始端 cross-start フレキシブル・コンテナの行の内包要素(flex items)は副軸方向に 副開始端 を開始位置として、終了位置の 副終了端 まで配置されます。
 副終了端 cross-end
 副軸方向サイズ cross size 内包要素(flex items)の幅と高さのうち副軸に一致する方向の寸法を副軸方向サイズ、また、内包要素のそれを指定するプロパティ名 (width、または、height)を副軸方向サイズ・プロパティ といいます。
 副軸方向サイズ
 ・プロパティ
 cross size
 property

具体的にどの方向やサイズを指すのかがかなりわかりにくいですが、これは、縦書き・横書き、また、行の記入方向などについて柔軟に対応するように配慮した結果です。

以下に、日本語の縦書きと横書き の際に、これらの用語が何に対応するかをまとめておきます。

用  語
(日本語)
用  語
(英 語)
横  書縦  書
 主 軸 main axis  横軸 (左→右) 縦軸 (上→下)
 主開始端 main-start  左端 上端
 主終了端 main-end  右端 下端
 主軸方向サイズ main size  幅 (width) 高さ (height)
 副 軸 cross axis  縦軸 (上→下) 横軸 (右→左)
 副開始端 cross-start  上端 右端
 副終了端 cross-end  下端 左端
 副軸方向サイズ cross size  高さ (height) 幅 (width)

説明を読んでわかりにくい場合には、この表にしたがって読み替えてみてください。

■ アットルール(@ Rule)

CSS によるスタイルシートの中には、すでに述べた セレクタ { プロパティ名 : } という形式の記述(rule-set)以外に、つぎのような"@"で始まるスタイルシート全般に関する指定を行うアットルール(@ Rule)を書くことができます。

種  類設定の内容記入場所
外部 CSS <style>要素
@charset
外部スタイルシートの文字コードの指定
×
@import
外部スタイルシートの読み込み
  
@media
メディアタイプごとにスタイルシートを指定する
@page
ページボックス(page box)の向きや余白を設定したり名前を定義する
          他のアットルールや宣言ブロックより前に書く必要がある。

CSS3 では、上記に加えて以下のアットルールの導入が予定されております。 しかし、現状では対応していないブラウザーもあるので、利用に関しては注意が必要です。

種  類設定の内容
カウンターの書式の一覧を定義する
アニメーションのキーフレームを定義する
@namespace
URL に対して、既定の名前空間(Namespace) を割り当てたり、名前空間名をつけて個別に参照できるようにする
発音記号の標準を文字列で指定する

■ @charset (外部スタイルシートの文字コードの指定)

スタイルシートの記入に使用する文字コードを指定します。 外部 CSS ファイルの先頭に一度だけ記入します。 指定可能な文字コードと指定に使用するは、つぎの通りです。

文字コード
シフトJIS
"shift_jis"
JIS
"iso-2022-jp"
EUC
"euc-jp"
UTF-8
"utf-8"

たとえば、CSS スタイルシートの外部ファイルを UTF-8 で作成する場合には、このファイルの先頭の行に、

@charset "utf-8" ;

のように書きます。

■ @import (外部スタイルシートの読み込み)

このアットルールを記入するスタイルシートに外部のスタイルシート・ファイルの内容を読み込みます。 実際上の用途としては、

  1. 複数の外部スタイルシートを作成して、そのうちの1つに他のものの内容を取り込む。
  2. HTML 文書内の <style> 要素に、外部スタイルシートの内容を取り込む。
があります。 ただし、2 の場合は、他のアットルールや宣言ブロックより前に書く必要があります。 基本的な書式は、

   @import url(外部スタイルシート名) [メディアタイプ] ;

という形式です。

外部スタイルシート名 には、外部 CSSスタイルシートのファイル名、または、パス名+ファイル名 を書きます。

メディアタイプ は、読み込んだスタイルを特定のメディアタイプに適用する場合に指定します。 これは省略可能です。(省略した場合は、すべてのメディアタイプに適用されます。) また、複数のメディアタイプを指定する場合は、","(カンマ)で区切って並べます。

たとえば、CSS スタイルシートの外部ファイル "style.css" を読み込む場合は、

@import url( "style.css" ) ;

のように書きます。 また、ブラウザー、携帯、プリンターのメディアタイプごとに、それぞれ、 "browser.css","mobile.css","print.css" という別のスタイルシートのファイルを作成して、これらをそれぞれのメディアタイプに対して適用する場合は、
@import url( "browser.css" ) screen, tv;
@import url( "mobile.css" ) handheld;
@import url( "print.css" ) print;

のように書きます。

■ @media (メディアタイプごとにスタイルシートを指定する)

スタイルシートで設定したスタイルを特定のメディアタイプに適用する場合に、このアットルールを使用します。 基本的な書式は、

   @media メディアタイプ { セレクタ { プロパティ名 : }
                      セレクタ { プロパティ名 : }
                          ・・・・・
                      セレクタ { プロパティ名 : } } ;

という形式です。

たとえば、<body> 要素について、ブラウザー、携帯、プリンターのメディアタイプごとに、それぞれ、異なるスタイルを設定する場合は、

@media screen, tv { body { font-size: larage } }
@media handheld { body { background: #000000 ; color: #FFFFFF ; } }
@media print { body { background: #FFFFFF ; color: #000000 ; font-size: 10pt ; } }

のように書きます。

■ @page (ページボックス(page box)の向きや余白を設定したり名前を定義する)

ページボックス(page box)は、主に印刷の際に使用する限定された大きさのボックスのことです。 このボックスの余白や縦横配置などの設定に基づいて、文書全体が一枚に縮小出力されたり、複数枚に分割されて出力されたりします。 各ページボックスの設定には名前をつけることができ、このページボックスの名前はスタイルシートの page プロパティの値として指定が可能です。

基本的な書式は、

   @page  ページボックス名  { sizeプロパティ; marginプロパティ; }

という形式です。 たとえば、
@page { margin: 20mm ; }
@page  tate { size: portrait ; margin: 20mm ; }
@page  yoko { size: landscape ; margin: 20mm ; }

のように設定できます。

また、@page では、:first:left:right の擬似クラスの指定が可能で、それぞれ、最初のページ左ページ右ページのスタイルを指定することが可能です。 たとえば、

@page:first { margin-top: 25mm ; }
@page:left { margin-right: 25mm ; }
@page:right { margin-left: 25mm ; }

のように設定できます。

■ 継承 (Inheritance)

CSS のスタイルシートによって設定したスタイルが、適用対象の要素(タグ)が含む子要素にも受け継がれるかどうかという性質を継承(Inheritance)といいます。

一般的に、文字の色やサイズに関するプロパティは継承されます。 したがって、ある要素(たとえば <div>要素)に設定した文字の色は、その要素が含む子要素(たとえば <p>要素)にも継承されて、子要素の文字の表示色も同じになります。

一方、通常、境界、余白、背景画像などに関するプロパティは、継承されません。 どのプロパティが継承されるのかということについては、各プロパティの説明ページに示してありますので、そちらを参照してください。

しかし、通常は設定内容が継承されないプロパティについても、プロパティinherit という値を設定すると、この要素は親要素のもつプロパティの設定を継承するようになります。 たとえば

div { border: 1px solid #CCCCCC ; }
p { border: inherit ; }

のように設定すると、<div>要素の子要素の<p>要素では、<div>要素の境界線に加えて <p>要素の境界線も表示されるようになります。

また、継承されるプロパティを %,em,ex などの相対的な値で指定する場合には、親要素と子要素ともに設定を行うと、実際には両者を掛け合わせた数値によりスタイルが適用されることになるので、注意が必要です。 たとえば、

div { font-size: 90% ; }
p { font-size: 90% ; }

のように設定した場合では、<div>要素の子要素の<p>要素では、継承された 90% のサイズを基準にして <p>要素の設定 90% が適用される結果、 90% × 90% = 81% のサイズが適用されることになります。

■ セレクタのグループ化 (Groups of selectors)

セレクタを","で区切って並べることにより、複数のセレクタに対して同じスタイル宣言(プロパティのセット)を割り当てることができます。 つまり、

   セレクタ1, セレクタ2, ・・・ , セレクタn  { プロパティ1: 値1; ・・・ ; プロパティm: 値m; }

という形式の場合、セレクタ1セレクタ2, ・・・ ,セレクタn によって選択されるすべての要素に後続のスタイル宣言:{ プロパティ1: 値1; ・・・ ; プロパティm: 値m; }が適用されます。

たとえば、

   h1, h2 { background-color: #8484ee ;}

とすると、<h1> 要素<h2> 要素のどちらにも、背景色の"#8484ee"が適用されます。

■ 型セレクタ (Type selector)

一番基本的で、かつ、よく使用されるセレクタです。 単に HTML の1つの要素名を書くものです。 この場合、要素名で指定した要素のすべてにスタイルが適用されます。

たとえば、

   p { text-indent: 2em; }

とすると、すべての<p> 要素の先頭で2文字分のインデント(字下げ)が行われます。

■ 全称セレクタ (Universal selector)

すべての要素に同じスタイルを適用する場合に使用します。 セレクタの書式としては、"*" を記入します。

たとえば、

   * { color: #0000FF; }

とすると、すべての要素の表示色(文字等)が青色になります。

■ 属性セレクタ (Attribute selectors)

これはスタイルの適用対象として単に要素を選択するだけではなく、その要素のもつ属性についても指定を行って適用対象を絞り込むためのセレクタです。 CSS2 の属性セレクタには、つぎの4通りのものがあります。

  1. 要素[属性]
  2. 要素[属性 = ]
  3. 要素[属性 ~= ]
  4. 要素[属性 | = ]
これらは、それぞれ、
  1. 属性の値が指定された要素 (値は問わない)
  2. 属性の値がに等しい要素
  3. 属性の値が空白で区切られた複数の値からなるものであるとき、属性の値の1つがに等しい要素
  4. 属性の値がから"-"(ハイフン)を挟んで始まるものに等しい要素
を意味します。 

さらに、CSS3 においては、つぎの3つの部分マッチ属性セレクタが新たに導入されました。

  1. 要素[属性 ^= ]
  2. 要素[属性 $= ]
  3. 要素[属性 *= ]
これらは、それぞれ、
  1. 属性の値がから始まる要素
  2. 属性の値がで終わる要素
  3. 属性の値に少なくとも1つに等しい文字列をもつ要素
を意味します。 

■ クラスセレクタ (Class selectors)

クラスセレクタ(Class selectors)は、特定の class 属性の値をもつ HTML 要素にのみスタイルを適用するためのセレクタです。

このセレクタの書式は、

  1. . クラス名
  2. 要素名 . クラス名
であり、"."(ドット)とクラス名により指定します。 

要素名を書かない 1 の場合は、クラス名class 属性の値としてもつ、すべての要素がスタイルの適用対象となります。

一方、要素名を指定した 2 の場合は、要素名に書いた要素のうちで、クラス名class 属性の値としてもつものがスタイルの適用対象となります。

たとえば、

  1. .tb { margin: 0em 1em 0em 1em; padding: 0em }
  2. p.tb { margin: 0em 1em 0em 1em; padding: 0em }
の設定について、考えてみます。

2つの設定のうち、1 では class="tb" を属性にもつすべての要素が対象になります。 したがって、<p class="tb"> ~ </p>,<span class="tb"> ~ </span>,<div class="tb"> ~ </div> などには、すべてこのスタイルが適用されます。 しかし、class="tb" を属性にもたない <p> ~ </p>,<span> ~ </span>,<div> ~ </div> などには、適用されません。

一方、2 の場合では、当然ながら <p class="tb"> ~ </p> にはこのスタイルが適用されます。 しかし、class="tb" を属性にもたない <p> ~ </p>,<span> ~ </span>,<div> ~ </div> などはもちろん、class="tb" を属性としてもっていても、<p> 以外の要素である <span class="tb"> ~ </span>,<div class="tb"> ~ </div> などには、スタイルが適用されません。 しかし、この性質を活用して、たとえば、

    div.tb { margin: 1em 2em 1em 2em; padding: 0em }

のような設定を追加していくことによって、ある使用用途で用いる複数の要素に対して、個々の要素ごとにスタイルの設定ができます。 つまり、同じクラス名(この例の場合 tb)による class 属性の指定で、この使用用途のどの要素にもスタイルを適用することができます。

なお、クラス名 は文書中の使用用途や役割に基づいて名前をつけるべきといわれています。 たとえば、赤い色で表示するスタイル設定に対して、class="red" のようにクラス名を使うのは好ましくありません。 もし、この「赤い色の表示」が"注意を払うべき"という意味で使用されるのであれば、class="warning" のように意味や用途を表すクラス名が望ましいということです。

■ IDセレクタ (ID selectors)

IDセレクタ (ID selectors) は、特定の id 属性の値をもつ要素にのみスタイルを適用するためのセレクタです。 id 属性の値は、HTML 文書全体で重複して使用することができませんので、id 属性の値を指定することで文書全体で唯一つ存在する要素を指定することができます。

このセレクタの書式は、

   # id 属性の識別子

であり、"#"(シャープ)と id 属性の識別子 により指定します。 

たとえば、

   <section id="hajimeni"> </section>

なる識別子 "hajimeni" をもつ <section> 要素に対して、スタイルを適用したい場合は、

   #hajimeni { margin: 0em 2em 2em 0em; padding: 1em ; }

のように書けばよいのです。

■ 擬似クラス (Pseudo-classes)

ある特定の状態、履歴、要素の親子関係上の位置などをもつ要素に対して、スタイルを適用するために擬似クラス (Pseudo-classes) と呼ばれるセレクタが定義されています。

すでに、CSS2 までに導入されて使われてきた擬似クラスには、つぎのものがあります。

擬似クラス名状態や履歴の条件設定の対象
:link
未訪問のリンク
<a> 要素のみ
:visited
訪問済みのリンク
<a> 要素のみ
:active
現在アクティブな要素
すべての要素
:hover
カーソルが上にあるがアクティブでない要素
すべての要素
:focus
テキスト入力にフォーカスされている要素
<input> 要素のみ
:lang( 言語名 )
lang属性の値: 言語名 をもつ要素
テキストをもつ要素
:first-child
ある親要素の最初の子要素
すべての要素

たとえば、すべての <a> 要素を対象として、未訪問、訪問済み、マウスカーソルが上に来たとき、クリックしたときの色の割り当てを指定する場合は、

    a:link { color: #0000FF ; }
    a:visited { color: #00CCFF ; }
    a:hover { color: #FFFFFF ; background: #0000DD ; }
    a:active { color: #FF0000 ; }

のように書けばよいのです。

また、CSS3 で新規に導入が予定されている擬似クラスには、つぎのものがあり、大幅な拡張が予定されています。

擬似クラス名状態や履歴の条件設定の対象
:last-child
ある親要素の最後の子要素
すべての要素
:target
フラグメント識別子を持ってる url リンクでターゲット対象にされた要素
:enabled
有効になっている要素
<form> 要素
子孫 <input> 要素
:disabled
無効になっている要素
<form> 要素
子孫 <input> 要素
:checked
チェックされた要素
(ラジオボタン、チェックボックス)
<input> 要素のみ
:indeterminate
チェックされてるかどうか不確定の要素
(ラジオボタン、チェックボックス)
<input> 要素のみ
:root
ドキュメントルートの要素
<html> 要素のみ
:nth-child(n)
親要素のn番目の子要素
すべての要素
:nth-last-child(n)
親要素の最後から数えてn番目の子要素
すべての要素
:nth-of-type(n)
親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素
すべての要素
:nth-last-of-type(n)
親要素の中で兄弟関係にある同じ種類の要素の中最後から数えてn番目の要素
すべての要素
:first-of-type
親要素の中で兄弟関係にある同じ種類の要素の中の最初の要素
すべての要素
:last-of-type
親要素の中で兄弟関係にある同じ種類の要素の中の最後の要素
すべての要素
:only-child
兄弟を一つも持たない、その親の唯一の子である要素
すべての要素
:only-of-type
同じ要素の兄弟が一つもない要素
すべての要素
:empty
子要素を一つも持たない要素
すべての要素
:contains( 文字列 )
テキストの内容に与えられた 文字列 を含む要素
すべての要素
:not()
「なになにではない(否定)場合」の要素
すべての要素

■ 擬似要素 (Pseudo-elements)

要素内の最初の文字最初の行、あるいは、要素の直前や直後の位置など、要素ある特定の部分や位置に対してスタイルを適用するために、擬似要素 (Pseudo-elements) と呼ばれるセレクタが定義されています。

擬似要素の先頭には2つのコロン( :: )が付けられており(後註参照)、要素名に続けて書くことで、その要素の特定の場所に対してスタイルを適用する指定を行います。 擬似要素には、つぎのものがあります。

擬似要素名設定の対象
 ::first-line
要素内のテキストの最初の行
 ::first-letter
要素内のテキストの最初の文字
 ::before
要素直前の位置contentプロパティで指定した内容の挿入)
 ::after
要素直後の位置contentプロパティで指定した内容の挿入)

たとえば、英語のテキストで、すべての段落(<p> 要素)を対象として、1行目をすべて大文字で表示することを指定するには、::first-line 擬似要素を使って、

               p::first-line { text-transform: uppercase;  }
のように書きます。 また、各段落の先頭文字をブルーの2倍サイズのフォントで表示することを指定するには、::first-letter 擬似要素を使って、
               p::first-letter { font-size: 200%; color: blue; }
のように書きます。

一方、番号付きのリスト(箇条書き)を<ol> 要素を用いて書く際に、<li> 要素の先頭の番号に "( )" をつけるには、::before 擬似要素を使って、

               ol.parenth { counter-reset: itemp;  }
               ol.parenth li { display: block; }
               ol.parenth li::before { content:"(" counter(itemp) ") "; counter-increment: itemp; }
のように書きます。 実際に、<ol class="parenth"> ~ </ol> によって番号付きリストを書くと、たとえば、
  1. 表示テスト(1項目目)
  2. 表示テスト(2項目目)
  3. 表示テスト(3項目目)
のように表示されます。

CSS2.1 までは、擬似要素は先頭に1つのコロン( : )を付けて書くことになっていました。 これでは、擬似クラス (Pseudo-classes) と同じ表記方法になって紛らわしいので、CSS3 からはコロンを2つ付けて区別するように変更されました。  多くのブラウザーでは、互換性の確保のために CSS2.1 までのコロン1個のマークアップ でも動作するようになっています。 しかし、CSS3 での正しい擬似要素の記述方法は先頭にコロン2個をつける形式であり、今後はその形でマークアップすることが推奨されます。

擬似要素の上記仕様は W3C の 「Selectors Level 3」 ワーキンググループの 2011年9月29日付勧告 に基づいています。 ただし、W3C の 「CSS Lists and Counters Module Level 3」 ワーキンググループの 2014年3月20日付草稿「6 Markers: The '::marker' pseudo-element」 には、'::marker'擬似要素 について、この擬似要素を <li>要素 に使用したリスト・マーカーの作成方法の例がいくつか示されています。 実際、これが使用できれば、より簡単にマーカーの書式を自由に変更できます。 しかし、現状ではまだ対応しているブラウザーは見つかりません。 また、2015年1月15日に公開されたW3C の 「CSS Pseudo-Elements Module Level 4」 ワーキンググループの 最初の草稿 には、上記以外に '::selection','::spelling-error','::grammar-error','::placeholder' などの新しい擬似要素が紹介されていますが,'::marker'擬似要素 の記載はありません。 最終的に採用されるかどうかは不明です。

■ 子孫結合子(子孫セレクタ)(Descendant combinator)

上の擬似要素リストの例 では、

               ol.parenth li { display: block; }
               ol.parenth li::before { content:"(" counter(itemp) ") "; counter-increment: itemp; }
のようなセレクタの記述があります。 これは、セレクタ要素名)が半角ブランクを挟んで並んだ形 になっています。 さらによく見ると、ブランクの後の <li> 要素 というのは、その左にある<ol> 要素の中に子孫として含まれる要素 という形になっています。

つまり、

   セレクタ1(要素名) セレクタ2(子孫要素名)

という形式です。 そして、ここで2つのセレクタを結合する 半角ブランク は、スタイルの適用対象として、 前にあるセレクタ1(要素)の子孫要素の中でセレクタ2を選択する 役目をするものであり、子孫結合子(子孫セレクタ)(Descendant combinator) と呼ばれます。

この例では、半角ブランクの前の セレクタ: ol.parenthクラスセレクタ ですので、スタイルの適用範囲は、「parenthクラスの<ol> 要素の中に含まれる(子孫である)<li> 要素」 ということになります。

さて、それでは、擬似要素リストの例 で説明したことをもとに、

               ol.parenth { counter-reset: itemp;  }
               ol.parenth li { display: block; }
               ol.parenth li::before { content:"(" counter(itemp) ") "; counter-increment: itemp; }
               ol.bracket { counter-reset: itemb;  }
               ol.bracket li { display: block; }
               ol.bracket li::before { content:"[" counter(itemb) "] "; counter-increment: itemb; }
のように指定した上、次のような入れ子のリストを表示するとどうなるでしょうか?
  <ol class="bracket">
     <li>表示テスト(1項目目)
     <ol class="parenth">
        <li>表示テスト(1-1項目目)
        <li>表示テスト(1-2項目目)
        <li>表示テスト(1-3項目目)
     </ol>
     <li>表示テスト(2項目目)
     <ol class="parenth">
        <li>表示テスト(2-1項目目)
        <li>表示テスト(2-2項目目)
     </ol>
  </ol>
表示して見ると、期待に反して、
  1. 表示テスト(1項目目)
    1. 表示テスト(1-1項目目)
    2. 表示テスト(1-2項目目)
    3. 表示テスト(1-3項目目)
  2. 表示テスト(2項目目)
    1. 表示テスト(2-1項目目)
    2. 表示テスト(2-2項目目)
のような表示になり、入れ子になった「parenthクラスの<ol> 要素の中に含まれる(子孫である)<li> 要素」には、 指定したスタイルが適用されずに、「bracketクラスの<ol> 要素の中に含まれる(子孫である)<li> 要素」に対する 指定がそのまま適用されています。 この理由は、parenthクラスの<ol> 要素の中に含まれる <li> 要素 は、 parenthクラスの<ol> 要素の親である bracketクラスの<ol> 要素の子孫でもあるので、そちらに対する 指定の方が優先された形になるのです。 この問題は、次の項目である子供結合子(Child combinators) を使用すれば解決できます。

■ 子供結合子(子供セレクタ) (Child combinators)

子供結合子(子供セレクタ) (Child combinators) は、スタイルの適用対象として、あるセレクタ要素) の子要素を選択する役目をするものであり、

   セレクタ1(要素名) > セレクタ2(子要素名)

という形式です。 ここでの > は、スタイルの適用対象として、前にある セレクタ1要素) の子要素(子供要素)の中からセレクタ2で記述した要素を選択することを表します。

子供結合子の機能は、子孫結合子とよく似ていますが、子要素の子要素、さらにその子要素などは指定対象に含まない という点が異なります。  この両者の違いのわかりやすい例としては、入れ子のリストの例 が挙げられます。 この例の子孫結合子半角ブランク> で置き換えて、

               ol.parenth { counter-reset: itemp;  }
               ol.parenth > li { display: block; }
               ol.parenth > li::before { content:"(" counter(itemp) ") "; counter-increment: itemp; }
               ol.bracket { counter-reset: itemb;  }
               ol.bracket > li { display: block; }
               ol.bracket > li::before { content:"[" counter(itemb) "] "; counter-increment: itemb; }
のように指定した上、と同じ、次のような入れ子のリスト:
  <ol class="bracket">
     <li>表示テスト(1項目目)
     <ol class="parenth">
        <li>表示テスト(1-1項目目)
        <li>表示テスト(1-2項目目)
        <li>表示テスト(1-3項目目)
     </ol>
     <li>表示テスト(2項目目)
     <ol class="parenth">
        <li>表示テスト(2-1項目目)
        <li>表示テスト(2-2項目目)
     </ol>
  </ol>
表示して見ると、今度は期待通りに、
  1. 表示テスト(1項目目)
    1. 表示テスト(1-1項目目)
    2. 表示テスト(1-2項目目)
    3. 表示テスト(1-3項目目)
  2. 表示テスト(2項目目)
    1. 表示テスト(2-1項目目)
    2. 表示テスト(2-2項目目)
のような表示になります。 つまり、「parenthクラスの<ol> 要素の子要素である <li> 要素」は、 「bracketクラスの<ol> 要素の中に含まれる <li> 要素」(子孫要素)ではありますが、 「bracketクラスの<ol> 要素の子要素」ではありませんので、"[  ]" を表示する対象ではなくなり、 "(  )" を表示する対象になります。

■ 隣接結合子(隣接セレクタ) (Sibling combinators)

隣接結合子(隣接セレクタ) (Sibling combinators) は、スタイルの適用対象として、あるセレクタ要素) の直後にある要素を選択する役目をするものであり、

   セレクタ1(要素名) + セレクタ2(後続要素名)

という形式です。 ここでの + は、スタイルの適用対象として、前にある セレクタ1要素) の直後にある要素の中からセレクタ2で記述した要素を選択する ことを表します。

たとえば、

               h5.sample + p { color: red; }
のように指定した上、
   <h5 class="sample">■ 隣接結合子(隣接セレクタ)の使用例</h5>
   <p>ここはスタイルの適用対象です。</p>
   <p>ここはスタイルの適用対象外です。</p>
として、表示して見ると、
■ 隣接結合子(隣接セレクタ)の使用例

ここはスタイルの適用対象です。

ここはスタイルの適用対象外です。

のような表示になります。

■ 備考

IE8 や IE9 で、上部のメニューや「HTML5 文書形式 (2)」のブラウザー表示部分が正常に表示されないときは、Windows のエキスプローラで 、

  • ファイル: html5.html をマウスで右クリックして、「プロパティ」を選択
  • 「セキュリティー」タブを選択
  • 「このファイルは他コンピュータから取得したものです」という表示があれば、「アクセスを許可する」を選択
することにより、正常に表示できます。