本記事にはPR広告が含まれています。
本記事にはPR広告が含まれています。掲載されている広告についての詳細はプライバシーポリシーをご参照ください。
本記事にはPR広告が含まれています。掲載されている広告についての詳細はプライバシーポリシーをご参照ください。
今回はHTMLで箇条書きリストを作る為に使われるul、olタグについてを解説していきたいと思います。
ul、olタグはHTMLのタグの中でも非常によく使われるタグの1つですので、正しい使い方を理解して、実際にどんな使い方でよく使われるのか等についてもしっかり理解しておくようにしましょう。
ulタグ、olタグは上述した通り、箇条書きリストを作ることができるHTMLタグです。
ulタグ、olタグの名前の由来は、それぞれ英単語のUnordered List(順序のないリスト)、Ordered List(順序のあるリスト)の頭文字から来ていて、文字通りulタグで作ったリストはデフォルトでは順序のないリストを、olタグで作ったリストはデフォルトでは数字が文頭に付いた順序のあるリストを作ることができます。
<body>
<h1>果物の種類</h1>
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>
</body>
<body>
<h1>人口ランキング</h1>
<ol>
<li>東京</li>
<li>神奈川</li>
<li>大阪</li>
</ol>
</body>
以下がul、olタグの基本的な使い方です。
ulタグとolタグの直下の子要素にはliタグの使用のみが許容されています。(ただし、liタグであれば何個でも子要素として使用することができます。)
また、liタグとは英単語のList Itemの頭文字をとったHTMLタグで、ulタグ、olタグの子要素として使われ、リストの項目を表示するために使用されるタグです。
liタグの子要素にはフローコンテンツはどれでも使用が許容されています。(フローコンテンツについて、詳しく知りたい方は、こちらをクリック。)
よくあるパターンとしてはliタグの中にaタグを入れて、リンク付き箇条書きリストなどを作るパターンですが、他にもliタグの子要素としてさらにul、olタグを入れて入れ子構造のリストなども作ることができます。
<body>
<h1>ポートフォリオ</h1>
<ul>
<li><a href="#">わたしについて</a></li>
<li><a href="#">保有スキル</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</body>
<body>
<h1>ポートフォリオ</h1>
<ul>
<li><a href="#">わたしについて</a></li>
<li><a href="#">保有スキル</a>
<ul>
<li><a href="#">HTML&CSS</a></li>
<li><a href="#">デザインスキル</a></li>
<li><a href="#">プログラミングスキル</a></li>
</ul>
</li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</body>
ulタグ、olタグとセットでよく使われるCSSプロパティは以下の通りです。
list-style-typeプロパティを使用すればリストマーカーを変更することができます。
なお、指定する要素はul、olタグに対してでもliタグに対してでも問題ありません。
<body>
<h1>ポートフォリオ</h1>
<ul>
<li><a href="#">わたしについて</a></li>
<li><a href="#">保有スキル</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</body>
ul{
list-style-type: circle;
}
list-style-positionプロパティを使用すればリストマーカーの位置を調節することができます。
なお、こちらも指定する要素はul、olタグに対してでもliタグに対してでも問題ありません。
ulタグ、olタグを使ってよく作られるレイアウトの例は以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ul,olの正しい使い方</title>
<style>
* {
padding: 0;
margin: 0;
}
header {
line-height: 60px;
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
margin: 0 20px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">アバウト</a></li>
<li><a href="#">料金</a></li>
<li><a href="#">実績</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ul,olの正しい使い方</title>
<style>
* {
padding: 0;
margin: 0;
}
h1{
text-align: center;
margin: 60px 0;
}
img{
width:300px;
}
ul{
list-style-type: none;
display: flex;
justify-content: center;
}
li{
margin: 0 5px;
}
</style>
</head>
<body>
<h1>日本の風景</h1>
<ul>
<li><img src="japan1.jpg" alt></li>
<li><img src="japan2.jpg" alt></li>
<li><img src="japan3.jpg" alt></li>
</ul>
</body>
</html>
以上、今回は箇条書きリストなどを作る際に使われるulタグ、olタグの正しい使い方等についてを解説しました。
ul、olタグはHTMLのタグの中でも非常によく使われるタグの1つですので、正しい使い方を理解して実際に使えるようにしておきましょう。
最後までご覧頂き、ありがとうございました!
元日本語教師。2020年12月にフリーランスのWeb制作者・SEOライターとして独立。
ポートフォリオ: https://ryouslashweb.com/
詳細は運営者情報ページに記載。