これなんて読むの？今さら聞けないHTML・CSSプロパティの読み方まとめ
HTML・CSSのお勉強を始めて、まず最初に混乱するのが「これなんて読むの？」だと思います。私みたいに独学で始めた人は特に、書けるけど…読めない。
調べてみても色々な読み方がされていたり、間違ったまま覚えている人を信じてしまったり…
いつも自己流でテキトーに読んでいたのを、つい口に出してしまって恥ずかしい思いをした方も多いはず！
これなんて読むの？
今さら聞けないHTML・CSSプロパティの読み方まとめ
『これなんて読むの？シリーズ』は書いていたら長くなってしまったので、『HTML・CSSプロパティ編』と『web用語編』の2回に分けてご紹介しようと思います。
今回は、『HTML・CSSプロパティ編』！初心者さんもベテランさんも読み方をおさらいしてみましょう！そして、私が間違っているところがあったらこっそり教えてください。
これなんて読むの？HTML・CSS編
[ width ] の読み方 － [ ウィドゥス ] [ ウィトゥス ]
[ ▲ ]：「ウィズ」 [ × ]：「ワイズ」
これは1番意見が分かれるところ。
Widthの発音は自分もウィドゥス派だけど、職場でワイズって呼んでる人がいて、さすがにそれは違うだろ…と、いつも思ってる
— シェンファ★るろうに鍵盤二スト (@shengfa) 2015, 6月 16
発音的には『ウィドゥス』・『ウィトゥス』とか「ウィズ」が正しく、dの発音がほとんど聞こえません。
ただ「ウィズ」と発音すると「with」と混同される為、『ウィドゥス』・『ウィトゥス』と読むのが良さそうです。
また、混同を避ける為にあえて「ワイズ」と読む方もいるようですが、ちょっと無理矢理感があって微妙ですよね…
[ height ] の読み方 － [ ハイト ]
[ × ]：「ヘイト」
heightの読み方「ヘイト」じゃなくて「ハイト」だったなんて………！ きっと間違えた人は多いはず！ ………と思いたい………
— 拓磨 (@jackpotdance510) 2015, 8月 31
he なのでローマ字読みで「ヘイト」と読みがちですが、正しくは『ハイト』です。
ヘイトだとhate(嫌い)の意になってしまうのでお気をつけてー！
[ img src ] の読み方 － [ イメージ ソース ]
[ × ]：「アイエムジー エスアールシー」
img srcは『image source(イメージ ソース)』の略です。タグ系はこのように母音(a / i / u / e / o)が省略されることが多いようです。
[ margin ] の読み方 － [ マージン ]
[ × ]：「マーギン」「マルジン」
こちらはgを発音して『マージン』と読みます。
『マージン』は"余白"の他に、"儲け・差額利益"という意味があるので、耳にしたことある人も割りと多いはず！
だけど言葉は聞いたことあっても、横文字を前にすると結びつかなかったりしますよね。
僕はずっと、width = "ワイドス", align = "アリジン" margin="マルジン"だと脳内で解釈してましたことをここで告白致します。 プロでもあやしい?!意外と知らないHTMLの読み方 | 株式会社LIG http://t.co/7s9eAVf0
— 印度神 (@kitaindia) 2013, 1月 24
[ a href ] の読み方 － [ アンカー エイチレフ ]
[ × ]：「ハーフ」「ヘルフ」
これは知らないと読めないですよね。私も違うと知りながら心の中でこっそり「エーヘルフ」って読んでいました！
私なんか、ヘルフ／hrefと言われた事があるw @nsyan: 「スイフの埋込みお願いします」と言われて一度は「は？」となる。swf #コーダーあるある
— ✧✧BaddAssMuse✧✧ (@museAimi) 2014, 12月 12
aタグは「エータグ」ってよく読みますが、本当は『anchor(アンカー：碇 / いかり / 支え)』の略です。リンクの出発点(href)と到達点(name)を指定するために使われます。
hrefは『hypertext reference(ハイパー リファレンス)』からきています。
ちなみに、reference単体だと『リファレンス』って読めるのに、なぜかaがつくと「リファランス」って読む方が多いですね…
[ text-align ] の読み方 － [ テキスト アライン ]
[ × ]：「アリジン」「アリギン」「アリグン」
alignをいつもアリジンと心の中で読んでしまう。。
— (ᵔᴥᵔ) (@about_hiroppy) 2013, 9月 28
"align"をどうしても"algin"と書いてしまう件。きっとアリジンって覚えてるからだな。今度からアリグンって覚えよう（本当の読み方はアライン）
— 御堂 圭 (@midou1225) 2012, 8月 22
これはなかなか読めませんよね。gは発音しないで『アライン』と読みます。
[ position : relative ] の読み方 － [ ポジション レラティブ ]
[ × ]：「リレイティブ」
日本では「リレイティブ」という読み方が一般化していますが、正しくは『レラティブ』と読みます。
[ border-radius ] の読み方 － [ レイディアス ] [ レイジアス ]
[ × ]：「ラディウス」「ラジアス」「ラジウス」
CSS3から新しく追加された角丸のプロパティですね。
多数派の「ラディウス」と少数派の『レイディアス』で分かれるみたいですが、正しい発音は『レイディアス』のようです！
これは私もずっと「ラディウス」と読んでいました！日本では一般化しちゃったけど、本当は間違ってるよ的なやつですね。
[ word-wrap ] の読み方 － [ ワード ラップ ]
[ × ]：「ワラップ」
wを発音しないで『ラップ』と読みます。意味も発音もサランラップの『ラップ』と同じですね！
サランラップは開発者２人の名前を取ってつけられた。 Sarah（サラ）＋Ann（アン）＋wrap（包む） pic.twitter.com/96oK6CELoV
— SAKIのすけo(^o^)o (@sakichans358) 2015, 10月 14
[ visibility : hidden ] の読み方 － [ ビジビリティ ヒドゥン ]
[ × ]：「ヒデン」「ハイデン」
visibilityはvisible(見えること・可視)の名詞形で『ビジビリティ』と読みます。ちょっと言いづらいですね。
そのむかし hidden を「ハイディーン」と読んだ人がいて、逆にちょっとかっこいいと思った。
— FALZ (@falz_yineng) 2015, 6月 16
hiddenはhide(隠す・非表示)の過去分詞形で『ヒドゥン』と読みます。
最後に
いくつ正しく読めていましたか？
私も今の学校に入るまで独学で勉強していたので、間違った読み方をしているものが沢山ありました！
誰かと一緒に仕事をするうえで、「これさぁ〜」って会話は必ずあります。HTML・CSSに限らず、読み方がそれぞれ違うと何のことを指しているのか相手に伝わらない場合があります。
「自分の周りはこう読んでるんだよね」という逃げは危険です。
見知った仲間内なら頭の中で変換してくれるかもしれませんが、取引先の方と話しているときに、ついポロリと間違った読み方で口に出してしまったらどうでしょう？
更にそれを自分で間違えだと知らなくて、気づけなかったから？
後輩ができて、自分が誤った読み方をしていることを後輩が知る機会があったら？
一気に「あー…この人知らないんだ」「こんなのも知らなくて仕事を任せられるのかな？」とイメージダウンに繋がることだってあります。
『読み方に笑うものは、読み方に泣く』です。日頃から正しい読み方を意識しましょう！
