読みやすさを重視したデザインに重要なリスト表示！

今日は「リスト表示」について学習します。
よくある箇条書きの表示方法です。
リストには「行頭記号付き」と「行頭番号付き」の二種類があります。

行頭記号付きリスト

・<ul></ul>

文字列を行頭記号のついたリスト（箇条書き）にします。
リスト全体の前後に<ul></ul>を記述します。
<ul>要素は単独では使わず、必ず<li>要素とセットで使います。
<ul>要素はブラウザで先頭に記号が付き、インデント（字下げ）されて表示されます。

・<li></li>

リストの項目を追加します。
各項目を<li>～</li>で囲みます。

例）

・HTMLの記述

<h3>今日の学習</h3>
<ul>
<li>リストとは</li>
<li>行頭記号付きリストについて</li>
<li>行頭番号付きリストにつて</li>
</ul>

・ブラウザの表示

今日の学習

• リストとは
• 行頭記号付きリストについて
• 行頭番号付きリストにつて

行頭番号付きリスト

・<ol></ol>

文字列を行頭記号のついたリスト（箇条書き）にします。
リスト全体の前後に<ol></ol>を記述します。
<ol>要素は単独では使わず、必ず<li>要素とセットで使います。
<ol>要素はブラウザで先頭に記号が付き、インデント（字下げ）されて表示されます。

・<li></li>

リストの項目を追加します。
各項目を<li>～</li>で囲みます。

例）

・HTMLの記述

<h3>今日の学習</h3>
<ol>
<li>リストとは</li>
<li>行頭記号付きリストについて</li>
<li>行頭番号付きリストにつて</li>
</ol>

・ブラウザの表示

今日の学習

1. リストとは
2. 行頭記号付きリストについて
3. 行頭番号付きリストにつて

リストの数は<li>～</li>を増やすことでいくらでも増やせます。
ひとつのリストにつき、<ul>～</ul>または<ol>～</ol>で囲んで、リストをかならず修了させてください。

リスト表示にする理由とは？

人間は、長い文章で説明を受けるよりも箇条書きの方が短い時間で内容を理解します。

二つの例を見てみてください。

①
私の趣味は学生の頃バイト先であったダーツバーですっかりはまってしまったダーツと高校生の頃はフリータイムで8時間も余裕だったカラオケ。
最近では、母の影響をうけてガーデニングにもはまっています。

②
【趣味】

• ダーツ
• カラオケ
• ガーデニング

①と②だったらどちらの方がより早く私の趣味が何かわかりますか？
文章が短いのであまり大きな差がないかもしれませんが、パッと見てわかるのは②だと思います。
伝えたい項目を箇条書きにすることで、相手にすぐ伝わるのです。

ウェブページを見た人が、このサイトはなんのサイトなのか？をすぐ知るために箇条書きはとても効果的です。
ですが、詳しい情報を伝えるには向いていません。
こういったそれぞれの特性を生かしながらデザインを構成していきましょう！

【個人的なお話】

皆さま三連休はいかがお過ごしでしたか？
私は入学準備に追われたり、久しぶりの大人数での食事やカラオケに行ったり、非常に充実した週末でした！

おかげで更新も途絶えてしまいました＾＾；
あと2か月で試験もあるので、きっちり進めていきたいと思います！