今さら聞けない!読みづらいCSSプロパティの正しい読み方

今さら聞けない!読みづらいCSSプロパティの正しい読み方

新人時代、CSSプロパティの書き方は分かっても、「…これなんて読むんだろ…?」と思うものが数多くありました。自分だけが知らないのかも…と思ってごまかしているうちにはや数年…こんな思いをしているのは自分だけじゃないはず!

ということで、今回は読みづらいCSSプロパティ(というか以前僕が間違えて読んでいたCSSプロパティ…orz)についてまとめてみました。発音見本のリンクをつけましたので不安な方は聞いてみてください!

読みづらいCSSプロパティ目次

  1. alt
  2. a href
  3. img src
  4. width
  5. height
  6. text-align
  7. vertical-align
  8. opacity
  9. visibility
  10. hidden
  11. border-collapse
  12. background-origin
  13. border-radius
  14. rgba
  15. columns
  16. linear-gradient
  17. appearance
  18. text-emphasis
  19. text-justify

1. alt

オルトと読みます。僕は以前なぜか「アラート」と読んでました。
altは「alternate(代役,代理)」の略字です。そのまんまの意味ですね。
発音はalternateのやつですので前半に注意して聞いてみてください

alternateの発音

2. a href

「a」をアンカー 「href」をエイチレフ(ハイパーレファランス) と読みます。
aは「anchor(碇)」の略です。船を留めるみたいなイメージですかね。リンク先を指定するために碇を下ろします。発音はアンカーの方のみです。
超良く使うタグですが、これをちゃんと読んでる人になかなか出会いません…(僕の周りでは)

anchorの発音

3. img src

ソースと読みます。意味を調べてみれば当たり前なんですが分からない時は「エスアールシー」って読んでましたね(笑)
もちろん「source」の略です。

sourceの発音

4. width

ウィドゥス、ウィズと読みます。よく使うのに読み方が難しいNo.1じゃないでしょうか。個人的にはダントツ1位です。発音も難しいので一度聞いてみる事をオススメします。
「with」と区別するためにわざとワイズと発音する事もあるようですが「あ〜この人間違ってる〜」って思われるのが嫌なので僕はあまり使いません。

widthの発音

5. height

ハイトと読みます。正直に告白しますとこの記事書くまで「ヘイト」と読んでました。知らなかった…お恥ずかしい…><

heightの発音

6. text-align

アラインと読みます。「g」は発音しません。僕は最初「アリグン」と読んでました!

alignの発音

7. vertical-align

バーティカル、バーチカルと読みます。

verticalの発音

8. opacity

オパシティと読みます。僕はなぜか「オパクティ」と読んでました。テキトーw

opacityの発音

9. visibility

ビジビリティと読みます。読むのも難しいですけど、スペルもよく間違えますね…たまにしか使わないからかな〜(遠い目)

visibilityの発音

10. hidden

ヒドゥンと読みます。input タグの type 属性にもあるやつです。

hiddenの発音

11. border-collapse

コラプス、コラップスと読みます。僕は「コルエイペス」と読んでましたw

collapseの発音

12. background-origin

オルジン、オールジンと読みます。もちろん僕は「オリジン」と読んでました!!

originの発音

13. border-radius

レイジアス、レイディアスと読みます。僕はず〜っとラディアスと読んでいましたがこれもなぜか一般的の様です。何ででしょうね…間違いが本物を超えてしまったのでしょうか…

radiusの発音

14. rgba

アールジービーエーと読みます。そのままですね。でも、あまのじゃくな僕は「きっと特殊な読み方があるに違いない!」と思い込み「ルジュバ」と訳のわからない呪文をとなえていましたね…今となっては良い想い出ですがww
発音見本はもちろんありませんのであしからず

15. columns

カラムと読みます。僕は「カラムン」と読んでいました。かわいいですね。ワンカラムンとかw
これもスペルをよく間違えます。nを忘れるんですよねー

columnsの発音

16. linear-gradient

グラディエント、グラジアントと読みます。これも発音が難しいので、発音見本で確認してみると良いかもです。発音見本を聞くとグレイディエントって言ってる気がする…

gradientの発音

17. appearance

アピアランス、アピアレンスと読みます。

appearanceの発音

18. text-emphasis

エンパシスと読みます。css3からのプロパティなのでまだあまり使わないですが備忘録として。

emphasisの発音

19. text-justify

ジャスティファイと読みます。絶対「ジャスティフィー」だと思ったのに…

justifyの発音

最後に

今回調べてみて、自分の読み方がまだまだ適当だったって事に気づかされました…heightはハイトなんですねー知らなかったー。
思わぬところで恥をかかぬようもっと勉強しなくてはっ!

※読み方について

今回の読み方は日本人のWeb系のデザイナーやプログラマーが使うレベルを想定して、日本で使用されるカナ読み方の中から掲載してます。決して、ネイティブの発音に近い読みを掲載しているわけではないので、ご注意を!

「メモメモ」と思ったことはSNSでシェアしよう!!
68
あわせてこちらの記事もどうぞ

“今さら聞けない!読みづらいCSSプロパティの正しい読み方” への8件のフィードバック

  1. ROA より:

    originの区切りは『or・i・gin』で、orとiの間が若干空いてる感じです。
    「オールジン」と言う方がいますが、のばすほどではないので外人さんには伝わりません。
    オルジンの方が適切です。

  2. タイガ より:

    井畑さん、はじめまして!
    タイガと申します^^

    為になる記事、ありがとうございます。

    ご自身の過去の読み方まで記載されてあり、
    楽しく拝見することができました(笑

    「href」はハイパーレファランスだったんですね。
    ヒりーフって読んでましたよ(笑

    勉強になりました!

    また訪問させていただきますね^^

    タイガ

    • 井畑 テツヤ より:

      タイガさんメッセージありがとうございます!!
      記事読んでいただき嬉しいです!!

      読み方はついついがんばって日本語読みしちゃいますよねwヒリーフって読む気持ちすごくよくわかります(笑)

      またお気軽にお越しください

  3. […] ほんっとにはじめてのHTML5 タグの読み方 CSSプロパティの正しい読み方 […]

  4. […] 今さら聞けない!読みづらいCSSプロパティの正しい読み方 | クリエイティブメモメモ […]

  5. Cafecafecafe より:

    一応、ネイティブ発音は良く知っていて、且つ、開発現場にいる自分の感想としては:
    hrefはhyper text referenceですが、レファランスよりは
    リファレンスの方が良く聞く気がします。
    background-originもオリジンの方がよく耳にします。
    radiusをレイディアスとするなら、gradientもグレイディエントで
    良い(ネイティブに近くする)と思いますが、日本の開発現場なら
    ラディアス、グラディエントで良い気がします(aを「ア」読み)。
    phはf発音になるので、emphasisはエンファシスになると思います。
     
    …まぁ、現場の言い出しっぺの発音が残る気がするので、ネイティブ発音に近づける
    事を主観としないのなら、何が正しいってのも無いかもしれませんが。

  6. Kawakami より:

    hlefとありますが、hrefでは???

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です