CSSに関するまとめリスト

管理人の独断と偏見によるまとめリストです。
XHTML1.0Strictで推奨されている要素(かつ管理人がよく使用するもの)だけを書いています。
全ての要素を書いているわけではありませんのでご了承ください。
随時改修中。

最終更新日:2007/02/18

INDEX

おまけコンテンツ

基本HTMLタグ

要素用途要素の種類中に記述できる要素属性
bodybody部分を構成するブロック要素ブロック要素 
h見出しを記述するブロック要素テキスト
インライン要素
 
p文章を記述するブロック要素テキスト
インライン要素
 
address著作権表示を記述するブロック要素テキスト
インライン要素
 
blockquoteコンテンツを引用するブロック要素ブロック要素cite="〜" 引用元のアドレスを示す
qコンテンツを引用するインライン要素テキスト
インライン要素
cite="〜" 引用元のアドレスを示す
cite引用元や参照先の情報を記述するインライン要素テキスト
インライン要素
 
preソース内の改行やスペースを表示に反映させるブロック要素テキスト
インライン要素
xml:space="〜" スペース処理法を指定する
em強調するインライン要素テキスト
インライン要素
 
strongより強い強調インライン要素テキスト
インライン要素
 
codeプログラムコードを記述するインライン要素テキスト
インライン要素
 
kbdコンピュータへ入力するデータを記述するインライン要素テキスト
インライン要素
 
sampコンピュータからの出力結果を記述するインライン要素テキスト
インライン要素
 
varプログラムの変数を記述するインライン要素テキスト
インライン要素
 
dfn解説/定義した語句を指定するインライン要素テキスト
インライン要素
 
abbr略語を記述するインライン要素テキスト
インライン要素
title="〜" 正式な言葉を指定する
delコンテンツの削除を示すブロック要素
インライン要素
ブロック要素
テキスト
インライン要素
cite="〜" 削除した理由がわかるページのアドレスを指定する
datetime=""〜"" 削除した日付や時間を指定する"
insコンテンツの追加を示すブロック要素/インライン要素ブロック要素
テキスト
インライン要素
cite="〜" 削除した理由がわかるページのアドレスを指定する
datetime=""〜"" 削除した日付や時間を指定する"
divブロック要素をグループ化するブロック要素ブロック要素
テキスト
インライン要素
 
span文字をマークアップするインライン要素テキスト
インライン要素
 
hr区切り線を表示するブロック要素なし 
ulリスト形式で表示するブロック要素li要素 
ol番号付きリスト形式で表示するブロック要素li要素 
liリスト形式で表示するブロック要素ブロック要素
テキスト
インライン要素
 
dl定義型リストを表示するブロック要素dt/dd要素 
dt定義型リストを表示するなしテキスト
インライン要素
 
dd定義型リストを表示するなしブロック要素
テキスト
インライン要素
 
△ページのトップへ

デフォルトスタイルシート

ブラウザにはあらかじめ、デフォルト(初期)のスタイルシートを持っています。
特にスタイルが指定していなければ、デフォルトスタイルシートを参照します。
CSS2で決められたデフォルトスタイルシートがあり、だいたいブラウザのデフォルトスタイルシートはその仕様に従っているらしい。
Firefoxの場合、以下の場所にスタイルシートがあります。
C:\Program Files\Mozilla Firefox\res\html.css

<body>〜</body>

XHTML1.0Strictの場合は、body内に書けるのはブロック構造のみ。
例えば、イメージ画像(インライン要素)を表示したいときは・・・

<body>
<p>
<img src="img.gif" alt="" />
</p>
</body>

というふうに、ブロック構造の要素(この例とだとp要素)でimg要素を囲みます。

デフォルトスタイルシート

body {
  display: block;
  margin: 8px;
}

△ページのトップへ

<h1>〜</h1>
<h2>〜</h2>
<h3>〜</h3>
<h4>〜</h4>
<h5>〜</h5>

