From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/length/index.html | 266 +++++++++++++++++++++++++++++++++++++ 1 file changed, 266 insertions(+) create mode 100644 files/ja/web/css/length/index.html (limited to 'files/ja/web/css/length') diff --git a/files/ja/web/css/length/index.html b/files/ja/web/css/length/index.html new file mode 100644 index 0000000000..1864785e94 --- /dev/null +++ b/files/ja/web/css/length/index.html @@ -0,0 +1,266 @@ +--- +title: +slug: Web/CSS/Length +tags: + - CSS + - CSS データ型 + - CSS 値と単位 + - Layout + - Reference + - Web + - length + - ウェブ + - レイアウト +translation_of: Web/CSS/length +--- +
{{CSSRef}}
+ +

CSS の <length> データ型は、長さの値を表します。長さは {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。

+ +
+

注: {{cssxref("<percentage>")}} 値も CSS の長さに使用され、 <length> 値を受け付ける同じプロパティの一部でも使用することができますが、 <length> 値と同じものではありません。 {{cssxref("<length-percentage>")}} を参照してください。

+
+ +

構文

+ +

<length> データ型は一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 0 の後の単位は省略可能です。

+ +
+

注: 負の <length> を許容するプロパティとそうでないプロパティがあります。

+
+ +

単位

+ +

相対的な長さの単位

+ +

相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、行の高さであったり、 {{glossary("viewport")}} の寸法であったりします。

+ +
フォント関連の長さ
+ +

フォント関連の長さは、 <length> 値を特定の文字の寸法や、現在要素またはその親に影響しているフォントを表す用語で定義されます。

+ +
+

注: これらの単位、特に em と rem は、ユーザーがフォントの大きさを変更しても ページの vertical rhythm を維持するような、拡縮可能なレイアウトを作成するためによく使われます。

+
+ +
+
cap {{experimental_inline}}
+
その要素の {{Cssxref("font")}} における "cap height" （ふつうの大文字の高さ）を表します。
+
ch
+
その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。
+
+ "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。
+
em
+
その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に継承されたフォントの大きさを表します。
+
ex
+
その要素の {{Cssxref("font")}} における x-height です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは 1ex ≈ 0.5em です。
+
ic {{experimental_inline}}
+
描画に使用されるフォントにおける「水」（U+6C34）の文字の advance measure と同じです。
+
lh {{experimental_inline}}
+
使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。
+
rem
+
ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します（多くのブラウザーでは既定値は 16px ですが、ユーザー設定によって変わる可能性があります）。
+
rlh {{experimental_inline}}
+
ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。
+
+ +
ビューポートのパーセント値による長さ
+ +

ビューポートのパーセント値による長さは、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な <length> 値を定義します。ビューポートの長さは {{cssxref("@page")}} で宣言されたブロックでは無効です。

+ +
+
vh
+
ビューポートの初期値の包含ブロックにおける高さの1%と同じです。
+
vw
+
ビューポートの初期値の包含ブロックにおける幅の1%と同じです。
+
vi {{experimental_inline}}
+
初期値の包含ブロックにおける、ルート要素のインライン軸の寸法の1%と同じです。
+
vb {{experimental_inline}}
+
初期値の包含ブロックにおける、ルート要素のブロック軸の寸法の1%と同じです。
+
vmin
+
vw と vh の小さい方です。
+
vmax
+
vw と vh の大きい方です。
+
+ +

絶対的な長さの単位

+ +

絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合（印刷レイアウトなど）に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。

+ +

低解像度の端末では、px の単位が物理的な参照ピクセルを表し、その他の単位はこれを基準に定義されます。例えば 1in は 96px と定義され、これは 72pt と等しくなります。このような端末では結果的に、インチ (in)、センチメートル (cm)、ミリメートル (mm) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。

+ +

高解像度の端末では、インチ (in)、センチメートル (cm)、ミリメートル (mm) は対応する物理的な単位と同じになります。従って、 px の単位は、それ (1インチの1/96) を基準に定義されます。

+ +
+

注: たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 font-size を設定する場合には、 (em や rem のような) 相対的な単位が適しています。

+
+ +
+
px
+
1ピクセルです。画面表示では、伝統的に端末の1ピクセル (ドット) を表します。しかし、プリンターや高解像度の画面では、 CSS の1ピクセルが端末の複数ピクセルになることがります。 1px = 1in の1/96です。
+
cm
+
1センチメートルです。 1cm = 96px/2.54 です。
+
mm
+
1ミリメートルです。 1mm = 1cm の1/10です。
+
Q {{experimental_inline}}
+
1/4ミリメートルです。 1Q = 1cm の1/40です。
+
in
+
1インチです。 1in = 2.54cm = 96px です。
+
pc
+
1パイカです。 1pc = 12pt = 1in の1/6です。
+
pt
+
1ポイントです。 1pt = 1in の1/72です。
+
mozmm {{non-standard_inline}}, Firefox 59 で削除
+
実験的な単位で、表示する大きさや解像度に依存せず、正確に1ミリメートルで描画します。必要とされるのはまれですが、特にモバイル端末では有用かもしれません。
+
+ +

補間

+ +

アニメーションの場合、 <length> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられたタイミング関数によって定められます。

+ +

例

+ +

長さの単位の比較

+ +

以下のデモでは、入力欄に <length> の値 (例えば 300px, 50%, 30vw) を入力することができ、 Return を押したときにバーの長さが反映されます。

+ +

これにより、様々な長さの単位の効果を比較し対照させることができます。

+ +

HTML

+ +
<div class="outer">
+  <div class="input-container">
+    <label>長さを入力してください:</label>
+    <input type="text" id="length">
+  </div>
+  <div class="inner">
+
+  </div>
+</div>
+<div class="results">
+</div>
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+.outer {
+  width: 100%;
+  height: 50px;
+  background-color: #eee;
+  position: relative;
+}
+
+.inner {
+  height: 50px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+}
+
+.result {
+  height: 20px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+  background-color: orange;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.result code {
+  position: absolute;
+  margin-left: 20px;
+}
+
+.results {
+  margin-top: 10px;
+}
+
+.input-container {
+  position: absolute;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 50px;
+}
+
+label {
+  margin: 0 10px 0 20px;
+}
+ +

JavaScript

+ +
const inputDiv = document.querySelector('.inner');
+const inputElem = document.querySelector('input');
+const resultsDiv = document.querySelector('.results');
+
+inputElem.addEventListener('change', () => {
+  inputDiv.style.width = inputElem.value;
+
+  const result = document.createElement('div');
+  result.className = 'result';
+  result.style.width = inputElem.value;
+  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
+  resultsDiv.appendChild(result);
+
+  inputElem.value = '';
+  inputElem.focus();
+})
+ +

結果

+ +

{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#lengths', '<length>')}}{{Spec2('CSS4 Values')}}vi, vb, ic, lh, rlh の単位を追加。
{{SpecName('CSS3 Values', '#lengths', '<length>')}}{{Spec2('CSS3 Values')}}ch, rem, vw, vh, vmin, vmax, Q の単位を追加。
{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}{{Spec2('CSS2.1')}}em, pt, pc, px の単位の明示的な定義。
{{SpecName('CSS1', '#length-units', '<length>')}}{{Spec2('CSS1')}}初回定義。 em, pt, pc, px の単位の暗黙的な定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.length")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf