html ul ol dlリストの使い方！dlってなんだ！？

この投稿は、htmlのリスト表記についてまとめたものです。恥ずかしながら、つい最近までulとolしか知らなかったのです。dlという便利なものがあると知り、リストを見直してみました。HTMLの書き方をまとめました。
リストって、スッキリまとまるし、デザインのアレンジもできるので好きです。HTMLタグも簡単なので、３種類のリストを使いこなせば、Webデザインのレベルも上がりますよね！

順序なしリスト Unorderd List

ulタグです。リストとしてよく使いますね。丸や四角のマークの後にテキストが続くリストです。<li>タグでリストとなるテキストをくくります。さらに<ul>でまとめると一かたまりのリストになります。

htmlの書き方

<ul>
  <li>順番なしリスト1</li>
  <li>順番なしリスト2</li>
  <li>順番なしリスト3</li>
</ul>

順序リスト Orderd List

olタグです。リストとしてよく使いますね。数字、カナ、アルファベットやギリシャ文字の連番にテキストが続くリストです。<li>タグでリストとなるテキストをくくります。さらに<ol>でまとめると一かたまりのリストになります。

htmlの書き方

<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

定義リスト Definition List

dlタグ。最近まで知りませんでした。
Definition:定義のことです。定義語とそれを説明する文章を付け加えることができます。定義語と説明文を分けることで、左側のインデントが揃うのでスッキリ表示できますね。<dt>タグで定義語となるテキストをくくり、<dd>タグで説明文をくくります。さらに<dl>でまとめると一かたまりのリストになります。

htmlの書き方

<dl>
　　<dt>タイトル1</dt>
　　<dd>タイトル1に関する説明</li>
　　<dt>タイトル2</dt>
　　<dd>タイトル2に関する説明</li>
　　<dt>タイトル3</dt>
　　<dd>タイトル3に関する説明</li>
</dl>

記事のまとめ

今回は、３種類のリストについて、htmlの書き方をまとめました。cssスタイルで、自在にアレンジできるので、こちらについても今後まとめたいと思います。