数値から色、特定のアクションを実行する関数 (背景画像の埋め込み、要素の回転など) まで、考慮する CSS プロパティの値にはさまざまな種類があります。これらの一部は、表している正確な値を指定するために特定の単位に依存します。つまり、あなたの Box の幅を30 px、それとも30 cm、それとも30 em にしたいかということです。このガイドでは長さ、色、単純な関数などのより一般的な値に加え、度などの一般的でない単位、さらには単位なしの数値についても調べます。

前提条件: 基本的なコンピュータリテラシー、インストールされている基本的なソフトウェアファイル操作の基本的な知識、HTML の基本 (HTML の概要)、および CSS の機能の考え方 (このモジュールのこれまでの記事を調べてください)
目標: CSS プロパティの値の最も一般的な種類と関連する単位について学ぶ。

CSS には多くの値のタイプがありますが、それらの中には非常に一般的なものもあれば、めったに登場しないものもあります。この記事ではそれらすべてを網羅的にカバーすることはしません。CSS を使いこなすための道を歩むにつれて、最も役立つと思われるものだけです。この記事では、次の CSS の値について説明します。

  • 数値: 指定する長さの値。例えば要素の幅、ボーダーの太さ、フォントサイズ、指定する単位なし整数相対的な線幅またはアニメーションを実行する回数
  • パーセンテージ: 親コンテナの幅や高さ、あるいはデフォルトの font-size などを基準にして、サイズや長さを指定することもできます。これらはレスポンシブデザインを容易にするためのものです (たとえば、さまざまな画面サイズに合わせて自動的に調整される「リキッドレイアウト」の作成)
  • : 背景色、文字色などを指定します
  • 関数: 指定する背景画像またはそのグラデーション

またこのような単位の使用例が、CSS のトピックの残りの部分、および他のすべての CSS リソースで使用されていることも確認できます。あなたはすぐに慣れるでしょう。

メモ: CSS リファレンスには CSS ユニットの詳細な説明があります。単位は、山括弧で囲まれたエントリです (例:<color>)。

数値

あなたは、CSS ユニットの多くの場所で数値が使われているのを目にするでしょう。このセクションでは、最も一般的な数値クラスについて説明します。

Length and size

レイアウト、タイポグラフィなどのために、CSS では常に長さ/サイズの単位 (<length> を参照) を使用します。簡単な例を見てみましょう - まず HTML です:

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

そして今度は CSS です:

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

結果は次のとおりです。

つまりこのコードでは次のことを行っています。

  • 各段落の marginpaddingborder-width をそれぞれ5ピクセル、10ピクセル、2ピクセルに設定します。マージン/パディングの値が1つの場合は、4辺すべてが同じ値に設定されていることを意味します。ボーダー幅は border 省略形の値の一部として設定されます
  • 3つの異なる段落の width を、より大きなピクセル値に設定します。つまり、ボックスが大きくなるにつれて、ボックスの幅は広くなります
  • 3つの異なる段落の font-size をより大きなピクセル値に設定すると、テキストが大きくなるにつれて大きくなります。font-size は各グリフの高さを表します

ピクセル (px) は、他の関連設定に関係なく常に同じサイズになるため、絶対単位と呼ばれます。その他の絶対単位は次のとおりです。

  • q, mm, cm, in: 1/4ミリメートル、ミリメートル、センチメートル、またはインチ
  • pt, pc: ポイント (1インチの 1/72) もしくはピカス (12 ポイント)

おそらく、ピクセルを除いて、どれもあまり使わないでしょう。

現在の要素の font-size または viewport サイズに対する相対的な単位もあります。

  • em: 1em は現在の要素のフォントサイズ (具体的には大文字の幅 M) と同じです。CSS スタイルが適用される前に Web ブラウザによって Web ページに与えられるデフォルトの基本 font-size は16ピクセルです。1emの計算値は、デフォルトでは要素の16ピクセルです。 ただし、注意してください - フォントサイズは親からの要素によって継承されるため、親要素に異なるフォントサイズが設定されていると、em と同等のピクセルが複雑になり始める可能性があります。今はあまり心配しないでください。継承とフォントサイズについては、後の記事とモジュールで詳しく説明します。emは Web 開発で使用する最も一般的な相対単位です
  • ex, ch: それぞれ小文字xの高さ、および数値0の幅です。これらは em ほど一般的には使用されていないか、十分にサポートされていません
  • rem: rem (root em) は em と全く同じように機能しますが、デフォルトのベースの font-size と常に同じサイズになります。継承されたフォントサイズは効果がないので、em よりはるかに良いオプションのように思えますが、rem は古いバージョンの Internet Explorer では機能しません (CSS のデバッグのクロスブラウザーサポートについての詳細を参照してください)
  • vw, vh: それぞれ、ビューポートの幅の1/100、ビューポートの高さの1/100です。繰り返しますが、これらは em ほど広くはサポートされていません

