初心者にもわかりやすいWEBサイト作成お助けサイトです。
- 見出し『h1～h6要素』(Heading)
-
見出しには『h1要素』から『h6要素』までの6つのレベルがあり、『h1要素』は大見出し、『h2要素』は中見出し、『h3要素』は小見出し、『h4要素』から『h6要素』は必要に応じてそれ以下の見出しに利用するのが基本となります。
<h1>オリジナルTシャツショップ Helios(ヘリオス)</h1>
- 段落『p要素』(Paragraph)
-
基本的には、数行に渡る文章に使用しますが、見出しやリストといった特定の役割を与えることのできないコンテンツにも使用されます。段落の中で改行したい場合には『br要素』を使用します。
<p>数多くあるオリジナルTシャツショップの中から“オリジナルTシャツショップ Helios”へ<br />
ご来店頂きまして誠にありがとうございます!!</p>
- 引用文『blockquote要素』
-
長い文章を引用する場合に、その文章が引用文であることを示すために使用します。
引用文が書籍や雑誌、その他のWEBサイトなどからの引用である場合には、著作権法に従って実施します。また、可能であればcite属性で引用元のURLを示します。
<p>これらのデザインについてHeliosの店長さん曰く、</p>
<blockquote cite="http://www.helios-j.com/">
<p>(ブランドコンセプトの)"LOVE&PEACE"を貫いております。</p>
</blockquote>
<p>ということです。</p>
- サイト所有者・制作者情報『address要素』
-
著作権表示やサイトの所有者や制作者の連絡先を指定するときに使用します。また、主にページのフッターで使用されます。
<address>Copyright © 2009 Helios. All Rights Reserved.</address>
- 順不同リスト『ul要素』(Unordered List)
-
項目を順不同で並列的に列挙するタイプのリストで、ナビゲーションなど並列的なリンクリストにも使用します。
『ul要素』は単独では使用せず、『li要素』を伴って使用します。『ul要素』を使用した場合、ブラウザでは『li要素』の先頭に"・"とマーカーが振られます。
<ul>
<li>Brightest</li>
<li>CROWN</li>
<li>LILY</li>
</ul>
- 順序リスト『ol要素』(Ordered List)
-
項目を順序や順番として列挙するタイプのリストなので、何かの手順やランキングなどに使用します。
『ol要素』は単独では使用せず、『li要素』を伴って使用します。『ol要素』を使用した場合、ブラウザでは『li要素』の先頭に"1."、"2."、"3."…とマーカーが振られます。
<ol>
<li>Brightest</li>
<li>CROWN</li>
<li>LILY</li>
</ol>
- 定義リスト『dl要素』(Definition List)
-
物事を定義する場合に使用します。
『dl要素』は単独では使用せず、『dt要素』と『dd要素』を伴って使用します。また、『dt要素』で定義する用語を、『dd要素』で用語の説明をします。
<dl>
<dt>順不同リスト『ul要素』(Unordered List)</dt>
<dd>項目を順不同で並列的に列挙するタイプのリスト。</dd>
<dt>順序リスト『ol要素』(Ordered List)</dt>
<dd>項目を順序や順番として列挙するタイプのリスト。</dd>
</dl>
- 表『table要素』
-
ある内容を表として定義する場合に使用します。
『table要素』は単独では使用せず、行を定義する『tr要素』(Table Row)、表のデータの見出しを定義する『th要素』(Table Header)、表のデータを定義する『td要素』(Table Data)を伴って使用します。また、summary属性で非視覚系ブラウザに対してテーブルの説明や構造を示し、cellspacing属性でテーブルに対して表全体の上下左右の四方向について最も外周にあるセルがどれだけ表全体の枠から離れるかを指定し、cellpadding属性でテーブルに対して表全体の、各セルの中で最も大きなデータに対しての罫線との間の余白を指定します。なお、cellpadding属性の値は、px値を指定した場合には指定値そのものを、割合を指定した場合には限りなく指定値に近い余白を確保します。
表自体に見出しをつけたい場合には、『caption要素』を使用します。
<table summary="商品サイズ" cellpadding="0" cellspacing="0">
<caption>商品サイズ</caption>
<tr>
<th>サイズ</th>
<th>身幅</th>
<th>着丈</th>
</tr>
<tr>
<th>S</th>
<td>46cm</td>
<td>70cm</td>
</tr>
<tr>
<th>M</th>
<td>52cm</td>
<td>71cm</td>
</tr>
<tr>
<th>L</th>
<td>56cm</td>
<td>76cm</td>
</tr>
</table>
- 表の構造化
-
列グループを定義する『colgroup要素』(COLumn GROUP)と『col要素』(COLumn)、行グループを定義する『thead要素』(Table HEADer)、『tfoot要素』(Table FOOTer)、『tbody要素』(Table BODY)を利用することで、表を構造化することができます。なお、『thead要素』、『tfoot要素』、『tbody要素』を使用する場合には、『thead要素』→『tfoot要素』→『tbody要素』の順に記述してください。
<table summary="商品サイズ" cellpadding="0" cellspacing="0">
<caption>商品サイズ</caption>
<col span="1" id="productWidth" />
<col span="1" id="productHeight" />
<thead>
<tr>
<th scope="col">身幅</th>
<th scope="col">着丈</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">身幅</th>
<th scope="col">着丈</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>46cm</td>
<td>70cm</td>
</tr>
<tr>
<td>52cm</td>
<td>71cm</td>
</tr>
<tr>
<td>56cm</td>
<td>76cm</td>
</tr>
</tbody>
</table>