リスト

番号つきリスト

  • HTML
  • CSS

<ol>タグを使用したリストです。番号表示にcssを使用しています。

See the Pen 【リスト】番号付き by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. cssで番号を表示するため、counter-reset: と counter-increment: を使用しています。
  2. 番号の配置にはpositionを使用しています。
  3. <li>タグ内の内容は、複数行になっても問題ありません。

リスト（タイトルあり）

  • HTML
  • CSS

<ul>タグを使用したリストで、項目を囲う線とリスト用のタイトルがあります。

See the Pen 【リスト】タイトル有 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. <ul>タグ自体に線を設定しています。
  2. タイトルに関しては、<ul>タグに対して::beforeで設定しています。

リスト（hタグのタイトルあり）

  • HTML
  • CSS

<h3>タグを組み合わせた、見出しを設定した囲み枠ありのリストです。

See the Pen リスト】タイトル有2 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. タイトルは、<h3>タグで設定しています。
  2. <li>タグに下点線とborderで作成した三角をリストマークとして配置しています。