管理人の独断と偏見によるまとめリストです。
XHTML1.0Strictで推奨されている要素（かつ管理人がよく使用するもの）だけを書いています。
全ての要素を書いているわけではありませんのでご了承ください。
随時改修中。
最終更新日:2007/02/18
| 要素 | 用途 | 要素の種類 | 中に記述できる要素 | 属性 |
|---|---|---|---|---|
| body | body部分を構成する | ブロック要素 | ブロック要素 | |
| 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
XHTML1.0Strictの場合は、body内に書けるのはブロック構造のみ。
例えば、イメージ画像（インライン要素）を表示したいときは・・・
<body>
<p>
<img src="img.gif" alt="" />
</p>
</body>
というふうに、ブロック構造の要素（この例とだとp要素）でimg要素を囲みます。
body {
display: block;
margin: 8px;
}
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{
display:block;
margin:1em 0;
}
addressは、デフォルトでは文字のスタイルは斜線になります。
address {
display: block;
font-style: italic;
}
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とstrongはどちらも強調するという意味ですが、強さが違います。
また、デフォルトのテキストスタイルも異なります。
em{
font-style: italic;
}
strongはより強調したいときに使用します。
SEO的にもキーワードをstrongタグで囲むと効果があるらしいです。
strong {
font-weight: bolder;
}
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はリストを表示するときに使用します。
メニューなどは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は番号の付いたリストを表示するときに使用します。
例えば利用規約等を記述するときに使用します。
ol {
display: block;
list-style-type: decimal;
margin: 1em 0;
-moz-padding-start: 40px;
}
li {
display: list-item;
-moz-float-edge: margin-box;
}
dtは定義型リストを表示するときに使用します。
あまり、定義を記述することは少ないのではないでしょうか。例えばサイトマップやニュースリリースなどを記述するのに使用すると便利です。
dl{
display: block;
margin: 1em 0;
}
dt{
display: block;
}
dd {
display: block;
-moz-margin-start: 40px;
}
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ファイルの下に記述したほど、優先度が高くなります。
例えば、
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の場合、何を「継承」つまり、引き継ぐのかというと、親要素プロパティの値です。
ただし「background」プロパティなどは継承しません。
「継承」という概念を利用すると、二重にCSSを指定しなくてすむメリットもありますが、フォントを相対単位「%」「em」で指定すると、親要素に対しての「%」「em」で計算されてしまうので、結構ややこしくなってしまいます。
プロパティ別に継承の有無をまとめましたので、参考になさってください。
CSS2.1プロパティリファレンス
ページ内リンクはAjaxを使用。
以下サイトのスクリプトをお借りしました。
ページ内リンクでスムーススクロール