派遣で働くエンジニアのスキルアップを応援するサイト

PRODUCED BY RECRUIT

HTMLのタグを題材に英単語解説!リストのための3つのタグ

「プログラミングでは英語が使われている。」ならば、プログラミングと英単語を一緒に勉強すれば、一石二鳥のスキルアップが叶うのでは?!そんな試みの本連載。今回は「リスト(箇条書き)で用いられるタグ」から3つの英単語を取り上げます。派生単語で語彙力を一気に増やす方法も。
コーディング初心者の方や、楽しく英語を学び直したい方にもおすすめです!

まずはコードとブラウザーでの表示をみてみよう!

今回は、リスト(箇条書き)で使われるHTMLの英単語を紹介します。リストは、ウェブページで項目を並べて表示したいときに使います。うまく活用すると、情報を整理して読みやすくなります。

取り上げるのは、ol(ordered list)、ul(unordered list)、li(list item)という3つの要素(タグ)です。また、olで指定できる「reversed」属性も併せて紹介します。 

まずはサンプルのHTMLコード(図1)とそのブラウザー表示(図2)を見てみましょう。今回紹介するタグは、図1でオレンジ色でハイライトしています。


▲図1:サンプルのHTMLコード ※CSSは省略しています。


▲図2:サンプルのブラウザー表示

1. ol (ordered list)

「ol」は「ordered list」の頭文字を取ったタグ名です。

orderedとは「順序が付けられた」という形容詞(または動詞の過去分詞)です。orderはいくつも意味がある単語です。動詞であれば「命令する」や「注文(オーダー)する」に加え、「順番に並べる」の意味もあります。orderedはこの「順番に並べる」と関連しています。

また、listは「一覧」や「リスト」という名詞です。この名詞の意味を知っている方は多いと思いますが、実は動詞もあります。

動詞のときは「一覧表示する」という意味で使われます。たとえば「All users will be listed.」というメッセージは、「すべてのユーザーが一覧表示されます。」を表します。

★listは「プログラミング必須英単語600+」の「前提英単語100」に入っている重要単語です。

まとめると、「ordered list」とは「順序付けられたリスト」のことです。
図2のサンプル1は「電話番号を変更するには」というマニュアルの操作手順ですが、1〜3まで項目が並べられています。こういった操作手順のように順序があるリストを作りたい場合に、ordered list、つまり「ol」を使います。

■olでreversed属性

このolには「reversed」という属性を指定できます。図1の「<ol reversed>」の部分です。reverseは「逆にする」や「反対にする」という動詞です。つまり過去分詞のreversedは「逆になった」の意味になります。

図2のサンプル2には「食べ物がおいしい国のベスト3は?」と見出しがあり、3位、2位、1位の順に国名が表示されています。つまり順位が逆に並べられているわけです。このように、数字を逆順にしてカウントダウンするようなリストを作りたい場合に「reversed」属性を指定します。

【英語派生知識】
ちなみに、アパレル店に行くと「リバーシブル」の衣服を目にすることがあります。このリバーシブルは英語だと「reversible」です。「revers」部分は前述のように「逆にする」、「ible」部分は「〜できる」の意味です。裏返しても着られる衣服であるため、reversibleなのです。こういったカタカナ語をうまく手がかりにすると、英単語も覚えやすくなります。

2.ul (unordered list)

続いて「ul」です。「unordered list」の頭文字からできたタグ名です。

unorderedをよく見てみると、「un」の後に、先ほど取り上げた「ordered」があります。orderedとは「順序が付けられた」でした。頭にある「un」は否定を表す接頭辞です。要するに「順序が付けられてない」の意味になります。

listは前述の通り「リスト」なので、「unordered list」は「順序が付けられていないリスト」のことです。
図2のサンプル3は「明治時代の文豪」とあり、夏目漱石、森鴎外、樋口一葉が並べられています。3人の間に順位はないため、数字ではなく中黒(中点)が先頭に付けられています。このように、順序がないリストを作りたいときに「ul」を利用します。

【英語派生知識】

先ほど、「un」は否定を表す接頭辞だと説明しました。プログラミング必須英単語600+を見ると、否定のunが使われている単語が数多くあります。レベル別に確認してみましょう。

  • ベーシック300
    • unable【形容詞】不可能な
    • undo【動詞】元に戻す
    • uninstall【動詞】アンインストールする
    • unused【形容詞】未使用の
  • アドバンスト300
    • unauthorized【形容詞】権限のない
    • unavailable【形容詞】利用できない
    • undefined【形容詞】未定義の
    • unexpected【形容詞】予期しない
    • unknown【形容詞】不明の
    • unnecessary【形容詞】不要な
    • unresolved【形容詞】未解決の
    • unsupported【形容詞】非対応の、サポートされない
否定のunを知っているだけで、覚えている英単語を一気に増やせるわけです。とても便利ですね。

3. li (list item)

最後に「li」です。olやulと同様、「list item」の頭文字からできたタグ名です。

「list」は先ほども登場したように「リスト」です。続く「item」は「項目」という名詞なので、「list item」は「リスト項目」という意味になります。

★listは「プログラミング必須英単語600+」の「ベーシック300」に入っている重要単語です。

図1のHTMLコードを見ると、olやulの中に「li」がいくつかあるのが分かります。サンプル1であれば「設定画面を開きます。」のような各手順、サンプル2であれば「ギリシャ」のような各国名、サンプル3であれば「夏目漱石」のような各作家名です。このように、リスト内の各項目を作る際に「li」タグが使われるのです。

【プログラミング派生知識】

itemはソフトウェアのメッセージやUIで頻繁に登場します。いくつか例文を挙げてみましょう。

  • 10 items selected.
    10個の項目が選択されています。
  • Are you sure you want to delete this item?
    この項目を削除してもよろしいですか?
  • Show all items
    すべての項目を表示

・・・

いかがでしたか?今回はリストで使われるHTMLの英単語を取り上げました。カタカナ語や接頭辞を手がかりにすれば、単語をうまく覚えられそうですね。次回は「テーブル(表)」で用いられる英単語を紹介します。

筆者 西野 竜太郎 さん
翻訳者、情報技術者、IT英語専門家。米国留学を経て国内の大学を卒業後、2002年からフリーランスの翻訳者とソフトウェア開発者に。2016年から合同会社グローバリゼーションデザイン研究所の代表。2017〜2022年に日本翻訳連盟(JTF)の理事も務める。訳書に『リセットを押せ』、『血と汗とピクセル』、著書に『アプリケーションをつくる英語』(第4回ブクログ大賞)、『ITエンジニアのための英語リーディング』(翔泳社)(韓国語訳あり)、『ソフトウェア・グローバリゼーション入門』(インプレス)、最新刊に『ITエンジニアのための英語ライティング』(翔泳社)などがある。

※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2026年3月時点のものです。