引き続き、HTMLで学んだことを書きます。 今日はリスト表現についての備忘録です。
目次
リスト
順不同リスト
箇条書きなどのように、順番を設けずに項目を列挙するタイプのリストです。 ul要素で順不同リストを表し、そのリストアイテムをli要素で表します。
※ul：unordered list
※li：list item
例
<ul>
<li>自己紹介</li>
<li>作成中</li>
<li>作成中</li>
<li>作成中</li>
<li>作成中</li>
<li>作成中</li>
</ul>
ul要素の中にli要素を書きます。liを書くときはインデントを一つ下げます。
上記の例では、このように表示されます。
頭の●をなくしたい場合は、CSSにて、
li {
list-style: none;
}
と書くことで消すことができます。また、list-styleの値で、●部分を■に変更したり（値：square）、○に変更（値：circle）することもできます。
番号順リスト
１，２，３・・・のように番号順に表現するリストです。 ol要素で番号順リストを表し、そのリストアイテムをli要素で表します。
※ol：ordered list
例
<ol>
<li>自己紹介</li>
<li>作成中</li>
<li>作成中</li>
<li>作成中</li>
<li>作成中</li>
<li>作成中</li>
</ol>
このように表示されます。
用語説明型リスト
用語を定義し、その説明を表現するためのリストです。 dl要素で用語説明型リストを表し、dt要素で定義したい言葉、dd要素で言葉の説明を表します。
※dl：description list
※dt：description term
※dd：description definition
例
<dl>
<dt>dlとは？</dt>
<dd>「definition list」の略で用語説明型リストを表現します。</dd>
<dt>dtとは？</dt>
<dd>「definition term」の略で説明したい用語を表現します。</dd>
</dl>
dt要素を書くときはインデントを一つ下げ、dd要素を書くときはさらにもう一つインデントを下げます。
上記例では、このように表示されます。
リストを使ってサイト構成してみた
前々回の記事で紹介したHTMLで、順不同リストでサイト構成してみましたので、 用語説明型リストを使って自己紹介ページを作ってみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>about me</title>
<meta name="description" content="amareloのページ">
<link rel="stylesheet" href="introduction.css">
</head>
<body>
<header>自己紹介</header>
<dl>
<dt>職業</dt>
<dd>コーヒー焙煎人兼エンジニア</dd>
</dl>
<dl>
<dt>資格</dt>
<dd>AWSソリューションアーキテクトアソシエイト（資格だけ）</dd>
<dd>AWSクラウドプラクティショナー（資格だけ）</dd>
</dl>
<dl>
<dt>趣味</dt>
<dd>コーヒー焙煎</dd>
<dd>ランニング</dd>
</dl>
<dl>
<dt>好きなAWSサービス</dt>
<dd>Lambda</dd>
<dd>S3</dd>
</dl>
</body>
<footer>
<p>サイト制作者：amarelo</p>
</footer>
</html>
CSSでテキストを中央に寄せたり、文字を太字にしていますが、そこは省略します。 以下にように表示されます。
最後に
勉強したことの備忘録として書いていますので、実際に公開するWebサイトを作るには良くない書き方かもしれません。 構成の良しあしまでは調べられていませんので、何卒ご容赦ください！
今日はここで締めたいと思います。
