2020年1月22日こんにちは、Kosei(https://twitter.com/pompom_stk)です。今回はHTMLでリストを作成する方法について、初心者向けに解説していきます。使用できる要素が多く戸惑うかもしれませんが、ゆっくりと理解して行きましょう。この記事では「要素」や「属性」といった用語を頻繁に使ってあります。HTMLを始めたばかりでこれらの用語がわからない方は、「タグ中の要素、属性とは?HTMLの基本的な書式」の記事から読むことをおすすめします。この記事の要点まとめリストを作成するために使う要素は3種類リストを作成するにはli要素、ul要素、ol要素の3種類を使用する。li要素-リスト項目を表示-li要素はリスト項目を表示する要素。ul要素-順序のないリスト-ul要素は順序のないリストを作成する要素。ol要素-順序のあるリストol要素は順序のあるリストを作成する要素。type属性-表示する番号の種類を指定-type属性を使用することで、表示する番号の種類を指定することができる。reverse属性-並び順を逆にする-reverse属性を使用することで、項目の並び順を逆にすることができる。start属性start属性を使用することで、項目の開始番号を指定することができる。リストは使えるととても便利ブログを作成する上で、リストを作成できるようになるととても便利。要素や属性についてわかってから見た方が、より記事の内容を理解できるよ。HTMLでリストを作成するには、3種類の要素が存在します。3種類全てを使うわけではなく、その中の2つの要素を組み合わせることでリストを作成することができます。一つ目は「li要素」です。li要素はリストを作成するにあたって必ず必要な要素となります。li要素は単体で使用してはならず、必ず親要素で囲む必要があります。その親要素に当たるものが2つ目の要素で、2種類あります。それが「ul要素」と「ol要素」です。この2つのどちらかを親要素とし、その中に子要素としてli要素を記述します。それぞれ作成できるリストが異なり、ul要素は順序のないリスト、ol要素は順序のあるリストを作成することができます。この3つの要素を理解してしまえば、基本的なリストを作成することができます。それでは、この3つの要素について解説していきます。アイテム)」の略称で、リスト項目を表示する要素です。li要素は単体では使用せず、後ほど解説するul要素かol要素のどちらかと一緒に使う必要があります。li要素に対して属性を設定することもできますが、特に使用しなくてもリストを作成することはできます。ol要素に対して使う属性の方が重要なので、この記事ではliに使用できる属性は割愛します。リスト)」の略称で、順序のないリストを表示する要素です。ul要素を親要素とし、その中にli要素を入れることで順序のないリストを作成することができます。順序に関係のないリストを表示するときに使用してください。表示するリスト項目のマーカー(それぞれのリストの頭に表示するもの)は、初期スタイルとして黒丸(disc)が使用されます。この黒丸はCSSの「list-style-type」というプロパティを使用することで変更することができます。この記事では詳しく解説しませんが、例として黒丸を白丸(circle)に変更したものを載せておきます。深くは考えず、「マーカーは変更できるんだ」ということだけ覚えておいてください。CodePen.ol要素-順序のあるリスト-ハリボーリストを使ってランキングみたいなやつ作りたい。それなら順序のあるリストを作れるol要素を使うといいよ。リスト)」の略称で、順序のあるリストを表示します。ul要素同様、ul要素を親要素とし、その中にli要素を入れることで順序のあるリストを作成することができます。リスト項目の順序が関係あるときに使用してください。ul要素を使ってリストを作成した場合、リストの最初に1から順番に数字がつきます。1から順番に数字を表すだけでよければ特に考える必要はありませんが、属性を使用することでこれを変更することができます。今回はul要素で使用できる属性を3つ、ご紹介します。type属性-表示する番号の種類を指定-type属性を使用することで、表示する番号の種類を指定することができます。="1′′>のように指定します。使用できる属性値は以下の通りです。CodePen.reversed属性-並び順を逆にする-reversed属性は、リスト項目の並び順を逆にすることができます。reversed>のように記述し、属性値を指定する必要がありません。CodePen.start-開始番号の指定-start属性は、リスト項目の開始番号を指定することができます。属性を何も指定していない初期値では、1.2.3〜という順に項目が表示されます。style="4′′>のように指定すると、4.5.6〜という順に項目が表示されるようになります。CodePen.リストは使えるととても便利ハリボーリストって意外と奥が深いんだね。リストについて理解できたでしょうか?リストは使用する要素や属性がやや多いので、少し難しいかもしれません。ブログを作成する上で、そして記事を書いていく上でリストが使えるようになるととても便利です。今回ご紹介した属性は一部のみです。これ以外にも使用できる属性があります。他にもCSSを使用することで、リストを見やすくすることもできます。この記事では簡単に紹介しただけですが、いつかわかりやすく解説していこうと思っています。けテーブル(表)の作成方法/【HTML】テーブルの作成方法を初心者向けに解説した記事です。...見出しを表す方法【HTML】h要素はHTMLにおいて「見出し」を表します。...初心者向けリンクの貼り付け方法【HTML】こんにちは、Kosei()です。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。