バナー画像

Webサイトなどを閲覧していると、箇条書き(リスト)を頻繁に見かけることと思います。その正体は、HTMLのli要素をベースとするul・ol要素なのです。こちらの記事では、箇条書きを作成するときに欠かせないli要素をメインとして、リスト作成の話をしていきます。

箇条書き(リスト)に関わる要素

箇条書きを作成するときに使用する要素は、以下の3点です。

箇条書き(リスト)に関わる要素
  • ul要素 → 番号なしの箇条書き
  • ol要素 → 番号ありの箇条書き
  • li要素 → ul・olの箇条書き部分

この3点が理解できれば、HTMLで箇条書きを作成することがとても簡単になるでしょう。それぞれについて、以下に説明をしていきます。

ul要素:番号なしの箇条書き

「・(黒点)」の箇条書きを作成するときに使用するのが、ul要素です。ul要素は「Unordered List」の略で、意味はそのまま「順番がないリスト」ということになります。

ul要素を使った箇条書き作成は以下のように書くことができます。

 

 

 

 

 

 

 

 

ご覧の通り、li要素自体をul要素で囲ってしまうというコーディング方法になります。これで、以下のように番号なしの箇条書きを作ることができました。

実際にテキストエディタなどを使用して、ul要素を用いた箇条書きに挑戦してみましょう。ちなみにli要素については後ほど詳しくご説明します。

ol要素:番号ありの箇条書き

数字付きの箇条書きを作成するときに使用するのが、ol要素です。ol要素は「Ordered List」の略で、意味は「順番ありのリスト」ということになります。

ol要素を使った箇条書き作成は以下のように書くことができます。

    1. フランクリン「自伝」

 

    1. ジェファソン「ヴァジニア覚書」

 

    1. バーク「フランス革命についての省察」

 

    1. マルサス「人口論」

 

    1. コント「社会再組織に必要な科学的作業のプラン」

 

    1. ラスキン「この最後の者にも」

 

    1. プルードン「十九世紀における革命の一般理念」

 

 

先ほどのulと同様に、li要素自体をol要素で囲うことで、以下のように番号ありの箇条書きを作ることができます。

  1. フランクリン「自伝」
  2. ジェファソン「ヴァジニア覚書」
  3. バーク「フランス革命についての省察」
  4. マルサス「人口論」
  5. コント「社会再組織に必要な科学的作業のプラン」
  6. ラスキン「この最後の者にも」
  7. プルードン「十九世紀における革命の一般理念」

書き方はulとほとんど変わらず、li要素を囲むのがul要素なのかul要素なのかという点のみが違いとなります。自分の目的に合わせてul要素かol要素かを使い分けていきましょう。

li要素:ul・olの箇条書き部分

ここまでul要素とol要素を説明してきたため、その意味はほとんどご理解いただけているでしょう。箇条書きの具体的な中身を作成する際に使用するのがli要素となります。li要素は「List Item」の略で、意味もそのまま「箇条書き(リスト)の要素」ということになります。

注意点としては、ul要素かol要素とセットで使用する必要があるということです。初めの頃は、ul要素やol要素でli要素を囲み忘れることも多いので、気をつけましょう。

箇条書き(リスト)に関わる属性

さて、ここまでul・ol・li要素について、それぞれ詳しく解説をしてきました。実は、箇条書きに関わる要素にはさまざまな属性があり、それらを駆使することで、箇条書きをカスタムアレンジすることが可能です。以下に、箇条書きに関わる属性を紹介していきます。

start属性:番号のスタート位置を指定

「start」属性は、ol要素の番号付きリストのスタート位置を指定するためのものです。以下に例を示しましょう。

    1. フランクリン「自伝」

 

    1. ジェファソン「ヴァジニア覚書」

 

    1. バーク「フランス革命についての省察」

 

    1. マルサス「人口論」

 

    1. コント「社会再組織に必要な科学的作業のプラン」

 

    1. ラスキン「この最後の者にも」

 

    1. プルードン「十九世紀における革命の一般理念」

 

 

