ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

HTMLタグ・CSSプロパティの英語の読み方・発音

HTMLタグ・CSSプロパティの正しい発音と一般的な読み方解説

要素の角を丸くするCSSプロパティ、border-radiusなんと読むでしょうか?

私は「ボーダーラディアス」と読んでいたのですが、先日、レッスンの際に正しい発音が気になったので調べてみました。

 

調べてみたところ「ボーダーレイディアス」

もしくは「ボーダーレイジアス」が正しいようです。

 

ただ日本では「ラディウス」が一般化してしまってるという話。

私の「ラディス」読みが一番少数化かも…。

慣れ親しんだ読みを是正するのは大変ですが、ちょっとずつ「ぅレィディアスッ!」と舌巻いていきたいと思います。

 

というわけで今回はちょっと迷うHTML・CSSの読み方をまとめてみました。

なんて読めばいいか迷ってる方のご参考頂ければ幸いです。

やっていきましょう。

 

読み方、発音を迷いがちなCSSプロパティ

width…「ウィス」

幅のプロパティなのでwideよく混同して「ワイズ」と言う方もいらっしゃいますが、「ワイズ」は間違い。

wideは「幅の広い」という意味の形容詞で、widthは「幅」そのものを表す名詞です。

英語の発音としては「ウィ(ド)ス」と、あまりdの発音がありません。

アメリカ英語では特に「d」の発音が少なく、それに近いウィッズという読み方をする方も一定数いる模様。

ただウィッズだとwith(ウィズ)とややこしいのと、イギリス発音では「d」の発音は少なからずあるので、「ウィス」とちょっと「d」を発音していきましょう。

ちなみに私ははっきり「うぃドす!」と読む派です。

⇒「width」の発音を聴いてみる 

 

height…「ハイト」

ローマ字読みっぽく「ヘイト」と読むかたがいらっしゃるようですが、正しくは「ハイト」。

こちらはwidthの場合と逆に「背の高い」を表すhigh(ハイ)と混同するのですんなり「ハイト」と読めそうです。

⇒「height」の発音を聴いてみる 

 

align…「アライン」

text-alignやvertical-alignなどのCSSプロパティで出てくるalign。

英語の意味的には「整列」。

これはgが入っていて「アリジン」「アリギン」などの読み間違えをしがちだと思います。正しくは「アライン」です。

私も覚えたての時はアラインと読みつつながら心の中で「アリグン」と唱えていた気がします。

⇒「align」の発音を聴いてみる 

 

relative…「レラティブ」「レィラティブ」

positionのCSSプロパティの値で用いるrelative、正しくは「レラティブ」と読むようです。

過去記事で思い切り「リラティブ」と読みますと書きましたが、英語的には違ったようで恥ずかしい、、、。日本では一般的に「リラティブ」と呼ばれてしまってるようです。

個人的には日本で一人正しい発音を主張して通じないと意味がないので、「レ」と「リ」の間をとって「レィラティブ」と呼ぼうと思います。

⇒「relative」の発音を聴いてみる 

 

radius…「レィディアス」「レィジアス」

冒頭で述べた角丸のCSSプロパティです。日本では一般的に「ラディアス」と読まれているようですが、正しくは「レィディアス」。

半径という意味の英単語です。

こういった日本で一般的な読みと正しい読みが異なる場合は間をとって「ラェィ」と発音しておくと、伝わりながらある程度正しい発音になって良さそうです。

 ⇒「radius」の発音を聴いてみる 

 

hidden…「ヒドゥン」

overflowやdisplay、visibilityなどのCSSプロパティで使われるこちら、読み方は「ヒドゥン」です。

間違いとしては「ヒデン」や「ハイデン」などのパターンがあるでしょうか。

⇒「hidden」の発音を聴いてみる 

 

wrap…「ラップ」

word-wrapやflex-wrapなどのCSSプロパティで出てくるwrap、読み方は「ラップ」です。wをローマ字的に発音してしまうと「ワップ」「ワラップ」となりますが、それは間違いです。

意味的には「包む」というサランラップとかのラップです。

⇒「wrap」の発音を聴いてみる 

 

 

読み方に悩むHTMLタグ

<img src="" alt="">…「イメージ、ソース、オルト」

画像をマークアップするIMGタグ。

アルファベットそのまま「アイエムジー」や「エスアールシー」でも間違いではないです。

元はimageや、出どころを表すsource、代役を意味するalternateの略なので、読みとしては「イメージ」「ソース」「オルト」とすると意味が伝わりやすいです。

 

<a href="">…「アンカー、エイチレフ」

リンクを示すAタグ。

これも「エータグ」と読む方が多いですが、意味的には「碇(いかり)」という英単語で「アンカー」の略です。

hrefの方は「hypertext reference(ハイパー テキストリファレンス)」の略です。

慣習的にこちらは「エイチレフ」と呼ばれています。

 

<br>…「ブレイク」

改行タグ。「ビーアール」と読んでももちろん問題ないと思います。

意味的には「break line」の略なので、「ブレイク」と読んだりするようです。

 

<p>…「パラグラフ」

段落タグ。これも「ピー」の方がシンプルな読みので問題ないです。

意味として「paragraph」を表すので、「パラグラフ」と読みこともあるようです。

 

<!DOCTYPE html>…「ドックタイプ、エイチティーエムエル」

Document Type Definition(文書型定義)の略らしいです。今知りました。

そして勝手に「ドキュタイプ」と読んでました、、、お恥ずかしい。

 

<meta charset="">…「メタ キャラセット」

メタはそのまま読めると思いますが、文字コードを示す「charset」属性は読みづらいですよね。「character set」の略なので、「キャラクターセット」「キャラセット」と読むといいと思います。

恥ずかしながら私はたまに「チャーセット」と読んでいたりします。。。

 

英語の読みが完全正義ではない

こういったHTMLタグやCSSプロパティは元が英語なので英単語としての読みが正しいは正しいのですが、日本人に伝える場合はそれが全てとは限りません。

日本で日常的に使われている外来語で、本来の英語の発音とかけ離れているものがありますよね。

ビールとかもカタカナ英語で、本来はビアーという発音の方が近いです。

 

▼カタカナ英語をキャラクターにして英語発音を学ぶ図鑑。楽しそうな表紙です。

 

 

ただ、日本で日本人に伝える場合には相手に伝わる読み方をした方が正解です。

ですので、日本のWeb業界で読みが一般化されてしまっている「リラティブ」や「ラディウス」などは、今回私の中では日本と英語の間をとって発音するといいかもしれないという結論にしています。

 

こういった用語だけでなく、日常会話でもなんでも相手に伝わるように言葉にしていきたいですね。

 

▼私もレッスンの際などなるべく生徒さんが理解しやすいよう常に学んでいきたいと思います。

 

 

最後までお読みいただきありがとうございました! 

 

 

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp

 

 

これなんて読むの?今さら聞けないHTML・CSSプロパティの読み方まとめ - webデザイン初心者|sometimes study 

href・doctype・src…?HTMLタグの読み方まとめ|ferret