HTMLやCSSに限らず、プログラム言語は基本的に英単語が使われています。

英語圏の人にとっては意味がすんなり入ってくるので、プログラミングも習得しやすいかもしれませんが、我々日本人にとっては英語に苦手意識を持っている方も多いので、なかなか取っ付きにくい印象があります。

それでも比較的簡単な英単語が使われていることが多いので、慣れてくると問題ないですが、それでも英単語の読み方など、一見わからないものも結構あったりします。

そこで今回は、「CSSの間違えやすいプロパティ名の読み方」についてご紹介していきます。

英単語を日本語発音するので、ネイティブ発音とは違うこともありますが、一般的な読み方としてご理解いただければと思います。

プロパティって何？と思われた方は、こちらの記事を先に読んでみて下さい。

比較的読み間違いの多いプロパティ

ここでは、レッスンで教える講師の中にも読み方が間違っている方もいるプロパティを紹介していきます。

width（ウィズ）プロパティ

これは、セレクタの横幅を指定するプロパティです。

wide（ワイド）という形容詞が名詞化したものなので、ワイズと読んでしまう人も多いですが、英語の発音的にはウィズの方が近いようです。

height（ハイト）プロパティ

これは、セレクタの高さを指定するプロパティです。

ヘイトと読んでします人が多いですが、◯◯ハイツっていうアパート名などでよく使われていて、ハイツというのは、高台にある集合住宅という意味があり、heightには高台という意味もあるので、ハイトと覚えておきましょう。

読み方がよくわからないプロパティ

そもそも読み方がよくわからないプロパティもあります。

私個人がCSSを勉強していた時に、読み方がわからなかったり、怪しかったりしたものをまとめています。

日常的に使わないような単語も稀に出てくることもあるので、この機会に覚えておくと良いでしょう。

border-collapse（ボーダーコラプス）プロパティ

このプロパティは、table要素の罫線（境界線）の表示方法を指定します。

collapseは、「つぶれる」という意味があり、table要素の罫線の境界をつぶして、くっつける役割を果たします。

border-radius（ボーダーラディアス）プロパティ

境界線の角を丸くするプロパティです。

ネイティブな発音ですと、radius（レイディアス）が近いのですが、日本語的には、ラディアスもしくはラディウスと読むのが自然かと思います。

個人的には、ラディウスの方が好きです。

visibility（ヴィジビリティ）プロパティ

日本語的な発音は、ビジビリティーとなります。

このプロパティは、指定したセレクタの表示・非表示を設定します。

transition（トランジション）プロパティ

このプロパティは、スタイルの変化を指定した秒数で、ジワっと変化させる時に使用します。

アニメーションのような動きを見せたりすることができます。

opacity（オパシティ）プロパティ

こちらのプロパティは、読み方よりも意味を間違えそうなものになります。

意味としては、「不透明度」を表しているので、opacity: 100%;と指定すると、100%不透明になるので指定した色で完全に塗りつぶされた状態となり、0%にすると完全な透明になります。

text-align（テキストアライン）プロパティ

これは、文字列の横方向の位置を指定するプロパティです。

縦方向の場合は、vertical-align（ヴァーティカルアライン）プロパティがありますが、text-alignプロパティとは使える場所が違っています。

まとめ

ここで紹介したプロパティ以外にも読み方が分かりにくいものがたくさんあります。

基本的には、比較的分かりやすく、用途が限定されている英単語が使われているのですが、個人的にはもう少し英語を勉強しておけば良かったと思います。

読み方が間違っていたとしてもHTMLやCSSの文法に間違いが無ければ問題ないので、あまり気にする必要はありませんが、お仕事をする上での信用度には、ほんの少し影響があるかもしれないので、正しい読み方を知っておくに越したことは無いと思います。

読み方が分からなかったら、GoogleやWeblioなどで発音を音声で確認してみるといいかもしれませんね。