行間のタグ記事一覧

タグ:行間

行間のタグが付いた記事一覧。居眠りばかりしている社長を見て、この会社の将来はあるのかな!?と不安を抱くようになり、好きな車で自由にドライブがしたくてネットビジネスをはじめました。会社勤めしながらでもできるアフィリエイトで気ままに副業生活
no-image

無料ブログ困ったときのHTML
HTMLを使って箇条書きの入れ子にする方法は?箇条書き・箇条書きの入れ子の行間の調整法は?についてまとめました。HTMLの箇条書きについてはこちらの記事をご覧ください。⇒ HTMLを使って箇条書き、記号・数字を表示する方法入れ子とはこんな感じです。項目1項目1-1項目1-2項目2項目2-1項目2-2項目1を、さらに箇条書き(ここでは項目1-1と項目1-2)にしたいときに使うHTMLです。記事を書い...

記事を読む

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 カテゴリ
 タグ
None

HTMLの箇条書きを入れ子にするには?行間の調整法は?

HTMLを使って箇条書きの入れ子にする方法は?
箇条書き・箇条書きの入れ子の行間の調整法は?

についてまとめました。


HTMLの箇条書きについてはこちらの記事をご覧ください。
⇒ HTMLを使って箇条書き、記号・数字を表示する方法



入れ子とはこんな感じです。
  • 項目1
    • 項目1-1
    • 項目1-2
  • 項目2
    • 項目2-1
    • 項目2-2

項目1を、さらに箇条書き(ここでは項目1-1と項目1-2)にしたいときに使うHTMLです。

記事を書いていて、箇条書きを箇条書きしたいというときが出てきます。

この箇条書き、入れ子のHTMLを覚えておくと便利です。




箇条書きを入れ子にするHTML


<ul>

<li>項目1
<ul>
<li>項目1-1</li>
<li>項目1-2</li>
</ul>
</li>

<li>項目2
<ul>
<li>項目2-1</li>
<li>項目2-2</li>
</ul>
</li>

</ul>

<li>項目1</li>項目1と</li>の間に

<ul>
<li>項目1-1</li>
<li>項目1-2</li>
</ul>


を入れるイメージです。


また、入れ子にした箇条書きを数字で表示するには

<li>項目1</li>項目1と</li>の間に

<ol>
<li>項目1-1</li>
<li>項目1-2</li>
</ol>


を入れればOKです。



箇条書きを数字の入れ子にするHTML


<ul>

<li>項目1
<ol>
<li>項目1-1</li>
<li>項目1-2</li>
</ol>
</li>

<li>項目2
<ol>
<li>項目2-1</li>
<li>項目2-2</li>
</ol>
</li>

</ul>



次に、箇条書きの行間を調整する方法です。

箇条書きの行間を調整するHTML


標準の行間はこんな感じです。

  • 項目1
  • 項目2


ちょっと行間がつまり過ぎて見づらいときに、下のようなHTMLを<li>に追加します。

行間を調整するHTML
<li style="line-height:行間の数値を入れる ;">


ここでは行間の数値はemを使います。
3em分行間を広げます。

  • 項目1
  • 項目2


標準の行間より広くなったので、見やすくなりましたね。




最後まで読んでいただき、ありがとうございます。





スポンサーサイト
Copyright © 脱サラしたいサラリーマンがアフィリエイトを実践、気ままにネットビジネス All Rights Reserved.

テキストや画像等すべての転載転用販売を固く禁じます

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。