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

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

順序なしリスト Unorderd List

番号なしリストの例
  • 順番なしリスト1
  • 順番なしリスト2
  • 順番なしリスト3

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

htmlの書き方

順序リスト Orderd List

順序リストの例
  1. リスト1
  2. リスト2
  3. リスト3

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

htmlの書き方

定義リスト Definition List

定義リストの例
タイトル1
タイトル1に関する説明
タイトル2
タイトル2に関する説明
タイトル3
タイトル3に関する説明

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

htmlの書き方

記事のまとめ

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です