From ac6320529399c8bb95d01822800d20d42a9c0d64 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 12 Sep 2021 10:09:00 +0900 Subject: CSS/calc() を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/09/12 時点の英語版に同期 --- files/ja/web/css/calc()/index.html | 165 ------------------------------------- 1 file changed, 165 deletions(-) delete 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 deleted file mode 100644 index d0287f7873..0000000000 --- a/files/ja/web/css/calc()/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -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