　順序なし、あり、説明、用語リスト。

要素一覧

要素	概要
`<ol>`	順序つきリスト
`<ul>`	順序なしリスト
`<li>`	リスト項目

ul要素

　<ol>は順序つきリスト。順序が変わることで意味が変わるような項目を一覧するときに使う。たとえば手順など。

<ol>
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

最初の項目
二番目の項目
最後の項目

type属性

<ol type="1">
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

<ol type="a">
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

<ol type="A">
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

<ol type="i">
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

<ol type="I">
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

最初の項目
二番目の項目
最後の項目

最初の項目
二番目の項目
最後の項目

最初の項目
二番目の項目
最後の項目

最初の項目
二番目の項目
最後の項目

最初の項目
二番目の項目
最後の項目

　ほかの種類にしたいときはCSSのlist-style-typeで設定すること。

start属性

<ol start="0">
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

<ol start="-8">
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

<ol start="99">
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

最初の項目
二番目の項目
最後の項目

最初の項目
二番目の項目
最後の項目

最初の項目
二番目の項目
最後の項目

reversed属性

<ol reversed>
<li>最初の項目
<li>二番目の項目
<li>最後の項目
</ol>

最初の項目
二番目の項目
最後の項目

`<ul>`

　<ul>は順序なしリスト。順序が変わっても意味が変わらない項目を一覧するときに使う。たとえば箇条書きなど。それはリストというより集合といえるかもしれない。

　以下、好きな果物をリストアップしたHTML。どれも好きなものであり、順番は決められないか日によって変わる。ヌケモレなく網羅したわけでもない。

<ul>
<li>モモ
<li>スイカ
<li>リンゴ
<li>ミカン
<li>バナナ
</ul>

モモ
スイカ
リンゴ
ミカン
バナナ

`<li>`

　<li>はリスト項目をあらわす。<ol>や<ul>、<menu>に含めて使う。閉じタグを省略できる。

value属性

　<ol>に含まれた<li>のとき、value属性値はリスト項目の順序値をもてる。

説明リスト

　説明リストは、名前と値の組からなる連想リストである。

要素	概要
`<dl>`	説明リスト。`<dt>`と`<dd>`、`<div>`を含める。
`<dt>`	説明リスト項目の名前や用語。
`<dd>`	説明リスト項目の内容。

<dl>
<dt>パソコン
<dd>個人用コンピュータのこと。

<dt>スマホ
<dd>携帯用電話のこと。
</dl>

パソコン: 個人用コンピュータのこと。
スマホ: 携帯用電話のこと。

dt, ddを複数つける

　ひとつのアイテムに対してdt, ddを複数つけることもできる。

<dl>
<dt>PC
<dt>パソコン
<dd>個人用コンピュータのこと。

<dt>スマホ
<dd>携帯用電話のこと。
<dd>携帯用コンピュータでもある。
</dl>

PC
パソコン: 個人用コンピュータのこと。
スマホ: 携帯用電話のこと。; 携帯用コンピュータでもある。

divでグルーピングする

　おもにアイテム単位でCSSを付与するため、divでdtとddを囲う。

<dl>
<div style="border: 1px solid;">
<dt>PC
<dt>パソコン
<dd>個人用コンピュータのこと。
</div>

<div style="border: 1px solid;">
<dt>スマホ
<dd>携帯用電話のこと。
<dd>携帯用コンピュータでもある。
</div>
</dl>

PC
パソコン: 個人用コンピュータのこと。
スマホ: 携帯用電話のこと。; 携帯用コンピュータでもある。

説明リストとして使う

　<dl>はかつて説明リストではなく、定義リストだった。それは用語とその説明を書くものという限定された用途で使われた。しかしHTML living standardでは、もっと幅広い用途で使うようになった。たとえばFAQなどのように質問と回答の組となったリストを示すときにも使われる。

FAQ

<dl>
<dt>なぜ生きているのですか？
<dd>親が私を産んだからです。私の意志ではありません。

<dt>生きがいは何ですか？
<dd>ありません。国や会社に搾取されました。

<dt>なぜスマホを持っていないのですか？
<dd>人が嫌いだからです。人に連絡されることは、つまり利用されるということ。まっぴらごめんです。

<dt>生きる資格や価値あるんですか？
<dd>ありません。そして私が決めることでもありません。ですが決められたくもありません。

