用途
新着
履歴
分類

HTML 箇条書き、段落番号

HTML 箇条書き、段落番号
リスト表示でHTMLで用意されている箇条書きの表現のサンプルのまとめです。

ulのliタグはよく使うものの、大体デザインの都合上スタイルを無効にしてしまいます。

一旦それは置いといて改めてデフォルトの表示を確認するサンプルです。

  • デフォルト
  • disc:デフォルトの黒丸
  • circle:白抜きの丸
  • square:黒い四角

ソースはこちら


<ul>
    <li>デフォルト</li>
    <li style="list-style-type: disc">disc:デフォルトの黒丸</li>
    <li style="list-style-type: circle">circle:白抜きの丸</li>
    <li style="list-style-type: square">square:黒い四角</li>
</ul>

続いて、数字のつく箇条書き、olタグについて

  1. lower-roman(小文字英数字)
  2. upper-roman(大文字英数字)
  3. lower-greek(小文字ギリシャ数字)
  4. upper-greek(大文字ギリシャ数字)
  5. decimal(数字)
  6. decimal-leading-zero(0付き数字)
  7. lower-alpha(アルファベット小文字)
  8. upper-alpha(アルファベット大文字)
  9. cjk-ideographic(漢字)
  10. hiragana(ひらがな)
  11. katakana(カタカナ)
  12. hiragana-iroha(ひらがないろは)
  13. katakana-iroha(カタカナイロハ)

ソースはこちら


<ol>
<li style="list-style-type: lower-roman">lower-roman(小文字英数字)</li>
<li style="list-style-type: upper-roman">upper-roman(大文字英数字)</li>
<li style="list-style-type: lower-greek">lower-greek(小文字ギリシャ数字)</li>
<li style="list-style-type: upper-greek">upper-greek(大文字ギリシャ数字)</li>
<li style="list-style-type: decimal">decimal(数字)</li>
<li style="list-style-type: decimal-leading-zero">decimal-leading-zero(0付き数字)</li>
<li style="list-style-type: lower-alpha">lower-alpha(アルファベット小文字)</li>
<li style="list-style-type: upper-alpha">upper-alpha(アルファベット大文字)</li>
<li style="list-style-type: cjk-ideographic">cjk-ideographic(漢字)</li>
<li style="list-style-type: hiragana">hiragana(ひらがな)</li>
<li style="list-style-type: katakana">katakana(カタカナ)</li>
<li style="list-style-type: hiragana-iroha">hiragana-iroha(ひらがないろは)</li>
<li style="list-style-type: katakana-iroha">katakana-iroha(カタカナイロハ)</li>
</ol>

数字をカウントダウンする例

  1. にわとり
  2. ひよこ
  3. たまご

<ol reversed>
    <li>にわとり</li>
    <li>ひよこ</li>
    <li>たまご</li>
</ol>

数字を途中から始める例

  1. さる
  2. とり
  3. いぬ
<ol start="10">
    <li>さる</li>
    <li>とり</li>
    <li>いぬ</li>
</ol>

段落のテーマと説明をセットで記述する例

題目
説明はここに記述する
テーマ
ディスクリプション
dtのtはtheme
ddのdはdescriptionのdです。

<dl>
    <dt>題目</dt>
        <dd>説明はここに記述する</dd>
    <dt>テーマ</dt>
        <dd>ディスクリプション</dd>
    <dt>dtのtはtheme</dt>
        <dd>ddのdはdescriptionのdです。</dd>
</dl>
公開 2022-07-31 11:39:19
更新 2022-08-07 16:05:05
このページの二次元コード
HTML 箇条書き、段落番号

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2024 kipure
Top