相対単位を使用すると非常に便利です。フォントやビューポートのサイズに合わせて HTML 要素のサイズを変更できます。たとえば、視覚障害のあるユーザが Web サイト全体でテキストサイズを2倍にした場合でも、レイアウトは変わりません。

Unitless values

CSS の中で単位なしの数値に出くわすことがあります - これは必ずしもエラーとは限りません。たとえば、要素から余白や余白を完全に削除したい場合は、単位なしの0を使用できます。0は、前に設定された単位に関係なく0です。

margin: 0;

単位のない行の高さ

別の例は line-height で、これは要素内のテキストの各行の高さを設定します。単位を使用して特定の行の高さを設定できますが、単純な倍率として機能する単位なしの値を使用する方が簡単なことがよくあります。たとえば、次の HTML を取ります。

<p>Blue ocean silo royal baby space glocal evergreen relationship housekeeping
native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary
virtuoso granularity catalyst wow factor loop back brainstorm. Core competency 
baked in push back silo irrational exuberance circle back roll-up.</p>

そして次の CSS です:

p {
  line-height: 1.5;
}

これにより、次のような出力が得られます。

ここでの font-size は16 px です。行の高さはこれの1.5倍、つまり24 px になります。

アニメーションの回数

CSS アニメーションを使用すると、ページ上の HTML 要素にアニメーションをつけることができます。マウスオーバーしたときに段落を回転させる簡単な例を提示しましょう。この例の HTML はとても単純です。

<p>Hello</p>

CSS はもう少し複雑です。

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

ここでは、この記事では明示的には説明していませんが (<angle><time><timing-function><string> など)、いくつかの興味深い単位を見ることができます。ここで興味があるのは、animation-iteration-count: 5; という行です。これは、アニメーションがオフになったとき (この場合は段落がマウスオーバーされたとき) のアニメーションの発生回数を制御するもので、単純な単位なし整数 (コンピュータでは整数) です。

このコードから得られる結果は次のとおりです。

Percentages

パーセント値を使用して特定の数値で指定できるほとんどのものを指定することもできます。これにより、たとえば、幅が常に親コンテナの幅の一定の割合になるようにシフトするボックスを作成できます。これは、幅が特定の単位 (pxem など) の値に設定されているボックスと比較することができ、親コンテナの幅が変わっても常に同じ長さのままです。

これを説明する例を示しましょう。

まず、2つの似たようなボックスが HTML でマークアップされています。

<div>
  <div class="boxes">Fixed width layout with pixels</div>
  <div class="boxes">Liquid layout with percentages</div>
</div>

そして今度は、これらのボックスをスタイルするいくつかの CSS です

