正しいxhtmlに沿った記述方法
「改行を変換する」で記事を投稿すると、自動的にpタグにはさまれるので、ブロック要素のタグを中に入れることは好ましくありません。
「改行を変換する」のチェックをはずすと、いろいろなタグを使って記事を装飾することができます。
しかし、投稿した記事の本文は何のタグにもはさまれないので、自分でタグも記述する必要があります。
以下のことに気をつけてなるべく正しい記述をしてください。
見出しについて
見出しサンプルh5
見出しサンプルh6
各記事の題名が<h3> ~ </h3>なので、記事内の細かい見出しは<h4> ~ </h4>を使うのが適切です。
下位の見出しはh5タグやh6タグになります。
そうすると上の「見出しサンプル」のように表示されます。
普通の文や画像
普通の文や画像はすべて<p> ~ </p>ではさみます。
改行するときは、<br />を記述します。
2回改行したいときは</p><p>を記述します。
もっと改行させたいときは、</p><p><br />をその数だけ並べます。
なぜ複数改行の場合、1回pタグを閉じてまたpタグをスタートさせるのかというと、改行タグをたくさん並べるのは良くないとされているからです。
pタグでどのくらいのすきまが空くかは、スタイルシートの設定しだいです。
この際、あらかじめ、スタイルシートで設定しておいたクラス名をpタグに指定することでいろいろな装飾ができます。
強調したいことばは<em> ~ </em>で挟み、さらにより強く強調したいことばを<strong> ~ </strong>ではさむと、太字になって目立ちます。
追加した情報を<ins> ~ </ins>ではさむと、下線がつきます。
削除した情報を消さずに<del> ~ </del>で挟むと抹消線がつきます。
引用文
昔々、あるところにおじいさんとおばあさんがいました。
おじいさんは山へ芝刈りにおばあさんは川へ洗濯に行きました。
おばあさんが川で洗濯をしていると
川上から桃がどんぶらこどんぶらこと流れてきました。
引用文はまず<p> ~ </p>ではさんだ後、全体を<blockquote> ~ </blockquote>ではさむのがよい感じです。リストを使用こともできます。
改行等も普通の文と同じようにします。
リスト
非序列リスト
- 番号なしの非序列リストは、
ひとつのリストの前後を<li> ~ </li>ではさみ、最後に全体を<ul> ~ </ul>ではさみます。 - 非序列リストのリストマークはスタイルシートの設定です。
- このように階層をつくることができます。
- 序列リストも同じように入れ子にできます。
- 非序列リストのリストマークはスタイルシートの設定です。
- このように階層をつくることができます。
- 序列リストも同じように入れ子にできます。
序列リスト
- 番号つきの序列リストは、
ひとつのリストの前後を<li> ~ </li>ではさみ、最後に全体を<ol> ~ </ol>ではさみます。 - 序列リストの数字はスタイルシートの設定で変更可能です。
- 非序列リストのリストマークはスタイルシートの設定です。
- このように階層をつくることができます。
- 序列リストも同じように入れ子にできます。
定義リスト
- 定義語
- 定義語の説明を記述
- 定義リストについて
- 定義リストは、定義語とその説明からなります。
定義語を<dt> ~ </dt>ではさみ、その説明を<dd> ~ </dd>ではさんだ後、全体を<dl> ~ </dl>ではさみます。 - 注意
- 定義語にはpタグ等を使うことはできませんが、説明のほうはpタグやリストなどのブロック要素も使えます。
整形済みテキスト
半角スペースや改行などをそのまま表します。
表示が崩れないように横幅を指定しているので、
全体の横幅を変更したときは同じだけ増減してください。
整形済みテキストは<pre> ~ </pre>ではさみます。
スタイルシートについて
記事に使われたタグのスタイルはスタイルシートで設定します。
div#diary .text ○○ { }という形で指定すると、変わったスタイルを指定しても、記事以外に影響しなくてすみます。