mozilla

リビジョンの比較

calc

Change Revisions

リビジョン 398013:

リビジョン 398013 (編集者: ethertank / 編集日時: )

リビジョン 413103:

リビジョン 413103 (編集者: sosleepy / 編集日時: )

タイトル:
calc
calc
URL スラグ:
Web/CSS/calc
Web/CSS/calc
タグ:
"css", "CSS Reference"
"css", "CSS Reference", "CSS Référence"
内容:

リビジョン 398013
リビジョン 413103
n8      {{CSSRef}}{{translationInProgress}}{{SeeCompatTable}}n8      {{CSSRef}}{{SeeCompatTable}}
n14      CSS の <code>calc()</code> 関数は、{{Xref_csslength}} 値を用いる場所ならどn14      CSS の <code>calc()</code> 関数は、{{Xref_csslength}}、{{Xref_css
>こでも使用可能です。 <code>calc()</code> を用いる事により、対象のサイズや形状を決定する値の計算が可能となりま>frequency}}、{{Xref_cssangle}}、{{Xref_csstime}}、{{Xref_cssnumber}}
>す。>、{{Xref_cssinteger}} のいずれかの値を用いる場所ならどこでも使用可能です。 <code>calc()</cod
 >e> を用いる事により、対象のサイズや形状を決定する値の計算が可能となります。
n59        乗算n59        乗算。引数の少なくとも1つは {{Xref_cssnumber}} でなければなりません。
n65        除算。length で割る事はできません。Division. You can't divide by a lengn65        除算。右側は {{Xref_cssnumber}} でなければなりません。
>th; instead, this is used to, for example, say that you want your 
> resulting length to be a given fraction of an existing length. 
n69      式のオペランドは任意の長さの構文値にする事ができます。また、異なる単位同士の計算(※例: <code>calc(100n69      式のオペランドは任意の長さの構文値にする事ができます。また、異なる単位同士の計算(※例: <code>calc(100
>% - 20px)</code> など)も可能です。計算順序は通常の四則演算に則っており{{todo}}、計算順序を決定する為に括>% - 20px)</code> など)も可能です。計算順序は通常の四則演算に則っており、計算順序を決定する為に括弧を用いる事も出
>弧を用いる事も出来ます。>来ます。
n72      <strong>注記:</strong> 0 による除算は、構文エラーとなります。n72      <strong>注記:</strong> 0 による除算は、HTML パーサーによってエラーとなります。
n82      Positioning an object on screen with a marginn82      余白をつけてオブジェクトを画面に配置する
n85      <code>calc()</code> はマージン設定を持つボックス配置を容易にします。In this examplen85      <code>calc()</code> はマージン設定を持つボックス配置を容易にします。この例では CSS でウィンド
>, the CSS creates a banner that stretches across the window, with>ウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は 40ピクセル空けます。
> a 40-pixel gap between both sides of the banner and the edges of 
> the window: 
n101    <div>n101    <p>
102      {{CSSLiveSample("-moz-calc1.html")}} {{todo}}102      {{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_
 >margin', '100%', '60') }}
103    </div>103    </p>
n105      そのコンテナにおさまる様にフォームフィールドを自動でサイズ変更n105      フォーム項目のコンテナへの自動フィット
n108      Another use case for <code>calc()</code> is to help ensure n108      <code>calc()</code> のもう一つの用途は、フォーム項目のサイズ変更です。妥当なマージンを維持しながら
>that form fields fit in the available space, without extruding pa>、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。
>st the edge of their container, while maintaining an appropriate  
>margin. 
n117  width:  98%;                      /* fallback for browsers withn117  width:  98%;              /* calc()に非対応のブラウザ用 */
>out support for calc() */ 
118  width: -webkit-calc(100% - 1em);  /* WebKit 536.3 (Chrome 19) a118  width:  calc(100% - 1em);
>nd above, experimental */ 
119  width:         calc(100% - 1em);  /* final CSS3 compliant imple
>mentation; IE 9 and above */ 
n123  width:  130px;                 /* fallback for browsers withoutn122  width:  130px;            /* calc()に非対応のブラウザ用 */
> support for calc() */ 
124  width: -webkit-calc(100% / 6);   /* WebKit 536.3 (Chrome 19) an123  width:  calc(100% / 6);
>d above, experimental */ 
125  width:    -moz-calc(100% / 6);   /* Gecko 2.0 (Firefox 4) and a
>bove, experimental, will be dropped */ 
126  width:         calc(100% / 6);   /* final CSS3 compliant implem
>entation; Firefox 16 and IE 9, and above */ 
n132      Here, the form itself is established to use 1/6 of the avain129      ここで、フォームはウィンドウの取り得る幅の 1/6 を使うように指定しています。それから、入力項目が必ず妥当なサイズを
>lable window width. Then, to ensure that input fields retain an a>持つように再度 <code>calc()</code> を使い、コンテナの幅 - 1em の幅になるように指定します。次の HTM
>ppropriate size, we use <code>calc()</code> again to establish th>L で この CSS を使います:
>at they should be the width of their container minus 1em. Then, t 
>he following HTML makes use of this CSS: 
n142    <div>n139    <p>
143      {{CSSLiveSample("-moz-calc2.html")}} {{todo}}140      {{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit
 >_their_container', '100%', '80') }}
144    </div>141    </p>
nn207              <p>
210              19 (WebKit 536.3) {{property_prefix("-webkit")}}208                19 (WebKit 536.3) {{property_prefix("-webkit")}}<
 >br>
209                26
210              </p>
t231              19 (WebKit 536.3) {{property_prefix("-webkit")}}t231              19 (WebKit 536.3) {{property_prefix("-webkit")}}<br
 >>
232              27 (おそらく26)

前に戻る