目的
- HTMLでリスト(箇条書き)の作成方法をまとめる。
押さえるポイント
- リストで箇条書きにしたい内容をliタグで囲む。
- liタグをulタグで囲む。
- ulタグとliタグにはインデントを用いて入れ子の関係をわかりやすくする。
書き方の例
<ul>
<li>(リストとして記載したい内容を記入する-1)</li>
<li>(リストとして記載したい内容を記入する-2)</li>
<li>(リストとして記載したい内容を記入する-3)</li>
</ul>
〜実際の表示〜
- (リストとして記載したい内容を記入する-1)
- (リストとして記載したい内容を記入する-2)
- (リストとして記載したい内容を記入する-3)
注意するポイント
- liタグはデフォルトだと内容の前に黒点が自動で追加される。
- ulタグが親要素、liが子要素。
- 入れ子の関係を見た目でわかりやすくするため、インデントを利用する。
より具体的な例
挨拶に関するリストを作成する。
リストに箇条書きする内容は、おはようございます。こんにちは。こんばんは。とする
〜サンプルコード〜
<ul>
<li>おはようございます。</li>
<li>こんにちは。</li>
<li>こんばんは。</li>
</ul>
〜プレビュー画面〜
- おはようございます。
- こんにちは。
- こんばんは。