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/calc()/index.html | 167 +++++++++++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/ja/web/css/calc()/index.html (limited to 'files/ja/web/css/calc()/index.html') diff --git a/files/ja/web/css/calc()/index.html b/files/ja/web/css/calc()/index.html new file mode 100644 index 0000000000..2eb9293a88 --- /dev/null +++ b/files/ja/web/css/calc()/index.html @@ -0,0 +1,167 @@ +--- +title: calc() +slug: Web/CSS/calc() +tags: + - CSS + - CSS 値と単位 + - CSS 関数 + - calc + - ウェブ + - リファレンス + - レイアウト +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

CSS の calc() 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, {{cssxref("<integer>")}} が利用できる場所ならば使用できます。

+ +
{{EmbedInteractiveExample("pages/css/function-calc.html")}}
+ + + +

構文

+ +
/* プロパティ: calc(式) */
+width: calc(100% - 80px);
+ +

calc() 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な演算子の優先順位の規則を使用します。

+ +
+
+
+
加算です。
+
-
+
減算です。
+
*
+
乗算です。引数の少なくとも1つは {{cssxref("<number>")}} でなければなりません。
+
/
+
除算です。右側は {{cssxref("<number>")}} でなければなりません。
+
+ +

式のオペランドは任意の {{cssxref("<length>")}} 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。

+ +

メモ

+ + + +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

余白をつけてオブジェクトを画面に配置する

+ +

calc() はマージン設定を持つボックス配置を容易にします。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は40ピクセル空けます。

+ +
.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;
+}
+
+ +
<div class="banner">これはバナーです！</div>
+ +

{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}

+ +

フォーム項目のコンテナーへの自動フィット

+ +

calc() はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。

+ +

いくつかの CSS を見てみましょう。

+ +
input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

ここで、フォームはウィンドウの取り得る幅の1/6を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 calc() を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。

+ +
<form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
+ +

{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}

+ +

入れ子の calc() と CSS 変数

+ +

calc() で CSS 変数を使用することもできます。以下のコードを見てみてください。

+ +
.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+ +

すべての変数が展開された後、 widthC の値は calc( calc( 100px / 2) / 2) になります。この値が .foo の width プロパティに割り当てられるとき、内部にあるすべての calc() は (入れ子の深さにかかわらず) 単なる括弧になり、width プロパティの値は最終的に calc( ( 100px / 2) / 2)、すなわち 25px になります。要するに、calc() の内部にある calc() は単なる括弧と同等です。

+ +

アクセシビリティの考慮事項

+ +

calc() をテキストの大きさを制御するために使用するとき、値の一つに相対的な長さの単位を含むことを確認してください。

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

これによって、ページが拡大縮小されたときにテキストの寸法が拡大縮小されます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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