スポンサーリンク

【実は間違ってた?】今さら聞けないCSSのプロパティ名と値の読み方

便利ツール・サービス

Webサイト作りでは基本のプログラミング言語であるCSS。

多くのプロパティやその値を普段何気なく使っていながらも、いざCSSについて人と会話しようとすると「あれ、このプロパティどうやって読むんだっけ…」とドキッとすることはありませんか?

使い方はわかるけど実は読み方に自信がないものもある…そんな方もいらっしゃるのではないでしょうか。

この記事では、頻出するプロパティやその値を中心に、改めてその読み方を確認していきます。

この記事の対象読者は以下のような方を想定しています

  • CSSをすでに習得している人
  • CSSを学んでいる途中の人

この記事を読むことで以下がわかるようになります

  • CSSプロパティとその値の読み方

CSSプロパティとは?

まず、CSSプロパティについて確認します。

CSSは以下3つのパートで構成されています。
その中で「プロパティ」はセレクタで指定された箇所に対して「何の装飾を施すかを定義」している箇所です。
「値」は各プロパティについて具体的に「どのように装飾するかを定義」しています。

今回は様々な種類のある「プロパティ」と「値」の具体的な読み方について解説していきます。

CSS自体についてもう少し詳しく復習したい!という方は以下の記事も読んでみてください^^

CSSプロパティの読み方

CSSプロパティは基本的に英語なので、基本は「英語の発音に近い形で読めばOK」です。

自分がローマ字読みをしていないか?チェックするだけでも間違いはぐっと減らせるはず。

これを意識しながら早速具体的な読み方を見ていきましょう。

寸法に関するCSSプロパティ

height

読み方ハイト
用法対象の高さを指定する

つい「ヘイト」と読みたくなるかもしれませんがそれはNG。ヘイトは英語ではhate, 嫌うという意味になってしまうので要注意です。

width

読み方ウィドゥス
用法対象の幅を指定する

ウィズという読み方もあるようですが、英語のwithと混同しやすく、あまり推奨されないようです。

line-height

読み方ラインハイト
用法行間を設定する

こちらは、先ほどのハイトの前に「ライン」が付くだけですね。日本語でも線のことはラインと読むので覚えやすいのではないでしょうか。

文字に関するCSSプロパティ

font-weight

読み方フォントウェイト
用法フォントの太さを設定する

「ワイト」ではなく「ウェイト」ですね!

text-decoration

読み方テキストデコレーション
用法テキストを装飾する(下線等をつける)

装飾のことを日本語でもデコレーションと言うので覚えやすいのではないでしょうか。

letter-spacing

読み方レタースペーシング
用法文字の間隔を指定する

これも日本語でも一般的なspace(スペース/空間)にingがついただけなので読みやすいと思います。

text-align

読み方テキストアライン
用法文字の位置揃えをする(中央揃え等)

途中のgは発音しません。また、「アリン」ではなく「アライン」である点に注意です。

text-indent

読み方テキストインデント
用法段落の一行目のインデント幅を指定する

これも日本語でも使うインデントと同じですね。

レイアウトに関するCSSプロパティ

margin

読み方マージン
用法要素のまわりの余白を設定する

これは「マーギン」ではなく「マージン」なので要注意です。

padding

読み方パディング
用法要素の内側の余白を設定する

「パッディング」や「パドイン」ではないので要注意です。

float

読み方フロート
用法要素を浮かせた状態にしてレイアウトを調整する

デザートでもおなじみのフロートと同じ発音ですね。

display

読み方ディスプレー、ディスプレイ
用法ブロック/インラインの特性を切り替える

日本語のディスプレー同じですね!

position

読み方ポジション
用法要素の位置を座標で指定する

これも日本語と全く同じです。

様々なCSSプロパティ

ここまでは特に基本的なCSSプロパティの読み方を確認してきました。

慣れている方なら知っているものが多かったのではないでしょうか?

このセクションでは、その他の様々なCSSプロパティの読み方を一気に羅列します。

ただ、読み方には諸説あるものもあります。

基本は下記表通りですが、他の読み方が採用されているケースもあるようです。プロパティの使い方とともにご自身でも調べてみてください!

animationアニメーション
backgroundバックグラウンド
background-attachmentバックグラウンドアタッチメント
background-colorバックグラウンドカラー
background-imageバックグラウンドイメージ
borderボーダー
border-styleボーダースタイル
border-bottomボーダーボトム
border-collapseボーダーコラプス
border-radiusボーラーレイディアス/ラディアス
cursorカーソル
flexフレックス
hoverホバー
opacityオパシティ
overflowオーバーフロー
requiredリクワイヤード
text-emphasisテキストエンファシス
transformトランスフォーム
text-justifyテキストジャスティファイ
vertical-alignバーティカルアライン

CSSの値の読み方

ここからは値の読み方を紹介していきます。

inline

読み方インライン
用法要素をインラインにする

block

読み方ブロック
用法要素をブロックレベルにする

relative

読み方レラティブ
用法要素の初期状態の位置を基準に配置をずらす

absolute

読み方アブソリュート
用法基準となる要素に対して配置を指定する

fixed

読み方フィックスド、フィクスド
用法要素の位置を固定する

bold

読み方ボールド
用法文字を太字にする

hidden

読み方ヒドゥン
用法対象を隠す

これは英語で発音すると「ヒデン」が近いので間違えないように要注意です。

様々なCSSの値

autoオート
centerセンター
itaricイタリック
linear-gradientリニアグラディエント
noneナン
radial-gradientラジアルグラディエント
rbgaアールビージーエー
underlineアンダーライン
validヴァリッド
visitedビジテッド

こちらも、読み方に諸説あるものもあります。例えばリニアグラディエントは「リニアグレイディアント」、ビジデットは「ヴィジティッド」と読む方もいるようです。

ただ、元の言語が英語だと考えると、「より英語っぽい発音」なのか「より日本語らしくした発音」なのかによって微妙に変わってくることがわかります。

基本の読み方をおさえつつ、多少違う読まれ方をしてもパッとわかるようにしておきたいですね。

まとめ

今回はCSSプロパティとその値の読み方をご紹介しました。

他のwebデザイナーさんと話す中で読み間違いをして恥ずかしい思いをしないよう、しっかりマスターしていきましょう!

より安心して、そして自信をもってCSSについて会話できるようになっていただければ幸いです。

この記事を書いた人
プロフィール

◎ FrankuLメンバー。
◎ 「あなたの作品、あなたと発信」をテーマにクリエイターさん、アーティストさんの作品発信のお手伝いを中心に活動しているWebクリエイター(https://shina-web.com/)
◎ 趣味はカフェに行くことと読書

便利ツール・サービス
よかったらシェアしてね
FrankuLOG|フリーランスのための羅針盤ブログ
タイトルとURLをコピーしました