との使い分け

目次

  1. 理屈はともかく多国語日記(日記を書く)
  2. 文字化けをなくす
  3. <SPAN>と<div>の使い分け ←今日
  4. 国連憲章

lang属性とスタイルの指定時に行うspanとdivの使い分けについて説明します。

文中の一部を別言語に切り変える場合はspan

文の中の一部だけを別言語に切り替えたい場合があります。そのときには次の例のように<span>タグを使います。

「こんにちは」を中国では「<span lang="zh-cn" class="zhcn">&#x4F60;&#x597D;&#x5417;</span>」、台湾では「<span lang="zh-tw" class="zhtw">&#x4F60;好&#x55CE;</span>」と書きます。

結果はこうなります。

「こんにちは」を中国では「你好吗」、台湾では「你好嗎」と書きます。

文の中の一部だけが他の言語になっていますね。

複数の段落をごっそり別言語にする時にはdiv

なん段落にも渡る文章を違う言語にしたい場合は、<div>タグが便利です。

><div lang="zh-cn" class="zhcn"><
+&#x4F60;&#x597D;&#x5417;
+&#x4F60;&#x597D;&#x5417;
+&#x4F60;&#x597D;&#x5417;
></div><

divタグの前後に余計な">"や"<"が付いていますが、これは「はてな」に固有のルールです。また、divタグの前後で必ず改行する癖をつけましょう。
上のように入力すると「はてな」は次のように出力します。

  1. 你好吗
  2. 你好吗
  3. 你好吗

三行(三段落)まとめて中国語になっています。

一段落だけならどちらでもいい

spanを使って一段落を別段落にする場合はこう書きます。spanタグで改行しないでください。

+<span lang="zh-cn" class="zhcn">&#x4F60;&#x597D;&#x5417;</span>

結果はこうなります。

  1. 你好吗

一方、divを使う場合はこう書きます。divタグで改行してください。

><div lang="zh-cn" class="zhcn"><
+&#x4F60;&#x597D;&#x5417;
></div><

結果はこうなります。

  1. 你好吗

OSやブラウザによっては「はてな」が出力する"1."が微妙に異なっているかもしれません。これは、spanを使ったときには日本語として、divを使ったときには中国語として出力されているからです。

/* -----codeの行番号----- */