PR

【HTML】リストを使いこなそう!箇条書きリスト(ul)、番号リスト(ol)、定義リスト(dl)の作り方

WEB制作技術系

コーディング作業をしていて、サイト内にリストを作成したいという場合はよくありますよね?

リストとはいっても、種類は様々で、カスタマイズ性も高いです。

今回は、HTMLでリストを作成する方法とカスタマイズ(装飾)する方法をご紹介します。

お助け猫
お助け猫

今回の記事は、次のような方にお勧め!
・リストの作り方を徹底的に知りたい方

・リストにはどんな種類があるのか知りたい方
・リストを装飾したい方

色々なリストの作り方

冒頭でも軽く触れていますが、リストには様々な種類があります。

色々なリスト

・箇条書きリスト
・番号付きリスト
・定義リスト

これらのリストは、それぞれ使うHTMLタグが異なります。それでは、順番に見ていきましょう。

箇条書きリスト

箇条書きリストとは、下記のようなごく普通のリストです。

  • りんご
  • お肉
  • お魚

HTMLでの書式は、次のようになります。

<ul>
  <li>りんご</li>
  <li>お肉</li>
  <li>お魚</li>
</ul>

箇条書きリストを作成する場合は、ulタグliタグがセットで使われます。ulタグで、各項目のliタグを囲むような書式となります。liタグは、何個でも追加する事が出来ます。

ulタグは、li以外を子要素にすることはできず、他のタグを使う事ができない点に注意です。

箇条書きリストは、デフォルトでリスト項目の先頭に「・」がつきます

番号付きリスト

番号付きリストとは、下記のような順序があるものを表現したい時に使うリストです。

  1. 〇〇駅東口を出て右折
  2. そのまま直進
  3. 到着

道案内とか、料理のレシピを紹介する際によく使われます。

番号付きリストを、HTMLで表現したい時は、次のようになります。

<ol>
  <li>〇〇駅東口を出て右折</li>
  <li>そのまま直進</li>
  <li>到着</li>
</ol>

番号付きリストを作成する場合は、olタグliタグがセットで使われます。olタグで、各項目のliタグを囲むような書式となります。liタグは、何個でも追加する事が出来ます。

olタグは、li以外を子要素にすることはできず、他のタグを使う事ができない点に注意です。ulタグとほぼ同じですね。

定義リスト

定義リストとは、下記のような見出し語とセットにする時に使うリストです。

■HTML
ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)の事。
■CSS
カスケーディング・スタイル・シート(Cascading Style Sheets)の事。

キーワードと説明を組み合わせて箇条書きにしたい時に使います。

定義リストを、HTMLで表現したい時は、次のようになります。

<dl>
  <dt>【HTML】</dt>
  <dd>ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)の事。</dd>
  <dt>【CSS】</dt>
  <dd>カスケーディング・スタイル・シート(Cascading Style Sheets)の事。</dd>
</dl>

定義リストを作成する場合は、dlタグdtタグddタグの3セットで使われます。dtタグでキーワードを、ddタグで説明を書いたら、dlタグで囲むという形です。dl、ddタグは何度でも追加する事が出来ます。

CSSを適用しない限り、ddタグの部分が字下げ(インデント)して表示されます

リスト装飾のテクニックのご紹介

お悩みさん
お悩みさん

リストのデフォルトのデザインなんかしっくり来ないな・・。装飾する為のテクニックを知っておきたいな。

そんな方の為に、覚えておくと良い、リストの装飾テクニックをいくつかご紹介します。

リストの装飾テクニック色々

・箇条書きリストの先頭につくマークの変更
・箇条書きリストのマークを画像に変更
・番号付きリストのナンバリングの変更
・定義リストのレイアウトの変更

では、順番に解説していきます。

箇条書きリストの先頭につくマークの変更

箇条書きリスト(ul)の先頭につくマーク(・)を変更したい場合は、ulタグに対して、CSSでlist-styleプロパティを適用させます。ist-styleプロパティとは、箇条書きの各項目の先頭に表示されるマークを変更する際に使用されるプロパティです。

<ul>
  <li>りんご</li>
  <li>お肉</li>
  <li>お魚</li>
</ul>
ul {
  list-style: none;
}

上記の例は、デフォルトでつく「・」のマークを無くしたい場合に適用させる場合の書き方です。list-styleプロパティの値を変更する事で、形を変更する事が出来ます。

効果
none「・」を非表示に
disc黒丸
circle白丸
square黒四角
decimal数字
hiraganaひらがな
katakanaカタカナ
↑list-styleプロパティの値の例

色々な種類がありますので、それぞれお試しいただければと思います。

箇条書きリストのマークを画像に変更

リストのマークを画像にする事も可能です。こちらも、先ほど同様、list-styleプロパティを使用しますが、書き方が少し特殊です。

<ul>
  <li>りんご</li>
  <li>お肉</li>
  <li>お魚</li>
</ul>
ul {
  list-style: url(パスが入ります);
}

urlの括弧の中に表示させたい画像のパスを書く形式となります。指定するパスは、相対パスでも絶対パスでも問題ありません。

番号付きリストのナンバリングの変更

番号付きリスト(ol)では、デフォルトでは、「1」から順番に表示されますが、これをアルファベットなどに変更したい場合の指定方法です。こちらでも、list-styleプロパティを使用します

<ol>
  <li>〇〇駅東口を出て右折</li>
  <li>そのまま直進</li>
  <li>到着</li>
</ol>
ol {
  list-style: lower-alpha;
}

上記の例は、番号の部分を英語に変更した場合の指定方法です。サンプルで使用している「lower-alpha」以外にも、色々値が存在します。

効果
lower-alpha小文字のアルファベット(a、b、c・・)
upper-alpha大文字のアルファベット(A、B、C・・)
lowr-roman小文字のローマ数字(ⅰ、ⅱ、ⅲ・・)
upper-roman大文字のローマ数字(Ⅰ、Ⅱ、Ⅲ・・)
↑list-styleプロパティの値の例

こちらも、色々な値がありますので、しっくりくるものをお選びいただければと思います。

定義リストのレイアウトの変更

定義リスト(dl)は、デフォルトでddタグの部分が字下げ(インデント)して表示されますが、CSSで調整可能です。

<dl>
  <dt>【HTML】</dt>
  <dd>ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)の事。</dd>
  <dt>【CSS】</dt>
  <dd>カスケーディング・スタイル・シート(Cascading Style Sheets)の事。</dd>
</dl>
dl{
  overflow: hidden;
}
dt{
  float: left;
}
dd{
  margin: 0 0 1em 0;
}

overflowプロパティでフロートを解除し、floatプロパティで左フロートを適用、marginプロパティで下の余白を調整しています。

この指定をする事で、キーワード(dt)と説明(dd)を横に並べる事が可能です。

まとめ

リストは、コーディングでよく出てきますが、カスタマイズ性が高い事をご理解いただけましたでしょうか?

色々な装飾テクニックを知っていれば、WEB制作の幅も広がると思いますので、是非覚えていただければと思います。

コメント

タイトルとURLをコピーしました