HTMLタグで覚える英単語(12):datalist、option、optgroup、select、meter、progress、textarea

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

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


今回はフォームに関連する英単語の2回目で、datalist、option、optgroupといったタグ名を取り上げます。

datalist〜selectのサンプル

まず、datalistからselectまでで用いるサンプルを示します。

▼ HTMLのサンプル

好きな作家:
<input list="novelists" />
<datalist id="novelists">
    <option value="芥川龍之介">
    <option value="太宰治">
</datalist>
<br>
好きな作品:
<select id="novel-choice">
    <optgroup label="芥川龍之介">
        <option>羅生門</option>
        <option>蜘蛛の糸</option>
    </optgroup>
    <optgroup label="太宰治">
        <option>斜陽</option>
        <option>人間失格</option>
    </optgroup>
</select>

▼ 実際の表示

好きな作家:
好きな作品:

<datalist>

<datalist>は「data」と「list」からできている言葉です。

まずdataは「データ」という名詞で、プログラミング必須英単語600+のベーシック300に入っています。さらにlistは「リスト」という名詞、または「一覧表示する」という動詞です。こちらは前提英単語100です。

datalist要素は、option要素を候補としてinput要素に表示するのに用いられます。サンプルを見ると、「芥川龍之介」と「太宰治」が候補として表示されることが分かります。

<option>

<option>はそのまま「option」です。「オプション」という名詞で、ベーシック300の英単語です。

option要素は、サンプルのようにdatalist要素やoptgroup要素の中で用いられます。ユーザーが選択する項目の1つとなります。

<optgroup>

<optgroup>は「option」の略語である「opt」と「group」からできている言葉です。

optは「opts」(optionsの略)として、プログラミング必須英単語600+の略語70に入っています。また、groupは「グループ」という名詞で、前提英単語100です。

optgroup要素は、select要素内でoption要素をグループ化してまとめるために用いられる要素です。サンプルを見ると、例えば「羅生門」と「蜘蛛の糸」というoptionが「芥川龍之介」というoptgroupにまとめられています。

<select>

<select>はそのまま「select」です。「選択する」という動詞で、ベーシック300の英単語です。類義語としてはchoose(選択する、前提英単語100)があります。

なお、一般英語としては「選り抜きの」や「高級な」という形容詞の意味もあります。例えば「a select wine」で「選り抜きワイン」です。

サンプルのように、select要素はoption要素を表示するドロップダウン式のフォーム部品になります。

<meter>

<meter>は文字通り「meter」です。名詞で「メーター、計器」のほか、長さの単位である「メートル」の意味もあります。

meter要素は、ある範囲内における値を示すのに使います。上記の「メーター、計器」の方です。

▼ HTMLのサンプル

ストレージ容量:<meter min="0" max="36.0" value="24.6">36.0GB中24.6GBを使用</meter>

▼ 実際の表示

ストレージ容量:36.0GB中24.6GBを使用

<progress>

<progress>はそのまま「progress」です。「進行状況」という名詞で、アドバンスト300の単語です。動詞としては「進歩する」や「発展する」の意味になります。

progress要素は進捗バーとして表示され、進行状況を示すのに用いられます。

▼ HTMLのサンプル

ウイルス検査状況:<progress max="100" value="38">38%完了</progress>

▼ 実際の表示

ウイルス検査状況:38%完了

<textarea>

<textarea>は「text」と「area」からできている言葉です。

まずtextは「テキスト」という名詞です。「書かれたもの」の意味です。次にareaは「領域、エリア」という名詞で、前提英単語100に入っています。

つまりはテキストが入る領域を表し、textarea要素内には改行が可能なテキストを入力できます。

▼ HTMLのサンプル

「羅生門」の感想:<br>
<textarea>(感想文を入力してください)</textarea>

▼ 実際の表示

「羅生門」の感想:

英単語まとめ

  • data【名詞】データ
    • ベーシック300
  • list【名詞/動詞】リスト/一覧表示する
    • 前提英単語100
  • option【名詞】オプション
    • ベーシック300
  • opts【名詞】optionsの略語
    • 略語70
  • group【名詞】グループ
    • 前提英単語100
  • select【動詞】選択する
    • ベーシック300
    • 「選り抜きの」という形容詞も
    • 類義語はchoose(選択する、前提英単語100)
  • meter【名詞】メーター、計器、メートル
  • progress【名詞】進行状況
    • アドバンスト300
    • 動詞は「進歩する、発展する」
  • text【名詞】テキスト
  • area【名詞】領域、エリア
    • 前提英単語100

[筆者紹介]

西野 竜太郎

Ryutaro Nishino

翻訳者/ソフトウェア開発者

訳書に「血と汗とピクセル」、「リセットを押せ」、著書に「アプリケーションをつくる英語」(第4回ブクログ大賞)、「ITエンジニアのための英語リーディング」、「ソフトウェア・グローバリゼーション入門」、「アプリ翻訳実践入門」など。
産業技術大学院大学修了(情報システム学修士)、東京工業大学大学院博士課程単位取得(専門は言語学)。TOEIC 985点。
東京通信大学外部講師。

リンク:ウェブサイトTwitter

Profile Picture