はじめに
この記事を読めば、HTMLのolタグを活用して、見やすいリストを作成することができるようになります。
●olタグとは
○olタグの基本
HTMLのolタグは、順序付きリストを作成するための要素です。
olタグの中には、liタグを使用してリストの項目を記述します。
●olタグの使い方
○サンプルコード1:基本的なolタグの使い方
<!DOCTYPE html>
<html>
<head>
<title>HTML olタグサンプル</title>
</head>
<body>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
</body>
</html>
●olタグの応用例
○サンプルコード2:リストの番号を変更する
<!DOCTYPE html>
<html>
<head>
<title>HTML olタグサンプル - 番号変更</title>
</head>
<body>
<ol start="5">
<li>項目5</li>
<li>項目6</li>
<li>項目7</li>
</ol>
</body>
</html>
○サンプルコード3:リストのスタイルを変更する
<!DOCTYPE html>
<html>
<head>
<title>HTML olタグサンプル - スタイル変更</title>
<style>
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ol>
<li>項目I</li>
<li>項目II</li>
<li>項目III</li>
</ol>
</body>
</html>
○サンプルコード4:リストの入れ子構造
<!DOCTYPE html>
<html>
<head>
<title>HTML olタグサンプル - 入れ子構造</title>
</head>
<body>
<ol>
<li>項目1</li>
<li>項目2
<ol>
<li>項目2-1</li>
<li>項目2-2</li>
</ol>
</li>
<li>項目3</li>
</ol>
</body>
</html>
●注意点と対処法
olタグを使用する際の注意点として、閉じタグを忘れずに記述しましょう。
また、liタグの中に直接テキストを記述することが推奨されています。
●カスタマイズ方法
○サンプルコード5:CSSでリストのスタイルを変更する
<!DOCTYPE html>
<html>
<head>
<title>HTML olタグサンプル - CSSカスタマイズ</title>
<style>
ol {
list-style-type: lower-alpha;
padding-left: 30px;
}
li {
font-size: 18px;
line-height: 24px;
color: #333;
}
</style>
</head>
<body>
<ol>
<li>項目a</li>
<li>項目b</li>
<li>項目c</li>
</ol>
</body>
</html>
○サンプルコード6:CSSでリストのマーカーをカスタマイズする
<!DOCTYPE html>
<html>
<head>
<title>HTML olタグサンプル - マーカーカスタマイズ</title>
<style>
ol {
counter-reset: list-counter;
list-style-type: none;
}
li {
counter-increment: list-counter;
position: relative;
}
li:before {
content: counter(list-counter) ". ";
position: absolute;
left: -20px;
color: #f00;
}
</style>
</head>
<body>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
</body>
</html>
○サンプルコード7:リバース順序のリストを作成する
<!DOCTYPE html>
<html>
<head>
<title>HTML olタグサンプル - リバース順序</title>
</head>
<body>
<ol reversed>
<li>項目3</li>
<li>項目2</li>
<li>項目1</li>
</ol>
</body>
</html>
このサンプルコードでは、reversed
属性を使用してリストの順序を逆にしています。
この方法で、リストの順序を簡単に反転させることができます。
まとめ
この記事では、HTMLのolタグを初心者でも簡単に理解できるように、使い方やカスタマイズ方法を7つのサンプルコードを交えて徹底解説しました。
これであなたも、olタグを活用して見やすいリストを作成することができるようになります。
今後もWeb制作の際に、この記事を参考にしてリスト作成を楽しんでください。