CSSのプロパティ名や値の読み方まとめ

「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 ビジブル
HTML / CSSの学習におすすめの書籍【一度挫折した人にもおすすめ】 【プログラミング学習】Progateが終わった後は何をしたらいいの?HTML/CSS編

コメントを残す

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

CAPTCHA