<h6>〜</h6>

hタグはh1、h2、h3、h4、h5、h6の6種類があります。
デフォルトスタイルシートでは、数字が小さくなるほど、フォントのサイズも小さくなります。

デフォルトスタイルシート

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

h4 {
  display: block;
  font-weight: bold;
  margin: 1.33em 0;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

△ページのトップへ

<p>〜</p>

pタグは文章をまとめる、段落ごとに区切るのに使用します。
そうすると、非常に読みやすくなるので、テキストは出来るだけpタグで囲むようにしましょう。

デフォルトスタイルシート

p{
  display:block;
  margin:1em 0;
}

△ページのトップへ

<address>〜</address>

addressは、デフォルトでは文字のスタイルは斜線になります。

デフォルトスタイルシート

address {
  display: block;
  font-style: italic;
}

△ページのトップへ

<blockquote>〜</blockquote>

blockquoteは、引用した文章に適用します。
引用したことがわかるようにデザインを凝るのがよいと思います。
例えば全体的にインデントをつけるとか、枠で囲むとか。
XHTML1.0Strictでは、blockquoteの中身はブロック要素しか記述できないので注意が必要です。
XHTM1.0L Transitionalではインライン要素も記述できます。

デフォルトスタイルシート

blockquote {
  display: block;
  margin: 1em 40px;
}

blockquote[type=cite] {
  display: block;
  margin: 1em 0px;
  padding-left: 1em;
  border-left: solid;
  border-color: blue;
  border-width: thin;
}

△ページのトップへ

<em>〜</em>

emとstrongはどちらも強調するという意味ですが、強さが違います。
また、デフォルトのテキストスタイルも異なります。

デフォルトスタイルシート

em{
  font-style: italic;
}

△ページのトップへ

<strong>〜</strong>

strongはより強調したいときに使用します。
SEO的にもキーワードをstrongタグで囲むと効果があるらしいです。

デフォルトスタイルシート

strong {
  font-weight: bolder;
}

<hr />

hrは視覚的に区切り線を表示するものですが、コンテンツの構造を区切るという役割を果たすため、XHTMLでも使用できます。
できるだけ、ただ線を入れるために使用するのではなく、コンテンツを区切るために使用しましょう。

デフォルトスタイルシート

hr {
  display: block;
  height: 2px;
  border: 1px -moz-bg-inset;
  margin: 0.5em auto 0.5em auto;
  -moz-float-edge: margin-box;
  -moz-box-sizing: border-box;
}

hr[size="1"] {
  border-style: -moz-bg-solid none none none;
}
△ページのトップへ

<ul><li>〜</li></ul>

ulはリストを表示するときに使用します。
メニューなどはulを使用して表すのが一般的です。

デフォルトスタイルシート

ul{
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

li {
  display: list-item;
  -moz-float-edge: margin-box;
}

<ol><li>〜</li></ol>

olは番号の付いたリストを表示するときに使用します。
例えば利用規約等を記述するときに使用します。

デフォルトスタイルシート

ol {
  display: block;
  list-style-type: decimal;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

li {
  display: list-item;
  -moz-float-edge: margin-box;
}

△ページのトップへ

<dl><dt>〜</dt><dd>〜</dd></dl>

dtは定義型リストを表示するときに使用します。
あまり、定義を記述することは少ないのではないでしょうか。例えばサイトマップやニュースリリースなどを記述するのに使用すると便利です。

デフォルトスタイルシート

dl{
  display: block;
  margin: 1em 0;
}

dt{
  display: block;
}

dd {
  display: block;
  -moz-margin-start: 40px;
}

△ページのトップへ

CSSフォーマット

CSSは例えば要素の順番とか決めておくと便利です。
自分好みのCSSフォーマットを作りましょう。
デフォルトで入っている部分はあえて記述して、上書きすると、変なところでデフォルトCSSが効かなくていいと思います。
随時改修中です。

参考URL:スタイルシートを書く時のガイドライン
http://2xup.org/log/2006/07/11-1956

*{
  font-family:sans-serif;
}

body {
  display:block;
  margin:8px;
  padding: ;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

h4 {
  display: block;
  font-weight: bold;
  margin: 1.33em 0;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

p{
  display:block;
  margin:1em 0;
  padding: ;
}

address {
  display: block;
  font-style: italic;
}


blockquote {
  display: block;
  margin: 1em 40px;
}

blockquote[type=cite] {
  display: block;
  margin: 1em 0px;
  padding-left: 1em;
  border-left: solid;
  border-color: blue;
  border-width: thin;
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

/* ===== layoutを構成するdiv要素 ===== */
/* web標準モードの場合、widthで指定した幅にpadding、borderの幅がプラスされるのでlayoutのところに記述します。 */
/* text-alignは文字の配置ではなく、テンプレートをセンタリング等するときに使用します。 */
/* backgroundは厳密に言うと、レイアウトの構成には入らないのですが、ここで指定しておくと楽なので入れました。 */
div#name{
  position: ;
  top: ;
  right: ;
  bottom: ;
  left: ;
  z-index: ;
  float: ;
  clear: ;
  min-width: ;
  width: ;
  max-width: ;
  min-height: ;
  height: ;
  max-height: ;
  margin: ;
  padding: ;
  border: ;
  text-align: ;
  background: ;
}

/* ===== 一般的なclass属性 ===== */
.name{
/* 表示・配置に関する設定 */
  display: ;
  position: ;
  top: ;
  right: ;
  bottom: ;
  left: ;
  z-index: ;
  float: ;
  clear: ;
  overflow: ;
  visibility: ;

/* 大きさ(ボックス)に関する設定 */
  min-width: ;
  width: ;
  max-width: ;
  min-height: ;
  height: ;
  max-height: ;
  vertical-align: ;
  margin: ;
  padding: ;
  border: ;

/* テキスト・背景に関する設定 */
  color: ;
  font-family: ;
  font-style: ;
  font-weight: ;
  font-size: ;
  text-indent: ;
  text-align: ;
  text-decoration: ;
  letter-spacing: ;
  line-height: ;
  background: ;
}


△ページのトップへ

CSSの優先度

CSSには優先度というものがあります。
CSSファイルの下に記述したほど、優先度が高くなります。
例えば、
p{color:red;}
p{color:blue;}
という記述があるとするなら、pタグで囲まれた文字は"青"になります。

また、W3Cによって、書き方によって優先度が決められています。 以下、引用。

****引用 スタート****

A selector's specificity is calculated as follows:

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

****引用 エンド****

英語なので、わかりにくいかと思いますが、ものすっごく噛み砕いたら以下のような意味になります。

そして、a-b-c-dと数字を並べて、数字が大きいほど優先度が高くなります。

サンプルは以下のとおりです。

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

△ページのトップへ

CSSの継承

CSSだけでなく、プログラムには大体「継承」という概念があります。
CSSの場合、何を「継承」つまり、引き継ぐのかというと、親要素プロパティの値です。
ただし「background」プロパティなどは継承しません。
「継承」という概念を利用すると、二重にCSSを指定しなくてすむメリットもありますが、フォントを相対単位「%」「em」で指定すると、親要素に対しての「%」「em」で計算されてしまうので、結構ややこしくなってしまいます。
プロパティ別に継承の有無をまとめましたので、参考になさってください。
CSS2.1プロパティリファレンス

△ページのトップへ

参考文献

△ページのトップへ

Special Thanks

ページ内リンクはAjaxを使用。
以下サイトのスクリプトをお借りしました。
ページ内リンクでスムーススクロール

△ページのトップへ
Copyright © 2006 - 2007 CoolWebWindow All Rights Reserved.