<dt>死ねばいいのに。
<dd>生きていてすみません。産まれてきてごめんなさい。こうなるから人と関わりたくないのです。さようなら。
</dl>

なぜ生きているのですか？: 親が私を産んだからです。私の意志ではありません。
生きがいは何ですか？: ありません。国や会社に搾取されました。
なぜスマホを持っていないのですか？: 人が嫌いだからです。人に連絡されることは、つまり利用されるということ。まっぴらごめんです。
生きる資格や価値あるんですか？: ありません。そして私が決めることでもありません。ですが決められたくもありません。
死ねばいいのに。: 生きていてすみません。産まれてきてごめんなさい。こうなるから人と関わりたくないのです。さようなら。

　用語の定義リストとして使うには<dfn>や<abbr>と組み合わせる。それは後述する。

お知らせ

<dl>
<dt><time>2022-01-01</time>
<dd>絶望のはじまり。

<dt><time>2022-02-02</time>
<dd>人類は猫に支配された。

<dt><time>2022-03-13</time>
<dd>神聖猫帝国が築かれた。
</dl>

2022-01-01: 絶望のはじまり。
2022-02-02: 人類は猫に支配された
2022-03-13: 神聖猫帝国が築かれた。

ハウツー系

　連想配列ということは順序がないのかもしれない。名前がキーになるのだろう。となると手順を示すのは不適当かもしれない。かといって<ol>だと詳細説明ができない。なので手順を書くときにも<dl>を使いたい。

　あるいは必要な素材や工具のリストとしては使えそうだ。

手順

<h1>ラズパイを終了する方法</h1>

<dl>
<dt>1. システムメニューをクリックする
<dd>システムメニューはデスクトップ左上にあるラズパイアイコンである。
<dt>2. 【ログアウト】をクリックする
<dd>【ログアウト】はシステムメニュー項目の最下部にある。
<dt>3. 【Shutdown】をクリックする
<dd>【Shutdown】は表示されたダイアログの最上部にある。
</dl>

1. システムメニューをクリックする: システムメニューはデスクトップ左上にあるラズパイアイコンである。
2. 【ログアウト】をクリックする: 【ログアウト】はシステムメニュー項目の最下部にある。
3. 【Shutdown】をクリックする: 【Shutdown】は表示されたダイアログの最上部にある。

必要な素材や道具

<h1>自作PCを組む</h1>

<h1>材料</h1>
<dl>
<dt>CPU
<dd>演算装置。計算を司るPCの心臓。
<dt>RAM
<dd>メインメモリ。主記憶装置。稼働中の記憶装置。
<dt>Drive
<dd>HDDやSSD。電源を切ったあとでも保存される記憶装置。
<dt>出力装置
<dd>ディスプレイやプリンタなど。
<dt>入力装置
<dd>キーボードやマウスなど。
</dl>

CPU: 演算装置。計算を司るPCの心臓。
RAM: メインメモリ。主記憶装置。稼働中の記憶装置。
Drive: HDDやSSD。電源を切ったあとでも保存される記憶装置。
出力装置: ディスプレイやスピーカーなど。
入力装置: キーボードやマウスなど。

定義リストとして使う

　説明リストよりも限定的な用途として、定義リストがある。これは用語を説明するためのリストだ。

　用語の定義リストとして使うには<dfn>や<abbr>と組み合わせる。

<dl>
<dt><dfn><abbr title="Personal Computer">PC</abbr></dfn>
<dt><dfn><abbr title="パーソナル・コンピュータ">パソコン</abbr></dfn>
<dd>個人用コンピュータのこと。

<dt><dfn><abbr title="Smart Phone">SP</abbr></dfn>
<dt><dfn><abbr title="スマート・フォン">スマホ</abbr></dfn>
<dt><dfn><abbr title="スマート・フォン">スマフォ</abbr></dfn>
<dd>携帯用電話のこと。
<dd>携帯用コンピュータでもある。
</dl>

PC
パソコン: 個人用コンピュータのこと。
SP
スマホ
スマフォ: 携帯用電話のこと。; 携帯用コンピュータでもある。

対象環境

2022-04-07
Raspbierry pi 4 Model B
Raspberry Pi OS buster 10.0 2020-08-20 ※
bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

HTML文書をつくる10　データ構造　リスト（ol, ul, li, dl, dt, dd）