はてな インデンテーション － 字下げ表示の編集
はてな インデンテーション － 字下げ表示の編集
物事を理解したり伝えるために、分類し整理します。こうしたときに箇条書きが利用されます。はてなブログでは「箇条書き」と「番号付きリスト」ボタンが用意されており、選択した範囲をそのように指定できます。
Wordで編集した文章の多くが、コピペで はてなの編集に反映されますが、一部そのまま反映されないことがあります。
このことも含めて、予め用意されている機能以上の編集は、HRML編集をしなければならないようです (あまりやりたくありませんが...)。
目次
Ⅰ 箇条書きと番号付きリスト
予め用意されている機能を使った箇条書き、番号付きリスト
(1) 箇条書き
- 項目A
- 項目B
- 項目C
このときのHTMLコードを見てみると
<ul>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
</ul>
で、<ul>...</ul>で囲まれた範囲が箇条書きとして表示されます。
(2) 番号付きリスト
- 項目A
- 項目B
- 項目C
このときのHTMLコードを見てみると
<ol>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
</ol>
で、<ol>...</ol>で囲まれた範囲が番号付きリストとして表示されます。
Ⅱ. 内訳文書の追加
箇条書き/番号付きリストへ、捕捉する文書を追加する
(3) 箇条書きの項目Aに、内訳Aa,Ab,Acを追加した例
- 項目A
内訳Aa
内訳Ab
内訳Ac
- 項目B
- 項目C
このときのHTMLコードは次のようになります。
<ul>
<li>項目A
<p>内訳Aa</p>
<p>内訳Ab</p>
<p>内訳Ac</p>
</li>
<li>項目B</li>
<li>項目C</li>
</ul>
赤色の<li>…</li>に囲まれた範囲内に、改行した文書が入ることになります。
(4) 番号付きリストの項目Aに、内訳Aa,Ab,Acを追加した例
- 項目A
内訳Aa
内訳Ab
内訳Ac
- 項目B
- 項目C
このときのHTMLコードは次のようになります。
<ol>
<li>項目A
<p>内訳Aa</p>
<p>内訳Ab</p>
<p>内訳Ac</p>
</li>
<li>項目B</li>
<li>項目C</li>
</ol>
赤色の<li>…</li>に囲まれた範囲内に、改行した文書が入ることになります。
Ⅲ. 内訳文書を箇条書きにする
(5) 箇条書きの、項目Aの内訳文章を箇条書きにした例
- 項目A
- 内訳Aa
- 内訳Ab
- 内訳Ac
- 項目B
- 項目C
このときのHTMLコードは次のようになります。
<ul>
<li>項目A
<ul>
<li>内訳Aa</li>
<li>内訳Ab</li>
<li>内訳Ac</li>
</ul>
</li>
<li>項目B</li>
<li>項目C</li>
</ul>
赤色の <li>…</li>に囲まれた、緑色の<ul>…</ul>の範囲。
(6) 番号付きリストの、項目Aの内訳文章を箇条書きにした例
- 項目A
- 内訳Aa
- 内訳Ab
- 内訳Ac
- 項目B
- 項目C
このときのHTMLコードは次のようになります。
<ol>
<li>項目A
<ul>
<li>内訳Aa</li>
<li>内訳Ab</li>
<li>内訳Ac</li>
</ul>
</li>
<li>項目B</li>
<li>項目C</li>
</ol>
赤色の <li>…</li>に囲まれた、緑色の<ul>…</ul>の範囲。
Ⅳ. 内訳文書を番号付きリストにする
(7) 箇条書きの、項目Aの内訳文章を番号付きリストにした例
- 項目A
- 内訳Aa
- 内訳Ab
- 内訳Ac
- 項目B
- 項目C
このときのHTMLコードは次のようになります。
<ul>
<li>項目A
<ol>
<li>内訳Aa</li>
<li>内訳Ab</li>
<li>内訳Ac</li>
</ol>
</li>
<li>項目B</li>
<li>項目C</li>
</ul>
赤色の <li>…</li>に囲まれた、緑色の<ol>…</ol>の範囲。
(8) 番号付きリストの、項目Aの内訳文章を番号付きリストにした例
- 項目A
- 内訳Aa
- 内訳Ab
- 内訳Ac
- 項目B
- 項目C
このときのHTMLコードは次のようになります。
<ol>
<li>項目A
<ol>
<li>内訳Aa</li>
<li>内訳Ab</li>
<li>内訳Ac</li>
</ol>
</li>
<li>項目B</li>
<li>項目C</li>
</ol>
赤色の <li>…</li>に囲まれた、緑色の<ol>…</ol>の範囲。
Ⅴ. インデンテーション
上記のHTMLコードの表示で、以下の方法で段落全体を字下げしています。このHTMLコードは、通常の
<p>段落(文章)</p>
に、次のように書き加えます。
<p style="margin-left: 2em;">段落(文章)</p>
(2emを1em、3emなどに変更できますので、文字の大きさに合わせて微調整できます)
なお、出典を失念いたしましたが、はてな無料版でこの記法は不可だった記憶があります。いつからかは分かりませんが、現在は利用できています。
今回は、「箇条書き」と「番号付きリスト」を使った2段のインデンテーションまでを取り上げました。3段、4段とできるでしょうが煩雑な編集になりそうですし、表示画面が狭くなることもあります。
これらはプログラムの１つですから、指定した通りに動きます。また、HTMLの書き方は必ずしも、ここに挙げた例に限らない事を付け加えておきます。
----- 関連記事 -----
