【CSS】『プロパティ』と『値』の読み方をまとめました

【CSS】『プロパティ』と『値』の読み方をまとめました
widthって何て読むんですか?
英語の発音だとウィスですが、わたしはウィドゥスと読んでますよー。ちょっとまとめてみますねー

よく読み間違えてしまうのを先にまとめてみました

プロパティ or 値読み方
absoluteアブソリュート
flex-wrapフレックスラップ
heightハイト
hrefエイチレフ
inheritインヘリット
initialイニシャル
justify-contentジャスティファイコンテント
justify-itemsジャスティファイアイテムズ
linear-gradientリニアグラディエント
relativeレラティブ
widthウィドゥス、ウィス

CSSのプロパティの読み方

プロパティ読み方
animationアニメーション
backgroundバックグラウンド
background-attachmentバックグラウンドアタッチメント
background-clipバックグラウンドクリップ
background-colorバックグラウンドカラー
background-imageバックグラウンドイメージ
background-originバックグラウンドオリジン
background-positionバックグラウンドポジション
background-repeatバックグラウンドリピート
background-sizeバックグラウンドサイズ
borderボーダー
border-bottomボーダーボトム
border-collapseボーダーコラプス
border-colorボーダーカラー
border-imageボーダーイメージ
border-image-outsetボーダーイメージアウトセット
border-image-repeatボーダーイメージリピート
border-image-sliceボーダーイメージスライス
border-image-sourceボーダーイメージソース
border-image-widthボーダーイメージウィドゥス
border-leftボーダーレフト
border-radiusボーダーレイディアス
border-rightボーダーライト
border-spacingボーダースペーシング
border-styleボーダースタイル
border-topボーダートップ
border-widthボーダーウィドゥス
bottomボトム
box-decoration-breakボックスデコレーションブレイク
box-flexボックスフレックス
box-flex-groupボックスフレックスグループ
box-linesボックスラインズ
box-packボックスパック
box-shadowボックスシャドウ
choicesチョイシス
clearクリア
colorカラー
column-fillカラムフィル
column-gapカラムギャップ
column-ruleカラムルール
columnsカラムス・コラムス
contentコンテント
counter-incrementカウンターインクリメント
counter-resetカウンターリセット
cursorカーソル
directionディレクション・ダイレクション
displayディスプレイ
flexフレックス
flex-directionフレックスディレクション
flex-shrinkフレックスシュリンク
flex-wrapフレックスラップ
floatフロート
fontフォント
font-familyフォントファミリー
font-sizeフォントサイズ
font-styleフォントスタイル
font-variantフォントバリアント
font-weightフォントウェイト
heightハイト
hoverホバー
hrefエイチレフ
justify-contentジャスティファイコンテント
justify-itemsジャスティファイアイテムズ
leftレフト
letter-spacingレタースペーシング
line-heightラインハイト
linkリンク
list-styleリストスタイル
list-style-imageリストスタイルイメージ
list-style-positionリストスタイルポジション
list-style-typeリストスタイルタイプ
marginマージン
margin-bottomマージンボトム
margin-leftマージンレフト
margin-rightマージンライト
margin-topマージントップ
marker-offsetマーカーオフセット
max-heightマックスヘイト
max-widthマックスウィドゥス
min-heightミンヘイト
min-widthミンウィドゥス
opacityオパシティ
optionalオプショナル
outlineアウトライン
overflowオーバーフロー
paddingパディング
padding-bottomパディングボトム
padding-leftパディングレフト
padding-rightパディングライト
padding-topパディングトップ
pauseポーズ
perspectiveパースペクティブ
positionポジション
requiredリクワイヤード
resizeリサイズ
rightライト
scrollbar-3dlight-colorスクロールバースリーディーライトカラー
scrollbar-arrow-colorスクロールバーアローカラー
scrollbar-base-colorスクロールバーベースカラー
scrollbar-darkshadow-colorスクロールバーダークシャドーカラー
scrollbar-face-colorスクロールバーフェイスカラー
scrollbar-highlight-colorスクロールバーハイライトカラー
scrollbar-shadow-colorスクロールバーシャドーカラー
scrollbar-track-colorスクロールバートラックカラー
selectionセレクション
table-layoutテーブルレイアウト
text-alignテキストアライン
text-decorationテキストデコレーション
text-emphasisテキストエンファシス
text-indentテキストインデント
text-justifyテキストジャスティファイ
text-shadowテキストシャドウ
topトップ
transformトランスフォーム
transform:matrixトランスフォーム マトリクス
transform:rotateトランスフォーム ローテート
transform:scaleトランスフォーム スケール
transform:skewトランスフォーム スキュー
transform:translateトランスフォーム トランスレート
transitionトランジション
transition-delayトランジションディレイ
transition-durationトランジションデュレーション
transition-propertyトランジションプロパティ
transition-timing-functionトランジションタイミングファンクション
transparentトランスペアレント
vertical-alignバーティカルアライン
visibilityビジビリティー
voice-familyヴォイスファミリー
white-spaceホワイトスペース
widthウィドゥス、ウィス
word-breakワードブレイク
word-wrapワードラップ
z-indexゼットインデックス
*アスタリスク
@charsetアットキャラセット
@font-faceアットフォントフェイス
@importアットインポート
@mediaアットメディア
@pageアットページ

CSSの値の読み方

読み方
absoluteアブソリュート
activeアクティブ
alphaアルファ
antialiasedアンチエイリアス
autoオート
baselineベースライン
blurブラー
blockブロック
boldボールド
bothボス
calcカルク
centerセンター
collapseコラプス
dashedダッシュトゥ
defaultデフォルト
dottedドッティド
doubleダブル
emエム
fixedフィクスド
hiddenヒドゥン
inheritインヘリット
initialイニシャル
inlineインライン
itaricイタリック
line-throughラインスロウ
linear-gradientリニアグラディエント
noneノーン
normalノーマル
radial-gradientラジアルグラディエント
rectレクト
relativeレラティブ
remレム
rgbaアールジービーエイ
ridgeリッジ
solidソリッド
space-betweenスペースビットウィーン
space-evenlyスペースイベンリー
subサブ
supサップ
superスーパー
staticスタティック
table-cellテーブルセル
underlineアンダーライン
unsetアンセット
validヴァリッド
visibleビジブル
visitedビジティッド
wrapラップ

さいごに

relativeってリレイティブって言ってましたー
読み方あってるかなってドキドキしますよねー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

11

/

21

2024

Googleさんの
おすすめ

11

/

21

2024

デザインの記事

水色デザイン
映画『アット・ザ・ベンチ』
【jQuery】スライダープラグイン「slick」実装サンプル集