ブロック要素
h1 ～ h6
見出し要素
2008/3/26
構文
<h2> ～ </h2>
<h3> ～ </h3>
<h4> ～ </h4>
<h5> ～ </h5>
<h6> ～ </h6>
説明
h1～h6要素は、見出しを表すブロック要素で、h1～h6までの6段階あります。
見出し要素は、ページにおいてh1から順番に出現する必要があります。 例えば、h2要素の次にh4要素を記述してはいけません。 h2要素の次には、h2要素かh3要素を記述するようにしてください。
また、h1要素はページ内で1回しか使えないとか、何回使っても文法的には間違っていないとか、いろいろ議論はありますが、個人的には、ページ内で1回しか使用しないルールを設けています。
h1要素はページで一番上位に当たる見出しなので、「サイトタイトル」や「コンテンツタイトル」などに指定するとよいでしょう。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | STF | S | 任意 | style属性はCSSで代替。 | |
| align="TextAlign" | テキスト整列 | TF | - | 任意 | CSS（marginプロパティ、text-alignプロパティ）で代替 |
align属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。
-
align属性 ⇒ CSS（marginプロパティ、text-alignプロパティ）で代替。
<style type="text/css"> h1, h2, h3, h4, h5, h6 { margin:0 auto; padding:0; /* 要素のセンタリング */ text-align:center; /* 要素内テキストのセンタリング */ }
サンプル
<h1>見出し1</h1> <h2>見出し2</h2> <p>段落。</p> <h3>見出し3</h3> <p>段落。</p> <h3>見出し3</h3> <p>段落。</p> <h4>見出し4</h4> <p>段落。</p> <h5>見出し5</h5> <p>段落。</p> <h6>見出し6</h6> <p>段落。</p> <h3>見出し3</h3> <p>段落。</p> <h3>見出し3</h3> <p>段落。</p> <h2>見出し2</h2> <p>段落。</p>
address
連絡先
2008/3/26
構文
説明
address要素は、文書作成者への連絡先情報を表すブロック要素です。
一般的なブラウザでは、イタリック体で表示されます。
E-mailアドレスや、ページのフッタ部でコピーライトを記述する使用します。
属性
固有の属性はありません。
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
サンプル
<!-- 連絡先 --> <address>E-mail: <a href="mailto:email@domain.co.jp">email@domain.co.jp</a></address> <!-- コピーライト --> <address>copyright© PHP & JavaScript Room</address>
blockquote
ブロックレベルの引用文
2008/3/26
構文
説明
blockquote要素は、ブロックレベルの引用文を表すブロック要素です。
blockquote要素内に直接テキストを記述することはできません。
テキストは、p要素でマークアップする必要があります。
引用文の引用元を明示したい場合は、cite属性に引用元のURIを指定します。
インラインレベルの引用の場合は、q要素を使用してください。
blockquote要素をインデント目的で使用しないようにしてください。
インデントするは、div.indent { margin-left:1em; }のようにCSSで指定しましょう。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | STF | S | 任意 | style属性はCSSで代替。 | |
| cite="%URI" | 引用元のURIを指定。 | STF | S | 任意 | |
サンプル
<p> 「Wikipedia」の名前の由来を「Wikipedia」で調べてみると以下のように掲載されていた。 </p> <blockquote cite="http://ja.wikipedia.org/wiki/Wikipedia"> <p> Wikipedia（ウィキペディア）という名前はウィキペディアが使用しているMediaWikiと呼ばれる Wiki （ウィキ）ソフトウェアの「Wiki （ウィキ）」と、百科事典を意味する英語「encyclopedia（エンサイクロペディア）」から合成されたものである（よって日本国内では、元々のWikiシステムを知らない層からはWikipediaをWikiと略して呼ばれることが多いが、これは誤用であり、混乱の元である）。 </p> </blockquote>
「Wikipedia」の名前の由来を「Wikipedia」で調べてみると以下のように掲載されていた。
Wikipedia（ウィキペディア）という名前はウィキペディアが使用しているMediaWikiと呼ばれる Wiki （ウィキ）ソフトウェアの「Wiki （ウィキ）」と、百科事典を意味する英語「encyclopedia（エンサイクロペディア）」から合成されたものである（よって日本国内では、元々のWikiシステムを知らない層からはWikipediaをWikiと略して呼ばれることが多いが、これは誤用であり、混乱の元である）。
center
要素およびテキストの中央寄せ
2008/3/26
構文
説明
center要素は、要素およびテキストをセンタリングする要素です。
center要素は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。
そのため、CSS（marginプロパティ、text-alignプロパティ）で代替してください。
要素のセンタリングをする場合、IE以外のブラウザではmargin-left:auto、margin-right:auto;のみでセンタリングされますが、IEではtext-align:center;も併せて指定しないとセンタリングされませんので、多くのブラウザに対応するために両方指定するようにしてください。
div
ブロック要素のグループ化
2008/3/26
構文
説明
div要素は、ブロック要素をグループ化するためのブロック要素です。
div要素は、Webページをレイアウトする時にブロック要素をグループ化するのによく使用します。 下述のサンプルでは、ページ全体枠、ヘッダ部、メイン部、フッタ部、カラムなどをdiv要素でグループ化しています。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | STF | S | 任意 | style属性はCSSで代替。 | |
| align="TextAlign" | テキスト整列 | TF | - | 任意 | CSS（marginプロパティ、text-alignプロパティ）で代替 |
div要素のalign属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。
-
align属性 ⇒ CSS（marginプロパティ、text-alignプロパティ）で代替。
<style type="text/css"> div { margin:0 auto; padding:0; /* 要素のセンタリング */ text-align:center; /* 要素内テキストのセンタリング */ } </style>
サンプル
<div id="wrap"> <div id="header"> <h1>Header</h1> </div> <div id="container"> <div id="content"> <div class="inner"> <h2>Content Title</h2> <p>Content</p> </div> </div> <div id="sidebar"> <div class="inner"> SidebBar </div> </div> <div id="footer">Footer</div> </div>
paragraph
段落
2008/3/26
構文
説明
p要素は、段落を表すブロック要素です。
属性
固有の属性はありません。
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
| align="TextAlign" | テキスト整列 | TF | - | 任意 | CSS（marginプロパティ、text-alignプロパティ）で代替 |
p要素のalign属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。
-
align属性 ⇒ CSS（marginプロパティ、text-alignプロパティ）で代替。
<style type="text/css"> p { margin:0 auto 1em auto; /* 要素のセンタリング */ text-align:center; /* 要素内テキストのセンタリング */ } </style>
サンプル
<p>段落。</p> <p>段落。</p>
段落。
段落。
pre
整形済みテキスト
2008/3/26
構文
説明
pre要素は、半角スペース、タブ、改行を記述したまま表示するブロック要素です。 一般的なブラウザでは、等幅フォントで表示されます。
pre要素内に、下記の要素を記述することはできません。
| XHTML 1.0 | img|object|applet|big|small|sub|sup|font|basefont |
|---|---|
| XHTML 1.1 | img|object|big|small|sub|sup |
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | STF | S | 任意 | style属性はCSSで代替。 | |
| width="%Number" | 幅を指定。 | TF | - | 任意 | CSS（widthプロパティ）で代替。 |
| xml:space="preserve" | 空白の扱い方を指定。初期値はpreserveで、全てのホワイトスペースが保持されます。この属性は、固定値のため指定する必要はありません。そのため空白の扱い方は、ブラウザの解釈に依存します。 | TF | - | 任意 | |
pre要素のwidth属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。
-
width属性⇒ CSS（widthプロパティ）で代替。
<style type="text/css"> pre { width:500px; } /* 幅 */ </style>
サンプル
pre要素は、CSSでoverflowプロパティにscrollまたはautoを指定して、プログラムのソースコードを記述するのによく使います。
<style type="text/css">
pre.cls_pre {
margin:1em 0; padding:10px;
background-color:#000;
color:lime;
font-family:monospace;
line-height:1.22;
overflow:scroll;
}
</style>
<pre class="cls_pre">function fAlert(str){
alert(str);
}</pre>
function fAlert(str){
alert(str);
}