HTMLを使って箇条書き、記号・数字を表示する方法

スポンサーサイト

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

文字カウント、<p>タグ<br />タグの自動挿入、ワンクリックで画像回り込みなど記事作成が楽になるツール

HTMLを使って箇条書き、記号・数字を表示する方法

ブログの記事を書いていると、文字を横にズラズラ並べるより、縦に並べた方がスッキリして見やすくなることがあります。


箇条書きのが見やすいよな~と思うのがこれですね。
お馴染みのYahooのトップ画面です。

yahoo.png
出典:http://www.yahoo.co.jp/


これを横に並べてみると、

報道規制発言 幕引き狙う自民、ギリシャ議会 国民投票を承認、台湾爆発470人負傷 邦人2人も、紫式部像 パンフと実物大違い

見づらいしわかりづらいですよね。


ということで、ブログ記事の見やすさ・わかりやすさを追求してみたいと思います。


HTMLタグで、箇条書きにする方法をまとめました。


HTMLタグの箇条書き一覧


  1. 箇条書き(番号なし)

  2. 箇条書き(番号なし+記号)

  3. 箇条書き(番号あり)




箇条書き(番号なし)


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


表示結果

  • 項目1

  • 項目2

  • 項目3




箇条書き(番号なし)にするには、ulタグを使います。
ulは、Unordered List(アンオーダード リスト)の略です。

番号の付かないリストという意味です。

<ul>~</ul>タグの中に、項目を記入する<li>~</li>タグを入れていきます。

上の例では、項目1~項目3になっていますが、それ以上の項目になるときは<li>~</li>タグを増やしていけばOKです。

liは、List Item(リスト アイテム)の略です。





箇条書き(番号なし+記号)


<ul style="list-style-type:記号の種類">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>


記号の種類一覧

記号の種類記号のスタイル
disc黒丸
circle白丸
square黒四角
none記号なし



記号のスタイルを黒丸にして箇条書きにしてみます。

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


表示結果

  • 項目1

  • 項目2

  • 項目3



黒丸の箇条書きが完成です。

この黒丸は、1の箇条書き(番号なし)のときと同じ黒丸です。

ということは、黒丸の箇条書きにするときは、<ul style="list-style-type:disc">と長々とHTMLタグを入力しないで<ul>だけで良いということですね。


別の箇条書き記号でやってみます。
白丸の場合

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



表示結果

  • 項目1

  • 項目2

  • 項目3



箇条書きの記号が白丸になりましたね。




箇条書き(番号あり)

<ul style="list-style-type:番号の種類">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>


番号の種類一覧
番号の種類番号のスタイル
decimal数字
decunal-leading-zero桁を揃えた数字
lower-alpha,lower-latin小文字のアルファベット
upper-alpha,upper-latin大文字のアルファベット
cjk-ideographic漢数字
hiraganaひらがな
katakanaカタカナ
hiragana-irohaいろは順(ひらがな表示)
katanaka-irohaいろは順(カタカナ表示)



番号のスタイルを数字にして箇条書きにしてみます。

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



表示結果

  • 項目1

  • 項目2

  • 項目3



番号のスタイルを数字にするときは、<ul style="list-style-type:decimal">ではなくて、もっと簡単なHTMLタグがあります。

<ol>タグです。

olは、Ordered List(オーダード リスト)の略です。


<ul>~</ul>ではなくて<ol>~</ol>を使います。

箇条書きを数字で表示するときは、<ol>タグを使います。

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


表示結果

  1. 項目1

  2. 項目2

  3. 項目3





このように、HTMLタグを使っての箇条書きは、記号・数字などいろいろな表示方法があります。

はじめにもお話ししましたが、記事の箇条書きには、見やすく・わかりやすくするという効果があります。

これは、読んでくれる方のことを考えてのことです。

さらに、箇条書きにするメリットがあります。

それは、検索エンジンに対しても効果があるということです。


箇条書きのHTMLタグは、リスト構造になっているので、検索エンジンが箇条書きのHTMLタグを見つけて、「おっ、箇条書きがあるな、何か大切なキーワードが書かれているんだな」と認識してくれるのです。




伝えたいことなど要点を書くときは、箇条書きにした方が良いということですね。

そうすることで、検索エンジンも「正しいHTML構文を使っているな」と評価してくれます。
ちょっとした、SEO対策にもなるということです。


だからって、必要以上に箇条書きのHTMLタグを使わないようにしましょう。

HTMLを使って箇条書きまとめ
  1. 記号を使う場合は、<ul style="list-style-type:記号の種類">を使う
    • ※黒丸のときは<ul>~</ul>でOK

  2. 番号を使う場合は、<ul style="list-style-type:番号の種類">を使う
    • ※数字のときは<ol>~</ol>を使う


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



文字カウント、<p>タグ<br />タグの自動挿入、ワンクリックで画像回り込みなど記事作成が楽になるツール

コメント (0)

コメントを書く

 

 非公開コメント ()

トラックバック (0)

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

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

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