趙健の技術ノート

ITコース CSS基礎 021_値の型、単位、サイズ、色

学習 / CSS基礎 約6460文字 · 17分で読める - 回閲覧

数値型

CSSでは、異なるプロパティで異なる値が使用されます。一般的な数値型は以下の通りです：

  • 文字列：シングルクォートまたはダブルクォートで囲まれたテキスト。引用符の一貫性を確保する必要があります。
  • 数値：整数または浮動小数点数。例：1024、-100、0.255。純粋な数値を表す場合を除き、単位なしの数値の使用は避けてください。
  • 単位：単位値型。例：45deg、5s、10px。
  • パーセンテージ：パーセンテージ値型。例：50%。パーセンテージ値は通常、幅、高さなどのプロパティに使用されます。
  • 色値：16進数、RGB、RGBA、HSL、HSLAなど。適切な色表現を使用し、色のコントラストとアクセシビリティを考慮し、明るすぎる色や似すぎた色の使用を避けます。
  • キーワード：auto、initial、inheritなどの特定の意味を持つ単語。キーワードの意味と機能を理解し、正しく使用することを確認します。

単位

CSSの単位は、長さ、角度、時間、周波数などのプロパティの値を表すために使用されます。

長さの単位：

CSSでは、長さの単位は寸法と距離を表すために使用され、幅、高さ、マージン、パディングなどのさまざまなプロパティに適用できます。

相対的な長さの単位：
  • em： 親要素のフォントサイズに対する相対値。1.5emは、要素のフォントサイズが親要素のフォントサイズの1.5倍であることを意味します。
  • rem： ルート要素（html要素）のフォントサイズに対する相対値。1remはルート要素のフォントサイズと同じです。
  • ex： 通常、垂直方向の寸法に使用され、小文字の「x」の高さに対する相対値。（ほとんどのフォントで、小文字のx文字は通常、最大文字高さの半分です）

例：

.example {
  font-size: 16px;
  padding: 1.5em; /* 1emは24pxに相当 */
  margin: 2rem; /* 2remは32pxに相当 */
  height: 2ex; /* 高さはフォントサイズの半分、つまり8px、16pxに相当 */
}
絶対的な長さの単位：
  • px： ピクセルは画面上で最も基本的な単位であり、CSSで最も広く使用されている単位です。ピクセルサイズはモニターの解像度によって異なります。
  • in： インチは長さの単位で、通常モニターやその他の電子機器のサイズを表すために使用されます。1インチは96ピクセルに相当します。
  • cm： センチメートルは長さの単位で、通常物理的なオブジェクトのサイズを表すために使用されます。
  • mm： ミリメートルは長さの単位で、通常紙やその他の印刷物のサイズを表すために使用されます。
  • pt： ポイントの略で、従来の印刷術で使用される単位です。1ptは1/72インチに相当し、約0.352778ミリメートルです。
  • pc： パイカの略で、これも従来の印刷術で使用される単位です。1pcは12ptに相当し、約4.21752ミリメートル、1pcは16ピクセルに相当します。印刷スタイルシートや正確な印刷サイズが必要な場合に推奨されます。

例：

.example {
  width: 200px;
  height: 2in; /* 2インチ、192pxに相当 */
  margin: 1cm; /* 1センチメートル */
  font-size: 12pt; /* 12ポイント */
}
相対パーセンテージ単位：
  • %： パーセンテージは親要素に対するパーセンテージサイズを表します。例えば、width: 50%は要素の幅が親要素の幅の50%であることを意味します。

例：

.example {
  width: 50%; /* 幅は親要素の幅の50% */
  padding: 10%; /* パディングは要素の幅の10% */
}
ビューポート単位：
  • vw： ビューポート幅のパーセンテージ。1vwはビューポート幅の1%に相当します。
  • vh： ビューポート高さのパーセンテージ。1vhはビューポート高さの1%に相当します。
  • vmin： vwとvhのうち小さい方。
  • vmax： vwとvhのうち大きい方。

例：

.example {
  width: 50vw; /* 幅はビューポート幅の50% */
  height: 30vh; /* 高さはビューポート高さの30% */
}
角度の単位：

CSSでは、角度の単位は回転、変換などのプロパティで角度値を表すために使用されます。

deg（度）：
  • degは角度の最も一般的な単位で、円の総角度は360度です。
  • 回転、グラデーション角度などを表すために使用されます。

例：

.example {
  transform: rotate(45deg); /* 要素を45度回転 */
  background: linear-gradient(45deg, red, yellow); /* 45度のグラデーション背景 */
}
rad（ラジアン）：
  • radラジアンは円周と半径の比率で、円の総ラジアンは2πラジアンです。
  • 特定の数学関数、変換などに使用されます。

例：

.example {
  transform: rotate(1rad); /* 要素を1ラジアン回転 */
}
grad（グラジアン）：
  • gradはグラジアン単位を表します。円の総グラジアンは400グラジアンです。
  • 度数と同様に、回転、グラデーション角度などを表すために使用されます。
.example {
  transform: rotate(50grad); /* 要素を50グラジアン回転 */
}
turn（ターン）：
  • turnは完全な回転数を表し、360度に相当します。
  • 回転の周数を表すために使用されます。
.example {
  transform: rotate(0.5turn); /* 半回転、180度 */
}
時間の単位：

CSSでは、時間の単位はアニメーション、トランジション、アニメーション遅延などのプロパティで時間値を表すために使用されます。

s（秒）
  • sは秒の単位を表します。
  • アニメーションの持続時間、トランジション時間などを表すために使用されます。

例：

