プログラミングをしているとHTMLに触れる機会はよくあります。そういったHTMLタグ（<b>など）の名前から英単語を覚えてみましょう。

記事の英語難易度は「初〜中級」です。

---

今回と次回は、これまで紹介した以外のタグ名を取り上げます。

＜details＞

<details>は文字通りdetailsです。「詳細」や「細部」を意味する名詞detailの複数形です。詳細情報を表す場合、複数形とするのが一般的です（細目がいくつもあるイメージ）。

detailはプログラミング必須英単語600+で前提英単語100に入っています。

details要素は、クリックすると表示と非表示が切り替えられる詳細情報エリアを作るのに使います。サンプルの黄色下線部分です。

▼ HTMLのサンプル

<details>
    <summary>夏目漱石</summary>
    <p>夏目漱石は日本の小説家です。代表作に『坊っちゃん』、『吾輩は猫である』、『こころ』などがあります。</p>
</details>

▼ 実際の表示

夏目漱石

夏目漱石は日本の小説家です。代表作に『坊っちゃん』、『吾輩は猫である』、『こころ』などがあります。

＜summary＞

<summary>もそのままsummaryで、「概要」や「要約」という名詞です。

語源的には「sum」（合計、金額）と同じです。

summary要素はdetails要素の中で使われ、詳細情報の概要を示します。サンプルは上記detailsの緑色下線部分をご覧ください。

＜dialog＞

<dialog>もdialogで、「ダイアログ」という名詞です。プログラミング必須英単語600+でベーシック300に入っている英単語です。

なお辞書には「dialogue」というスペルも載っていますが、これはイギリス式です。ソフトウェアUIのダイアログを指す場合は「dialog」という表記が一般的です。

dialog要素は、名前の通りダイアログ・ボックスを表示するのに使われます。

▼ HTMLのサンプル

<button type="button" onclick="document.getElementById('myDialog').showModal()">ダイアログ表示</button>
<div style="height:10em">
<dialog id="myDialog">
    <p>ダイアログが表示されました！</p>
    <button type="button" onclick="document.getElementById('myDialog').close();">OK</button>
</dialog>
</div>

▼ 表示

上記のHTMLが本ページ上ではなぜかうまく動かなかったので、写真で表示します。

「ダイアログ表示」をクリックするとダイアログが開き、「OK」をクリックすると閉じます。

＜figure＞

<figure>は文字通りfigureで、「図」という名詞です。

figureは多義語で、名詞としては「図」以外に「数値」、「金額」、「姿」、「体型」などの意味があります。

figure要素は、図を示すのに使います。サンプル中の黄色い下線部分です。

▼ HTMLのサンプル

<figure>
    <img src="https://progeigo.org/wp-content/uploads/2023/01/test-image.jpg">
    <figcaption style="font-size:smaller">サンプルの画像</figcaption>
</figure>

▼ 実際の表示

＜figcaption＞

<figcaption>は、figure（図）とcaptionからできています。

captionは以前（第3回）出てきましたが、「キャプション」という名詞で、図や写真の上や下に書かれる説明文のことです。

figcaption要素は、名前の通り、図のキャプションに使います。サンプルは上記figureを参照してください。緑色の下線部分です。

英単語まとめ

• detail【名詞】詳細
  • 前提英単語100
  • 「詳細情報」を表す場合、detailsと複数形が一般的
• summary【名詞】概要、要約
• dialog【名詞】ダイアログ
  • ベーシック300
  • dialogueはイギリス式のスペル
• figure【名詞】図
  • 名詞は他に「数値」、「金額」、「姿」、「体型」など
• caption【名詞】キャプション

---

[筆者紹介]