見出しについて [h4]
見出しサンプル [h5]
見出しサンプル [h6]
各記事の題名が h3 なので、記事内の見出しは <h4> ～ </h4>を使うのが適切です。
さらに下位の見出しは h5 タグや h6 タグになります。
そうすると上の「見出しサンプル」のように表示されます。
※ ページは題名が h2 なのでページ内の見出しは h3 タグからになります。
段落
普通の文や画像は基本的に <p> ～ </p> ではさみます。改行するときは、 <br /> を記述します。
</p><p> と一度pタグを閉じると２回改行したくらいの隙間が空き、もっと隙間を空けたいときは、 </p><p><br /> をその数だけ並べます。
インライン要素
大きさや色などを変更する、よく使う文字の装飾はスタイルシートに用意しておくと便利です。
強調したいことばは <em> ～ </em> で挟み、さらにより強く強調したいことばを <strong> ～ </strong> ではさむと、目立つようになります。
<body> ～ のようなコードテキストは、 < などを < などに直し、 <code> ～ </code> ではさみます。
画像について
特に何も指定しなければこのようになります。
最大横幅は 523px （サイドバーがないときは 769px） です。
左寄せにして文字を右に文字を回り込み
左寄せにして文字を右に文字を回り込ませたい画像は、class="img_left" を指定します。
回り込みを解除させたい p や li などのタグに class="clear" を指定、または <br class="clear" /> を記述すると解除できます。
右寄せにして文字を左に文字を回り込み
右寄せにして文字を左に文字を回り込ませたい画像は、class="img_right" を指定します。
回り込みを解除させたい p や li などのタグに class="clear" を指定、または <br class="clear" /> を記述すると解除できます。
中央寄せ
中央寄せにしたい画像は <p class="img_center"> ～ </p> ではさみます。
左右の余白を「0」にしているので、553px （サイドバーなしの場合は 799px） の横幅まではみ出さずに表示できます。
追加と削除
追加した情報を <ins> ～ </ins> ではさむと、下線がつきます。
削除した情報を消さずに <del> ～ </del> で挟むと抹消線がつきます。
リスト
序列リスト
- 序列リストは番号がつきます。入れ子にすれば階層ができます。
- ひとつのリストの前後を
<li> ～ </li> ではさみます。
- 最後に全体を
<ol> ～ </ol> ではさみます。
- 非序列リストも同じように入れ子にできます。
- 序列リストの数字はスタイルシートの設定で変更可能です。
序列リスト - クラス指定
<ol class="minilist"> ～ </ol> とクラス指定すると- 上下の余白がないすっきりとしたリストになります。
- li要素が1行ずつのリストはこちらが見やすいかも。
- 中に入れ子になる
ul、ol、dl リストは特にクラス指定の必要はなく
- 上下の余白がないリストになります。
非序列リスト
- 非序列リストは番号なしの箇条書きリストです。入れ子にすれば階層ができます。
- ひとつのリストの前後を
<li> ～ </li> ではさみます。
- 最後に全体を
<ul> ～ </ul> ではさみます。
- 序列リストも同じように入れ子にできます。
- 序列リスト１
- 序列リスト２
- 非序列リストのリストマークはスタイルシートで背景画像を指定しているものが多いです。
非序列リスト - クラス指定
<ul class="minilist"> ～ </ul> とクラス指定すると- 上下の余白がないすっきりとしたリストになります。
- li要素が1行ずつのリストはこちらが見やすいかも。
- 中に入れ子になる
ul、ol、dl リストは特にクラス指定の必要はなく
- 上下の余白がないリストになります。
定義リスト
- 定義語
- 定義語の説明を記述
- 定義リストについて
- 定義リストは、定義語とその説明からなります。
定義語を <dt> ～ </dt> ではさみ、その説明を <dd> ～ </dd> ではさんだ後、全体を <dl> ～ </dl> ではさみます。 - 定義語
- 定義語の説明を記述
- 定義リストの入れ子
- 定義語（
dt ）にはインライン要素しか使えませんが、説明（ dd ）のほうはブロック要素（ p、ul、ol、dl など）も使えます。
このように定義リストを入れ子にすることも可能です。
引用文
昔々、あるところにおじいさんとおばあさんがいました。
おじいさんは山へ芝刈りにおばあさんは川へ洗濯に行きました。
おばあさんが川で洗濯をしていると 川上から桃がどんぶらこどんぶらこと流れてきました。
引用文は普通に記述した後、全体を <blockquote> ～ </blockquote> ではさみます。
整形済みテキスト
整形済みテキストは <pre> ～ </pre> ではさみます。
ソースコードなど整形済みテキスト
改行や連続した半角スペース などが等幅フォントでそのまま表示されます。
========================================================================================================================================
横にはみだすとスクロールバーができます。
アスキーアートは <pre class="aa"> ～ </pre> ではさみます。
_
｀)）
´ ∧
<⌒>
／⌒＼
］皿皿［-∧-∧､
＿＿＿＿＿＿＿_∧_／＼_|,,|「|,,,|「|ﾐ^!､
／三三三三三三三 Π . ∩ |'|「|'''|「|||:ll;|
＿＿|￣同￣同￣同 /￣￣∧￣￣￣￣∧￣＼
... _/＿＿|==／＼＝＝＝ﾊ,￣￣|「|￣￣￣￣|「|￣￣|
/_| ﾛ ﾛ 「￣￣￣￣￣￣| | 田 |「| 田 田 |「|［［［［|
|ll.|ﾛ ﾛ /|.l⌒l l⌒ｌ ｌ⌒l l´| | |「| |「|ﾐﾐﾐﾐﾐﾐ､
/〃￣ /::|.| ,,|| ,;:'ﾞ ﾞ｀ヾ,,.| | 田 |「| 田 田 |「|:::::::::::|
| | | :|.|,;ヾﾞﾞヾﾞﾞﾞ'';;,,:::ヾﾞﾞヾ''""``ヾ;;,,""~｀ヾﾞﾞ`ヾ､´ﾞﾞヾ"
''""``ヾ;,;ヾﾞﾞヾ
テーブル
学年末テスト集計(100点満点)
| 名前 | 英語 | 国語 | 数学 | 理科 | 社会 | 合計 | 平均 |
|---|
| たろう | 90 | 70 | 50 | 35 | 35 | 280 | 56 |
| はなこ | 70 | 75 | 90 | 80 | 85 | 400 | 80 |
<h4>テーブル</h4>
<table summary="点数表">
<caption>学年末テスト集計(100点満点)</caption>
<tbody>
<tr><th>名前</th><th>英語</th><th>国語</th><th>数学</th><th>理科</th><th>社会</th><th>合計</th><th>平均</th></tr>
<tr><td>たろう</td><td>90</td><td>70</td><td>50</td><td>35</td><td>35</td><td>280</td><td>56</td></tr>
<tr><td>はなこ</td><td>70</td><td>75</td><td>90</td><td>80</td><td>85</td><td>400</td><td>80</td></tr>
</tbody>
</table>
comment