HTMLタグで覚える英単語(15):img、picture、source、audio、video、track

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

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


今回はimgやaudioなど、メディアに関連するタグ(要素)の1回目です。

<img>

<img>は「image」のことです。imageは「画像、イメージ」という名詞で、プログラミング必須英単語600+でベーシック300の英単語です。

名前の通り、画像を表示するための要素です。

このimg要素のsrc属性(下記サンプルの青下線)には画像のURLが入ります。srcはsourceの略で、プログラミング必須英単語600+の略語70に入っています。また、alt属性(下記サンプルの緑下線)には、画像が表示できないときの代替テキストが入ります。altは「alternative」の略です。「代替の」という形容詞で、同じくベーシック300の英単語です。srcもaltも、HTMLに限らずよく使われる略語です。

▼ HTMLのサンプル

<img src="https://progeigo.org/wp-content/uploads/2023/01/test-image.jpg" alt="サンプル画像">

▼ 実際の表示

サンプル画像

<picture>

<picture>はそのままpictureで、「写真」という名詞です。前述のimageは類義語になります。

では、<picture>と<img>はどう使い分けるのでしょうか。picture要素は内部に1個のimg要素、0個以上のsource要素(後述)を含み、画面サイズなどに応じて表示を切り替えます。つまりimgは子要素となるわけです。

下記サンプルの場合、最低1000pxの表示幅(青下線部分)があれば、source要素にある「test-image-large.jpg」が表示されます。その条件に合わなければ、img要素の画像が表示されます。もしパソコンのブラウザーでこの記事を読んでいるようであれば、ウィンドウ幅を変えて実際に切り替わるか試してみてください。

▼ HTMLのサンプル

<picture>
  <source srcset="https://progeigo.org/wp-content/uploads/2023/01/test-image-large.jpg" media="(min-width:1000px)">
  <img src="https://progeigo.org/wp-content/uploads/2023/01/test-image.jpg" alt="サンプル画像">
</picture>

▼ 実際の表示

サンプル画像

<source>

<source>もそのままsourceです。「ソース、〜元(送信元など)」という名詞で、プログラミング必須英単語600+でベーシック300の英単語です。

source要素では、上記picture要素で取り上げたように、画像データのソースを指定します。またpicture要素以外にも、後述のaudio要素やvideo要素のデータソースの指定にも使われます。

サンプルは上記picture要素のものを参照してください。緑の下線部分です。

<audio>

<audio>もやはりそのままaudioです。「オーディオ、音声」という名詞で、ベーシック300の英単語です。

audio要素は、オーディオや音声のファイルをページ上に埋め込む際に用いられます。

下記サンプルでは「controls」という属性がありますが、これを指定すると再生ボタンなど(コントロール)が表示されます。なおcontrolは「制御、コントロール」という名詞、または「制御する」という動詞で、ベーシック300に入っています。

▼ HTMLのサンプル

<audio controls src="https://progeigo.org/wp-content/uploads/2023/01/sample-audio.mp3">

▼ 実際の表示

<video>

<video>もそのまま「video」です。「ビデオ、動画」という名詞です。

video要素も、audio要素と同じように動画をページに埋め込む際に用いられます。やはりcontrols属性の指定でボタンなどのコントロールが表示されます。

▼ HTMLのサンプル

<video controls src="https://progeigo.org/wp-content/uploads/2023/01/sample-video.mp4">

▼ 実際の表示

<track>

<track>もやはりそのままtrackです。「トラック」という名詞で、メディアの文脈では映像や音声などの各データが配置される場所を指します。なお、一般英語では「道」、(競技場の)「走路」、「線路」、「足跡」といった意味があります。

track要素は、.vttというファイル形式で指定し、字幕などテキスト情報のトラックになります。video要素やaudio要素の下に置きます。下記サンプルでは、メニューで「字幕」を選択すると、ビデオ上に「サンプル」という日本語字幕が表示されるようになります。

▼ HTMLのサンプル

<video controls src="https://progeigo.org/wp-content/uploads/2023/01/sample-video.mp4">
  <track src="https://progeigo.org/wp-content/uploads/2023/01/sample-subtitle.vtt" srclang="ja" label="日本語" kind="subtitles"/>
</video>

▼ 実際の表示

英単語まとめ

  • image【名詞】画像、イメージ
    • ベーシック300
  • src:sourceの略
    • 略語70
  • alt:alternativeの略
    • alternativeは「代替の」という形容詞でベーシック300)
  • picture【名詞】写真
    • imageは類義語
  • source【名詞】ソース、〜元(送信元など)
    • ベーシック300
  • audio【名詞】オーディオ、音声
    • ベーシック300
  • control【名詞】制御、コントロール
    • ベーシック300
    • 動詞の場合は「制御する」
  • track【名詞】トラック
    • 一般英語では、道、(競技場の)走路、線路、足跡など

[筆者紹介]

西野 竜太郎

Ryutaro Nishino

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

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

リンク:ウェブサイトTwitter

Profile Picture