「height」や「width」など何となく読めそうで、読み間違いが多いCSSのプロパティってありますよね。
そこでこのページでは、よく使うCSSプロパティ・値の正しい読み方について纏めることにしました。
僕個人としては、別に読み方なんてなんでもいいと思っていますが、中には「ん？」といった反応をする人もいると思うので、正しい読み方を知っておいても損はないと思います。
CSSのプロパティの読み方
それではアルファベット順に読み方を紹介します。
プロパティ名は英語なので、基本はその通り読めばOKです。
| プロパティ名 | 読み方 |
| animation | アニメーション |
| appearance | アピアランス |
| background | バックグラウンド |
| background-color | バックグラウンド カラー |
| background-image | バックグラウンド イメージ |
| background-position | バックグラウンド ポジション |
| background-repeat | バックグラウンド リピート |
| background-size | バックグラウンド サイズ |
| border | ボーダー |
| border-radius | ボーダー ラディウス |
| box-shadow | ボックス シャドー |
| box-sizing | ボックス サイジング |
| color | カラー |
| cursor | カーソル |
| display | ディスプレイ |
| flex | フレックス |
| float | フロート |
| font-family | フォント ファミリー |
| font-size | フォント サイズ |
| height | ハイト |
| justify-content | ジャスティファイ コンテント |
| letter-spacing | レター スペーシング |
| line-height | ライン ハイト |
| margin | マージン |
| min-height | ミン ハイト |
| min-width | ミン ウィドゥス |
| opacity | オパシティ |
| outline | アウトライン |
| overflow | オーバーフロー |
| padding | パディング |
| text-align | テキスト アライン |
| text-indent | テキスト インデント |
| transform | トランスフォーム |
| transition | トランジション |
| vertical-align | バーティカル アライン |
| visibility | ビジビリティ |
| width | ウィドゥス |
| z-index | ゼット インデックス |
この中で、よく読み間違いがあるのが「width」と「height」ですね。
widthを「ワイドス」と読んでしまったり、heightを「ヘイト」と読んでしまったりする人も結構います。
CSSの値の読み方
続いて、CSSの値の読み方について一覧で紹介します。
| 値 | 読み方 |
| absolute | アブソリュート |
| auto | オート |
| blur | ブラー |
| bold | ボールド |
| both | ボース |
| center | センター |
| collapse | コラプス |
| dashed | ダッシュトゥ |
| default | デフォルト |
| dotted | ドッティドゥ |
| em | エム |
| fixed | フィクスドゥ |
| hidden | ヒドゥン |
| inherit | インヘリット |
| inline | インライン |
| inline-block | インライン ブロック |
| none | ノーン |
| relative | レラティブ |
| rem | レム |
| solid | ソリッド |
| space-between | スペース ビットウィーン |
| statice | スタティック |
| visible | ビジブル |
