プロパティに指定できる値・継承について-CSS –

指定できる値の種類

CSSで使用する各プロパティ値について紹介します。

指定できる値・継承の有無は各プロパティごとに違いますので、適用可能な値については各記事でご確認ください。

指定できる値

プロパティには初期値の他に多くの値を指定することが可能です。

プロパティによっては、値を継承する場合もありますので注意してください。
「継承」とは、親要素で指定した値が子要素にも適用
されることです。

初期値

CSSのプロパティには、あらかじめ設定されている値があり、これを「初期値」といいます。

初期値はプロパティごとに違いますので、各記事の初期値欄でご確認ください。

キーワード

プロパティごとに決まった語句で値を指定します。
例)text-alignの場合、値に「left」「center」「right」「justify」というキーワードしか指定できません。

値(キーワード)の記述

キーワードは引用符は付けずにプロパティ名の後ろに:を入れ記述します。キーワードは大文字、小文字は区別されません。つづりを間違えると適用されませんので、注意してください。

長さのサイズ値

多くのプロパティは、「20px」「2em」などのように数値に単位を付けて値を指定することができます。
プロパティによっては、「-10px」のようにマイナスの値を指定することもできます。

値(長さのサイズ値)の記述

長さのサイズ値では、「em」のような指定したセレクタのフォントサイズを基準にした相対的な単位と、「px」のように物理的な値で指定する絶対的な単位があります。
※「px」については、書籍などでは相対的な単位として説明されている場合もあります。

【相対的な単位】

em 指定したセレクタのフォントサイズ(font-sizeで指定した値)を1とする単位。指定したセレクタのfont-size値は親要素のフォントサイズまたはfontプロパティの初期値が基準となります。
ex セレクタのフォント、「小文字x(エックス)の高さ(x-height)」を1とする単位。フォントのx-height値を計算できない場合は、0.5em程度の大きさです。
ch レンダリング(表示)に使われる要素のフォントの「0」(ゼロ)の幅を1とする単位。
rem ルート要素のフォントサイズ(font-sizeの値)を1とする単位。ただし、ルートのfont-size自身へ指定する場合は、初期値が使われます。
vw 初期表示のビューポート(ブラウザウインドウ内の表示領域)の幅を100とし、その1/100を基準とする単位。
vh 初期表示のビューポート(ブラウザウインドウ内の表示領域)の高さを100とし、その1/100を基準とする単位。
vm vwまたはvhよりも小さい値を基準とする単位。

【絶対的な単位】

px ピクセル(画面のドット1つ分)を1とする単位。表示するデバイスの画面解像度に応じて見た目のサイズが変わります。
1ピクセル:1/96ptで約0.26mm
cm センチメートル
mm ミリメートル
in インチ(1インチ:約2.54cm)
pt ポイント(1ポイント:1インチの1/72で約0.35mm)
pc パイカ(1パイカ:12ptで約4.23mm)

パーセント値

数値に「%」(パーセント)の単位を付けて、他の値に対する割合で指定セレクタの値を指定します。割合の対象となる値は、プロパティごとに違います。

値(パーセント値)の記述

数値

プロパティによっては数値のみで値を指定できます。すべてのプロパティではありませんが、整数や少数、負の値を指定することもできます。

値(数値)の記述

特定のプロパティでは色を指定できます。「red」「black」などのキーワードで指定することもできますが、16進数【#FFFFFF】、10進数【rgb(255, 255, 255)】などで指定した方が多くの色を表現できます。

値(色名)の記述

キーワードで指定できる色はCSSの仕様変更ごとに改定されますので、ここではCSS1で設定された【標準の16色】のみを紹介します。

【標準の16色】

表示色 キーワード名 16進数
black #000000
navy #000080
blue #0000FF
green #008000
teal #008080
lime #00FF00
aqua #00FFFF
maroon #800000
purple #800080
olive #808000
gray #808080
silver #C0C0C0
red #FF0000
fuchsia #FF00FF
yellow #FFFF00
white #FFFFFF

URL

backgrondなどのプロパティではURLを指定することができます。

URLを指定する場合は、「url(” “)」のカッコ内にURLを絶対パスまたは相対パスで指定します。パスは引用符(”または’)で囲む場合と、囲まない場合、どちらでも指定できます。

urlの記述

角度

角度の値は、「90deg」のように数値に単位を付けて指定します。グラデーションや変形に関するプロパティの値として使用します。

値(角度値)の記述

【指定できる単位】

deg 度(角度)。0~360までの数値にdegを付けて角度を指定します。360度:円の1周。
grad グラード(グラディアン)。0~400までの数値にgradを付けて角度を指定します。100グラード:直角(90度)、400グラード:円の1周。
rad ラジアン。円弧の長さを基準に角度を表します。2π(パイ)ラジアン:円の1周。
turn ターン(回転)。1ターン:円の1周。

時間

値として時間を指定する場合は、「5s」(5秒)のように、時間(数値)に単位を付けて指定します。単位としては秒を表す「s」、ミリ秒(1/1,000秒)を表す「ms」が指定できます。

値(時間値)の記述

CSSの基本関連記事