リスト

番号つきリスト

  • 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で作成した三角をリストマークとして配置しています。

先頭に好きな色と大きさの丸パーツ

  • HTML
  • CSS

<li>要素にカスタマイズ可能な丸パーツを配置したリストです。

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

  1. <li>要素に ::before で配置した丸パーツは、背景色や幅・高さでカスタマイズ可能です。