コンテンツエリアの装飾用のベースコーディング

<h1>大見出し</h1>
<h1 class="image"><img src="img/h1_index.gif" alt="画像の見出し" width="650" height="70" /></h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<p>段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。</p>
<p><strong>段落の文章が入ります(強調(strong))。</strong><a href="/">段落の文章が入ります。</a>段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。段落の文章が入ります。</p>
<h2>箇条書き(ul)</h2>
<ul>
<li>箇条書きが入ります。箇条書きが入ります。箇条書きが入ります。箇条書きが入ります。箇条書きが入ります。箇条書きが入ります。</li>
<li>箇条書きが入ります。箇条書きが入ります。箇条書きが入ります。</li>
<li>箇条書きが入ります。箇条書きが入ります。箇条書きが入ります。</li>
</ul>
<h2>リンクリスト(ul.link)</h2>
<ul class="link">
<li><a href="/">箇条書きが入ります。箇条書きが入ります。箇条書きが入ります。</a></li>
<li><a href="/">箇条書きが入ります。箇条書きが入ります。箇条書きが入ります。</a></li>
<li><a href="/">箇条書きが入ります。箇条書きが入ります。箇条書きが入ります。</a></li>
</ul>
<h2>引用文</h2>
<blockquote>
<p>引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。</p>
</blockquote>
<h2>テーブル(thead、tbodyなし)</h2>
<table>
<tr>
<th scope="row">sivacchi</th>
<td>80点</td>
</tr>
<tr>
<th scope="row">nivacchi</th>
<td>80点</td>
</tr>
<tr>
<th scope="row">vaivacchi</th>
<td>85点</td>
</tr>
</table>
<h2>テーブル(thead、tbody付き)</h2>
<table>
<thead>
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">10人</th>
<th scope="col">20人</th>
<th scope="col">30人</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">プランA</th>
<td>10,000円</td>
<td>10,000円</td>
<td>10,000円</td>
</tr>
<tr>
<th scope="row">プランB</th>
<td>10,000円</td>
<td>10,000円</td>
<td>10,000円</td>
</tr>
<tr>
<th scope="row">プランC</th>
<td>10,000円</td>
<td>10,000円</td>
<td>10,000円</td>
</tr>
<tr>
<th scope="row">プランD</th>
<td>10,000円</td>
<td>10,000円</td>
<td>10,000円</td>
</tr>
</tbody>
</table>
<h2>フォーム整形用のテーブル</h2>
<table>
<tr>
<th scope="col">質問項目</th>
<th scope="col"><input type="text" /></th>
</tr>
<tr>
<th scope="row">質問項目</th>
<td><input type="text" /></td>
</tr>
<tr>
<th scope="row">質問項目</th>
<td><input type="text" /></td>
</tr>
</table>

使い方

CSSで頻繁に使う要素を装飾をするためのHTMLです。ページのレイアウトのコーディングが完了したら、base.htmlなどとファイルを作って、コンテンツエリアの中に上のコードをコピペします。

ページの先頭へ戻る