1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
---
title: calc()
slug: Web/CSS/calc()
tags:
- CSS
- CSS 値と単位
- CSS 関数
- calc
- ウェブ
- リファレンス
- レイアウト
translation_of: Web/CSS/calc()
---
<div>{{CSSRef}}</div>
<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>calc()</code></strong> 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, {{cssxref("<integer>")}} が利用できる場所ならば使用できます。</p>
<div>{{EmbedInteractiveExample("pages/css/function-calc.html")}}</div>
<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush: css no-line-numbers notranslate">/* プロパティ: calc(式) */
width: calc(100% - 80px);</pre>
<p><code>calc()</code> 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な<a href="/ja/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">演算子の優先順位の規則</a>を使用します。</p>
<dl>
<dt><code>+</code></dt>
<dd>加算です。</dd>
<dt><code>-</code></dt>
<dd>減算です。</dd>
<dt><code>*</code></dt>
<dd>乗算です。引数の少なくとも1つは {{cssxref("<number>")}} でなければなりません。</dd>
<dt><code>/</code></dt>
<dd>除算です。右側は {{cssxref("<number>")}} でなければなりません。</dd>
</dl>
<p>式のオペランドは任意の {{cssxref("<length>")}} 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。</p>
<h3 id="Notes" name="Notes">メモ</h3>
<ul>
<li><code>+</code> 演算子と <code>-</code> 演算子は前後に空白文字をつける必要があります。たとえば、 <code>calc(50% -8px)</code> と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 <code>calc(50% - 8px)</code> はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 <code>calc(8px + -50%)</code> は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。</li>
<li><code>*</code> 演算子と <code>/</code> 演算子には前後の空白文字は必要ありませんが、こちらにも空白文字を用い記述ルールに一貫性を持たせておくことは認められており、推奨されています。</li>
<li>ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。</li>
<li>自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 <code>auto</code> が指定されたものとして扱います。</li>
<li><code>calc()</code> 関数を入れ子にすることは許可されており、内側のものは単なる括弧として扱われます。</li>
</ul>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Positioning_an_object_on_screen_with_a_margin" name="Positioning_an_object_on_screen_with_a_margin">余白をつけてオブジェクトを画面に配置する</h3>
<p><code>calc()</code> はマージン設定を持つボックス配置を容易にします。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は40ピクセル空けます。</p>
<pre class="brush: css notranslate">.banner {
position: absolute;
left: 40px;
width: calc(100% - 80px);
border: solid black 1px;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
box-sizing: border-box;
}
</pre>
<pre class="brush: html notranslate"><div class="banner">これはバナーです！</div></pre>
<p>{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}</p>
<h3 id="Automatically_sizing_form_fields_to_fit_their_container" name="Automatically_sizing_form_fields_to_fit_their_container">フォーム項目のコンテナーへの自動フィット</h3>
<p><code>calc()</code> はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。</p>
<p>いくつかの CSS を見てみましょう。</p>
<pre class="brush: css notranslate">input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
</pre>
<p>ここで、フォームはウィンドウの取り得る幅の1/6を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 <code>calc()</code> を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。</p>
<pre class="brush: html notranslate"><form>
<div id="formbox">
<label>Type something:</label>
<input type="text">
</div>
</form>
</pre>
<p>{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}</p>
<h3 id="Nested_calc_with_CSS_Variables" name="Nested_calc_with_CSS_Variables">入れ子の <code>calc()</code> と CSS 変数</h3>
<p><code>calc()</code> で <a href="/ja/docs/Web/CSS/CSS_Variables">CSS 変数</a>を使用することもできます。以下のコードを見てみてください。</p>
<pre class="brush: css notranslate">.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}</pre>
<p>すべての変数が展開された後、 <code>widthC</code> の値は <code>calc( calc( 100px / 2) / 2)</code> になります。この値が .foo の width プロパティに割り当てられるとき、内部にあるすべての <code>calc()</code> は (入れ子の深さにかかわらず) 単なる括弧になり、<code>width</code> プロパティの値は最終的に <code>calc( ( 100px / 2) / 2)</code>、すなわち <code>25px</code> になります。要するに、<code>calc()</code> の内部にある <code>calc()</code> は単なる括弧と同等です。</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
<p><code>calc()</code> をテキストの大きさを制御するために使用するとき、値の一つに<a href="/ja/docs/Web/CSS/length#Relative_length_units">相対的な長さの単位</a>を含むことを確認してください。</p>
<pre class="brush: css notranslate">h1 {
font-size: calc(1.5rem + 3vw);
}</pre>
<p>これによって、ページが拡大縮小されたときにテキストの寸法が拡大縮小されます。</p>
<ul>
<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("css.types.calc")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="https://hacks.mozilla.org/2010/06/css3-calc/">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
</ul>
|
