HTMLリストタグの活用術:<ul>と<ol>でブログ記事を魅力的にカスタマイズ
すぐに役立つブログ知識:リストタグ<UL>
<OL>
便利な使い方
この記事では、HTMLの<ul>
(順序のないリスト)と<ol>
(順序のあるリスト)タグを使ったブログ記事のカスタマイズ方法を詳しく解説します。
アイコンの変更やマークの非表示、入れ子リストの作成から、<ol>
タグでの番号スタイルの変更や目次への適用例まで、幅広い使い方を紹介します。
FontAwesomeなどのアイコンを使ったリストや、目次への応用例を通して、読者にわかりやすく魅力的なコンテンツを提供する方法を一緒に学びましょう。
<ul>
とは
unordered list(アンオーダードリスト)の略で、その名前の通り順序のないリストのことです。
HTML では、ul タグを使用して順序のない箇条書きリストを作成します。目次などもこのulタグで作成されます。 ul タグはまた、li 要素のコンテナ(箱)として機能します。
type
属性(「・」)を変える
リストの各項目は <li>
(liタグ)で記述し、type属性をつけることで、テキストの前に
- 塗りつぶし円(デフォルト)
type="disc"
※指定なしでも同様
- ライン円
type="circle"
- 塗りつぶし四角
type="square"
を指定することが可能です。color
でテキスト同様、色も付けられます。
<ul type="square" style="color: olivedrab;"> <li>リスト1</li> <!-- 以下リスト --> </ul>
ul タグと ol タグの違いは、ul タグは番号がないリスト(順不同リスト)になるが、ol タグは番号つきのリスト(順序付きリスト)になる点です。
ul タグの読み方は「ユーエルタグ」です。
<ol>
とは
逆にol タグは ordered list(オーダードリスト)の略で、順序があるリストのことです。主に番号付けの箇条書きを書きたいときに、使います。
ol タグは「オーエルタグ」と読みます。
ol タグで作成したリストは、通常は番号付きのリストとして表示されます。リスト項目の先頭には、数字やアルファベットが付きます。リスト項目はulタグと同様、<li>
(liタグ)で追加します。
type
、start
、reversed
属性を使用したバリエーション
無指定(デフォルト)
- リスト1
- リスト2
- リスト3
<ol> <li>リスト1</li> <!-- 以下リスト --> </ol>
「i」をtype
属性に指定
- リスト1
- リスト2
- リスト3
<ol type="i"> <li>リスト1</li> <!-- 以下リスト --> </ol>
「a」をtype
属性に指定
- リスト1
- リスト2
- リスト3
<ol type="a"> <li>リスト1</li> <!-- 以下リスト --> </ol>
start
を属性に指定
(番号途中から開始できる)
- リスト1
- リスト2
- リスト3
<ol start="101"> <li>リスト1</li> <!-- 以下リスト --> </ol>
reversed
を属性に指定
(降順に番号付け)
- リスト1
- リスト2
- リスト3
- リスト4
<ol reversed> <li>リスト1</li> <!-- 以下リスト --> </ol>
type
「a」、start
、reversed
を複合指定
(ちょっと実験)
- リスト1
- リスト2
- リスト3
- リスト4
<ol type="a" start="2" reversed> <li>リスト1</li> <!-- 以下リスト --> </ol>
逆順で「a」が終わると0,-1,-2,…、と続く。
マークを消す
目次など、リストの前のマーク(・など)を消したいとき
list-style: none;
を指定
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
<ul style="list-style: none; "> <li>リスト1</li> <li>リスト2</li> </ul> <ol> <li>リスト3</li> <li style="list-style: none;">リスト4</li> <li>リスト5</li> </ol> </ul>
「list-style」はul、olの点のデザインを指定するCSSです。liに指定しても点を消すことができます。
さらにアイコンに変える
マークを消して、FontAwesomeなどのアイコンを適用
before
要素をliタグに指定
- リスト1
- リスト2
- リスト3
ul.iconed-lists li::before { font-family: "Font Awesome 6 Free"; content: '\f044'; font-weight: 600; }
<ul class="iconed-lists" style="list-style: none;"> <li>リスト1</li> <!-- 以下リスト --> </ul>
入れ子
- リスト1
- リスト2
- 入れ子リスト1
- 入れ子リスト2
- 入れ子リスト3
- リスト2
<ol> <li>リスト1</li> <li>リスト2 <!-- 終了タグ </li> はココに置かない --> <ul> <li>入れ子リスト1</li> <li>入れ子リスト2</li> <li>入れ子リスト3</li> </ul> </li> <!-- リスト2の終了タグ </li> はココ --> <li>リスト2</li> </ol>
入れ子の入れ子
- リスト1
- 入れ子リスト1
- 入れ子リスト2
- 入れ子の入れ子リスト1
- 入れ子の入れ子リスト2
- 入れ子リスト3
- リスト2
- リスト3
<ol> <li>リスト1</li> <li>リスト2 <!-- 終了タグ </li> はココに置かない --> <ul> <li>入れ子リスト1</li> <li>入れ子リスト2 <!-- 終了タグ </li> はココに置かない --> <ol> <li>入れ子の入れ子リスト1</li> <li>入れ子の入れ子リスト2</li> </ol> </li> <!-- 入れ子リスト2の終了タグ </li> はココ --> <li>入れ子リスト3</li> </ul> </li> <!-- リスト2の終了タグ </li> はココ --> <li>リスト2</li> </ol>
目次への適用例
H2、H3、H4を使用して10項目を超えてくると、構造も複雑になってきます。
<ul class="table-of-contents"> <li><a href="#H2-1">H2-1</a> <ul> <li><a href="#H3-1">H3-1</a> <ul> <li><a href="#H4-1">H4-1</a></li> <li><a href="#H4-2">H4-2</a></li> </ul> </li> </ul> </li> <li><a href="#H2-2">H2-2</a> <ul> <li><a href="#H3-2">H3-2</a></li> </ul> </li> <li><a href="#H2-3">H2-3</a> <ul> <li><a href="#H3-3">H3-3</a></li> <li><a href="#H3-4">H3-4</a> <ul> <li><a href="#H4-3">H4-3</a></li> </ul> </li> </ul> </li> <li><a href="#H2-4">H2-4</a></li> </ul>
おわりに
リストタグ、<ul>
と<ol>
の不思議を解き明かす旅が終わりました笑。今回の記事では、<ul>
と<ol>
を使ったブログ記事のカスタマイズ方法について探求しました。
HTMLの力を活かし、ブログ記事をより魅力的に、読みやすく仕上げることができるはずです。新しいアイデアやデザインの実験をたくさんして、自分だけのブログスタイルを見つけてみてください。
次回の記事でも、より一層魅力的なブログコンテンツを作り上げるためのヒントやテクニックをお届けします。お楽しみに!✨
<aside>
なハナシ</aside>
ここからは、記事タイトルに関係ない、雑記です;^ω^) 動画と広告だけの場合、アリ
「サムライマックとスモーキーBBQワッパーを交互に、だけでスーパーサイズ・ミー並みに1か月はイケる。」
Amazon.co.jp: スーパーサイズ・ミー | Prime Video
この曲は、1975年に「『いちご白書』をもう一度」のB面カップリング曲として「バンバン」がリリースし、翌1976年に「Hi-Fi Set」がカバーしました。オリコン最高位30位、15.4万枚のセールスを記録しています。
作詞・作曲は荒井由実。
山本潤子は「赤い鳥」や「Hi-Fi Set」を経て、シンガー・ソングライターとしてソロ活動を開始しました。
喉の不調から、2014年2月23日に静岡県沼津市の沼津市民文化センターで行ったコンサートで、同年5月6日に名古屋で行われるコンサートをもって無期限休養に入ることを報告。2月25日にはブログでも公表しました。
「山本潤子さん、元気になってまた、奇跡の歌声を聴かせてください。」