2018/08/12

簡単に箇条書きする便利な初歩タグ

カテゴリー:デジ


スポンサーリンク


Blogで箇条書きするときに便利な初歩タグです。『・』を使って直接書いても良いですが,改行があっても整うリストタグが便利。


リストのサンプル

<ul style="list-style-type: square;">
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>



リストタグの種類
  • <ul>:unordered list
    リストの項目に順序はなく,箇条書きにしたい場合。
  • <ol>:ordered list
    リストの項目に番号をつけて,箇条書きにしたい場合。
  • <li>:list item
    リストの項目内容


<ul>リストのマーカー指定 list-style-type
  • <ul>要素または<li>要素内にstyle属性で指定する。
  • マーカーの種類を指定するプロパティは,list-style-type
  • 1つのリスト内で,<li>要素ごとにマーカーを変えることもできる。
  • list-style-typeの値は,
  • なし:none
  • 黒丸:disc
  • 白丸:circle
  • 四角:square


(マーカーの指定例)

<ul>
<li style="list-style-type: circle;">項目 1</li>
<li style="list-style-type: square;">項目 2</li>
<li style="list-style-type: none;">項目 3</li>
</ul>


(表示)
  • 項目 1
  • 項目 2
  • 項目 3



<ol>リストの番号指定 list-style-type
  • <ol>要素または<li>要素内にstyle属性で指定する。
  • 番号の種類を指定するプロパティは,list-style-type
  • 1つのリスト内で,<li>要素ごとに番号の種類を変えることができる。
  • list-style-typeの値は,
  • 数字:decimal
  • 大文字アルファベット:upper-alpha
  • 小文字アルファベット:lower-alpha
  • 大文字ローマ数字:upper-roman
  • 小文字ローマ字:lower-roman
  • 番号を変更する場合は,valueで指定する。


(番号の指定例)

<ol>
<li>項目 1</li>
<li>項目 2</li>
<li value="5">項目 3</li>
<li>項目 4</li>
</ol>


(表示)
  1. 項目 1
  2. 項目 2
  3. 項目 3
  4. 項目 4



<ul>リストの入れ子の仕方
  • リストの中にリストを入れることができる。
  • 追加するリストは,<li> </li>間に入れる。</li>の位置に注意。


(リストの入れ子の例)

<ol style="list-style-type: upper-alpha;">
<li>項目 1</li>
<li>項目 2
  <ol style="list-style-type: lower-alpha;">
  <li>項目 2-1</li>
  <li>項目 2-2</li>
  </ol>
</li>
<li>項目 3</li>
</ol>


(表示)
  1. 項目 1
  2. 項目 2
    1. 項目 2-1
    2. 項目 2-2
  3. 項目 3


スポンサーリンク


for ANYthing カテゴリー 一覧

カテゴリー: [01] アウトドア カテゴリー: [02] おでかけスポット カテゴリー: [04] クッキング カテゴリー: [05] オススメ カテゴリー: [06] DIY カテゴリー: [07] デジ カテゴリー: [08] 節約tips カテゴリー: [...