2013/12/20 クリエイター

widthの読み方って・・・CSSプロパティの読み方をおさらいしよう!初級編

widthの読み方って・・・CSSプロパティの読み方をおさらいしよう!初級編

もうだいぶCSSは空で書けるし、コーディングも早くなった。

だいたいのレイアウトは実現出来るしそろそろ初級者脱出をしても良いのでは・・・

 

でもちょっと待って下さい。

その前に一つ確かめなきゃいけないことがあります!

 

そう、CSSプロパティの読み方です。

 

どんなに華麗でクールなコーディングをしても。

 

どんなにスピーディーで精密なコーディングをしても。

 

プロパティの読み方を間違えてしまえばもう台無しです。

 

恥ずかしい言い間違いをする前に、是非ともここでCSSプロパティの読み方を復習していって下さい。

 

今回は有名どころを揃えた初級編となっております。

 

「width」のよみかた

横幅を決定するプロパティとして非常にポピュラーなwidth。

時には手前に「min-」をつけたり、「max」をつけたりして使い勝手も抜群です。

 

ですがこれ、なんて読むのかわからない人が結構多いです。

話によるとネイティブでも発音がばらけるだとか。

発音してくれるサイトでいろいろ聞きましたが、一番近いのが「ウィッズス」

「ウィッズス」の「ス」は吐息に近いくらいの発音でした。

 

コーダーの中では「ウィドゥス」「ウィズ」が多いみたいですね。

人前で読み上げるときは「ウィドゥス」か「ウィズ」にしたほうが無難かもしれません。

 

「height」のよみかた

要素の高さを決定するプロパティ。widthほどじゃないですが、これもポピュラーなプロパティです。

「min-」や「max」ももちろんですが、「line-」なんて使い方もできます。

 

これは「ハイト」と読みます。

結構「ヘイト」と間違って読んでいる人が多いです。

 

「align」のよみかた

text-alignやvertical-align等に付随する整列、という意味の単語

こちらもよく使うプロパティです。「アライン」と読みます。

ちなみに筆者はかつて「オリジン」と呼んでいました。

先輩とCSSトークをしている最中に「アラインでしょ?」と冷たく言い放たれた時のやってしまった感は今でも忘れる事ができません。

 

「hidden」のよみかた

隠すと言う意味を持った値です。

floatのクリアフィックス等にもよく使われますね。

あまり使うことは無いんですが、displayプロパティの値にも設定出来ます。

 

これは「ヒドゥン」と読みます。

「ヒデン」と呼ぶ人がたまに居ますが、相当イケていないのでやめましょう。

 

「relative」のよみかた

positionとセットになって出てくる値。子要素にabsoluteを設定するような時によく使われます。

相対的な、といった意味を持っています。

 

読み方は「レラティブ」

実はこの記事を書くまで、「リレイティブ」だと思っていました。

あらためて調べてみると落とし穴が他にもたくさんありそうです。。。

 

「absolute」のよみかた

こちらもpositionとセットで出てくる値。絶対位置を決める時に使います。

親要素がstatic意外のpositionを持っていれば、親要素の左上が基準になります。

「アブソリュート」と読みます。絶対的な、と言う意味です。

意外とこういった難しそうなものは、みんな正しい読み方をしていたりするんですよね。 

 

「opacity」のよみかた

透明度、透過を設定するプロパティ。「オパシティ」と読みます。

素直に読めるプロパティは嬉しいですね。

ちなみに単語の意味は「不透明」といった意味なので、不透明度を設定していると言う解釈になります。

 

 

如何でしたでしょうか。

筆者基準なのですが、今回は特に言い間違いが多いプロパティ、値の読み方を紹介させていただきました。

オーストラリアのコーダーの発音は違う。のような様々な情報もあったのですが、今回は一般的なイギリス・アメリカの発音をカタカナにて紹介しています。

 

また「ウィドゥス」のイントネーションは「ウィドゥス↑」であるとか、いいや「ウィドゥス(↓)」だとかそちらの話しもありましたが、それについては割愛させて頂きます。 

 

どうせ身に付けるなら正しい知識でCSSを身につけたいですね!

 

 

 

Webデザインの求人案件 Webデザインの求人案件

Webデザイナーやクリエイターの求人・案件情報です。
制作会社もあれば自社サービスのUIデザイン案件等、幅広く掲載しています。