番号順に箇条書きしながら各条項ごとに文章を挟みたいパターン
みなさん、こんにちは！
B-CHANです。
ブロガーさん以外にはどうでも良い話です。
ボクのようにIT業界とは無関係な人間ががんばってHTMLやCSSを勉強していると、いろいろと苦労の中に発見があるので、たまにはそういうことを書いてみます。
昨日の記事の中で、
- 聴き解き
まずテキストを見ないで、英語音声を1センテンスもしくは1フレーズだけ聴く。ポーズ入り音源がやりやすい。
聴いた1文をテキストを見ないでリピーティング（口で言う）する。もちろん間違ってる可能性もある。
1度聴いてわからないければ何度も聴く。
- テキストを見ないリピーティング（メインパート1）
ポーズ入り音源を使ってリピーティングする。
つまり1文ごとに耳で聴いて、ポーズの間に口で言う。
という感じの部分があります（長いので一部省略しました）。
これは数字の付いた箇条書きで、さらに各条項ごとに文章が付いているパターンです。
これをHTMLで書くのに苦労しました。
最初は以下のように書いてみました。
<ol>
<li>聴き解き</li>
<p>まずテキストを見ないで、英語音声を1センテンスもしくは1フレーズだけ聴く。ポーズ入り音源がやりやすい。</p>
<p>1度聴いてわからないければ何度も聴く。</p>
<p></p>
<li>テキストを見ないリピーティング（メインパート1）</li>
<p>ポーズ入り音源を使ってリピーティングする。</p>
<p>つまり1文ごとに耳で聴いて、ポーズの間に口で言う。</p>
<p></p>
</ol>
しかし、このコードを、はてなブログのシステムが受け付けてくれないんですよ。
強制的に書き換えられてしまいます。
「はてなのバカヤロー。」
とか思いながら各種レファレンスマニュアルなどを読んでいるうちに解決。
ハイ、ボクが間違えていました。
HTMLのルールとして、<ol></ol>タグの中には<li></li>タグ以外は絶対に入れちゃダメなんですね。
じゃあどうすればいいか。
簡単でした。
<li></li>タグの中には何を入れてもOKでした。
なので、以下のようにすれば正解です。
<ol>
<li>
聴き解き
<p>まずテキストを見ないで、英語音声を1センテンスもしくは1フレーズだけ聴く。ポーズ入り音源がやりやすい。</p>
<p>1度聴いてわからないければ何度も聴く。</p>
<p></p>
</li>
<li>
テキストを見ないリピーティング（メインパート1）
<p>ポーズ入り音源を使ってリピーティングする。</p>
<p>つまり1文ごとに耳で聴いて、ポーズの間に口で言う。</p>
<p></p>
</li>
</ol>
そんなもん、HTMLで仕事をしている人には当たり前！と言われそうですね（汗）。
まあボクは、金融、不動産業界の人間なので……。
リストタグで番号を付け、しかも間に文章を挟みたくて悩んでいるHTML素人の人が、検索でこの記事にたどり着いて解決してくれたらいいな。
ちなみに、最初の間違いコードをはてなブログに入力すると、以下のように強制的に書き換えられます。
<ol><ol>
<li>聴き解き</li>
</ol></ol>
<p>まずテキストを見ないで、英語音声を1センテンスもしくは1フレーズだけ聴く。ポーズ入り音源がやりやすい。</p>
<p>1度聴いてわからないければ何度も聴く。</p>
<p> </p>
<ol><ol>
<li>テキストを見ないリピーティング（メインパート1）</li>
</ol></ol>
<p>ポーズ入り音源を使ってリピーティングする。</p>
<p>つまり1文ごとに耳で聴いて、ポーズの間に口で言う。</p>
単に<ol></ol>の2重のくくりが2つできるだけ。
よって、
1.聴き解き
1.テキストを見ないリピーティング（メインパート1）
というふうに、1.が並ぶだけです。1.2.3……とはなりません。
はてなブログを始め、多くのブログシステムではHTMLなんか知らなくても、普通に記事を書けますし、たいていのことができてしまうんですが、HTMLやCSSを覚えるとできることが格段に増えます。
ボクなんかは、昔はHTMLで文字装飾などをやっていたのが、CSSによって、文書構造と装飾の役割が完全に切り離されたという概念を知り、その素晴らしさに、今さらながら感動しています。
CSSってのは、すごい発明だなあ。
