要はＨＴＭＬの中に色や大きさ、太さなどをいちいち指定するのではなく、ＨＴＭＬとは別の世界でスタイルを定義しようというもの。昔のＨＴＭＬは、それぞれのタグの中にいちいち書式を指定する必要があり、ソースがわかりにくくなったり、保守が面倒だったりしました。そこで、ＨＴＭＬのバージョン４（かな？）以降はＨＴＭＬの文書と別に書式を定義することが出来るようになりました。それがカスケーディングスタイルシート（ＣＳＳ）です。
ＨＴＭＬでは<h1>〜<h6>、番号つきリスト、番号無しリスト、テーブル、リンクなどを使って文書を作り、それぞれの書式は別途定義するＣＳＳで指定することで、ソースが分かり易くなり、保守も楽になります（はずです）。
（例）h1 {font-size: 24pt }
セレクタとは、スタイルを適用する対象を指定するもので、「プロパティ：値」は「；」で区切って複数指定できます。通常はＨＴＭＬのタグ名（要素名）が使用されます。
また、複数のセレクタを「，」で区切って指定し、同じプロパティを一度に指定することが出来ます。
引用符で囲った部分は文字列と認識されます。キーワードは引用符で囲みません。
（誤） （正） color : "black" → color: black width: "auto" → width: auto
「/*」と「*/」で囲まれた範囲がコメントとなります。CSS2に対応していないブラウザでstyle要素（style>ｙ?/style>ｋ）内に記述したスタイルシートのソースがそのまま表示されることをさけるため、ＨＴＭＬのコメントを示す「<!--」と「-->」を入れることがあります。
セレクタには、次のような指定方法があります。基本的なセレクタ（タグの要素名）に続けて、ＩＤセレクタやクラスセレクタなどを組み合わせて指定できます。
指定した要素にスタイルを適用
（例） h1 { ・・・・}
全ての要素に対してスタイルを適用（セレクタに＊以外があれば、＊は省略できる）
（例）
*#IDセレクタ { ・・・・}
*.クラスセレクタ｛・・・・｝
.クラスセレクタ｛・・・・｝
#ＩＤセレクタ ｛・・・・｝
要素の中で、指定したＩＤ属性を持つものに対してスタイルを適用
（例）a#MyID {・・・・}
要素の中で、指定したクラス属性を持つものに対してスタイルを適用
（例）p.Mylass{・・・・｝
要素の中で、属性が指定されているものにスタイルを適用
要素の中で、属性の値が属性値であるものにスタイルを適用
属性値がスペースで区切られたリストになっていて、そのどれかに一致すればスタイルを適用
属性値が「−」で区切られたリストになっており、指定した属性がその先頭の語と一致すればスタイルを適用。
リンク（<a>）のうち、未だ見ていないものに適用
リンク（<a>）のうち、既に見たものに適用
ユーザーがカーソルをその要素の上に置いているが、未だActiveにはなっていない状態のものに適用。このセレクタをリンク部分に対して使用する場合、「:link」と「:visited」の後で、「:active」の前に記述します。
ユーザーによってActiveにされた状態のものに適用。このセレクタをリンク部分に対して使用する場合、「:link」「:visited」「:hover」の後に記述します。
ユーザにより選択された場合にスタイルを適用。フォームのフィールドにフォーカスがセットされた場合など。
その要素で、言語が指定された要素に対してスタイルを適用。
その要素が、ある要素内で最初に現れる子要素である場合にスタイルを適用。
段落を示すブロックレベル要素の１行目として表示された部分にスタイルを適用。
ブロックレベル要素の最初の１文字にスタイルを適用
contentプロパティと一緒に使用し、その要素の直前に追加される内容に対してスタイルを適用
contentプロパティと一緒に使用し、その要素の直後に追加される内容に対してスタイルを適用
上記のようなセレクタをさらに組み合わせることで、特定の親子関係にある要素などに対してスタイルを適用できます。この場合、セレクタを半角スペースや＞、＋で区切って複数のセレクタをつなげることができます。但し、疑似要素については、最後に指定する必要があります。
セレクタ同士を半角スペースで区切ります。前のセレクタに含まれる（子孫である）後のセレクタに対してスタイルを適用します。次の例では、h1要素（表題１ Header1）に含まれるem要素（強調Emphasis）に対してスタイルを適用させます。
h1 em { ・・・・ }
セレクタ同士を「＞」で区切ります。前のセレクタの直接の子孫である後のセレクタに対してスタイルを適用します。次の例では、body要素の直接の子孫であるp要素（段落 paragraph）に対してスタイルを適用します。
body p { ・・・・ }
セレクタ同士を「＋」で区切ります。同一の親要素の中で前のセレクタの直後に現れた後のセレクタに対してスタイルを適用します。次の例では、body要素を直接の親要素として持つ、h1要素の直後に現れるp要素に対してスタイルを適用します。
h1 + p { ・・・・ }
CSSを使用する際には、まずMETAタグで次のように設定します。
<meta http-equiv="Content-style-type" content="text/css">
別のファイルに記述したスタイルシートを、link要素を使用してHTML文書中に取り込めます。複数のＨＴＭＬ文書で共通のスタイルを簡単に共有したり、ＨＴＭＬ文書に変更を加えずスタイルだけを変更することが出来ます。
<head> <meta http-equiv="Content-style-type" content="text/css"> <meta http-equiv="Content-tyle" content="text/html; charset=Shift-JIS"> <title>タイトル</title> <link rel="stylesheet" href="default.css" type="text/css"> </head>
style要素は、通常head要素の中に指定します。style要素に対応していない古いブラウザでは、スタイルシートの内容が表示されてしまうことがあるため、ＨＴＭＬのコメント「<!--〜-->」で囲みます。
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body{
color:white;
background-color:navy;
}
p{
color:pink;
}
-->
</style>
</head>
スタイルを適用する要素にstyle属性を指定します。
<table style="color:red; background-color:white"> 〜 </table>
ＨＴＭＬタグの各要素は、ボックスという領域を生成します。ボックスはさらにマージン、ボーダー、パディング、内部領域を生成します。
また、印刷する場合にはページボックスというボックスが生成されます。マージンとページ領域のみからなり、ボーダーやパディングはありません。@pageを使うと、ページボックス自体のサイズやマージンの大きさを指定できます。
リスト（<ul>や<ol>等）の前にある丸や番号などのことをマーカーと呼びます。マーカーはリスト関連の要素によって自動的に生成されるものの他に、displayプロパティが「list-item」に指定される要素にも生成されます。
また、「:before」「:after」疑似要素のdisplayプロパティが「marker」に指定されると、独自のマーカーを生成出来ます。その場合、contentプロパティで指定された内容がマーカーとして追加されます。
アウトラインは、ボーダーのすぐ外側に描画される線（外枠線）です。focusされている入力エリアなどの外枠を強調したりする際に使用します。
RGB値、キーワードのいずれかで指定できます。ＲＧＢ値は通常、＃に続けてRed、Green、Blueの各値を１６進数で２桁ずつ表示します（例 →#ffffff ）
CSSでURL（要はファイルのありか）を指定する場合、url()という関数を使用する。スタイルシートの含まれるファイルからの相対パスを指定します。
url(../img/background.gif)
又は url("../img/background.gif)
又は url('../img/background.gif)
長さや大きさについては、相対単位と絶対単位があります。
px １ピクセルを１単位。コンピュータディスプレイの解像度による。 em その要素のfont-sizeプロパティを１とする単位。font-size自体の指定に「em」が使用された場合、親要素のfont-sizeを１とする。親要素がない場合はfont-sizeの初期値を１とする。 ex その要素のフォントのx-heightを１とする単位。
pt ポイント（１ポイント＝１／７２インチ） pc パイカ（１パイカ＝１２ポイント） cm センチメートル mm ミリメートル in インチ（１インチ＝２．５４センチメートル）
長さや大きさを表す場合に○○％というように指定することがあります。何に対する割合かは各プロパティにより異なります。
要素内容に連番を付けるときに使います。カウンタの操作は次のプロパティを使用します。
カウンタを進める。値にはカウンタの識別子を指定。
カウンタをリセットします。値にはカウンタの識別子を指定。
「:before」疑似要素、「:after」疑似要素に対して指定し、カウンタを表示させます。counter()関数、counters()関数を使用します。ちなみに、counters()関数は、入れ子になったカウンタ（１．２．１等）を作成します。
ウェブページ作者が指定したスタイルシートやブラウザのデフォルトスタイルシート、ユーザーが指定するスタイルシートなどが競合した場合、通常は「ウェブページ作者 ＞ ユーザー ＞ ブラウザデフォルト」の順で優先順位があります。但し、ユーザースタイルシートに「!important」キーワードを指定することで、ユーザーが指定するスタイルシートを優先的に適用できます。
また、同じスタイルシート内で競合した場合、一般的にはより細かい部分で指定しているものが適用されます。例えば、「要素 ＞ クラス指定 ＞ id指定」といった具合です。
それでも競合する場合は、後で指定したものが優先されます。
外部スタイルシートの先頭に記述し、その文字セットを指定します。他にも、ＨＴＭＬ側のlink要素内でcharset属性を指定する方法もあります。
@charset "Shift-JIS";
出力先毎に専用のスタイルシートを指定できます。メディアの種類は次のようなのがあるらしいですが、screenとprint以外はどこでどう使われるのか理解しづらいです。世の中まだまだ不思議が多いです（＾＾；
all 全てのメディア screen コンピュータ画面に表示する際に適用される tty 文字幅が固定の機器に表示される際に適用される tv テレビ projection プロジェクタ handheld 携帯端末 プリンタ braille 点字ディスプレイ embossed 点字プリンタ aural 音声出力
別ファイルのスタイルシートを取り込むことが出来ます。例えば、ウェブサイト全体に適用される基本的なスタイル、あるディレクトリにあるファイルに対してのみ適用される、基本的なスタイルを包含したスタイルなど複数のスタイルシートを構造的に管理出来ます。
@import url("print.css"); 又は
@import "print.css";
ここでメディアタイプを指定し、例えば印刷専用のスタイルなどを指定できます。
@import "print.css" print; @import "television.css" tv, handheld;
印刷時のページボックスのサイズ、向き、マージンなどを指定できます。
@page{
size: 20.3cm 28.2cm;
margin: 1cm;
marks: cross;
}
全て
任意の色を指定できます。色のサンプルについては、「とほほのＷＷＷ入門」等で詳しく説明されています。
body{
color: pink;
background-color: navy;
margin: 1em;
}
全て
要素の背景色を指定するプロパティです。ボックスの内容領域とパディングに適用されますが、マージンには適用されません。ちなみにマージンは常にTransparentです。背景色を指定した場合は、文字が見にくくなることが多々あるので、文字の色に注意しましょう（colorプロパティも一緒にしていすると良い）
任意の色を指定できます。
背景を透明にします。親ボックスの背景が透けて見えます。
body{
color: white;
background-color: black;
}
table{
color: white;
background-color: black;
margin-bottom: 1em;
}
textarea{
color: pink;
background-color: navy;
}
すべて
要素の背景画像を設定するためのプロパティです。ボックス内容領域とパディングに適用され、マージンには適用されません。ブラウザによっては背景画像が表示されないことがありますので、背景色も同時に指定すべきです。
背景画像のURIを指定。url()関数を使用します。
背景画像を使わないことを明示します。
div{
color: #ffffff;
background-color: #000000;
background-image: url("background.gif");
}
背景画像の並べ方を指定します。
全て
百聞は一見にしかず
repeat; ←デフォルト
body{
background-image: url("/img/back.gif");
background-repeat: repeat-x;
}
ブロックレベル要素（p blockquote h1〜h6 div table pre form ol ul hr等々）
背景画像が指定されているとき、その表示位置を指定するプロパティ。背景画像はボックス内容領域とパディング部分に表示されるので、位置はパディングの左上を起点として計算します。
尚、background-attachmentプロパティで背景画像の位置が固定されている場合は、ウィンドウに対する位置となります。
数値を二つスペースで区切ってしていします。横、縦の順です。
横方向と縦方向の位置をスペースで区切って指定します。
横方向と縦方向の位置を示すキーワードをスペースで区切って指定します。
body{
background-image: url("../../img/welcome.gif");
background-repeat: no-repeat;
background-position: right bottom; /*←サンプル！*/
}
全て
背景画像をウィンドウに対して固定するかどうかを指定します。
背景画像の位置をウィンドウに対して固定します。
背景画像は他の内容と一緒にスクロールされます。
body{
background-image: url("../../img/map.jpg"); /*←クリックしたらサンプル*/
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
全て
背景に関するプロパティを一度に指定するためのプロパティです。必要な値をスペースで区切って指定します（順不同）。
body{
color: #000000;
background: white url("map.jpg") left top repeat-x;
}
全ての要素
font-familyプロパティを指定することで、要素内で使用するフォントを指定できます。「,」で区切って複数のフォントファミリーやキーワードを指定できます。複数を指定している場合、ユーザーのＯＳ・ブラウザ環境で使用できるフォントで、一番前に指定されているものが適用されます。
フォントファミリー名を指定します。フォントファミリー名にスペースが含まれる場合は、引用符（「"」又は「'」）で囲む必要があります。
フォントファミリーとは、同じ種類のフォントを纏めた呼び方で、例えば、Times New Romanというフォントファミリーには、「Times New Roman」だけでなく、「Times New Roman Bold」や「Times New Roman Italic」などが含まれます。
上で指定したフォントファミリーが存在しない環境で、補完的に使用されるフォントです。ユーザー環境はいろいろあり得ますから、極力指定するようにします。
serif 明朝系のフォント sans-serif ゴシック系のフォント cursive 筆記体、草書体系のフォント fantasy 装飾的なフォント monospace 等幅フォント
<html>
<head><title>フォントファミリー</title>
<style>
<!--
h1{font-family: "ＭＳ Ｐゴシック", sans-serif;}
h2{font-family: "ＭＳゴシック", monospace;}
h3{font-family: cursive;}
h4{font-family: fantasy}
p{font-family: serif}
-->
</style>
</head>
<body>
<h1>フォントファミリーテスト</h1>
<h2>これはゴシック系</h2>
<h3>これは筆記体系</h3>
<h4>これは装飾的</h4>
<p>これは明朝系</p>
</body></html>
全て
要素内のフォントサイズを指定します。
フォントサイズを指定します。
親要素のフォントサイズに対する割合で指定します。
フォントサイズを７つのキーワードで指定します。mediumが標準サイズで、１．２倍ずつになっているそうですが、ブラウザにより表示される大きさは異なります。
親要素に対して一段階大きいか、小さいか指定できます。親がlargeのときにsmallerを指定すれば、mediumとなります。
h1{ font-size: xx-large}
h2{ font-size: x-large}
p{font-size: medium}
li{font-size: small}
全て
フォントの太さを指定します。
標準の太さは４００で、太さを指定する。ただ、一般的なフォントファミリーには９種類もの太さのことなるフォントは用意されていないので、数字が違っても太さはおなじということもよくある（らしい）。
標準の太さ。上の４００と同じ結果。
一般的にボールドと言われる太さ。７００と同じ結果。
親要素のフォントの太さより１段階細いフォント。
親要素のフォントの太さより１段階太いフォント。
<html><head><title>Sample of Font-Weight</title>
<style><!--
ul{
font-size: large;
font-family: serif;
}
li#bold { font-weight: bold}
li#w600 {font-weight: 600}
li#w700 {font-weight: 700}
li#w800 {font-weight: 800}
li#w900 {font-weight: 900}
li#normal {font-weight: normal}
--></style>
</head><body>
<ul>
<li>font-weight: normal</li>
<li id=bold>font-weight: bold</li>
<li id=w600>font-weight: w600</li>
<li id=w700>font-weight: w700</li>
<li id=w800>font-weight: w800</li>
<li id=w900>font-weight: w900</li>
</ul>
</body></html>
全て
要素内のフォントスタイルを設定します。標準、イタリック、斜体（オブリーク）を指定します。
フォントファミリーのなかで標準フォント
フォントファミリーのなかでイタリック体のフォント（斜体との違いは、文字がつながっている等イタリック専用のデザインが施されている点）
フォントファミリーのなかで斜体のフォント
h1{
font-size: x-large;
font-style: italic;
}
全て
フォントにスモールキャップを設定する。スモールキャップは、小文字が大文字を小さくしたような形状をしたフォントのこと。
標準のフォントを指定
スモールキャップを指定
li{font-variant: small-caps;}
全て
フォントの幅を設定します。但し、InernetExploreやNetscapeは対応していないようです。他のブラウザは知りません。
文字の幅を９段階に分かれたキーワードで指定。normalが標準。
上記９段階の範囲で、親要素の幅より１段階狭い／広い フォントを指定。
<ul style="font-family: Serif; font-size: large"> <li style="font-stretch: ultra-condensed">これが一番狭いフォント：ultra-condensed</li> <li style="font-stretch: extra-condensed">これが次に狭いフォント：extra-condensed</li> <li style="font-stretch: condensed">これは狭いフォント：condensed</li> <li style="font-stretch: semi-condensed">これはやや狭いフォント：semi-condensed</li> <li style="font-stretch: normal">これは標準のフォント：normal</li> <li style="font-stretch: semi-expanded">これはやや広いフォント：semi-expanded</li> <li style="font-stretch: expanded">これは広いフォント：expanded</li> <li style="font-stretch: extra-expanded">これはもっと広いフォント：extra-expanded</li> <li style="font-stretch: ultra-expanded">これは一番広いフォント：ultra-expanded</li> </ul>
全て
フォント関連の複数のプロパティをい一括して指定することができます。対象となるプロパティは、font-style, font-variant, font-weight, font-size, line-height, font-familyの６種類。スペースで区切って指定しますが、順序には一定のルールがあるので要注意。
必要なものをスペースで区切って指定します。ただし、font-familyとfont-sizeは省略できない。また、指定順序は次の通り。なお、line-heightを指定する場合、直前に「/」を入れます。
font-familyやfont-size、font-weight等を含め、ユーザー環境のシステムが使用するフォントを適用します。
icon アイコンの名前として使用されるフォント menu メニューで使用されるフォント message-box ダイアログボックスで使用されるフォント caption タイトルバーやラベルで使用されるフォント（標準） small-caption 同上（小） status-bar ステータスバーで使用される
h1 {font: italic 5em "Times New Roman", Times, Serif}
p {font: 12pt/150% "ＭＳ ゴシック",sans-serif}
ブロックレベル要素
ブロックレベル要素の中で行揃えを設定します。
左寄せ
右寄せ
中央揃え
両端揃え
インライン要素（a, strong, q, tt, code等）、th、td
縦方向の位置揃えを指定。
親要素のベースラインと当該要素のベースラインを合わせる。
上にそろえます。
親要素のボックスの中心と当該要素のボックスの中心を合わせる。
下にそろえます。
親要素のフォントの上と当該ボックスの上をそろえる。
親要素のボックスの下と当該ボックスの下をそろえる。
親ボックスの上付文字
親ボックスの下付文字
当該要素のボックスのベースラインと親ボックスのベースラインがそろった状態を０とし、そこからどれだけ移動させるかを指定。プラスは上方向、マイナスは下方向。
当該要素のボックスのベースラインと親ボックスのベースラインがそろった状態を０とし、そこからどれだけ移動させるかをline-heightプロパティに対する割合で指定。プラスは上方向、マイナスは下方向。
p{line-height: 300%; vertical-align:bottom}
a:hover{vertical-align: top}
em#sub{vertical-align: sub}
em#super{veritical-align: super}
全て
文字に対する下線、上線、取消線、点滅を指定します。
標準の状態
下線を付ける
上線を付ける
取消線を付ける
点滅させる。
<ul style="line-height:200%"> <li style="text-decoration:none">標準の状態</li> <li style="text-decoration:underline">下線を付けます：underline</li> <li style="text-decoration:overline">上線を付けます：overline</li> <li style="text-decoration:line-through">取消線を付けます：line-through</li> <li style="text-decoration:blink">点滅します：blink</li> <li style="text-decoration:underline overline blink">複数のプロパティも設定できます</li> </ul>
全て
行の高さを指定します。インライン要素に対して指定すると、そのボックスの高さとなります。
ブラウザが適当な高さに調節します。
実際の高さを指定します。
単位を付けない場合、フォントサイズにその数値を掛けた値が設定されます。たとえば「１．２」は、「1.2em」や「120%」と同じ結果となります。
フォントサイズに対する割合で指定します。
p { line-height: 200%}
全て
文字と文字の間隔を指定します。
標準の状態
実際の文字間隔を指定します。
h6 {font-size: 12pt; letter-spacing: 15pt}
全て
単語と単語の間隔を指定します。
標準値
実際の間隔
全て
単語の最初の文字を大文字で示したり、全体を大文字や小文字に変換します。
そのままの状態。（変換しない）
各単語の最初の文字を大文字にします。
全ての文字を小文字にします。
全ての文字を大文字にします。
p{text-transform:capitalize}
ブロックレベル要素に含まれる文章の１行目のインデントを設定します。インデントは負の値も設定できます（ボックスからはみ出す場合、overflowプロパティを指定するべきです）。
実際のインデントの幅を指定
親ボックスの幅に対する割合で示す。
<p style="text-indent:50pt">
元慶の末か、仁和の始にあつた話であらう。どちらにしても時代はさして、この話に大事な役を、勤めてゐない。読者は唯、平安朝と云ふ、遠い昔が背景になつてゐると云ふ事を、知つてさへゐてくれれば、よいのである。――その頃、摂政藤原基経に仕へてゐる侍の中に、某と云ふ五位があつた。これも、某と書かずに、何の誰と、ちやんと姓名を明にしたいのであるが、生憎旧記には、それが伝はつてゐない。
半角スペースやタブ、改行の処理方法を指定します。
連続する半角スペースやタブ、改行を１つの半角スペースに変換して表示します。また、ボックスの大きさに応じて自動的に改行されます。
連続する半角スペースやタブ、改行をそのまま表示します。画面からはみ出たからと言って自動的に改行されることもありません。
連続する半角スペースやタブ、改行を１つの半角スペースに変換して表示します。但し、ボックスの大きさに応じて自動的に改行することを行いません。
全て
影を付けます。但し、InternetExploreとNetscapeは対応していないようです。他のブラウザは知りません。
影のない標準の状態
影の位置とぼかす範囲を指定。位置は、右方向と下方向へどれだけ移動した位置かを指定。負の値をしていすれば、それぞれ左方向と上方向へ位置が変化する。影の位置に続けてぼかす範囲を指定します。ぼかす範囲を省略すると、ぼかしのない影になります。
色を指定します。
影つきテキストの例
<p style="font-size:xx-large;text-shadow:#666666 5px 3px 4px">影つきテキストの例</p>
ブロックレベル要素と置き換え要素
ブロックレベル要素と置き換え要素のボックスの内容領域の幅を指定する。
内容領域の幅を指定します。
親要素のボックス幅に対する割合で指定します。
自動的に設定します。置き換えようその場合はもともとの幅に設定されます。
<p style="width:60%;background-color:pink;color:navy">元慶の末か・・・</p>
元慶の末か、仁和の始にあつた話であらう。どちらにしても時代はさして、この話に大事な役を、勤めてゐない。読者は唯、平安朝と云ふ、遠い昔が背景になつてゐると云ふ事を、知つてさへゐてくれれば、よいのである。――その頃、摂政藤原基経に仕へてゐる侍の中に、某と云ふ五位があつた。これも、某と書かずに、何の誰と、ちやんと姓名を明にしたいのであるが、生憎旧記には、それが伝はつてゐない。恐らくは、実際、伝はる資格がない程、平凡な男だつたのであらう。一体旧記の著者などと云ふ者は、平凡な人間や話に、余り興味を持たなかつたらしい。この点で、彼等と、日本の自然派の作家とは、大分ちがふ。王朝時代の小説家は、存外、閑人でない。――兎に角、摂政藤原基経に仕へてゐる侍の中に、某と云ふ五位があつた。これが、この話の主人公である。五位は、風采の甚揚らない男であつた。第一背が低い。それから赤鼻で、眼尻が下つてゐる。口髭は勿論薄い。頬が、こけてゐるから、頤が、人並はづれて、細く見える。唇は――一々、数へ立ててゐれば、際限はない。我五位の外貌はそれ程、非凡に、だらしなく、出来上つてゐたのである。
ブロックレベル要素と置き換え要素
ブロックレベル要素と置き換え要素のボックスの高さを設定。
高さを指定します。
親ボックスの高さに対する割合で指定
自動的に設定されます。置き換えようその場合はもともとの高さに設定されます。
<img style="height: 30pt; width:40pt" src="sample.jpg">
全て
上下左右のマージンを個別に設定するためのプロパティです。
マージンを指定します。
親ボックスの横幅に対する割合で指定します。縦のマージンも親ボックスの横幅を基準にします。（変ですね）
自動的に設定します。
img{
margin-top: 1px;
margin-bottom:1px;
margin-left:5px;
margin-right:1px
}
全て
マージンの値を一括で指定できます。
マージンを指定します。
親ボックスの横幅に対する割合で指定します。縦のマージンも親ボックスの横幅を基準にします。（変ですね）
自動的に設定されます。
値が１つ 値１：上下左右 値が２つ 値１：上下、値２：左右 値が３つ 値１：上、値２：左右、値３：下 値が４つ 値１：上、値２：右、値３：下、値４：左
p {margin: 0px 0px 10px 5px}
全て
上下左右のパディングを個別に設定するためのプロパティです。
パディングの幅を指定します。デフォルトは０です。
親ボックスの横幅に対する割合で指定します。縦のパディングも親ボックスの横幅を基準にします。（変ですね）
img{
padding-top: 1px;
padding-bottom:1px;
padding-left:5px;
padding-right:1px
}
全て
パディングの値を一括で指定できます。
パディングを指定します。
親ボックスの横幅に対する割合で指定します。縦のパディングも親ボックスの横幅を基準にします。（変ですね）
値が１つ 値１：上下左右 値が２つ 値１：上下、値２：左右 値が３つ 値１：上、値２：左右、値３：下 値が４つ 値１：上、値２：右、値３：下、値４：左
p {padding: 0px 0px 10px 5px}
全て
上下左右のボーダー色を個別に指定します。
色を指定します。
透明にします。但し、ボーダーの幅は確保されます。
全て
上下左右のボーダー色を一括指定指定します。
色を指定します。
透明にします。但し、ボーダーの幅は確保されます。
値が１つ 値１：上下左右 値が２つ 値１：上下、値２：左右 値が３つ 値１：上、値２：左右、値３：下 値が４つ 値１：上、値２：右、値３：下、値４：左
これはボーダー色のテスト
<p style="border-color:red navy pink yellow;text-align:center">これはボーダー色のテスト</p>
全て
ボーダーの太さを個別に指定します。
太さを指定します。
各々細いボーダー、中位のボーダー、太いボーダーです。
p{
border-top-width:thin;
border-bottom-width:thick;
borer-left-width:thin;
border-right-width:thin;
}
全て
ボーダーの太さを一括して指定します。
太さを指定します。
各々細いボーダー、中位のボーダー、太いボーダーです。
値が１つ 値１：上下左右 値が２つ 値１：上下、値２：左右 値が３つ 値１：上、値２：左右、値３：下 値が４つ 値１：上、値２：右、値３：下、値４：左
Thin
Medium
Thick
<p style="border-width:thin;border-color:red">Thin</p> <p style="border-width:medium;border-color:red">Medium</p> <p style="border-width:thick;border-color:red">Thick</p>
全て
ボーダーのスタイルを個別に指定します。
ボーダーを表示しない。太さも０となる。表のセルなどのボーダーと重なる場合、他の値が優先。
ボーダーを表示しない。太さも０となる。表のセルなどのボーダーと重なる場合、この値が優先。
線
二本線
ボーダーがへこんでいるように立体表示
ボーダーが突き出ているように立体表示
ボーダーの内側全体がへこんでいるように立体表示
ボーダーの内側全体が突き出ているように立体表示
ボーダーを波線で表示
ボーダーを点線で表示
全て
ボーダーのスタイルを一括して指定します。
ボーダーを表示しない。太さも０となる。表のセルなどのボーダーと重なる場合、他の値が優先。
ボーダーを表示しない。太さも０となる。表のセルなどのボーダーと重なる場合、この値が優先。
線
二本線
ボーダーがへこんでいるように立体表示
ボーダーが突き出ているように立体表示
ボーダーの内側全体がへこんでいるように立体表示
ボーダーの内側全体が突き出ているように立体表示
ボーダーを波線で表示
ボーダーを点線で表示
値が１つ 値１：上下左右 値が２つ 値１：上下、値２：左右 値が３つ 値１：上、値２：左右、値３：下 値が４つ 値１：上、値２：右、値３：下、値４：左
<p style="border-style:solid">solid</p> <p style="border-style:double">double</p> <p style="border-style:groove">groove</p> <p style="border-style:ridge">ridge</p> <p style="border-style:inset">inset</p> <p style="border-style:outset">outset</p> <p style="border-style:dashed">dashed</p> <p style="border-style:dotted">dotted</p>
全て
上下左右のボーダーに対して、色・太さ・形式を一度に設定します。色・太さ・形式をスペースで区切って順不同で指定できます。
p{
border-bottom: solid 1px #ffffff
}
全て
上下左右の全てのボーダーに対して、色・太さ・形式を一度に指定します。
p{
border:solid 1px red
}
全て
当該要素の表示方法（ブロックレベル、インラインレベルなど）を指定します。
当該要素を表示しません（ボックスすら生成されません）
当該要素をブロックレベルで表示します。
当該要素をインラインで表示します。
当該要素を後続のブロックレベル要素の先頭にインラインで表示します。ただし、後続のブロックレベル要素が回り込み対象であったり、絶対配置されている場合はブロックレベルで表示されます。
当該要素を後続のブロックレベル要素の左マージン内にインラインで表示します。ただし、マージン内に１行で収まらなかったり、後続ブロックレベル要素が回り込み対象又は絶対配置されている場合はブロックレベルで表示されます。
リストのマーカー用ボックスも生成します。
ブロックレベル要素の疑似要素（:before、:after）にのみ適用されます。当該要素がマーカーであることを示します。
RUN-IN TITLE
ディスプレイプロパティのテスト。WindowsのIEではちゃんと動作しません。他のブラウザではどうでしょう・・・
<h1 style="display:run-in;color:navy;background-color:pink">RUN-IN TITLE</h1> <p>ディスプレイプロパティのテスト</p>
全て
ボックスの表示位置の表示方法を指定します。実際の位置は、top、bottom、left、rightで指定します。
特に配置を指定しません（標準・デフォルトの状態）
上の標準状態からの相対位置を指定します。
親ボックスからの距離を指定します。他の要素の配置には無関係に表示されます。
上のabsoluteと同様に親ボックスからの距離を指定しますが、スクロールしても位置が変わらなくなります。
<em style="position:fixed;text-decoration:underline;top:500px">これはFixedされたもの</em> <em style="position:relative;top:10px;left:20px">これはrelativeのやつ</em>
<em style="position:absolute;top:200px">これはabsoluteの例</em>
positionプロパティでrelative、absolute、fixedが指定されているもの
親ボックスから当該ボックスのマージン外側迄の距離を設定します。
実際の長さを指定します。
親ボックスの高さ又は幅に対する割合です。（top, bottomは高さに対して、left, rightは幅に対して）
自動的に設定されます（デフォルト）
<em style="position:fixed;text-decoration:underline;top:500px">これはFixedされたもの</em> <em style="position:relative;top:10px;left:20px">これはrelativeのやつ</em>
<em style="position:absolute;top:200px">これはabsoluteの例</em>
positionプロパティでrelative、absolute、fixedが指定されているもの
当該要素のボックスの重なる順序を設定します。
通常の状態を０とし、重なる順序を整数で指定する。値が大きいほど上に重ねられる。
デフォルト。重なる順序を親要素と同じにする。（要は基本的に一番下になるということ）
<img style="position:absolute; top:10px; left:20px; z-index:1" src="sample1.gif"> <div style="background-color:yellow;position:absolute; top: 40px; left: 100px; z-index:2">これはコメント。</div>
全て（但し、positionプロパティでstatic以外が指定されているものを除く）
当該要素のボックスを左右いずれかに寄せ、反対側に後続要素の内容を回り込ませる。
当該要素を左側に配置し、後続内容を右側に回り込ませる。
当該要素を右側に配置し、後続内容を左側に回り込ませる。
回り込みをしない。
<p style="background-color:pink">これは画像の前にあるパラグラフです</p> <img style="float:right" src="map.jpg"> <p style="background-color:yellow">これは後続のパラグラフです。</p>
ブロックレベル要素
floatプロパティで左右に配置されたボックスに対する回り込みを解除します。
左側に配置されたボックスに対する回り込みを解除します。
右側に配置されたボックスに対する回り込みを解除します。
左右に配置されたボックスに対する回り込みを解除します。
解除しません。
<div style="width:80%"> <img style="float:right" src="map.jpg"> <p style="background-color:yellow;">このパラグラフは画像に対して回り込みが設定されています。これを解除するには、対象のブロックレベル要素に「clear:right」を指定します。</p> <p style="background-color:pink; clear:right">このパラグラフは、回り込みを解除しました。</p> </div>
ブロックレベル要素、置き換え要素
要素の内容がボックスからはみ出したときの表示方法を指定します。
ボックスからはみ出して表示されます。
はみ出した部分は表示されません。
内容をスクロールして見れるようにします。
ブラウザのなすがまま（普通はスクロール？）
<div style="width:80%; background-color:#FF9900"> <pre style="width:60%; background-color:yellow; overflow:visible"> このPREタグには、overflowにvisible属性を設定しているので、ボックスからはみ出してもそのまま表示される </pre> <pre style="width:60%; background-color:pink; overflow:hidden"> このPREタグには、overflowにhidden属性を設定しているので、ボックスからはみ出した部分は表示されない </pre> <pre style="width:60%; background-color:#66FFFF; overflow:scroll"> このPREタグには、overflowにscroll属性を設定しているので、 ボックスからはみ出したらスクロールバーが表示されます。 </pre> </div>
li要素かdisplayプロパティが「list-item」に設定された要素。
リスト項目のマーカーの種類を設定します。（list-style-imageプロパティが設定されている場合はそちらが優先される）。Internet Exploreでは対応されていないようです。
マーカーを表示しません（list-style-imageが設定されている場合でも「none」が優先されます）
塗りつぶされた丸
塗りつぶされていない丸
塗りつぶされていない四角
ローマ数字の小文字
ローマ数字の大文字
ギリシャ文字の小文字
算用数字
頭に０を付けた算用数字
アルファベットの小文字
アルファベットの大文字
漢数字
ひらがなで「あいうえお」順
カタカナで「あいうえお」順
ひらがなで「いろは」順
かたかなで「いろは」順
ヘブライ数字
アルメニア数字
グルジア数字
ul { list-style-type: disc}
li要素かdisplayプロパティが「list-item」に設定された要素。
リストのマーカーに使用する画像を指定します。
画像を表示しません。
画像のURIを指定します。
<ul style="list-style-image:url('/img/red.gif')">
<li>マーカーとして画像を表示します</li>
<li>list-style-image</li>
</ul>
li要素かdisplayプロパティが「list-item」に設定された要素。
リストのマーカーの位置を指定します。
リスト項目のボックスの外側に配置する。
リスト項目のボックスの内側に配置する。
<ul> <li style="list-style-position:outside">アウトサイドの例です。<br>このような場所に配置されます。</li> <li style="list-style-position:inside">インサイドの例です。<br>このような場所に配置されます。</li> </ul>
li要素かdisplayプロパティが「list-item」に設定された要素。
リストに関するプロパティを纏めて指定します。
table
テーブルの表示方法を指定します。最初の列を読み込んだときからすぐに表示を開始するか、全ての列を読み込み終わってから表示するか。大きなtableの時に違いがわかる。
最初の１列を読み込んだ時点で表示を開始。テーブル自体と必要に応じて縦列又はセルのwidthプロパティを指定する必要がある。指定されていないセル（幅がautoのセル）については、残った分が均等割りされる。
テーブル全体のデータを読み込んでから表示。デフォルト。
table{
width:80%;
table-layout:fixed;
}
table
セルのボーダーの表示形式を設定します。
ボーダーが重ねて表示されます。
ボーダーが別々に表示されます。
| collapse | テスト |
| テスト | テスト |
| separate | テスト |
| テスト | テスト |
<table style="border-collapse:collapse">
<tr><td>テスト</td><td>テスト</td></tr>
<tr><td>テスト</td><td>テスト</td></tr>
</table>
要素の直前または直後に新たな内容を追加することができます。「:before」または「:after」の疑似要素に対して設定します。
contentプロパティで追加する引用符を設定できます。
連番の値を進めることが出来ます。
連番の値をリセットします。
アウトラインの色を指定します。
アウトラインの形式を指定します。
アウトラインの太さを指定します。
アウトライン関連のプロパティを一括して指定します。
すべて
カーソルの形状を指定します。
プロパティの値 サンプル プロパティの値 サンプル auto サンプル crosshair サンプル default サンプル pointer サンプル move サンプル text サンプル wait サンプル help サンプル e-resize サンプル ne-resize サンプル nw-resize サンプル n-resize サンプル se-resize サンプル sw-resize サンプル s-resize サンプル w-resize サンプル
code {cursor: text}
用紙のサイズと方向を指定します。
幅と高さについて指定します。
プリンタに応じて自動的に設定されます。デフォルト。
縦方向に設定します。サイズはプリンタに応じます。
横方向に設定します。サイズはプリンタに応じます。
@page { size: 21cm 30cm}
あらかじめ定義された用紙設定を指定します。
@page A4 {size: 21.0cm 29.7cm}
<table style="page: A4">・・・</table>
コーナートンボやセンタートンボを出力します。
ブロックレベル要素に対して指定し、当該要素の前後での改ページを設定します。
ブロックレベル要素に対して指定し、当該要素の最中での改ページの禁止を行います。
ブロックレベル要素に対して指定し、中途半端な行に対する改ページの制御を行います。整数値を指定し、ページの最初、又は最後の段落に最低限必要な行数を整数で指定します。初期値は「２」です。