div .boxes {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

.boxes:nth-child(1) {
  background-color: red;
  width: 650px;
}

.boxes:nth-child(2) {
  background-color: blue;
  width: 75%;
}

これにより、次のような結果が得られます。

ここで両方の div に marginheightfont-sizebordercolor を適用します。それから最初の div と2番目の div に異なる background-color を与えているので、簡単に区別することができます。 最初の div の width を650 px に設定し、2番目の div の幅を75%に設定します。これにより、ビューポートのサイズが変更されても、最初のdivは常に同じ幅になります (ビューポートが画面よりも狭くなると、画面から消え始めます)。一方、ビューポートのサイズを変更しても、2番目の div の幅は変わり続けます。そのため、ビューポートのサイズは常に親の75%の幅のままになります。この場合、div の親は <body> 要素です。デフォルトでは、ビューポートの幅の100%です。

メモ: この記事が表示されているブラウザウィンドウのサイズを変更すると、この効果が実際に見られるようになります。Github にある実行可能な例でも同じことをやってみてください。

また、font-size をパーセント値で200%に設定しました。 これは期待する方法とは少し違った働きをしますが、それは理にかなっています - 繰り返しますが、この新しいサイズは em のように親のフォントサイズに比例しています。この場合、親の font-size は16 px (ページのデフォルト) なので、計算値はこれの200%、つまり32 px になります。実際には em と非常によく似た方法で機能します -  200%は基本的に2 em と同じです。

これら2つの異なるボックスレイアウトタイプは、リキッドレイアウト (ブラウザのビューポートサイズの変更に応じて移動する) と固定幅レイアウト (関係なく同じまま) と呼ばれることがよくあります。

  • 標準的なドキュメントが常に画面に収まり、さまざまなモバイルデバイスの画面サイズで見栄えがよくなるように、レイアウトを使用できます
  • 固定幅レイアウトを使用して、オンライン地図を同じサイズに保つことができます。ブラウザのビューポートは地図上をスクロールでき、一度に一定量しか表示されません。一度に表示できる量は、ビューポートの大きさによって異なります

このコースの後半では、CSS レイアウトおよびレスポンシブデザインモジュール (TBD) で、Web レイアウトについてさらに詳しく学ぶことができます。

アクティブラーニング:長さで遊ぶ

このアクティブラーニングに正しい答えはありません。さまざまな値がどのような影響を与えるのかを確認するために、.inner および .outer divの幅/高さを試してみてください。.inner divのパーセント値を試して、.outer div の幅が変化したときにそれがどのように調整されるかを確認してください。ピクセルや em などの固定値も試してください。

間違えた場合は、リセットボタンを使用していつでもリセットできます。

CSS で色を指定する方法はたくさんありますが、その中には他のものよりも最近実装されたものがあります。テキストの色、背景色、またはその他の色を指定しているかどうかにかかわらず、CSS のいたるところで同じ色の値を使用できます。

現代のコンピュータで利用可能な標準カラーシステムは24ビットであり、これは1チャネル当たり256個の異なる値 (256 x 256 x 256 = 16,777,216) を有する異なる赤、緑および青のチャネルの組み合わせによって約1670万色を表示することが可能です。

利用可能なさまざまな種類の色の値を調べてみましょう。

メモ: 以下で説明するさまざまなカラーシステム間で変換するには、カラーコンバータが必要です。HSL から RGB / RGB から HSL / Hex カラーコンバータなど、オンラインで見つけられる簡単なコンバータがたくさんあります。

Keywords

CSS で最も単純で最も古いカラータイプは color キーワードです。これらは特定の色の値を表す特定の文字列です。たとえば、次のようなコードです。

<p>This paragraph has a red background</p>
p {
  background-color: red;
}

この結果が得られます:

これは理解しやすいものですが、明白なカラープリミティブを指定することしかできません。最新の Web ブラウザで使用できるキーワードは約165種類あります - フルカラーのキーワードリストを参照してください。

おそらく作品に赤、黒、白のような純粋な色を定期的に使うでしょうが、それ以上は別の表色系を使いたいでしょう。

Hexadecimal values

次のユビキタスカラーシステムは16進数カラー、つまり16進コードです。各16進値はハッシュ/ポンド記号 (#) とそれに続く6つの16進数で構成されます。各16進数は 0 から f までの値 (15を表す)、つまり 0123456789abcdef を取ることができます。値の各ペアは、赤、緑、青のいずれかのチャンネルを表し、それぞれに使用可能な256個の値のいずれかを指定できます (16 x 16 = 256)。

そのため、例えば、このコードです:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}

以下の結果が得られます。

これらの値はもう少し複雑でわかりにくいですが、キーワードよりはるかに用途が広いです。カラースキームで使用したい任意の色を表すために16進値を使用できます。

RGB

ここで説明する3番目のスキームは RGB です。RGB 値は関数 rgb() です。これには16進値とほぼ同じ方法でのチャネル値を表す3つのパラメータが与えられます。RGB との違いは、各チャンネルが2桁の16進数ではなく0〜255の10進数で表されることです。

最後の例を書き換えて RGB カラーを使用しましょう。

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

これにより、以下の結果が得られます。

RGB システムは16進値とほぼ同じくらいサポートされています - おそらく仕事でそれらをサポートしていないブラウザに出くわすことはないでしょう。RGB 値は、16進数の値よりも間違いなく少し直感的で理解しやすいものです。

Note: なぜ「1から256」ではなく「0から255」なのでしょうか?コンピュータシステムは、1ではなく0からカウントする傾向があります。

HSL

RGB よりややサポートが不十分な HSL モデル (古いバージョンの IE ではサポートされていません) は、デザイナーの関心をが高まったことで実装されました - 赤、緑、青の値の代わりに、hsl() 関数は色相、彩度、明度の値をとります。これは1670万色を区別するために使用されますが、異なる方法で使用されます。

  1. hue: 色のベースシェード。これは0から360の間の値を取り、カラーホイールの周りの角度を表します
  2. saturation: 色はどのくらい飽和していますか?これは0〜100%の値を取ります。0は色なし (グレーの陰影として表示されます)、100%はフルカラー彩度です
  3. lightness: 色はどのくらい明るいですか?これは0から100%までの値を取ります。0は明かりがない (それは完全に黒く見える) そして100%は完全に明るくなる (それは完全に白く見える)

メモ: HSL シリンダーは、このカラーモデルの機能を視覚化するのに役立ちます。ウィキペディアの HSL と HSV の記事を参照してください。

今度は HSL カラーを使用するように例を書き換えます。

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

以下の結果が得られます。

HSL カラーモデルは、そのようなカラーモデルを扱うことに慣れているデザイナーにとって直感的です。例えば、モノクロのカラースキームで一緒に行くために色合いのセットを見つけるのに役立ちます。

/* three different shades of red*/
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA and HSLA

RGB と HSL には、それぞれ対応するモード (RGBAとHSLA) があり、表示する色だけでなく、その色の透明度も設定できます。対応する関数は、同じパラメータに0〜1の範囲の4番目の値を加えたもので、透明度、つまりアルファチャンネルを設定します。0は完全に透明、1は完全に不透明です。

別の簡単な例を見てみましょう - まずは HTML です:

<p>This paragraph has a transparent red background</p>
<p>This paragraph has a transparent blue background</p>

今度は CSS です - 段落の重なりの効果を示すために、ここでは最初の段落を下に移動して配置しています (配置の詳細については後で説明します)。

p {
  height: 50px;
  width: 350px;
}

/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}

