」のような計算式が書けるcalc()の使い方を解説。割合や単位付きの数値を加減乗除してプロパティの値を決定したい場合、CSSソース内に直接計算式が書けると装飾の柔軟さが広がります。calc()を使う書き方の例と、使い方の注意点、効かない場合の対処方法などを解説。」などが書けると、指定の柔軟さが広がります。」をそのまま値として指定できれば分かりやすくて便利でしょう。CSSの値に計算式を指定するための記述方法が、CSS3で追加されたcalc()です。今回は、そんな便利なcalc()の使い方を解説いたします。下図は、div要素で作成したボックスの横幅(widthプロパティ)に、計算式を指定してみた表示例です。上は、横幅に値「100%」を指定しています。横幅いっぱいに描画されます。1em」という計算式で指定してセンタリングした例です。横幅いっぱいの長さから1文字分(1em)だけ引いた長さが横幅になります。3」を横幅に指定した例です。「横幅の長さから1文字分を引いた長さ」を3で割った長さが横幅になります。このように、割合や単位付きの数値なども含めて加減乗除して値を決定したい場合には、CSSソース内にcalc()を使って計算式が書けるととても便利です。■CSSソース内に計算式が書けるcalc()は、既に多くのブラウザで使えるcalc()はCSS3で追加された仕様ですが、既に多くのブラウザで使用可能です。IE8では使えませんし、IE9でも部分的にしか使えませんでしたが、どちらもサポートが終了したバージョンですから考慮しなくて良いでしょう。※Edgeは全バージョンで使用可能IE以外のブラウザでは、かなり古いバージョンから使えます。Firefoxは16以上、Chromeは26以上、Safariは6.1以上、Operaは(miniを除いて)15以上で使えます。IEの後継であるEdgeは、最初のバージョン(Edge12)から使用可能です。CSSソース内で四則演算ができるcalc()の使い方calc()では、足し算「+」、引き算「-」、かけ算「*」、割り算「/」の各記号を使って計算式を記述できます。書き方は簡単で、以下のような感じで記述します。)このcalc()自体は、CSSで普段「100%」や「250px」などのような値を記述していた場所にそのまま記述できます。div要素の幅(width)や字下げ幅(text-indent)の値を計算式にしたい場合は、以下のような感じでCSSを書きます。);}計算式の記述例は以下の通りです。);「割合」に「単位付きの数値」を加えるような計算もできます。「+」記号の前後には空白が必要です。);「px」と「em」など、異なる単位の数値を混合させて計算することもできます。「-」記号の前後には空白が必要です。);ボックスを指定個数だけ横に並べたい場合などに割り算が使えると便利です。割り算では、式の右側は「何の単位も付加しない数値」である必要があります。);かけ算は、変数を併用しない限りあまり使う機会はないかもしれません。かけ算では、式の左右のどちらか一方は「何の単位も付加しない数値」である必要があります。);冒頭にも例で示しましたが、加減乗除は混合して使えます。計算順序を指定するためにカッコを使うこともできます。長さを指定する場所(width、height、margin、padding、top、leftなど)数値(整数/小数)を指定する場所(line-height、flex-grow、orderなど)時間を指定する場所(transition-durationなど)角度を指定する場所(linear-gradient、rotateなど)です。値に単位が使える場所では、計算式にも単位付きの数値を指定して計算できます。下記は、div要素に対して左側にマージンを設けるCSSソースの記述例です。);}marginプロパティには「%」を使った割合や「px」などの単位を使った数値を指定できますから、計算式内でもそれらを使って指定します。」と書いてしまうと無効になりますから注意して下さい。marginプロパティには「単位のない数値」は指定できませんから、計算式の中でも「単位のない数値」を足したり引いたりはできません(※かけ算や割り算では使えます)。0」のようにゼロに限っては単位を省略できます。」とは書けません(無効になります)。」などであれは有効です。0を足したり引いたりすることはあまりないでしょうが。値の試行錯誤の途中で一時的に数値をゼロにしてみる際などには注意して下さい。■グラデーションの指定のうち、カラーストップの位置を計算式で表す下記は、p要素に対して背景にグラデーションを指定するCSSの記述例です。15px));}プロパティの値に直接calc()を使う以外に、上記に記したlinear-gradientなどのように複数の値を取る記述で、数値1つ1つに対してcalc()を使うこともできます。上記では、背景のグラデーションとして「25%より15px手前」までは白色、「25%より15px後ろ」で緑色、「75%より15px手前」で黄色、「75%より15px後ろ」で白色になるよう指定しています。表示例は下図の通りです。値にcalc()を使って計算式を書いたとき、記述内容が効かない(無効になっている)ように見えることがあります。その際には、calc()が使用可能な場所か、calc()の書き方を間違えていないか、数値を仕様通りに記述しているかどうかなどを確認してみて下さい。以下に、確認のポイントを3つ示しておきます。演算子のプラスやマイナス記号と数値をぴったりくっつけると効かないcalc()内に足し算や引き算の式を書きたいとき、足し算を表すプラス記号「+」や引き算を表すマイナス記号「-」と、それに続く数値をぴったりくっつけてしまうと、計算式だとは認識されません。下記の(A)の書き方は正しく引き算として計算されますが、(B)の書き方では計算されません。);上記の(A)と(B)で異なるのは空白文字の有無だけです。(A)は「80%から50pxを引く」と解釈されるので正しく計算されます。(B)は、「80%という値と、-50pxという値の2つが併記されている」と解釈されるので計算されません。JavaScriptなどのスクリプトとは違って、CSSのcalc()独特の仕様なので注意して下さい。このように空白が必要なのは足し算と引き算の場合だけですが、どんな場合でも「演算子の前後は空白を入れておく」と覚えておくのが楽で良いでしょう。数値には、単位がないと効かない場所と、単位を書くと効かない場所があるcalc()内に記述する計算式では、数値に単位を付ける必要がある場合と、単位を付けてはいけない場合とがあります。calc()での計算指定が効いていないように思える場合は、計算式の中で指定している値に正しい単位を書いているかどうかを確認してみて下さい。高さを指定するheightプロパティや横幅を指定するwidthプロパティのように、対象の「長さ」を指定する値では、計算結果も「長さ」として出るように単位を付ける必要があります。600」などのように単位のない値を書いてしまうと無効です。計算式の中で使っている単位が正しいかどうかも確認して下さい。角度を指定する場面では「45deg」(45度)や「-100grad」(-100度)のように単位degやgradなどを使う必要があります。時間を指定する場面では「0.3s」(0.3秒)や「400ms」(400ミリ秒)のように単位sやmsを使う必要があります。300px」のような計算は無効です。CSSの文法では数値と単位の間に空白を挟むことはできません。px」のように数値と単位の間が開いていると無効です。これはcalc()での書き方に限らず、CSS全般で共通の仕様です。順序を指定するorderプロパティなどのように、元々「単位なしの数値」を指定しなければならないプロパティに対しては、単位なしの数値だけが使えます。3px」のような計算はできません(先述の割り算の仕様をご参照下さい)。5em」のような計算もできません(先述のかけ算の仕様をご参照下さい)。0」のように書くと無効になります。計算式の中では、長さの「0px」や時間の「0s」や角度の「0deg」などのように、ゼロにも単位が必要です。0」のように単位なしのゼロを使う必要があります(先述のかけ算の仕様をご参照下さい)。※CSSの文法では、単位を省略した「0」を指定できるのは「長さ」の場合だけです。時間を表す「0s」を「0」と表記したり、角度を表す「0deg」を「0」と表記することは、本来はできません。ブラウザによっては時間や角度に単位なしの「0」を書いても、「0s」や「0deg」だと解釈してくれるものもあります。calc()が使えるはずの場所でも効かない場合や、描画に不具合が出る場合があるCSSの文法上ではcalc()が使用可能な場所でも、ブラウザによっては効かない制限があったり、他の箇所の描画がおかしくなったりする問題があります。本稿執筆時点では、以下のような問題点が報告されていました(※)。IEでは、calc()を使うとbox-shadowが描画されなくなる。IE11では、動的に生成された内容に対しては使えない場合がある。IE11では、ネストされた(入れ子になった)式を使うと不具合が出る場合がある。小数の丸め方に違いが出るなど。IE10では、「calc()が使われたdiv要素」の子要素に対して、同じプロパティの値に「inherit」を指定するとクラッシュする。IEやEdge14未満では、transformプロパティが使われたボックスの内側では使えない。IE・Edgeでは、flexプロパティが使われたボックスの内側では使えない場合がある。IE・Edge・Firefoxでは、表のセル(table-cell)に対しては使えない。Firefox48未満では、line-height、stroke-width、stroke-dashoffset、stroke-dasharrayの各プロパティでは使えない。Safari8未満では、calc()内で「vw」や「vh」などのViewportに関する単位は使えない。(英語/下図の黄色矢印部分)calc()が使えるはずの場所でもブラウザによっては効かない場合や、描画に不具合が出る場合があるIEは11が最後のバージョンですから、IEに存在する不具合は今後も解消はされないでしょう。してもIEを対象にしなければならない場合は、上記のような記述を避けるようにするしかありません。今回は、CSSソース内で値に計算式が使えるcalc()の書き方をご紹介いたしました。計算式が使えると、指定の柔軟さが広がります。【編集部おすすめの購入サイト】ソフトバンクユーザーならYahoo!ショッピングでお買い物がおすすめ楽天市場でホームページ作成関連の書籍を見るAmazonでホームページ作成の参考書を見る※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。