ヘッドライン見出し・h2要素が使われてます
ソースをいじる人の為の記事テンプレートです。HTMLタグを利用することで、比較的自由なレイアウト表現が可能になります。
使用できるタグは h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, a, q, blockquote, table, td, th, pre, fieldset, legend くらいにしておきます（デザイン調整が大変なので大目に見てください）。
テキストにアンカーリンクを張った場合はこんな感じ。こっちは別窓で開く外部リンクです。
※<span style="color:#C66;">注記の色を付けたテスト。アンカーリンクとは、リンクしたい場所にアンカー（目印）を置いて、<a href="#アンカー名">でリンクするとページ内ジャンプが出来る仕組みのことです。
小見出し・h3要素が使われてます
- 順序が付いているリスト、つまり <ol>要素です。
- こんな
- 感じで
- 数字付き！
「<ol>要素」と「アンカーリンク」を組み合わせて、ページ内の目次を作ることができます。長めのページになる場合は目次を作ってあげると、親切で読みやすくなります。
さらに枠を付けてあげる場合は、
<fieldset><legend>タイトル</legend>枠の中の目次要素や文章</fieldset>
としましょう。
小見出し・h4要素
この部分は段落、<p>（本文）です。<p>～</p>で囲まれた部分がひとつの段落であることを表します。一般的なブラウザでは<p>～</p>の前後に1行分改行されますが、 単に改行することが目的の場合には、<p>タグではなく<br>タグを使用してください。
→<br>を使うとこんな感じで改行されます。
<table>テーブル（表）のテスト
| <th>テーブルヘッダー | <td>テーブルデータ。<td>テーブルデータ。<td>テーブルデータ。 |
|---|---|
| <th>は太字になります | <td>テーブルデータ。<td>テーブルデータ。<td>テーブルデータ。 |
<table>はテーブル（表）を作成するタグです。テーブル（表）の基本的な構造は、<table>～</table>内に<tr>～</tr>で表の横一行を定義して、さらにその中に<th>～</th>や <td>～</td>でセルを定義します。
| Aのタイトル | Bのタイトル | Cのタイトル |
|---|---|---|
| Aの内容 Aの内容 Aの内容 Aの内容 | Bの内容 Bの内容 Bの内容 Bの内容 | Cの内容 Cの内容 Cの内容 Cの内容 |
| 1,111円 | 2,222円 | 3,333円 |
※テーブルはあくまで表としての表現に留めておきましょう。複雑なレイアウトは表示が崩れる原因となります。
<dl>定義リストのテスト
- 定義リストのタイトル
- <dl>要素（定義リスト）は、説明付きリストとも呼ばれています。この定義リストはなかなか便利でして、日付を付けて日記風にしてみたり、色々な使い方ができます。
- 20XX年XX月XX日
- デザインは一種類のみですが、ご了承ください。
- 20XX年XX月XX日
- 内容がナイヨウ。内容がナイヨウ。
<img>画像配置のテスト
大きな神山おじさんの配置例（センター寄せ）
ここに写真の説明
このテキストはダミーテキストです。このテキストは画像の左側に回り込みます。写真の下に小さく説明を入れる場合は、このような表示になります。
↑ここに<div style="clear:both"></div>を配置。画像をテキストの左右に配置している場合、文字数が足りないと、次の要素が回り込んでしまいレイアウトが崩れる場合があるので、一度左右のフロートをクリア（clear fix）してあげます。自分でも何を言っているのかわからなくなってきました。
<ol>と似て非なるもの<ul>
- ここは並列列挙リストです。つまり <ul>要素です。
- 先程説明した<ol>と似ていますが
- 順序が付いていません。
- 数字の代わりにリストの先頭にかわいい丸ポッチが付きます。
- リンクを付けた例です。
次はブログ等によく出てくる<blockquote>引用のテストです
<blockquote>とは、引用・転載文であることを示すタグです。比較的長いテキストを段落ごと引用する際に使用されます。短いテキストの場合は<blockquote>タグではなく<q>タグを使用して引用・抜粋を行います。
ここは引用です。<blockquote>はこのように表示されます。
ゴルフは英国発祥というのが定説であったが 最近では宗家二代 呉 竜府（ご・りゅうふ）がその起源であるという説が支配的である。
（民明書房から抜粋）
<q>タグはこのように使います。<q>タグで囲うと勝手に""が付きます。
短いテキストの引用・抜粋（太公望書林から抜粋）
高度な編集
本文中でHTMLソース等の説明する場合は、<pre>要素が便利です。
↓このようにグレーの枠内で表示され、ソースのコピーも可能になります。
#main ul li {
margin: 0;
padding: 0;
list-style-type: none;
}
トカチニッチ独自のタグ
より自由度を高めるために、トカチニッチ専用のタグをご用意。例えば、Youtube動画を埋め込む場合は、Youtubeで取得した埋め込みソースを<div class="youtube_if">ここにソース</div>で囲ってください。
↓下記のように横幅にフィットします。
文字の大きさは、<p>または<p>タグ内の<span>で<class="fs_10">～<class="fs_26">を使います。
fs_10の例です。
fs_14の例です。
fs_18の例です。
fs_22の例です。
fs_26の例です。強調表示！
以上、ソースをいじる人のための中級者講座でした。
ソースをいじらなくても「この記事のように」画像とテキストのみで簡単な記事が書けます。面倒な方はお試しください。
