diff options
Diffstat (limited to 'files/ja/learn/css/building_blocks/values_and_units/index.html')
| -rw-r--r-- | files/ja/learn/css/building_blocks/values_and_units/index.html | 407 |
1 files changed, 407 insertions, 0 deletions
diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.html b/files/ja/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..1ebb091ee2 --- /dev/null +++ b/files/ja/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,407 @@ +--- +title: CSS の値と単位 +slug: Learn/CSS/Building_blocks/Values_and_units +tags: + - Beginner + - CSS + - Function + - Image + - Learn + - Number + - Position + - color + - length + - percentage + - units + - values +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p><font>CSS で使用されるすべてのプロパティには、特定の値または組み合わせのみが許可されており、MDN の各プロパティに関するページでは有効な値を理解するのに役立ちます。このレッスンでは、もっとも一般的な値と単位について見ていきます。</font></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS の動作概念（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS プロパティで使用されるさまざまな種類の値と単位について学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_CSS_value" name="What_is_a_CSS_value">CSS での値とは？</h2> + +<p>CSS の仕様や MDN のプロパティページでは、<code><color></code> や <code><length></code> のような角括弧で囲まれた値を見つけることができます。<code><color></code> の値がその特定のプロパティとして妥当なとき、ここではそのプロパティの妥当な色を表していることを意味しています。具体的な値は <code><a href="/ja/docs/Web/CSS/color_value"><color></a></code> のリファレンスページを参照してください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <em>データタイプ </em>を参照する CSS の値を確認しましょう。これは、基本的に交換可能です — データタイプとして参照する、CSS であなたが見るものは装飾のための値を示しています。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: CSS の値は<>括弧で示すことが多く、CSS のプロパティによって違います(例えば{{cssxref("color")}} プロパティや <a href="/ja/docs/Web/CSS/color_value"><color></a> データタイプがあります)。CSS のデータタイプ型と HTML の要素は違いますので、混乱しないでください。両方とも<>括弧を使います — しかしそれらを使用するコンテキストは全く異なります。</p> +</div> + +<p>次の例では、キーワードを使用して章立ての色を設定し、かつ背景色を <code>rgb()</code> 関数を使って指定します。:</p> + +<pre class="brush: css notranslate"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>CSS の値は指定可能なサブ値の集合を定義します。これは、<code><color></code> が妥当な箇所では、異なる種類の色の値、キーワード、16進数、<code>rgb()</code> 関数などで設定できるかどうか考える必要はありません。あなたのブラウザーがサポートしていると仮定できる、<em>あらゆる</em> 利用可能な <code><color></code> の値が指定できます。MDN のページはそれぞれのブラウザーがサポートしている値の情報を提供します。例えば、<code><a href="/ja/docs/Web/CSS/color_value"><color></a></code> のページには、ブラウザーの互換性のセクションがあり、サポートされているそれぞれの種類を見られます。</p> + +<p>ここでは見ることが多いいくつかのタイプの値や単位を確認しましょう。また例のさまざまな値を変えて試しましょう。</p> + +<h2 id="Numbers_lengths_and_percentages" name="Numbers_lengths_and_percentages">数値・長さ・割合</h2> + +<p>CSS では数値データ型をいくつかみるでしょう。次のものは数値に分類されています。:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">データタイプ</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/ja/docs/Web/CSS/integer"><integer></a></code></td> + <td><code><integer></code> (整数)は、<code>1024</code> や <code>-55</code> のようなすべての整数です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/CSS/number"><number></a></code></td> + <td><code><number></code> (数)は 10進数です。小数点のあるものとないものがあります。例えば、<code>0.255</code>、<code>128</code> や <code>-1.2</code> です。</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td><code><dimension></code> (寸法)は <code><number></code> に付属するものです。例えば、<code>45deg</code>, <code>5s</code>, それに <code>10px</code> です。<code><dimension></code> には <code><a href="/ja/docs/Web/CSS/length"><length></a></code> (長さ), <code><a href="/ja/docs/Web/CSS/angle"><angle></a></code> (角度), <code><a href="/ja/docs/Web/CSS/time"><time></a></code> (時間), さらに <code><a href="/ja/docs/Web/CSS/resolution"><resolution></a></code> (解像度)型があります。<a href="/ja/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/CSS/percentage"><percentage></a></code></td> + <td><code><percentage></code> (パーセント)は他の値との割合を表します。例えば、<code>50%</code>. この値は常に他の量との相対比です。例えば、ある要素の長さは、その親要素の長さが関連しています。</td> + </tr> + </tbody> +</table> + +<h3 id="Lengths" name="Lengths">Lengths(長さ)</h3> + +<p>数値型でもっともよく遭遇するのは、<code><length></code>です。例えば、<code>10px</code> (ピクセル) や <code>30em</code> です。CSS で使用される長さの種類は二つに分けられます。relative(相対)と absolute(絶対)です。この違いを理解することは非常に重大です。</p> + +<h4 id="Absolute_length_units" name="Absolute_length_units">絶対長の単位</h4> + +<p>次の単位はすべて <strong>absolute</strong> length units(絶対的な長さの単位) です。この単位は、他の長さとの関係で決まりません。一般的にこの単位は常に同じサイズと考えられます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">名前</th> + <th scope="col">換算</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centimeters センチメートル</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Millimeters ミリメートル</td> + <td>1mm = 1/10 cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarter-millimeters 1/4 ミリメートル</td> + <td>1Q = 1/40 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Inches インチ</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas パイカ</td> + <td>1pc = 1in の 1/6</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Points ポイント</td> + <td>1pt = 1in の 1/72</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Pixels ピクセル</td> + <td>1px = 1in の 1/96</td> + </tr> + </tbody> +</table> + +<p>これらの値は印刷には便利ですが、画面出力には向いていません。私たちは、スクリーン上の長さに、例えば <code>cm</code> (センチメートル)を使いません。よく使用するのは <code>px</code> (pixels/ピクセル)になります。</p> + +<h4 id="Relative_length_units" name="Relative_length_units">相対長の単位</h4> + +<p>Relative length units (相対的な長さの単位) は、何かとの比較によってサイズが決まります。それは、例えば、親要素のフォントサイズかもしれませんし、ビューポート(画面幅)かもしれません。この相対的な長さ単位はが便利なのは、それを作成するときにいくつかの点に注意して、そのページ内のテキストのサイズや他の要素の相対的なサイズで作成したときです。次の表にウェブ開発で便利な単位を紹介します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">関係先</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>親要素のフォントサイズ.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>その要素のフォントの文字 "x" の高さ</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>その要素のフォントの文字 "0" の幅</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>ルート要素のフォントサイズ</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>その要素の line-hight プロパティと同じ</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>ビューポート幅の 1%</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>ビューポート高さの 1%</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>ビューポート幅と高さの小さい方の 1%</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>ビューポート幅と高さの大きい方の 1%</td> + </tr> + </tbody> +</table> + +<h4 id="Exploring_an_example" name="Exploring_an_example">試してみる</h4> + +<p>次の例で、絶対的な長さの単位と相対的な長さの単位の振る舞いの違いを確認しましょう。最初のボックスには {{cssxref("width")}} がピクセル単位で指定されています。 <span class="tlid-translation translation" lang="ja"><span title="">絶対単位なので、この幅は他の何が変わっても同じままです。</span></span></p> + +<p>二番目のボックスは相対的な長さの単位の、ビューポート幅に関連した <code>vw</code> を使用しています。この値は、ビューポート幅と関連しており、10vw は ビューポート幅の 10% にあたります。もしブラウザー幅を変化させた場合、このボックスのサイズは変化します。しかし、このページは <code><a href="/ja/docs/Web/HTML/Element/iframe"><iframe></a></code> に埋め込んであるため、次の例は動作しません。この動作を確認するには、<a href="https://mdn.github.io/css-examples/learn/values-units/length.html">このリンクをブラウザーの別タブで開いて、例を確認してください。</a></p> + +<p>三番目のボックスは <code>em</code> 単位を使います。この単位はフォントサイズに関連しています。<code>1em</code> にあたるフォントサイズ設定は {{htmlelement("div")}}で指定してあります。これは<code>.wrapper</code> クラスがあります。 <span class="tlid-translation translation" lang="ja"><span title="">この値を1.5emに変更すると、すべての要素のフォントサイズが増加しますが、最後の項目のみ width がフォントサイズに相対的であるため、最後の項目のみが広くなります。</span></span></p> + +<p>上の手順を行った後で、これらの値を変更してどのようにふるまうかを確認してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_and_rems" name="ems_and_rems">em と rem</h4> + +<p><code>em</code> と <code>rem</code> は開発者がボックスやテキストまですべてのサイズを変更するときによく遭遇する相対的な長さの単位です。これらがどのように動作するか、どのように違いがあるかを理解しましょう。特に<a href="/ja/docs/Learn/CSS/Styling_text">スタイルテキスト</a> や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>のようなより複雑なテーマを扱うようになったときに価値があります。以下の例は、デモを提供しています。</p> + +<p>この HTML はネストしたリストの組です。全部で 3 つのリストがあり、どちらも同じ HTML です。唯一異なるのは、最初のものは <em>ems </em>クラスを持っており、二つ目のものは <em>rems</em> クラスを持っていることです。</p> + +<p>始めるにあたって、<code><html></code> 要素のフォントサイズを 16px に指定しました。</p> + +<p><strong>要約すると、em 単位は活字で言えば「私の親要素のフォントサイズ」を意味します。</strong><code>ems</code> の <code>class</code> を持つ {{htmlelement("ul")}} 内の {{htmlelement("li")}} 要素は、親要素からサイズを受け取ります。そのため、入れ子の各レベルは、それぞれのフォントサイズが <code>1.3em</code> (親のフォントサイズの1.3倍)に設定されているため、徐々に大きくなっていきます。</p> + +<p><strong>要約すると、この rem 単位は活字でいえば、「ルート要素のフォントサイズ」を意味します。</strong>(rem は"root em"を意味します) この <code>rems</code> の <code>class</code> を持つ {{htmlelement("ul")}} の内部の {{htmlelement("li")}} 要素はルート要素(<code><html></code>)からサイズ情報を取得します。 これは、ネストの各レベルが大きくなり続けないことを意味します。</p> + +<div title="ただし、CSSで<html> font-sizeを変更すると、その他のすべて（remサイズとemサイズの両方のテキスト）が相対的に変更されることがわかります。">ただし、CSSで <code><html></code> の <code>font-size</code> を変更すると、その他のすべて（ <code>rem</code> サイズと <code>em</code> サイズの両方のテキスト）が相対的に変更されることがわかります。</div> + +<div title="ただし、CSSで<html> font-sizeを変更すると、その他のすべて（remサイズとemサイズの両方のテキスト）が相対的に変更されることがわかります。"></div> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="Percentages" name="Percentages">Percentages(パーセント)</h3> + +<p>多くの場合、percentage (パーセント)は length(長さ)と同じ方法で使用します。percentages のあるものは、ある他の値との相対的な値を設定します。例えば、あなたがある要素の <code>font-size</code> に percentage を設定した場合、その親要素の <code>font-size</code> のパーセントを意味します。もしある <code>width</code> の値に percentage を使用した場合、その親要素の <code>width</code> のパーセントに設定されます。</p> + +<p>次の例では二つのパーセントでサイズ指定したボックスと、ピクセルでサイズ指定したボックスがあり、これらはそれぞれ同じクラス名を持っています。これは、それぞれ 200px と 40% の幅に設定されています。</p> + +<p>ここで異なるのは、二番目のボックスは 400 ピクセル幅のラッパーの内側にあることです。200px で指定したボックスは、一番目と二番目が同じ幅になっています。しかし、二番目の 40%指定したボックスは違います。二番目のボックスは 400 ピクセルの 40% の幅になります。最初のものよりかなり狭くなっています。</p> + +<p><strong>ラップするボックスの幅またはパーセントの値を変更してその影響を確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>次の例はフォントサイズをパーセントで指定しています。それぞれの <code><li></code> は 80% の <code>font-size</code> です。そのため、ネストしたリストはその親のサイズを継承するため、徐々にフォントサイズが小さくなっています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>注意: 多くの値には length(長さ) と percentage(パーセント)の両方を受け付けますが、中には length しか受け付けないものもあります。どのような値が受け付けられるかを確認するには、MDN プロパティリファレンスページを参照してください。許可される値が <code><a href="/ja/docs/Web/CSS/length-percentage"><length-percentage></a></code> の場合は length と percentage の両方を使用できます。しかし許可される値が <code><length></code> の場合、percentage は使用できません。</p> + +<h3 id="Numbers" name="Numbers">Numbers(数)</h3> + +<p>一部の値は、単位のない数値を受け入れます。 単位のない数値を受け入れるプロパティの例は、要素の不透明度（透明度）を制御する <code>opacity</code> プロパティです。 このプロパティは、<code>0</code>（完全に透明）〜 <code>1</code>（完全に不透明）の数値を受け入れます。</p> + +<p><strong>この下の例を見てください。<code>opacity</code> を <code>0</code> から <code>1</code> までの間の数に変えて、この箱とそのコンテンツがどのよう表示されるかを確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: CSS で値として数を使用する場合、その値を引用符で囲んではなりません。</p> +</div> + +<h2 id="Color" name="Color">色</h2> + +<p>CSS で色を指定する方法はたくさんありますが、その中には最近実装されたものもあります。テキストの色を指定する場合でも、背景の色を指定する場合でも、CSSではどこでも同じ色の値を使うことができます。</p> + +<p>最近のコンピューターで利用できる標準的な色のシステムは 24 ビットです。これは赤、緑、青のチャンネルでそれぞれ 256 の値を持てるため、およそ 1670万色 (256 x 256 x 256 = 16,777,216) の色を指定できることになります。CSS で色を指定するさまざまな方法を見てみましょう。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: このチュートリアルでは、普通のブラウザーがサポートしている、標準的な色の指定方法を見ていきます。他にも方法がありますが、それらはサポートされていないこともあり、標準的な方法ではありません。</p> +</div> + +<h3 id="Color_keywords" name="Color_keywords">カラーキーワード</h3> + +<p>この学習の章や MDN でもよく例を見る方法にカラーキーワードがあります。これは色を指定する方法で非常に単純で理解しやすいものです。カラーキーワードは、その色の名前そのものを入力するだけです。このカラーキーワードのリストは <code><a href="/ja/docs/Web/CSS/color_value"><color></a></code> の値のページで確認できます。</p> + +<p><strong>下の練習で別のカラーキーワードを試して、それがどのように作用するのか確認してください。</strong></p> + +<h3 id="Hexadecimal_RGB_values" name="Hexadecimal_RGB_values">16進数 RGB</h3> + +<p>次のカラーの値の種類は、あたながよく遭遇する 16進数を使うものです。それぞれの 16進数の値には、ハッシュ記号(#) に続いて、6 個の 16進数の数が続きます。この数には、0 から f までの 16 個の文字を使用します。(ここで f は 15 に相当) — つまり <code>0123456789abcdef</code> を使用します。この値の二文字はそれぞれ赤、緑、青のカラーチャンネルの値を表しています。そのため、16 x 16 = 256 つまり、それぞれのチャンネルに 256通りの値を指定できます。</p> + +<p>これらの値は少し複雑で、わかりにくいものです。しかし、16進数はキーワードより多くの用途で使用されます。あなたのカラースキームで表す、好きな色を 16進数で表現できるのです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>もう一度、値を変更させてどのように色が変化するか確認しましょう。</strong></p> + +<h3 id="RGB_and_RGBA_values" name="RGB_and_RGBA_values">RGB と RGBA</h3> + +<p>第三の方法として、RGB を説明します。RGB の値は関数 <code>rgb()</code> に渡して使います。この関数は、3 つのパラメータを受け取り、それぞれ、赤、緑、青のチャンネルの色の値として扱います。ちょうど 16進数での表記とよく似ています。RGB は 2 つの 16進数で表すのと違い 0 から 255 の 10進数の数で指定します。こちらの方が少しわかりやすいです。</p> + +<p>最後の表記を書き直して、RGB で表現してみましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>また、RGBA カラー方式もあります。これは、RGB カラー方式とまったく同じ方法で、RGB で表すすべての値を使用できます。しかし、RGBA は 4 つのパラメータをとり、4番目のパラメータは色のアルファチャンネル、つまり色の不透明度(または透明度)を表します。この 4番目のパラメータの値が <code>0</code> のとき完全な透明を表し、<code>1</code> のとき完全な不透明を表します。その間の値を指定してさまざまなレベルの透明度を指定できます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 色でアルファチャンネルを設定することと、より前に学んだ、{{cssxref("opacity")}} プロパティで設定することの違いに注意しましょう。opacity プロパティで設定した場合、その要素と要素内のすべてが透明になります。一方、RGBA カラーを指定した場合、透明になるのはそのカラーだけです。</p> +</div> + +<p>下記の例では、色付きの箱に含まれる背景画像を追加しました。そして箱にいろいろな透過値をセットしました — アルファチャンネルが小さくなるときに背景がどう表示されるか注意してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>この例では、アルファチャンネル値を変更してみて、色の出力にどう影響するのかを見ています。</strong></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ある時点で、最新のブラウザが更新され、rgba() と rgb()、そして hsl() と hsla() (後述) がお互いの純粋なエイリアスとなり、全く同じ動作をするようになりました。このため <code>rgba()</code> と <code>rgb()</code> の両方はアルファチャンネル値のある/ない色を受け入れています。上記の例の <code>rgba()</code> 関数を <code>rgb()</code> に変更して色が動作するのを見てください! どのスタイルを使うのかはあなた次第ですが、不透明と透明の色定義に別の関数を使うのは (とても) 少しブラウザーサポートが良くなって、コード内のどこで透明色を使っているかの目印になります。</p> +</div> + +<h3 id="HSL_and_HSLA_values" name="HSL_and_HSLA_values">HSL と HSLA</h3> + +<p>RGB よりサポートがちょっと少ないのが HSL 色モデルです (IE の古いバージョンではサポートされません)、これはデザイナーの関心から実装されました。赤、緑、青の代わりに、<code>hsl()</code> 関数は 色相(hue), 彩度(saturation), 輝度(lightness) の値を取り、これは約 1670 万色を、別の方法で分別するのに使われます。</p> + +<ul> + <li><strong>色相(Hue)</strong>: 色のベースとなるシェード。これは 0 から 360 の値を取り、色相環の角度を表します。</li> + <li><strong>彩度(Saturation)</strong>: 色がどれだけ飽和しているか? これは 0–100% の値を取り、0 は色がなく (グレーのシェードに見える)、100% はフルカラーの飽和となります。</li> + <li><strong>(Lightness)</strong>: 色がどれだけ明るいのか? こりは 0–100% の値を取り、0 は明度がなく (完全な黒に見える)、100% はフルの明度です (完全な白となる)。</li> +</ul> + +<p>RGB の例を HSL の色に更新すると次のようになります:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>RGB に RGBA があるように、HSL には同様な HSLA があり、アルファチャンネルの指定が同様にできます。デモとして RGBA の例を HSLA 色を使うようにしたものは次の通りです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>プロジェクトでどの色の値を使っても良いです。たいていのプロジェクトではカラーパレットを決めてから、この色（と決定した色指定の方法）を、プロジェクト全体を通して使います。色モデルを混用することもできますが、一貫させるために通常はプロジェクト全体で同じものを使うのがベストです!</p> + +<h2 id="Images" name="Images">画像</h2> + +<p><code><a href="/ja/docs/Web/CSS/image"><image></a></code> データタイプは画像が妥当な値となる場合に使われます。これは <code>url()</code> 関数で指定される実際の画像ファイルか、グラデーションです。</p> + +<p>下記の例では画像とグラデーションを CSS <code>background-image</code> プロパティに使っています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><image></code> がとり得る他の値もありますが、それは新しくてブラウザーサポートが貧弱です。それについて知りたい場合、MDN の <code><a href="/ja/docs/Web/CSS/image"><image></a></code> データタイプのページを確認してください。</p> +</div> + +<h2 id="Position" name="Position">位置</h2> + +<p><code><a href="/ja/docs/Web/CSS/position_value"><position></a></code> データタイプは 2次元座標を表しており、背景画像のような項目 (<code><a href="/ja/docs/Web/CSS/background-position">background-position</a></code> にて)の位置を決めるのに使われます。これは <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, <code>center</code> のようなキーワードを取って、ボックスの上や左の隅からオフセットさせる長さの値とともに、2次元のボックスの特定の境界にアイテムを揃えます。</p> + +<p>典型的な位置の値は 2 つの値を持ち — 最初は水平位置を、2 つ目は垂直位置をセットします。1 つの軸だけの値を指定する場合、もう 1 つはデフォルトで <code>center</code> となります。</p> + +<p>次の例では、背景画像をキーワードを使ってコンテナの右端の上から 40px の位置に配置しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>この値でいろいろ遊んでみて、画像がどう移動するか見てください。</strong></p> + +<h2 id="Strings_and_identifiers" name="Strings_and_identifiers">文字列と識別子</h2> + +<p>上記の例を通じて、キーワードが値として使われる場所を見てきました (例えば、<code><color></code> キーワードの例として <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, <code>goldenrod</code>)。このキーワードをより正確に述べると、CSS が理解できる特別な値の <em>識別子</em> です。このためそれは引用符で囲まれておらず、文字列として扱われません。</p> + +<p>CSS で文字列が使われる場所もあります、例えば、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#before%E3%81%8A%E3%82%88%E3%81%B3_after%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E7%94%9F%E6%88%90">生成されたコンテンツを指定するとき</a>です。この場合、値は文字列を示すようクォートで囲まれます。下記の例ではクォートで囲まれていない color キーワードと生成されたコンテンツ文字列を一緒に使っています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="Functions" name="Functions">関数</h2> + +<p>最後に見る値は関数として知られる値です。プログラミングでは、関数とは、繰り返されるタスクを実行するのに何度も呼ばれる、開発者とコンピューター両方の手間を省いてくれる、再利用できるコードの一部分です。関数は通常 JavaScript, Python, C++のような言語と関連付けられますが、CSS にもプロパティ値として存在しています。私たちはすでに色の節で <code>rgb()</code>、 <code>hsl()</code> などの関数を見ています。ファイルから画像を返すのに使われた値 — <code>url()</code> — も関数です。</p> + +<p>従来のプログラミング言語にあるような動作をする値は CSS の <code>calc()</code> 関数です。この関数を使うと CSS 内で簡単な計算を行うことができます。特にプロジェクトの CSS を書く際に定義できない値を計算したい場合や、実行時にブラウザに計算させる必要がある場合に便利です。</p> + +<p>例えば、下記では <code>calc()</code> を使って <code>20% + 100px</code> の幅を出しています。20% は親コンテナである <code>.wrapper</code> の幅から計算され、その幅が変わると変更されます。親の 20% がいくらになるのか分からないので、この計算を事前にすることはできません。そのため代わりにブラウザーに計算してもらうよう <code>calc()</code> を使います。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事では多くをカバーしましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and unit</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ここまで最もよく見かける値と単位を一通り見てきました。<a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a> のリファレンスページで、さまざまなタイプをすべて見ることができます。多くはこのレッスンを進んでいくと出てくるでしょう。</p> + +<p>覚えておくべき重要なことは、各プロパティには許可される値の定義されたリストがあり、各値にはサブ値が何であるかを説明する定義があるということです。詳細は MDN で調べることができます。</p> + +<p>例えば、<code><a href="/ja/docs/Web/CSS/image"><image></a> </code>でもカラーグラデーションを作成できることを理解しておくと便利ですが、たぶん当たり前の知識ではないでしょう!</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> |