.base{
    width: 200px;
    height: 200px;
    background-color: #3498db;
}
.base:hover{
    background-color: #e74c3c;
}
.example{
    transition: background-color 1s ease; /* トランジションプロパティと時間を定義 */
}
ms（ミリ秒）
  • msはミリ秒の単位を表します。1秒は1000ミリ秒に相当します。
  • より精密な時間制御に使用されます。

例：

.base{
    width: 200px;
    height: 200px;
    background-color: #3498db;
}
.base:hover{
    background-color: #e74c3c;
}


.example{
    transition: background-color 2000ms ease; /* トランジションプロパティと時間を定義 */
}
周波数の単位：

CSSでは、周波数の単位は周期的なイベントの頻度を表すために使用されます。一般的な周波数単位はHz（ヘルツ）で、1秒あたりのサイクル数を表します。

Hz（ヘルツ）
  • ヘルツは周波数の最も一般的な単位で、1秒あたりのサイクル数を表します。
  • アニメーションでの振動、回転などの効果の周波数を表すために使用されます。

例：

.example {
  animation: shake 1s infinite; /* 振動周波数は1ヘルツ、無限ループ */
}
kHz（キロヘルツ）
  • キロヘルツは周波数の単位で、1秒あたり数千サイクルを表します。1 kHzは1000 Hzに相当します。
  • 音の周波数など、高周波数のシナリオで使用されます。

例：

.example {
  audio {
    frequency: 5kHz; /* 音の周波数は5キロヘルツ */
  }
}
解像度の単位：

CSSでは、解像度の単位は画像や印刷時のピクセル密度を表すために使用されます。

dpi（1インチあたりのドット数）
  • dpiは1インチあたりのドット数、つまり画像や印刷時の1インチあたりのピクセル密度を表します。
  • 印刷スタイルシートで一般的に使用され、印刷時の画像の鮮明度を決定します。

例：

.example {
  background-image: url('image.png');
  background-size: 300px 200px;
  background-resolution: 300dpi; /* 印刷時の画像のピクセル密度は300dpi */
}
dppx（1ピクセルあたりのドット数）
  • dppxは1ピクセルあたりのドット数、つまり画面上の物理ピクセルあたりのピクセル密度を表します。
  • 通常、レスポンシブデザインで異なる画面のピクセル密度に適応するために使用されます。

例：

.example {
  background-image: url('image.png');
  background-size: 300px 200px;
  background-resolution: 2dppx; /* 画像は2倍ピクセル密度の画面で表示 */
}
dpcm（1センチメートルあたりのドット数）
  • dpcmは1センチメートルあたりのドット数を表す解像度単位です。
  • 印刷スタイルシートやメディアクエリで、異なる解像度や印刷デバイスに適応するためにスタイルと画像を調整するために使用されます。

例：

.example {
  background-image: url('image.png');
  background-size: 2dpcm 3dpcm; /* 画像は水平解像度1cmあたり2ドット、垂直解像度1cmあたり3ドットで表示 */
}

サイズ

CSSのサイズは要素の寸法を制御するために使用できます。

width と height プロパティ

要素の幅と高さを設定するために使用され、一般的にピクセル（px）、パーセンテージ（%）、em、remなどの長さの単位を使用します。

例：

.example {
  width: 300px;
  height: 200px;
}
max-width と max-height プロパティ

要素の最大幅と最大高さを設定するために使用され、一般的にピクセル（px）、パーセンテージ（%）、em、remなどの長さの単位を使用します。

例：

.example {
  max-width: 100%;
  max-height: 500px;
}
min-width と min-height プロパティ：

例：

.example {
  min-width: 200px;
  min-height: 100px;
}

色

キーワードカラー

red（赤）、blue（青）、green（緑）など、いくつかの定義済みキーワードで表される色。

例：

.example {
  color: red; /* 赤 */
  background-color: blue; /* 青 */
}
16進数カラー

6桁または3桁の16進数でRGBカラーを表します。6桁形式は#RRGGBBで、RR、GG、BBはそれぞれ赤、緑、青の色値を表します。3桁形式は#RGBで、各文字が1つのカラーチャンネルを表します。

例：

.example {
  color: #ff0000; /* 赤 */
  background-color: #00f; /* 青 */
}
RGB、RGBAカラー

rgb()関数を使用して色を表し、赤、緑、青の色値を表す3つのパラメータを受け取ります。値の範囲は0-255です。 rgba()はrgb()と同様ですが、透明度を表す追加のパラメータがあり、値の範囲は0-1です。

例：

.example1 {
  color: rgb(255, 0, 0); /* 赤 */
  background-color: rgb(0, 0, 255); /* 青 */
}


.example2 {
  color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
  background-color: rgba(0, 0, 255, 0.7); /* 半透明の青 */
}
HSL、HSLAカラー

hsl()関数を使用して色を表し、色相、彩度、明度を表す3つのパラメータを受け取ります。色相の範囲は0-360、彩度と明度の範囲は0%-100%です。 hsla()はhsl()と同様ですが、透明度を表す追加のパラメータがあり、値の範囲は0-1です。

例：

.example1 {
  color: hsl(0, 100%, 50%); /* 赤 */
  background-color: hsl(240, 100%, 50%); /* 青 */
}


.example2 {
  color: hsla(0, 100%, 50%, 0.5); /* 半透明の赤 */
  background-color: hsla(240, 100%, 50%, 0.7); /* 半透明の青 */
}

RGB色対照表 (oschina.net)

ITコース HTMLコース CSSコース JavaScriptコース Javaコース コンピュータシステムとネットワーク hello css css基礎 css単位 css値の型 cssサイズ css色 css色値
共有：

コメント