/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

これが結果です。

透明色は、背景のブレンド、半透明の UI 要素など、より豊かな視覚効果を実現するのに非常に役立ちます。

メモ: CSS のポジショニングについてはコースの後半で説明します。

Opacity

CSS を使って透明度を指定する別の方法があります -  opacity プロパティです。特定の色の透明度を設定する代わりに、これは選択されたすべての要素とその子の透明度を設定します。繰り返しになりますが、例を見てみましょう。

<p>This paragraph is using RGBA for transparency</p>
<p>This paragraph is using opacity for transparency</p>

今度は CSS です:

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}

/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

これが結果です。

違いに注意してください -  RGBA 色を使用する最初のボックスは半透明の背景のみを持ちますが、2番目のボックスのすべてはテキストを含めて透明です。いつ使用するかについて慎重に検討する必要があります。たとえば、画像がキャプションボックスを通して表示されてもテキストが判読可能なオーバーレイ画像キャプションを作成する場合は、RGBA が便利です。一方、不透明度は、UI 要素全体が完全に表示されている状態から非表示になるまでアニメーション効果を作成する場合に便利です。

アクティブラーニング: 色で遊ぶ

このアクティブラーニングセッションにも正しい答えはありません。下にある3つのボックスの背景色の値を少しずつ重ねて表示してください。 キーワード、hex、RGB/HSL/RGBA/HSLA、および opacity プロパティを試してください。どれだけ楽しいことができるか見てください。

間違えた場合は、リセットボタンを使用していつでもリセットできます。

関数

プログラミングでは、function は開発者とコンピュータの両方で最小限の労力で繰り返しのタスクを完了するために複数回実行できるコードの再利用可能なセクションです。関数は通常 JavaScript、Python、C++ などの言語に関連付けられていますが、CSS にもプロパティ値として存在します。rgb()hsl() などを使って、Colors セクションで既に関数が動作しているのを見ています。

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

これらの関数は使用する色を計算します。

しかし、他の場所にも関数があるのが分かります。コンマで区切られた1つ以上の値を含む名前の後に括弧が付いた名前が表示されるときはいつでも、関数を扱っています。例えば:

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90% - 15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png'); 
/* create a gradient and use it as a background image */ 
background-image: linear-gradient(to left, teal, aquamarine);

より一般的な CSS 関数の1つは url() 関数表記で、ファイル ー 上に見られるように一般的にはイメージ ー を返します。線形、放射状、円錐形のグラデーションを作成する機能など、いくつかの画像の関数があります。

CSS の中で使うべき刺激的な関数がたくさんあります。

まとめ

あなたが CSS の値と単位について学ぶのを楽しんだことを望みます - これが今全く意味をなさないとしても心配しないでください。先に進むにつれて、ますます CSS 構文のこの基本的な部分の経験を得るでしょう!

このモジュール

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,