上記のコーディングによって、以下のような箇条書きが作成されます。

  1. フランクリン「自伝」
  2. ジェファソン「ヴァジニア覚書」
  3. バーク「フランス革命についての省察」
  4. マルサス「人口論」
  5. コント「社会再組織に必要な科学的作業のプラン」
  6. ラスキン「この最後の者にも」
  7. プルードン「十九世紀における革命の一般理念」

start属性に「5」を指定したため、番号が5から始まる箇条書きとなっています。

type属性:番号のタイプを変更

「type」属性は、ol要素の番号付きリストを数字以外のタイプにするためのものです。以下に例を示しましょう。

 

 

 

 

 

 

 

 

上記ではtype属性に「A」と指定することで、以下のように大文字アルファベットのAからZに向かう形の箇条書きとなりました。

  1. フランクリン「自伝」
  2. ジェファソン「ヴァジニア覚書」
  3. バーク「フランス革命についての省察」
  4. マルサス「人口論」
  5. コント「社会再組織に必要な科学的作業のプラン」
  6. ラスキン「この最後の者にも」
  7. プルードン「十九世紀における革命の一般理念」

type属性には以下のような指定をおこなうことができます。

type属性の指定一覧
  1. A → 大文字アルファベットのAから順番に箇条書き
  2. a → 小文字アルファベットのaから順番に箇条書き
  3. I → 大文字ローマ数字のⅠから順番に箇条書き
  4. i → 小文字ローマ数字のⅠから順番に箇条書き

reversed:番号付きリストをカウントダウン化

「reversed」属性は、ol要素の番号付きリストをカウントアップ形式にするためのものです。以下に例を示しましょう。

    1. フランクリン「自伝」

 

    1. ジェファソン「ヴァジニア覚書」

 

    1. バーク「フランス革命についての省察」

 

    1. マルサス「人口論」

 

    1. コント「社会再組織に必要な科学的作業のプラン」

 

    1. ラスキン「この最後の者にも」

 

    1. プルードン「十九世紀における革命の一般理念」

 

 

ol要素へreversed属性を指定することで、以下のようにカウントダウン形式の箇条書きとなりました。

  1. フランクリン「自伝」
  2. ジェファソン「ヴァジニア覚書」
  3. バーク「フランス革命についての省察」
  4. マルサス「人口論」
  5. コント「社会再組織に必要な科学的作業のプラン」
  6. ラスキン「この最後の者にも」
  7. プルードン「十九世紀における革命の一般理念」

また、この属性は他の属性と組み合わせることもできます。たとえば最初に紹介したstart属性と組み合わせてみましょう。

    1. フランクリン「自伝」

 

    1. ジェファソン「ヴァジニア覚書」

 

    1. バーク「フランス革命についての省察」

 

    1. マルサス「人口論」

 

    1. コント「社会再組織に必要な科学的作業のプラン」

 

    1. ラスキン「この最後の者にも」

 

    1. プルードン「十九世紀における革命の一般理念」

 

 

start属性とreversed属性を組み合わせることで、以下のような箇条書きになりました。

  1. フランクリン「自伝」
  2. ジェファソン「ヴァジニア覚書」
  3. バーク「フランス革命についての省察」
  4. マルサス「人口論」
  5. コント「社会再組織に必要な科学的作業のプラン」
  6. ラスキン「この最後の者にも」
  7. プルードン「十九世紀における革命の一般理念」

このように、いくつかの属性を組み合わせてカスタムアレンジできるのも箇条書きに関する要素の利点です。

まとめ

こちらの記事では、箇条書きを作成するときに欠かせないli要素をメインとして、リスト作成の話をしていきました。箇条書きはとても簡単にコーディングできる上に、属性を使うことによって、いろいろとカスタムアレンジが可能な要素です。自分のニーズに合わせた箇条書きを作成していきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。