スライドショースライドショー

【HTML入門】ul,ol,li要素でリストを作成してデザインを変える方法

こんにちは!ライターのシホです!

みなさんは、HTMLではリストを作成するとき、

「どのタグをどのように使うの?」
「ul、ol、liタグは似ているので何を表しているのかわからなくなる!」
「黒ポチのデザインは変えられるの?」

などと悩んだことはありませんか?

今回は、HTMLを使ったリストの作成方法CSSを使ったリストのデザイン操作について解説したいと思います!

ぜひ参考にしてみてください!

リストとは?

項目などを一覧で表示したいときに、リストにして箇条書きで表示したい時がありますよね。

HTMLでは次のように、黒ポチや数字をつけてリストを作成することができます。

  • ハムスター
  1. 緑茶
  2. 紅茶
  3. コーヒー

ul ol li要素の使い方

HTMLでリストを作成するときは、ul要素、ol要素、li要素を使います。

基本構造

ul,ol,liの基本構造 2018-05-16 22.29.39

ul要素

ulは「Unordered List」の略です。これは、「順序のないリスト」という意味で、黒ポチのリストを作成します。

ol要素

olは「Ordered List」の略です。これは、「順序のあるリスト」という意味で、数字のリストのリストを作成します。

li要素

liは「List Item」の略で「リストの項目」という意味で、ulタグまたはolタグで挟むことで項目を箇条書きに並べることができます。

See the Pen NMOrdZ by Shiho Sakai (@shiho-sakai) on CodePen.0

type属性でデザインを変える

ul要素、ol要素にtype属性でそれぞれの値を指定すると、黒ポチのデザインを変えたり、数字を英語などに変更するこも可能です。

ul要素

黒ポチ → type="disc"
白丸 → type="circle"
四角 → type="square"

ol要素

数字 → type="1"
大文字英語 → type="A"
小文字英語 → type="a"

See the Pen rvqMJr by Shiho Sakai (@shiho-sakai) on CodePen.0

CSSで黒ポチのデザインを変える

CSSで黒ポチのデザインを変えたり、数字を別の表記に変えることもできます。

その場合は、list-style-typeプロパティにそれぞれの値を指定します。

ul要素

黒ポチ → list-style-type: disc;
白丸 → list-style-type: circle;
四角 → list-style-type: square;

ol要素

数字 → list-style-type: decimal;
大文字英語 → list-style-type: upper-latin;
小文字英語 → list-style-type: lower-latin;

See the Pen NMORVw by Shiho Sakai (@shiho-sakai) on CodePen.0

まとめ

いかがでしたでしょうか。

リストを上手く活用できるようになれば、わかりやすくて見やすいレイアウトにすることが可能です。

ぜひ実践してみてくださいね!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説