CSS目的別リファレンス

インデックス

優先度を上げる

スタイル名	意味と使用方法	実行例
!important	スタイルの優先度を上げます。スタイルの最後にこれを追加すると、先のスタイルが無効になって、これを追加したスタイルが最優先される。ここをクリック

スタイル名

意味と使用方法

実行例

!important

スタイルの優先度を上げます。スタイルの最後にこれを追加すると、先のスタイルが無効になって、これを追加したスタイルが最優先される。

ここをクリック

場合によってタグの書式を変える（動きを与えたり、要素を後から追加したりする）

スタイル名	意味と使用方法	実行例
:link	aタグのリンクの書式ここをクリック
:visited	aタグの訪問済みの書式ここをクリック
:active	aタグをクリックしたときの書式ここをクリック
:hover	タグにマウスが乗ったときの書式(どんなタグでもOKになりました）ここをクリック
:focus	inputのうち、属性がtextのものが、入力カーソルが表示された時だけ、赤い枠線を表示 input[type=text]:focus{ border-color: #f00}
:first-child	親要素から見て、一番目だけ（例えばセルの１番目だけ）書式を変える。 td:first-child { color: red }
:first-line	<p>この文の1行目にだけ下線が引かれればOK。<br /> これはだめ </p> p:first-line { text-decoration: underline }	この文の1行目にだけ下線が引かれればOK。これはだめ
:first-letter	div:first-letter { font-size: 1.5em }	最初の文字だけでかくなる
:before	要素の前に、CSSで文字などを書き込む code:before { content: "CSSだけで、何かを書き出すことができる。" }	<これが書き出された
:after	要素の後に、CSSで文字を書き込む #men:after { content: "CSSだけで、何かを書き出すことができる。" }	これが書き出された>

文字色

スタイル名	意味と使用方法	実行例
color	フォント色を指定する <p style="color:#ff0000"> 同じ色でも他の色との組み合わせや使用面積によって、イメージが大きく変わります。背景色を決める際のポイントの1つは、そのページ内の他の色との関係を考えてみることです。また、見た目の美しさだけではなく、サイト全体の配色計画と矛盾していないか、文字が読みにくくなっていないか、といった機能面からの考察も大切です。 </p> ここをクリック	同じ色でも他の色との組み合わせや使用面積によって、イメージが大きく変わります。背景色を決める際のポイントの1つは、そのページ内の他の色との関係を考えてみることです。また、見た目の美しさだけではなく、サイト全体の配色計画と矛盾していないか、文字が読みにくくなっていないか、といった機能面からの考察も大切です。ここをクリック

スタイル名

意味と使用方法

実行例

color

フォント色を指定する

<p style="color:#ff0000">
同じ色でも他の色との組み合わせや使用面積によって、イメージが大きく変わります。背景色を決める際のポイントの1つは、そのページ内の他の色との関係を考えてみることです。また、見た目の美しさだけではなく、サイト全体の配色計画と矛盾していないか、文字が読みにくくなっていないか、といった機能面からの考察も大切です。
</p>

ここをクリック

同じ色でも他の色との組み合わせや使用面積によって、イメージが大きく変わります。背景色を決める際のポイントの1つは、そのページ内の他の色との関係を考えてみることです。また、見た目の美しさだけではなく、サイト全体の配色計画と矛盾していないか、文字が読みにくくなっていないか、といった機能面からの考察も大切です。

ここをクリック

マージン（外余白）

スタイル名	意味と使用方法	実行例
margin	外余白を指定するここをクリック margin: 1px; /* 上下左右=1px / margin: 1px 2px;* /* 上下=1px、左右=2px / margin: 1px 2px 3px;* /* 上=1px、左右=2px、下=3px / margin: 1px 2px 3px 4px;* /* 上=1px、右=2px、下=3px、左=4px */	ここをクリック
margin-top	外余白（上）を指定するここをクリック	ここをクリック
margin-right	外余白（右）を指定するここをクリック	ここをクリック
margin-bottom	外余白（下）を指定するここをクリック	ここをクリック
margin-left	外余白（左）を指定するここをクリック	ここをクリック

パディング（内余白）

スタイル名	意味と使用方法	実行例
padding	内余白を指定するここをクリック padding: 1px; /* 上下左右=1px / padding: 1px 2px;* /* 上下=1px、左右=2px / padding: 1px 2px 3px;* /* 上=1px、左右=2px、下=3px / padding: 1px 2px 3px 4px;* /* 上=1px、右=2px、下=3px、左=4px */	ここをクリック
padding-top	内余白（上）を指定するここをクリック	ここをクリック
padding-right	内余白（右）を指定するここをクリック	ここをクリック
padding-bottom	内余白（下）を指定するここをクリック	ここをクリック
padding-left	内余白（左）を指定するここをクリック	ここをクリック

ボーダー（境界線）

スタイル名	意味と使用方法	実行例
border	枠線を指定するここをクリック <div style="border: 1px solid red;">あああ</div>	ここをクリックあああ
border-top	枠線（上）を指定するここをクリック	ここをクリック
border-right	枠線（右）を指定するここをクリック	ここをクリック
border-bottom	枠線（下）を指定するここをクリック	ここをクリック
border-left	枠線（左）を指定するここをクリック	ここをクリック
border-width	枠線の太さ指定するここをクリック	ここをクリック
border-top-width	枠線（上）の太さ指定するここをクリック	ここをクリック
border-right-width	枠線（右）の太さ指定するここをクリック	ここをクリック
border-bottom-width	枠線（下）の太さ指定するここをクリック	ここをクリック
border-left-width	枠線（左）の太さ指定するここをクリック	ここをクリック
border-style	枠線の種類を指定するここをクリック	ここをクリック
border-top-style	枠線（上）の種類を指定するここをクリック	ここをクリック
border-right-style	枠線（右）の種類を指定するここをクリック	ここをクリック
border-bottom-style	枠線（下）の種類を指定するここをクリック	ここをクリック
border-left-style	枠線（左）の種類を指定するここをクリック	ここをクリック
border-color	枠線の色を指定するここをクリック	ここをクリック
border-top-color	枠線（上）の色を指定するここをクリック	ここをクリック
border-right-color	枠線（右）の色を指定するここをクリック	ここをクリック
border-bottom-color	枠線（下）の色を指定するここをクリック	ここをクリック
border-left-color	枠線（左）の色を指定するここをクリック	ここをクリック

アウトライン（文字の塊。IE6では使えない）

スタイル名	意味と使用方法	実行例
outline	アウトライン(輪郭線）の書式を設定するここをクリック	ここをクリック
outline-width	アウトラインの幅ここをクリック	ここをクリック
outline-style	アウトラインのスタイルここをクリック	ここをクリック
outline-color	アウトラインの色ここをクリック	ここをクリック

表示

スタイル名	意味と使用方法	実行例
display	表示方法を指定するここをクリック <div style="display:none">あああ</div>	ここをクリックあああ
position	表示位置の方法（absolute、relativeなど）を指定するここをクリック	ここをクリック
top	上からの絶対位置を指定ここをクリック	ここをクリック
left	左からの絶対位置を指定ここをクリック	ここをクリック
bottom	下からの絶対位置を指定ここをクリック	ここをクリック
right	右からの絶対位置を指定ここをクリック	ここをクリック
float	回り込みの種類を指定ここをクリック	ここをクリック
clear	回り込みを解除するここをクリック	ここをクリック
z-index	重なり順を指定するここをクリック	ここをクリック
direction	文字表記の方向（左右）を指定するここをクリック	ここをクリック
unicode-bidi	文字表記の方向（左右）を指定するここをクリック	ここをクリック
width	幅を指定するここをクリック	ここをクリック
height	高さを指定するここをクリック	ここをクリック
min-width	幅の最小値を指定するここをクリック	ここをクリック
min-height	高さの最小値を指定するここをクリック	ここをクリック
max-width	幅の最大値を指定するここをクリック	ここをクリック
max-height	高さの最大値を指定するここをクリック	ここをクリック
vertical-align	縦方向の揃え位置を指定するここをクリック	ここをクリック
overflow	はみ出た内容の表示方法を指定するここをクリック	ここをクリック
overflow-x	はみ出た内容の表示方法を指定する（X方向）ここをクリック	ここをクリック
overflow-y	はみ出た内容の表示方法を指定する（Y方向）ここをクリック	ここをクリック
clip	切り抜き表示ここをクリック	ここをクリック
visibility	表示、非表示を切り替えるここをクリック	ここをクリック

コンテント作成（要素の直前か、直後に何かを追加する）

スタイル名	意味と使用方法	実行例
content	内容（コンテンツ）を挿入するここをクリック	ここをクリック
quotes	引用符を設定するここをクリック	ここをクリック
counter-reset	要素の連番（カウンタ）の値をリセットするここをクリック
counter-increment	要素の連番（カウンタ）の値を増やすここをクリック
marker-offset	リストとの間隔を指定するここをクリック

リスト（箇条書き）

スタイル名	意味と使用方法	実行例
list-style	リストの書式を設定するここをクリック	ここをクリック
list-style-type	リストのマーカーの形を指定するここをクリック	ここをクリック
list-style-position	リストのマーカーの表示位置ここをクリック	ここをクリック
list-style-image	リストのマーカーに画像を使うここをクリック	ここをクリック

背景

スタイル名	意味と使用方法	実行例
background	背景に関する指定をまとめて行うここをクリック	ここをクリック
background-color	背景色を指定するここをクリック	ここをクリック
background-image	背景画像を指定するここをクリック	ここをクリック
background-repeat	背景画像の繰り返し方法を指定するここをクリック	ここをクリック
background-attachment	背景画像の固定と移動を指定するここをクリック	ここをクリック
background-position	背景画像の表示位置を指定するここをクリック	ここをクリック

フォント

スタイル名	意味と使用方法	実行例
font	フォントに関する指定をまとめて行うここをクリック	ここをクリック
font-style	フォントをイタリック体・斜体にするここをクリック	ここをクリック
font-variant	フォントをスモールキャップにするここをクリック	ここをクリック
font-weight	フォントの太さを指定するここをクリック	ここをクリック
font-size	フォントのサイズを指定するここをクリック	ここをクリック
line-height	行の高さを指定するここをクリック	ここをクリック
font-family	フォントの種類を指定するここをクリック	ここをクリック
font-stretch	フォントを縦長・横長にするここをクリック	ここをクリック
font-size-adjust	フォントのサイズを調整するここをクリック	ここをクリック

テキスト

スタイル名	意味と使用方法	実行例
text-indent	一行目のインデント幅を指定するここをクリック	ここをクリック
text-align	行揃えの位置・均等割付を指定するここをクリック	ここをクリック
text-decoration	テキストの下線・上線・打ち消し線・点滅を指定するここをクリック	ここをクリック
text-shadow	ここをクリック	ここをクリック
letter-spacing	文字の間隔を指定するここをクリック	ここをクリック
word-spacing	単語の間隔を指定するここをクリック	ここをクリック
text-transform	テキストの大文字表示・小文字表示を指定するここをクリック	ここをクリック
white-space	ソース中のスペース・タブ・改行の表示の仕方を指定するここをクリック	ここをクリック

テーブル

スタイル名	意味と使用方法	実行例
caption-side	テーブル（表）のキャプションの位置を指定するここをクリック	ここをクリック
table-layout	テーブル（表）の表示方法を指定するここをクリック	ここをクリック
border-collapse	セルのボーダーの表示の仕方を指定するここをクリック	ここをクリック
border-spacing	セルのボーダーの間隔を指定するここをクリック	ここをクリック
empty-cells	空白セルのボーダーの表示・非表示を指定するここをクリック	ここをクリック

ユーザインタフェース（カーソルなど）

スタイル名	意味と使用方法	実行例
cursor	<ul> <li style="cursor: auto">auto　ブラウザが自動的に選択したカーソル</li> <li style="cursor: default">default　矢印型など利用環境の標準カーソル</li> <li style="cursor: pointer">pointer　リンクカーソル</li> <li style="cursor: crosshair">crosshair　十字カーソル</li> <li style="cursor: move">move　移動カーソル</li> <li style="cursor: text">text　テキスト編集カーソル</li> <li style="cursor: wait">wait　待機・処理中カーソル</li> <li style="cursor: help">help　ヘルプカーソル</li> <li style="cursor: n-resize">n-resize　北方向のリサイズカーソル</li> <li style="cursor: s-resize">s-resize　南方向のリサイズカーソル</li> <li style="cursor: w-resize">w-resize　西方向のリサイズカーソル</li> <li style="cursor: e-resize">e-resize　東方向のリサイズカーソル</li> <li style="cursor: ne-resize;">ne-resize　北東方向のリサイズカーソル</li> <li style="cursor: nw-resize;">nw-resize　北西方向のリサイズカーソル</li> <li style="cursor: se-resize">se-resize　南東方向のリサイズカーソル</li> <li style="cursor: sw-resize;">sw-resize　南西方向のリサイズカーソル</li> <li style="cursor: progress">progress　進行中カーソル（CSS 2.1より仕様に追加）</li> <li style="cursor: url('../images/htmq.cur')">url('ファイルのパス')　オリジナルのカーソル</li> <li style="cursor: hand">hand　指型カーソル（IE4以上の独自拡張）</li> <li style="cursor: no-drop">no-drop　ドロップ禁止カーソル（IE6以上の独自拡張）</li> <li style="cursor: all-scroll">all-scroll　全スクロールカーソル（IE6以上の独自拡張）</li> <li style="cursor: col-resize">col-resize　横方向のリサイズカーソル（IE6以上の独自拡張）</li> <li style="cursor: row-resize">row-resize　縦方向のリサイズカーソル（IE6以上の独自拡張）</li> <li style="cursor: not-allowed">not-allowed　禁止カーソル（IE6以上の独自拡張）</li> <li style="cursor: vertical-text">vertical-text　縦書きカーソル（IE6以上の独自拡張）</li> </ul>	auto　ブラウザが自動的に選択したカーソル default　矢印型など利用環境の標準カーソル pointer　リンクカーソル crosshair　十字カーソル move　移動カーソル text　テキスト編集カーソル wait　待機・処理中カーソル help　ヘルプカーソル n-resize　北方向のリサイズカーソル s-resize　南方向のリサイズカーソル w-resize　西方向のリサイズカーソル e-resize　東方向のリサイズカーソル ne-resize　北東方向のリサイズカーソル nw-resize　北西方向のリサイズカーソル se-resize　南東方向のリサイズカーソル sw-resize　南西方向のリサイズカーソル progress　進行中カーソル（CSS 2.1より仕様に追加） url('ファイルのパス')　オリジナルのカーソル hand　指型カーソル（IE4以上の独自拡張） no-drop　ドロップ禁止カーソル（IE6以上の独自拡張） all-scroll　全スクロールカーソル（IE6以上の独自拡張） col-resize　横方向のリサイズカーソル（IE6以上の独自拡張） row-resize　縦方向のリサイズカーソル（IE6以上の独自拡張） not-allowed　禁止カーソル（IE6以上の独自拡張） vertical-text　縦書きカーソル（IE6以上の独自拡張）
url()	url(http://www.～) url("./aaa/bbb.html") スタイルシートでＵＲＬやファイルの指定をする場合には、「url()」を使用します。ＵＲＬは引用符（シングルクォーテーション・ダブルクォーテーション）でくくることもでき、ＵＲＬの前後には空白スペースを入れることも可能です。

スタイル名

意味と使用方法

実行例

cursor

<ul>
<li style="cursor: auto">auto　ブラウザが自動的に選択したカーソル</li>
<li style="cursor: default">default　矢印型など利用環境の標準カーソル</li>
<li style="cursor: pointer">pointer　リンクカーソル</li>
<li style="cursor: crosshair">crosshair　十字カーソル</li>
<li style="cursor: move">move　移動カーソル</li>
<li style="cursor: text">text　テキスト編集カーソル</li>
<li style="cursor: wait">wait　待機・処理中カーソル</li>
<li style="cursor: help">help　ヘルプカーソル</li>
<li style="cursor: n-resize">n-resize　北方向のリサイズカーソル</li>
<li style="cursor: s-resize">s-resize　南方向のリサイズカーソル</li>
<li style="cursor: w-resize">w-resize　西方向のリサイズカーソル</li>
<li style="cursor: e-resize">e-resize　東方向のリサイズカーソル</li>
<li style="cursor: ne-resize;">ne-resize　北東方向のリサイズカーソル</li>
<li style="cursor: nw-resize;">nw-resize　北西方向のリサイズカーソル</li>
<li style="cursor: se-resize">se-resize　南東方向のリサイズカーソル</li>
<li style="cursor: sw-resize;">sw-resize　南西方向のリサイズカーソル</li>
<li style="cursor: progress">progress　進行中カーソル（CSS 2.1より仕様に追加）</li>
<li style="cursor: url('../images/htmq.cur')">url('ファイルのパス')　オリジナルのカーソル</li>
<li style="cursor: hand">hand　指型カーソル（IE4以上の独自拡張）</li>
<li style="cursor: no-drop">no-drop　ドロップ禁止カーソル（IE6以上の独自拡張）</li>
<li style="cursor: all-scroll">all-scroll　全スクロールカーソル（IE6以上の独自拡張）</li>
<li style="cursor: col-resize">col-resize　横方向のリサイズカーソル（IE6以上の独自拡張）</li>
<li style="cursor: row-resize">row-resize　縦方向のリサイズカーソル（IE6以上の独自拡張）</li>
<li style="cursor: not-allowed">not-allowed　禁止カーソル（IE6以上の独自拡張）</li>
<li style="cursor: vertical-text">vertical-text　縦書きカーソル（IE6以上の独自拡張）</li>
</ul>

auto　ブラウザが自動的に選択したカーソル
default　矢印型など利用環境の標準カーソル
pointer　リンクカーソル
crosshair　十字カーソル
move　移動カーソル
text　テキスト編集カーソル
wait　待機・処理中カーソル
help　ヘルプカーソル
n-resize　北方向のリサイズカーソル
s-resize　南方向のリサイズカーソル
w-resize　西方向のリサイズカーソル
e-resize　東方向のリサイズカーソル
ne-resize　北東方向のリサイズカーソル
nw-resize　北西方向のリサイズカーソル
se-resize　南東方向のリサイズカーソル
sw-resize　南西方向のリサイズカーソル
progress　進行中カーソル（CSS 2.1より仕様に追加）
url('ファイルのパス')　オリジナルのカーソル
hand　指型カーソル（IE4以上の独自拡張）
no-drop　ドロップ禁止カーソル（IE6以上の独自拡張）
all-scroll　全スクロールカーソル（IE6以上の独自拡張）
col-resize　横方向のリサイズカーソル（IE6以上の独自拡張）
row-resize　縦方向のリサイズカーソル（IE6以上の独自拡張）
not-allowed　禁止カーソル（IE6以上の独自拡張）
vertical-text　縦書きカーソル（IE6以上の独自拡張）

url()

url(http://www.～)
url("./aaa/bbb.html")

スタイルシートでＵＲＬやファイルの指定をする場合には、「url()」を使用します。ＵＲＬは引用符（シングルクォーテーション・ダブルクォーテーション）でくくることもでき、ＵＲＬの前後には空白スペースを入れることも可能です。

スタイルシートのルールを宣言する

スタイル名	意味と使用方法	実行例
@charset	スタイルファイルの文字コードここをクリック
@font-face	Webフォントを指定ここをクリック
@import	他のスタイルファイルを読み込むここをクリック
@media	表示するメディア（画面、プリンタ）を指示するここをクリック
@page	ページメディアを指定するここをクリック