項 目 | 詳細項目 | |
---|---|---|
基本用語 |
ハイパーテキスト(HyperText),
WWW(World Wide Web),
HTML(HyperText Markup Language), HTTP(HyperText Transfer Protocol), プロトコル(Protocol), URL(Uniform Resorce Locater), サーバー, クライアント, Webサーバー, ブラウザー, Webページ, コンテンツ, マークアップ |
|
HTML5 | 用 語 (必須知識) |
タグ,
要素,
属性(コンテンツ属性),
インベントハンドラ,
カテゴリー, コンテンツ・モデル, トランスペアレント |
要素の分類(1) (カテゴリー) |
| |
要素の分類(2) (機能別) |
| |
文書形式(1) |
最も簡単な形,
HTML4.01 からの変更点
|
|
文書形式(2) | 一般的な文書の形 |
|
CSS3 |
用 語 (必須知識) |
CSS,
セレクタ,
プロパティ,
値,
クラス,
コメント,
長さの値, 色の値, 主軸, 副軸, アットルール, 継承 |
セレクタ |
| |
プロパティ |
主要なキーワード,
ABC 順索引,
機能別一覧,
知っておくとよいプロパティ |
|
値と基準値 |
長さの値,
色の値,
要素のボックス,
ベースライン(基準線)
|
CSS(Cascading Style Sheets)は、Webページのスタイル(各部分のサイズ、色、余白、配置、フォントの種類、背景、境界などについての形式や指定)を記述するための言語です。 HTML が Webページの論理構造を記述するための言語であるのに対して、CSS は見栄えや装飾を記述するための言語ということができます。
従来の HTML4.01 までは、<font> や <center> などの要素(タグ)、また、align,background,bgcolor などの属性に、HTML にもスタイルに関する指定が一部残っておりました。 HTML5 では、この切り分けが徹底した形となって、これらはすべて廃止になりました。
そのため、HTML5 においては、見栄えのよい Webページを作成するためには CSS に関する知識が必須となっています。
とはいえ、従来の HTML4.01 までの要素(タグ)や属性で記述していた見栄えや装飾の指定を CSS のスタイルシートに置き換える程度なら、簡単な記述だけで済みます。 つまり、書き方が変わっただけで、とくに記述が難しいわけではありません。 あまり難しく考えずに、見栄えや装飾に関する部分の書き方が少し変わった程度に捉えてもらってよいと思います。
現在までの CSS のバージョンには、つぎのものがあります。
現在策定中の CSS3 では、境界の角に丸みを付けたり、段落の先頭の文字など特定の部分に関する設定、グラデーション、透明度、アニメーションなどに関する設定などの新しい機能が追加されることになっています。
HTML4.01 による Webページの作成では、CSS2 と CSS2.1 の仕様を意識して Webページを作成するのが普通です。
しかし、現状で、IE9,FireFox,Opera,Safari,GoogleChrome などの新しいブラウザーでは、すでに CSS3 の機能の一部が先行してサポートされています。 そして、この傾向は HTML5 の普及とともに、さらに進んでいくものと思われます。
CSS によるスタイル設定の基本書式は、
セレクタ { プロパティ名 : 値 }
という形式です。 ここで、セレクタ はスタイル設定の対象となる要素を指定する部分のことです。 また、プロパティは適用するスタイルの種類で、スタイルの指定内容を表す値が、":"(コロン)を挟んでこれに続きます。
同一のセレクタに対して複数のプロパティを同時に適用したい場合は、
セレクタ { プロパティ名1 : 値1 ; プロパティ名2 : 値2 ; ・・・ ; プロパティ名n : 値n ; }
という形に、";"(セミコロン)を挟んでプロパティと値のペアを並べます。 一番最後の ";" は省略可能ですが、上記のように書いてあっても間違いではありません。
なお、CSS による記述では、半角スペース、タブ、改行はいずれも無視されて意味を持ちませんので、これらを用いて見やすい形に記述しても問題ありません。 たとえば、上の複数のプロパティを同時に適用する場合では、
のような書き方もできます。
CSS によるスタイル設定の中のコメントは、"/*"と"*/"で挟んで記入します。 たとえば、
CSS の設定内容を HTML 文書に反映させるために、つぎの3つの方法で、HTML ファイルから CSS による記述を参照することができます。 (これらの方法のうち2つ以上を併用することも可能です。)
3つの方法のうち、方法 1 が文書管理上はもっとも好ましいといえます。 しかし、同じスタイルの文書を作成する機会があまりないと思われる場合は、方法 2 でもかまいません。
方法 3 は、HTML4.01以前の <font size="5"> ~ </font> や <div align="center"> ~ </div> などとほぼ同様に使えて便利だと思う人がいるかもしれません。 しかし、文書中で同じ指定をほとんど行わない場合はこの方法でよいのですが、同じ指定を何度も行うときは方法 1 や方法 2 の方が向いています。 実際、定型の文書では文中に同じ指定が何度も現れるのが普通です。 この場合、後になって指定の内容(たとえばフォントのサイズ)を変更したりするときには、方法 1 や方法 2 の方がずっと便利です。
CSS による設定を HTML 文書ファイル内ではなく、独立したスタイルシートのファイルに保存した場合には、適用したい HTML ファイルの <head> ~ </head> の間に、<link> 要素を用いて以下のように記述します。 たとえば、スタイルシートを style.css というファイル名で保存した場合では、
HTMLソース | |
---|---|
<head> ~ </head> | <link rel="stylesheet" href="style.css"> |
また、この方法は、 <head> ~ </head> の間に、<link> の単一要素を記入をするだけでよいので、複数の HTML 文書に同じスタイルシートを適用する場合には便利 です。
CSS による設定を HTML 文書ファイル内の <head> ~ </head> の間にまとめて書く場合は、<style> 要素を用いて、
HTMLソース | |
---|---|
<head> ~ </head> | <style type="text/css"> <!-- body { color: #003333; } h2 { width: 100%; color: #ffffff; background-color: #ee8484; } --> </style> |
CSS による設定を HTML 文書ファイル内の各要素ごとに style=" " 属性を用いて指定する場合は、
HTMLソース | |
---|---|
<body> ~ </body> | <body style="color: #003333;"> <h2 style="width: 100%; color: #ffffff; background-color: #ee8484;"> style 属性を用いてスタイルを適用する </h2> </body> |
セレクタ(Selector)は、CSSスタイルの適用対象となる HTML要素 を指定するための記述部分です。 単一の HTML要素名を書く単純なものから、ある特定の条件を満たす複数の HTML要素を指定するものまで、様々な書式があります。
とくに、CSS3 においては、セレクタ (Selectors)の書式は、@namespace の新規導入などにより、大幅な拡張が行われて、スタイルの適用範囲を自由かつ柔軟に指定可能になります。
現在の W3C の CSS3 のセレクタに関する規定は、この拡張された形で記述されているので、HTML による Webページ作成の初心者にとってはわかりやすいものではありません。 しかし、一方で、初心者がこの拡張された書式を必要とする場面がそれほど多くあるとは思えません。
そこで、以下では、つぎの各項目について、名前空間の導入によるセレクタ書式の拡張部分を除いて、比較的単純な形式でセレクタを記述する場合に絞って説明を書くことにします。 なお、アットルール:@namespace の使い方や名前空間の概念が理解できる人であれば、これらを使用してセレクタを拡張された書式で記述することは、それほど難しくはないと思われます。 (名前空間 を含めたセレクタの使い形ついては、以下の 【参考ページ】 を参照。)
プロパティ(Properties)は、スタイルの種類を指定するためのものです。 プロパティの名前の付け方は、スタイルの種類を説明するキーワードを "-"(ハイフン)でつないだ形の単純な形式であるため、名前から何のために使用するものであるかは、おおよそわかります。 ただし、キーワードは英語であるため、大半のものは意味が明らかですが、中には意味のわかりにくいものもあります。
プロパティの名前で使用されている主要なキーワードを以下に示します。
プロパティ名の主要なキーワード | ||
---|---|---|
|
|
|
CSS1 ~ CSS3 までのプロパティには以下の 273 個のものがあります。
種 類 | プロパティ名 |
---|---|
背 景 |
background,background-attachment,background-clip *,background-color,
background-image,background-origin *,background-position, background-repeat,background-size * |
文 字 |
direction ?,font,font-family,font-size,font-size-adjust,font-stretch *,
font-style,font-variant,font-weight,hyphenate-after *,hyphenate-before *, hyphenate-character *,hyphenate-lines *,hyphenate-resource *,hyphens *, letter-spacing,marquee-direction *,marquee-loop *,marquee-play-count *, marquee-speed *,marquee-style *,string-set *,text-align,text-align-last *, text-decoration ?,text-emphasis *,text-height *,text-indent,text-justify *, text-outline *,text-shadow,text-transform ?,text-wrap *,unicode-bidi ?, white-space,white-space-collapse *,word-break *,word-spacing,word-wrap * |
余 白 |
margin,margin-bottom,margin-left,margin-right,margin-top,
padding,padding-bottom,padding-left,padding-right,padding-top |
境 界 |
border,border-bottom,border-bottom-color,border-bottom-left-radius *,
border-bottom-right-radius *,border-bottom-style,border-bottom-width, border-collapse ?,border-color,border-image *,border-image-outset *, border-image-repeat *,border-image-slice *,border-image-source *, border-image-width *,border-left,border-left-color,border-left-style, border-left-width,border-radius *,border-right,border-right-color, border-right-style,border-right-width,border-spacing ?,border-style, border-top,border-top-color,border-top-left-radius *,border-top-right-radius *, border-top-style,border-top-width,border-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 *,display,dominant-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 *,height,left ?,line-height,line-stacking *, line-stacking-ruby *,line-stacking-shift *,line-stacking-strategy *,max-height, max-width,min-height,min-width,orphans,outline,outline-offset *, outline-style,outline-width,overflow,overflow-style *,overflow-x *, overflow-y *,punctuation-trim *,right ?,ruby-align *,ruby-overhang *, ruby-position *,ruby-span *,size,table-layout ?,top ?,vertical-align,width |
表 示 |
clip ?,crop *,cursor,empty-cells ?,grid-columns *,grid-rows *,icon *,
list-style,list-style-image,list-style-position,list-style-type, opacity *,outline-color,presentation-level *,quotes,rendering-intent *, visibility,z-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 ?,cue,cue-after,cue-before,elevation ?,mark *,mark-after *,
mark-before *,marks,pause,pause-after,pause-before,phonemes *, pitch ?,pitch-range ?,play-during ?,position ?,rest *,rest-after *,rest-before *, richness ?,speak,speak-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 *,color,color-profile *,content,
counter-increment,counter-reset,nav-down *,nav-index *,nav-left *, nav-right *,nav-up *,page,page-break-after,page-break-before, page-break-inside,page-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個)をリストアップしておきます。
対 象 | プロパティ名 |
---|---|
フォント |
font,font-family,font-size,font-style,
font-variant,font-weight,line-height, |
色 |
color,background-color,border-color
|
背 景 |
background,background-color,background-image,
background-position,background-repeat, |
余 白 |
margin,margin-bottom,margin-left,margin-right,margin-top,
padding,padding-bottom,padding-left,padding-right,padding-top |
境界 |
border,border-color,border-style,border-width,
border-bottom,border-left,border-right,border-top, |
配 置 |
caption-side,clear,float,height,line-height,
text-align,vertical-align,width |
リスト |
list-style,list-style-type
|
スタイルの種類を表すプロパティに対して、スタイルの指定内容を具体化するためのデータを値といい、プロパティに続いて ":"(コロン)を挟んで書きます。
値の中には、
とくに、多くのプロパティの値として、長さの値があり、これは、色々な単位を使って指定が可能です。 また、同様に、多数のプロパティで色の値が使われています。
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(パイカ)などの物理単位は、主に印刷のために使用されます。
CSS のプロパティの値の中でも、色はよく使われるものの一つでしょう。
色の指定方法には、大きく分けてつぎの2つの方法があります。
CSS3 では、色の名前 や 16進数による色指定 のほかに、RGBカラー(rgb( ))、 RGBAカラー(rgba( ))、 HSLカラー(hsl( ))、 HSLAカラー(hsla( )) などによる色指定の方法が提供されています。 ただし、ブラウザーがこれらの色指定方法に対応してない場合には、 色指定が無視された形の表示になりますので、注意が必要です。
また、CSS3 では、色を表すキーワード として、次のものが使用できます。
キーワード | 表 示 色 |
---|---|
transparent | 透明であるかのように背景色で表示されます。 |
currentColor | colorプロパティ の色の値を参照するときに 使用できます。 colorプロパティ での指定色で用いた場合は inherit と同様になります。 |
各要素には配置や表示の基準となる次の 3つのボックス と 境界画像領域 があります。
ボックス名 | 範 囲 |
---|---|
1. 境界ボックス(border-box) | 要素の一番外側 の 境界線 まで含めたボックス |
2. パディングボックス(padding-box) | 要素の境界線を除いた それより内側のボックス |
3. コンテンツボックス(content-box) | 要素内容の表示範囲 となるボックス |
4. 境界画像領域(border image area) | 画像による境界 の表示 の限界となる領域 |
一方、境界画像領域(border image area) は、画像による境界 の表示範囲の上下左右の限界を与える領域で、 画像による境界 は この内部に表示されます。 border-image-outset プロパティ が初期値("1")のときには、境界ボックス の内部に一致しますが、 border-image-outset の指定によって、その外側まで含めたより広い領域(親要素や隣接要素の領域も含む) となり、その範囲まで画像による境界を表示することができます。
各要素には、コンテンツやテキストの配置基準となる次の位置やベースライン(基準線)があります。
位置・ベースライン | 位 置 | |
---|---|---|
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 | 要素のコンテンツ表示範囲の下限の位置 |
上の表の各項目は高い方から順に並んでします。
さらに、ベースラインに関連した用語として、
フレキシブル・コンテナ(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) |
説明を読んでわかりにくい場合には、この表にしたがって読み替えてみてください。
CSS によるスタイルシートの中には、すでに述べた セレクタ { プロパティ名 : 値 } という形式の記述(rule-set)以外に、つぎのような"@"で始まるスタイルシート全般に関する指定を行うアットルール(@ Rule)を書くことができます。
種 類 | 設定の内容 | 記入場所 | |
---|---|---|---|
外部 CSS | <style>要素 | ||
@charset | 外部スタイルシートの文字コードの指定 | ○ | × |
@import | 外部スタイルシートの読み込み | ○ | ○† |
@media | メディアタイプごとにスタイルシートを指定する | ○ | ○ |
@page | ページボックス(page box)の向きや余白を設定したり名前を定義する | ○ | ○ |
CSS3 では、上記に加えて以下のアットルールの導入が予定されております。 しかし、現状では対応していないブラウザーもあるので、利用に関しては注意が必要です。
種 類 | 設定の内容 |
---|---|
カウンターの書式の一覧を定義する |
|
アニメーションのキーフレームを定義する |
|
@namespace | URL に対して、既定の名前空間(Namespace) を割り当てたり、名前空間名をつけて個別に参照できるようにする |
発音記号の標準を文字列で指定する |
スタイルシートの記入に使用する文字コードを指定します。 外部 CSS ファイルの先頭に一度だけ記入します。 指定可能な文字コードと指定に使用する値は、つぎの通りです。
文字コード | 値 |
---|---|
シフトJIS | "shift_jis" |
JIS | "iso-2022-jp" |
EUC | "euc-jp" |
UTF-8 | "utf-8" |
たとえば、CSS スタイルシートの外部ファイルを UTF-8 で作成する場合には、このファイルの先頭の行に、
このアットルールを記入するスタイルシートに外部のスタイルシート・ファイルの内容を読み込みます。 実際上の用途としては、
@import url(外部スタイルシート名) [メディアタイプ] ;
という形式です。外部スタイルシート名 には、外部 CSSスタイルシートのファイル名、または、パス名+ファイル名 を書きます。
メディアタイプ は、読み込んだスタイルを特定のメディアタイプに適用する場合に指定します。 これは省略可能です。(省略した場合は、すべてのメディアタイプに適用されます。) また、複数のメディアタイプを指定する場合は、","(カンマ)で区切って並べます。
たとえば、CSS スタイルシートの外部ファイル "style.css" を読み込む場合は、
スタイルシートで設定したスタイルを特定のメディアタイプに適用する場合に、このアットルールを使用します。 基本的な書式は、
@media メディアタイプ { セレクタ { プロパティ名 : 値 }
セレクタ { プロパティ名 : 値 }
・・・・・
セレクタ { プロパティ名 : 値 } } ;
たとえば、<body> 要素について、ブラウザー、携帯、プリンターのメディアタイプごとに、それぞれ、異なるスタイルを設定する場合は、
ページボックス(page box)は、主に印刷の際に使用する限定された大きさのボックスのことです。 このボックスの余白や縦横配置などの設定に基づいて、文書全体が一枚に縮小出力されたり、複数枚に分割されて出力されたりします。 各ページボックスの設定には名前をつけることができ、このページボックスの名前はスタイルシートの page プロパティの値として指定が可能です。
基本的な書式は、
@page ページボックス名 { sizeプロパティ; marginプロパティ; }
という形式です。 たとえば、また、@page では、:first,:left,:right の擬似クラスの指定が可能で、それぞれ、最初のページ、左ページ、右ページのスタイルを指定することが可能です。 たとえば、
CSS のスタイルシートによって設定したスタイルが、適用対象の要素(タグ)が含む子要素にも受け継がれるかどうかという性質を継承(Inheritance)といいます。
一般的に、文字の色やサイズに関するプロパティは継承されます。 したがって、ある要素(たとえば <div>要素)に設定した文字の色は、その要素が含む子要素(たとえば <p>要素)にも継承されて、子要素の文字の表示色も同じになります。
一方、通常、境界、余白、背景画像などに関するプロパティは、継承されません。 どのプロパティが継承されるのかということについては、各プロパティの説明ページに示してありますので、そちらを参照してください。
しかし、通常は設定内容が継承されないプロパティについても、プロパティに inherit という値を設定すると、この要素は親要素のもつプロパティの設定を継承するようになります。 たとえば
また、継承されるプロパティを %,em,ex などの相対的な値で指定する場合には、親要素と子要素ともに設定を行うと、実際には両者を掛け合わせた数値によりスタイルが適用されることになるので、注意が必要です。 たとえば、
セレクタを","で区切って並べることにより、複数のセレクタに対して同じスタイル宣言(プロパティと値のセット)を割り当てることができます。 つまり、
セレクタ1, セレクタ2, ・・・ , セレクタn { プロパティ1: 値1; ・・・ ; プロパティm: 値m; }
という形式の場合、セレクタ1,セレクタ2, ・・・ ,セレクタn によって選択されるすべての要素に後続のスタイル宣言:{ プロパティ1: 値1; ・・・ ; プロパティm: 値m; }が適用されます。
たとえば、
h1, h2 { background-color: #8484ee ;}
とすると、<h1> 要素と <h2> 要素のどちらにも、背景色の"#8484ee"が適用されます。一番基本的で、かつ、よく使用されるセレクタです。 単に HTML の1つの要素名を書くものです。 この場合、要素名で指定した要素のすべてにスタイルが適用されます。
たとえば、
p { text-indent: 2em; }
とすると、すべての<p> 要素の先頭で2文字分のインデント(字下げ)が行われます。すべての要素に同じスタイルを適用する場合に使用します。 セレクタの書式としては、"*" を記入します。
たとえば、
* { color: #0000FF; }
とすると、すべての要素の表示色(文字等)が青色になります。これはスタイルの適用対象として単に要素を選択するだけではなく、その要素のもつ属性についても指定を行って適用対象を絞り込むためのセレクタです。 CSS2 の属性セレクタには、つぎの4通りのものがあります。
さらに、CSS3 においては、つぎの3つの部分マッチ属性セレクタが新たに導入されました。
クラスセレクタ(Class selectors)は、特定の class 属性の値をもつ HTML 要素にのみスタイルを適用するためのセレクタです。
このセレクタの書式は、
要素名を書かない 1 の場合は、クラス名 を class 属性の値としてもつ、すべての要素がスタイルの適用対象となります。
一方、要素名を指定した 2 の場合は、要素名に書いた要素のうちで、クラス名 を class 属性の値としてもつものがスタイルの適用対象となります。
たとえば、
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> などには、スタイルが適用されません。 しかし、この性質を活用して、たとえば、
なお、クラス名 は文書中の使用用途や役割に基づいて名前をつけるべきといわれています。 たとえば、赤い色で表示するスタイル設定に対して、class="red" のようにクラス名を使うのは好ましくありません。 もし、この「赤い色の表示」が"注意を払うべき"という意味で使用されるのであれば、class="warning" のように意味や用途を表すクラス名が望ましいということです。
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) と呼ばれるセレクタが定義されています。
すでに、CSS2 までに導入されて使われてきた擬似クラスには、つぎのものがあります。
擬似クラス名 | 状態や履歴の条件 | 設定の対象 |
---|---|---|
:link | 未訪問のリンク | <a> 要素のみ |
:visited | 訪問済みのリンク | <a> 要素のみ |
:active | 現在アクティブな要素 | すべての要素 |
:hover | カーソルが上にあるがアクティブでない要素 | すべての要素 |
:focus | テキスト入力にフォーカスされている要素 | <input> 要素のみ |
:lang( 言語名 ) | lang属性の値: 言語名 をもつ要素 | テキストをもつ要素 |
:first-child | ある親要素の最初の子要素 | すべての要素 |
たとえば、すべての <a> 要素を対象として、未訪問、訪問済み、マウスカーソルが上に来たとき、クリックしたときの色の割り当てを指定する場合は、
また、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) と呼ばれるセレクタが定義されています。
擬似要素の先頭には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> によって番号付きリストを書くと、たとえば、
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'擬似要素 の記載はありません。 最終的に採用されるかどうかは不明です。
上の擬似要素のリストの例 では、
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>表示して見ると、期待に反して、
子供結合子(子供セレクタ) (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>表示して見ると、今度は期待通りに、
隣接結合子(隣接セレクタ) (Sibling combinators) は、スタイルの適用対象として、あるセレクタ(要素) の直後にある要素を選択する役目をするものであり、
セレクタ1(要素名) + セレクタ2(後続要素名)
という形式です。 ここでの + は、スタイルの適用対象として、前にある セレクタ1(要素) の直後にある要素の中からセレクタ2で記述した要素を選択する ことを表します。たとえば、
h5.sample + p { color: red; }のように指定した上、
<h5 class="sample">■ 隣接結合子(隣接セレクタ)の使用例</h5> <p>ここはスタイルの適用対象です。</p> <p>ここはスタイルの適用対象外です。</p>として、表示して見ると、
ここはスタイルの適用対象です。
ここはスタイルの適用対象外です。
IE8 や IE9 で、上部のメニューや「HTML5 文書形式 (2)」のブラウザー表示部分が正常に表示されないときは、Windows のエキスプローラで 、