最新の視覚ブラウザ・CSS2.1の仕様に対応、視覚・音声・印刷媒体と幅広いメディアのプロパティを網羅したCascading Style Sheets辞典。
CSSとは何か・何ができるのかということから、CSSファイルを作成し、HTML文書の外部から参照させる指定方法、CSSを使用する際に User-Agent(ユーザーエージェント)側の誤作動を防止するための方法など、CSSを扱うための一連の流れを解説します。
CSS は、「スタイル指定を適用する対象(セレクタ:selector)」と「スタイルを指定する内容(宣言ブロック: property : value ;)」があってはじめて成り立ちます。CSS2.1 のセレクタには、全称セレクタ、クラスセレクタ、IDセレクタ、子孫セレクタ、子供セレクタ、隣接セレクタ、属性セレクタなどがあります。
疑似クラスは要素が特定の状態にある場合にスタイルを指定するもので、疑似要素は要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。どちらもセレクタとなる要素名のあとにコロン(:)をつけて記述します。
CSS の 正式名称である Cascading Style Sheets の Cascade とは、順序立てられたリストという意味で、スタイルシートが段階的に継承していく働きを表しています。そして順序立てられたリストの中で、セレクタや記述されている位置の違いなどにより、段階化の順序(スタイルシートの指定が反映される優先順位)が異なります。
アットルール(@規則)は、セレクタ(selector)とプロパティだけでは指定できない機能を補うために用意されています。
本文書では、プロパティの適用対象を示す場合に使われる要素の種類の区分けを行っています。CSS の各プロパティは、すべての要素に適用できるとは限りません。要素は大きな区分けとして、ブロック要素とインライン要素にわけられますが、適用対象がブロック要素にだけに限られているようなプロパティもあります。
CSSで使われる単位は「絶対単位」と「相対単位」の2種類に大別され、また一部のプロパティではパーセンテージ(%)を単位とするパーセンテージ値を指定することができます。絶対単位には cm, mm, in, pt, pc があります。相対単位には em, ex, px があります。
テキスト(文字列)を視覚的に表現する際に用いられるフォントに関する font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-varient, font-weight の各プロパティを解説します。
テキストの揃え方、単語や文字の間隔、段落など視覚的体裁に関する letter-spacing, line-height, text-align, text-decoration, text-indent, text-justify, text-shadow, text-transform, vertical-align, white-space, word-spacing の各プロパティを解説します。
文書に表現豊かな装飾を施す(プレゼンテーションを行う)ための文字色(前景色)・背景に関するプロパティ(color, background, background-color, background-image, background-repeat, background-attachment, background-position)を解説します。
CSS では、要素が生成する範囲をボックス(Box)と見立てており、ボックスは内容領域、パディング、ボーダー、マージンから構成されています。本文書では、ボックスモデルと包含ブロックの概念、ボックスに関する border-, border-color, border-style, border-width, height, margin, max-height, max-width, min-height, min-width, padding, width の各プロパティを解説します。
表の枠線の表示方法、セルとセルの間隔の制御、キャプション(表題)の位置、空のセルの枠線の表示方法、表のレイアウト方法など表(テーブル)に関する border-collapse, border-spacing, caption-side, empty-cells, table-layout の各プロパティを解説します。
リスト項目のマーカーの種類(イメージ・形状・番号形式など)や、主要ボックスに対するマーカーの位置を制御するリストに関するの list-style, list-style-image, list-style-position, list-style-type の各プロパティを解説します。
適用対象となる要素とその内容の表示方法や配置方法の指定に関する bottom, clear, clip, direction, display, float, left, overflow, right, top, unicode-bidi, visibility, z-index の各プロパティを解説します。
任意の要素の前後に仮想的な文字や画像などの内容を追加することができる、content, counter-increment, counter-reset, quotes の各プロパティを解説します。これらのプロパティで追加された内容のことを「生成内容」と呼びます。
デフォルトの無機質な読み上げ音声から、音の演出の幅を広げ、聴き方を魅せる役割をする音声スタイルシートの各プロパティを解説します。
azimuthプロパティは、ステレオやサウンドシステムなどにおける音源の左右方向の角度を指定します。
backgroundプロパティは、背景色・背景画像などの背景に関する background-colorプロパティ、background-imageプロパティ、background-repeatプロパティ、background-attachmentプロパティ、background-positionプロパティの5つのプロパティをまとめて指定することができます。
background-attachmentプロパティは、背景画像を表示する場合に、その背景画像を固定表示で、背景をスクロールしても動かないように固定することで文字を見やすくする効果を出せます。
background-colorプロパティは、要素に背景色を指定します。値には、RGB値やカラーネームの色の他にtransparentというキーワードを指定することができます。背景色を指定した場合は、必ずcolorプロパティで文字色もあわせて指定し、背景色と文字色のコントラストはできるだけ高くするようにします。
background-imageプロパティは、要素に背景画像を指定します。背景色が同時に設定されている場合は、背景画像の方が要素の内容の背景として優先して表示されます。値には、「url」に続いて半角の括弧で画像の所在となる URI で括って指定する他に、背景画像を指定しないことを示す「none」のキーワードを指定することができます。
background-positionプロパティは、background-imageプロパティで背景画像を表示する場合に、要素内の背景画像がタイル状に繰り返し表示される初期位置を指定することができます。値には、左右方向、上下方向の位置を、%(パーセンテージ)や em, px などの単位をつけた数値、または left, right, center, top, bottom のキーワードを半角スペースで区切り続けて指定します。
background-repeatプロパティは、通常、指定された領域に合わせてタイル状に縦横に繰り返し表示される背景画像を指定された画像1枚を単独で表示するなど、その表示方法を指定することができます。表示方法には、repeat, repeat-x, repeat-y, no-repeat の4つがあります。
borderプロパティは、上下左右の枠線の太さ、スタイル、色の指定をまとめて行う簡略化プロパティです。枠線の太さを指定する border-width、枠線のスタイルを指定する border-style、枠線の色を指定する border-color の3つのプロパティをまとめることができます。
border-collapseプロパティは、表の枠(ボーダー)の表示モデルを結合表示または分離表示に指定します。collapseは、セルを結合して、表の端から端まで連続した枠で表示させ、separateは、各セルの周囲に分離した枠を表示させます。
border-colorプロパティは、上下左右の四辺の枠線の色をまとめて指定できる簡略化プロパティで、値には、1つ以上 4つ以下の色を半角スペースで区切って続けて指定します。上・下・左・右の四辺の枠線の色を個別に指定する場合には、border-top-color, border-bottom-color, border-left-color, border-right-colorのプロパティが用意されています。
border-spacingプロパティは、border-collapseプロパティで表の枠(ボーダー)が分離表示に指定されている場合に、各セルのボーダー間隔を指定するプロパティです。値を 1つだけ指定した場合は、水平・垂直の両方向の枠線の間隔に適用され、 2つ指定する場合は、「水平方向」「垂直方向」の順に枠線の間隔が適用されます。
border-styleプロパティは、上下左右の四辺の枠線のスタイルをまとめて指定できる簡略化プロパティです。値は、1つ以上4つ以下のキーワードを半角スペースで区切って続けて指定します。キーワードには、none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset があります。
border-widthプロパティは、上下左右の四辺の枠線のスタイルをまとめて指定できる簡略化プロパティです。値には、単位をつけた数値の他に、thin(細め), medium(標準), thick(太め)の3つのキーワードを指定できます。
bottomプロパティは、positionプロパティで要素を配置した場合に、下からの位置を指定します。同じ位置を指定するプロパティは他にも、上からの位置を指定するtopプロパティ、左からの位置を指定するleftプロパティ、右からの位置を指定するrightプロパティがあります。
caption-sideプロパティは、表組に付けるキャプション(表題)の表示位置を指定します。値には、top, bottom, left, rightのキーワードを指定できます。text-alignプロパティで左右揃えを指定できます。
clearプロパティは、floatプロパティで指定された要素の回り込みの効果を解除します。値には、none, left, right, both のキーワードを指定することができます。
clipプロパティは、position:absolute; が指定された要素の表示領域の中で、特定の領域だけを切り抜いて表示することができます。CSS2.1で切り抜ける形状は矩形(rect)のみで、top, right, bottom, left の順で矩形領域を指定します。
colorプロパティは、文字の色(前景色)を指定します。色の指定方法には、16進数のRGB値、カラーネーム、16進数の省略表記などがあります。
contentプロパティは、:before疑似要素、または:after疑似要素をセレクタに加える要素の前後に仮想的に文字や画像を追加することができます。contentプロパティを使うことで HTML文書のソース自体を修正することなく、テキストや画像を自由自在に生成することができます。
counter-incrementプロパティは、contentプロパティで追加されたカウンター(連番)の値を進めるプロパティです。カウンターは、contentプロパティ の値に指定される、「counter(カウンター名)」、または「conters(カウンター名 区切り文字)」で制御されます。
counter-resetプロパティは、contentプロパティで追加されたカウンター(連番)の値をリセット(初期化)するプロパティです。カウンターは、contentプロパティ の値に指定される、「counter(カウンター名)」、または「conters(カウンター名 区切り文字)」で制御されます。
cueプロパティは、cue-beforeプロパティ, cue-afterプロパティをまとめて、要素要素を読む前後に再生する音声を指定します。
cue-afterプロパティは、要素の意味内容を区別するための方法として、その要素を読んだ後に鳴らす音声を指定します。
cue-beforeプロパティは、要素の意味内容を区別するための方法として、その要素を読む前に鳴らす音声を指定します。
cursorプロパティは、マウスポインタ(カーソル)の形状を指定することができます。形状を指定するキーワードには、auto, crosshair, default, pointer, move, text, wait, help, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize などがあります。
directionプロパティは、文字の基本的な表示方向を指定します。ひとつの文書に異なる書字方向の言語が混在する場合に役立ちます。異なる書字方向が混在する現象を双方向書字(bidirectionality)と呼びます。
display は、要素が生成するボックスをどのように表示させるか、その表示形式を指定します。要素はそれぞれブロック要素とインライン要素の 2種類に大別されますが、displayプロパティでは各要素に別の種類を割り当てることができます。
elevationプロパティは、ステレオやサウンドシステムなどにおける音源の上下方向の角度を指定します。
empty-cellsプロパティは、table要素に各セルの周囲に分離した枠を表示させるボーダー分離モデル(separated borders model)の場合に、内容をもたない空のセルの枠線の表示・非表示についての有無を指定します。値には、showとhideのキーワードがあります。
floatプロパティは、要素のボックスを左、または右に寄せて、その反対側に後続の内容を流し込ませるフロート(浮動化)を指定します。フロートは、回り込みとも言い換えられます。適用対象は、内容領域(文章など中身が表示されない部分)をボックスと見立てたあらゆる要素が含まれますが、絶対位置決めの要素は除かれます。
fontプロパティは、フォントに関するプロパティをまとめて簡略指定します。まとめることのできるプロパティは、font-style, font-variant, font-weight, font-size, line-height, font-family です。また、CSS2 より、fontプロパティでは個別指定の場合の font-familyプロパティでは指定することができないシステムフォントが指定可能です。
font-familyプロパティは、要素内の文字の表示書体となるフォントを指定します。値には、フォント名、または総称ファミリ名を指定します。総称ファミリが指定された場合は、各視覚ブラウザで設定されているフォントが自動的に選ばれて、そのフォントで表示されます。
font-sizeプロパティは、文字の大きさ(フォントサイズ)を指定します。値には、単位をつけた数値、パーセンテージ値の他に、xx-small, x-small, small, medium, large, x-large, xx-large, larger-, smallerのキーワードを指定できます。
font-size-adjustプロパティは、font-familyプロパティで複数指定されたフォントの中で、第一候補以外が採用された場合の、見た目の大きさの違いを調整するプロパティです。
font-stretchプロパティは、フォントの字幅(横幅)を狭めたり、広げたりすることができます。値には、ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, narrower, wider のキーワードがあります。
font-styleプロパティは、文字を斜体で表示するか、イタリック体で表示するか、または傾きのない通常体に戻して表示するかといった文字のスタイルを指定します。値には、normal, italic, oblique を指定できます。
font-variantプロパティは、アルファベットなどの大文字・小文字をもつフォントに対して、スモールキャピタル表示にするか否かを指定します。スモールキャピタルとは、英文字の小文字部分の代わりに、大文字を小さくさせたようなグリフで表示するフォントです。値には、normal, small-caps があります。
font-weightプロパティは、文字のウエイトを指定します。ウエイトとは「太さ」のことです。値には、normal, bold, bolder, lighter のキーワードと 100 から 900 までの数値による指定があります。
heightプロパティは、要素の生成するボックスの内容領域の高さを指定します。非置換インライン要素と表の列・列グループ要素(col要素, colgroup要素)を除くすべての要素に適用できます。
leftプロパティは、positionプロパティで要素を配置した場合に、左からの位置を指定します。同じ位置を指定するプロパティは他にも、上からの位置を指定するtopプロパティ、下からの位置を指定するbottomプロパティ、右からの位置を指定するrightプロパティがあります。
letter-spacingプロパティは、テキストの文字と文字の間隔(字間)を指定します。これにより、文字の間隔を広げるのに空白文字を挿入する必要がなくなるので、非視覚環境のユーザーを混乱させることなく、文字列のスタイルを操作することが可能です。
line-heightプロパティは、行ブロックの高さを指定します。行送りとも呼ばれます。 行ブロックとは、行内の最上部にあるボックス上辺から、最下部にあるボックス下辺までの距離をいいます。 ただし、行内に置換要素を含む場合は、置換要素のheightプロパティの値、または内在寸法の高さが適用されます。
list-styleプロパティは、リスト項目要素に関する、list-style-imageプロパティ、list-style-positionプロパティ、list-style-typeプロパティの設定をまとめて簡略指定することができます。行頭記号と画像の両方を指定した場合、行頭記号に代わって画像が優先して表示され、何らかの理由で画像が表示できない場合に指定の行頭記号を表示します。
list-style-imageプロパティは、リストの行頭に表示するマーカーに用いる画像を指定します。値には、マーカーとして表示したい画像の URI を指定します。また、画像を指定しないことを示す none のキーワードを指定することもできます。
list-style-positionプロパティは、主要ブロックボックス(リストの内容を表示する部分)に対してマーカー(行頭記号)の位置を指定します。値には、主要ブロックボックスの外側に表示する outside と、主要ブロックボックスの最内側に埋め込んで表示する inside があります。
list-style-typeプロパティは、リストの行頭記号の表示形式を指定します。値には、disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha などの他に CSS2 の仕様より追加された分をあわせて計21種類のキーワードを指定することができます。
marginプロパティは、ボックスの上下左右のマージン領域(他の要素と見分けをつけるための最も外側にある余白)を指定します。上・下・左・右の四辺のマージンを個別に指定する場合には margin-top, margin-bottom, margin-left, margin-right のプロパティが用意されています。
max-heightプロパティは、要素の生成するボックスの最大の高さ(これ以上は高くしない設定)を指定します。値には、単位を付けた数値、包含ブロックの内容領域の高さを基準とするパーセンテージ値、高さを制限しない設定の none のキーワードを指定できます。
max-widthプロパティは、要素の生成するボックスの最大の横幅(これ以上は広げない設定)を指定します。値には、単位を付けた数値、包含ブロックの内容領域の横幅を基準とするパーセンテージ値、横幅を制限しない設定の none のキーワードを指定できます。max-widthプロパティは、ユーザーの環境に幅広く対応できる融通性の高いデザインを実現するのに有用です。
min-heightプロパティは、要素の生成するボックスの最小の高さ(これ以上は低くしない設定)を指定します。値には、単位を付けた数値、包含ブロックの内容領域の高さを基準とするパーセンテージ値を指定できます。
min-widthプロパティは、要素の生成するボックスの最小の横幅(これ以上は縮めない設定)を指定します。値には、単位を付けた数値、包含ブロックの内容領域の横幅を基準とするパーセンテージ値を指定できます。
overflowプロパティは、ブロック要素の内容が指定された幅や高さの領域からはみ出した場合の表示方法を指定します。widthプロパティやheightプロパティにより内容領域を指定されたブロック要素が、指定されたサイズよりも内容が大きなサイズをもつ場合などが対象となります。
paddingプロパティは、上下左右のパディング領域(枠内余白)を指定します。パディングとは、詰め物という意味であるように内容とボーダーとの間に詰め物をしてできる枠内の余白のことを指します。背景領域の調節などに役立てることができます。
pauseプロパティは、要素の意味内容を区別するための方法として、要素を読む前の停止時間を指定する pause-beforeプロパティと要素を読んだ後の停止時間を指定する pause-afterプロパティの 2つの設定をまとめるプロパティで、要素を読む前後の停止時間を指定します。
positionプロパティは、要素の配置方式を指定し、top, bottom, left, right の各プロパティによって配置する位置を指定します。非視覚環境での観覧者に配慮したメニューを読み飛ばすリンクなど、positionプロパティは、アクセシビリティを高めるためのテクニックに良く使用されています。
quotesプロパティは、contentプロパティの設定で引用符の追加が行われた場合に、任意の要素に対して、引用符のレンダリング(表示)方法を指定します。
rightプロパティは、positionプロパティで要素を配置した場合に、右からの位置を指定します。同じ位置を指定するプロパティは他にも、上からの位置を指定するtopプロパティ、下からの位置を指定するbottomプロパティ、左からの位置を指定するleftプロパティがあります。
table-layoutプロパティは、表(テーブル)をレイアウトする際に固定レイアウトアルゴリズムを用いるか、自動レイアウトアルゴリズムを用いるかの表の幅の計算方法を指定します。値には、固定レイアウトアルゴリズムの fixed と自動レイアウトアルゴリズムの auto のキーワードがあります。
text-alignプロパティは、ブロック要素、及びセル要素に含まれるテキストや画像などのインライン(行内)の内容の水平方向の揃え方しています。値には、left(左揃え), rigth(右揃え), center(中央揃え), justify(両端揃え)のキーワードを指定できます。
text-decorationプロパティは、テキストに下線、上線、打ち消し線、点滅などの装飾を施すことができます。値には、none, underline, overline, line-through, blink のキーワードを指定できます。
text-indentプロパティは、ブロック要素に含まれるテキストの 1行目のインデントを指定します。インデントとは、日本語の文章作法における段落の最初を一文字分空ける字下げのことです。インデントが行われた部分は透明になります。
text-justifyプロパティは、text-align : justify ; でインライン内容の両端揃えが指定された場合に、単語を半角スペースで区切る欧文以外の日本語や東南アジア語、アラビア語などの様々な言語の表記体系にあわせた両端揃えを指定します。
tetx-shadowプロパティは、要素内のテキストに対して影を付けることができます。このプロパティは、影の大きさが、ボックスの大きさ自体に影響を与えることはありませんが、ボックスの範囲を超えて表示されることがあるので注意が必要です。
text-transformプロパティは、アルファベットのように大文字と小文字がある言語の場合に、小文字を大文字に、大文字を小文字に変換して表示することができます。値には、none, capitalize, uppercase, lowercase のキーワードを指定できます。
topプロパティは、positionプロパティで要素を配置した場合に、上からの位置を指定します。同じ位置を指定するプロパティは他にも、下からの位置を指定するbottomプロパティ、左からの位置を指定するleftプロパティ、右からの位置を指定するrightプロパティがあります。
unicode-bidiプロパティは、言語ごとに決まっている語句の表示方向を強制的に変更することができます。日本語や英語であれば左から右、ヘブライ語やアラビア語であれば右から左へと、ブラウザは各言語に応じて適切な方向に表示しますが、unicode-bidiプロパティでは、その方向を強制的に変更することができます。
vertical-alignプロパティは、行の中のインライン要素、及び表のセル要素が生成するボックスの垂直方向の位置揃えを指定します。テキストと画像の並びを配置するのに特に有用です。値には数値指定の他に、baseline, top, bottom, middle, super, sub, text-top, text-bottom などのキーワードを指定できます。
visibilityプロパティは、要素が生成するボックスの表示・非表示を指定します。ただし、要素を非表示に指定しても、その要素が生成するボックス分のスペースは残り、レイアウトにも影響します。値には、visivle, hidden, collapse のキーワードを指定できます。
white-spaceプロパティは、当該要素に含まれる半角スペースや水平タブ、行送りなどの空白類文字をどのように処理するかを指定します。主に行内容の折り返しをコントロールするものになります。値には、normal, pre, nowrap のキーワードを指定することができます。
widthプロパティは、要素の生成するボックスの内容領域の幅を指定します。非置換インライン要素と表の行・行グループ要素(tr要素, thead要素, tfoot要素, tbody要素)を除くすべての要素に適用できます。
word-spacingプロパティは、半角スペースで区切られた単語と単語の間隔を指定します。注意点として、User-Agent(ユーザーエージェント)は、単語の区切りを半角スペースで認識するので、日本語の場合は、あえて半角スペースを加えて区切らない限り、単語という形には認識できません。
z-indexプロパティは、positionプロパティで位置指定された要素の重ね合わせの順序を指定します。値には、整数値、または auto のキーワードを指定します。指定された値が大きいほど上に重ねられ、要素は手前に表示されます。
CSS でウェブページを作成していると古いブラウザではスタイルを正しく認識できない、または未対応のために表示が崩れてしまう事態に遭遇することがあります、本文書ではその対処として特定のブラウザに対して CSS のバグを回避する手法を紹介しています。