webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

これなんて読むの?今さら聞けないHTML・CSSプロパティの読み方まとめ

 HTML・CSSのお勉強を始めて、まず最初に混乱するのが「これなんて読むの?」だと思います。私みたいに独学で始めた人は特に、書けるけど…読めない。

 

調べてみても色々な読み方がされていたり、間違ったまま覚えている人を信じてしまったり…

 

いつも自己流でテキトーに読んでいたのを、つい口に出してしまって恥ずかしい思いをした方も多いはず!


 これなんて読むの?
今さら聞けないHTML・CSSプロパティの読み方まとめ

f:id:serinaishii:20151022134956p:plain

 

 『これなんて読むの?シリーズ』は書いていたら長くなってしまったので、『HTML・CSSプロパティ編』と『web用語編』の2回に分けてご紹介しようと思います。

 

 今回は、『HTML・CSSプロパティ編』!初心者さんもベテランさんも読み方をおさらいしてみましょう!そして、私が間違っているところがあったらこっそり教えてください。


これなんて読むの?HTML・CSS

[ width ] の読み方 - [ ウィドゥス ] [ ウィトゥス ]

   [ ▲ ]:「ウィズ」 [ × ]:「ワイズ」

 

これは1番意見が分かれるところ。

 

 

発音的には『ウィドゥス』・『ウィトゥス』とか「ウィズ」が正しく、dの発音がほとんど聞こえません。

 

ただ「ウィズ」と発音すると「with」と混同される為、『ウィドゥス』・『ウィトゥス』と読むのが良さそうです。

 

www.slideshare.net

 

また、混同を避ける為にあえて「ワイズ」と読む方もいるようですが、ちょっと無理矢理感があって微妙ですよね…

 


[ height ] の読み方 - [ ハイト ] 

   [ × ]:「ヘイト」

 

 

he なのでローマ字読みで「ヘイト」と読みがちですが、正しくは『ハイト』です。

 ヘイトだとhate(嫌い)の意になってしまうのでお気をつけてー!

 


[ img src ] の読み方 - [ イメージ ソース ]

   [ × ]:「アイエムジー エスアールシー」

 

img srcは『image source(イメージ ソース)』の略です。タグ系はこのように母音(a / i / u / e / o)が省略されることが多いようです。


[ margin ] の読み方 - [ マージン ]

   [ × ]:「マーギン」「マルジン」


こちらはgを発音して『マージン』と読みます。

 

『マージン』は"余白"の他に、"儲け・差額利益"という意味があるので、耳にしたことある人も割りと多いはず!

 

だけど言葉は聞いたことあっても、横文字を前にすると結びつかなかったりしますよね。

 

 


[ a href ] の読み方 - [ アンカー エイチレフ ] 

   [ × ]:「ハーフ」「ヘルフ」

 

これは知らないと読めないですよね。私も違うと知りながら心の中でこっそり「エーヘルフ」って読んでいました!

 

 

aタグは「エータグ」ってよく読みますが、本当は『anchor(アンカー:碇 / いかり / 支え)』の略です。リンクの出発点(href)と到達点(name)を指定するために使われます。

 

hrefは『hypertext reference(ハイパー リファレンス)』からきています。

 

ちなみに、reference単体だと『リファンス』って読めるのに、なぜかaがつくと「リファンス」って読む方が多いですね…


[ text-align ] の読み方 - [ テキスト アライン ]

   [ × ]:「アリジン」「アリギン」「アリグン」

 

 

これはなかなか読めませんよね。gは発音しないで『アライン』と読みます。

 


[ position : relative ] の読み方 - [ ポジション レラティブ ] 

   [ × ]:「リレイティブ」

 

日本では「リレイティブ」という読み方が一般化していますが、正しくは『レラティブ』と読みます。

 


[ border-radius ] の読み方 - [ レイディアス ] [ レイジアス ]

   [ × ]:「ラディウス」「ラジアス」「ラジウス」
 

CSS3から新しく追加された角丸のプロパティですね。

 

多数派の「ラディウス」と少数派の『レイディアス』で分かれるみたいですが、正しい発音は『レイディアス』のようです!

 

これは私もずっと「ラディウス」と読んでいました!日本では一般化しちゃったけど、本当は間違ってるよ的なやつですね。

 

 


[ word-wrap ] の読み方 - [ ワード ラップ ]

   [ × ]:「ワラップ」

 

wを発音しないで『ラップ』と読みます。意味も発音もサランラップの『ラップ』と同じですね!

 

 

 


[ visibility : hidden ] の読み方 - [ ビジビリティ ヒドゥン ]

   [ × ]:「ヒデン」「ハイデン」

 

visibilityはvisible(見えること・可視)の名詞形で『ビジビリティ』と読みます。ちょっと言いづらいですね。

 

 

 

hiddenはhide(隠す・非表示)の過去分詞形で『ヒドゥン』と読みます。

 


 最後に

いくつ正しく読めていましたか?

 

私も今の学校に入るまで独学で勉強していたので、間違った読み方をしているものが沢山ありました!

 

誰かと一緒に仕事をするうえで、「これさぁ〜」って会話は必ずあります。HTML・CSSに限らず、読み方がそれぞれ違うと何のことを指しているのか相手に伝わらない場合があります。

 

「自分の周りはこう読んでるんだよね」という逃げは危険です。

 

見知った仲間内なら頭の中で変換してくれるかもしれませんが、取引先の方と話しているときに、ついポロリと間違った読み方で口に出してしまったらどうでしょう?

 

更にそれを自分で間違えだと知らなくて、気づけなかったから?

 

後輩ができて、自分が誤った読み方をしていることを後輩が知る機会があったら?

 

一気に「あー…この人知らないんだ」「こんなのも知らなくて仕事を任せられるのかな?」とイメージダウンに繋がることだってあります。

 

『読み方に笑うものは、読み方に泣く』です。日頃から正しい読み方を意識しましょう!

広告を非表示にする