Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

【CSS】calc()関数で簡単サイズ指定

 

今回はcalc()関数についてご紹介します。
calc()関数とはCSSでサイズ指定するための関数です。
calc()関数の「calc」とは「colculation(計算)」の略称で、名前の通りサイズ指定の際に計算式が使える関数です。
この関数のすごいところは異なる単位でも計算ができるところです。
例:横幅100%から50px引くなど

使用できる計算式は以下の通りです。

  • 足し算(+)
  • 引き算(-)
  • 掛け算(*)
  • 割り算(/)

足し算・引き算よりも掛け算・割り算の方が優先されるので注意してください。

書き方はwidth・heightやfontなどのサイズ指定の箇所にcalc()を入れ、()の中に計算式を書きます。
例:width: calc(100% + 150px);
※「+」などの左右は半角スペースを入れてください。

それぞれの計算を使うとどのようになるか見てみましょう。
今回はわかりやすいように横300px ✕ 縦100pxの中に作っています。

足し算

横幅100%(今回は300px指定)から150px足したので横幅450pxになりました。

See the Pen
Untitled
by 2 (@nakagawa1213)
on CodePen.


引き算

横幅100%(今回は300px指定)から150px引いたので横幅150pxになりました。

See the Pen
Untitled
by 2 (@nakagawa1213)
on CodePen.


掛け算

横幅100%(今回は300px指定)の2倍にしたので横幅600pxになりました。

See the Pen
calc_*
by 2 (@nakagawa1213)
on CodePen.


割り算

横幅100%(今回は300px指定)の1/2にしたので横幅150pxになりました。

See the Pen
calc_/
by 2 (@nakagawa1213)
on CodePen.


複数の計算

複数の計算も可能です。
横幅100%(今回は300px指定)から50pxの2倍である100pxを引くので200pxになります。
※掛け算の方が優先されます。

See the Pen
calc_複数
by 2 (@nakagawa1213)
on CodePen.


入れ子の計算

入れ子の計算も可能です。
横幅100%(今回は300px指定)の1/4の2倍なので2/4(150px)になります。

See the Pen
calc_入れ子
by 2 (@nakagawa1213)
on CodePen.


応用

計算の仕方がわかったのでレイアウトに応用してみましょう。

幅が均等な数値に割り切れない場合

幅100%に対して3等分を指定する際に活用できます。
100%の1/3の幅の数値は33.33…となり数値を入力するのに困ります。
ですが「width: calc(100% / 3)」を指定すれば均等に3等分にしてくれます。

See the Pen
calc_3等分
by 2 (@nakagawa1213)
on CodePen.


固定幅と可変幅を並べる

例えば左右に並べたコンテンツを右は固定の幅、左は可変の幅にしたい場合に活用できます。
右に固定する幅としてwidth: 100pxを入れ、左に可変する幅としてwidth: calc(100% – 100px)を入れる。
width: calc(100% – 100px)はすべての横幅から右幅の100px分を引いた幅になります。
この方法はサイドバーを作るのにも役立ちます。

See the Pen
Untitled
by 2 (@nakagawa1213)
on CodePen.


要素を上下左右に中央揃え

要素を上下左右に中央揃えにする際にも活用できます。
方法としてpositionを使ってtop:50%;とleft:50%;を指定し、marginで微調整するかと思います。
ですがtopとleftの値にcalc(50% – 動かしたい数値);を入れればmarginを書かなくて済みます。

See the Pen
calc_center
by 2 (@nakagawa1213)
on CodePen.


フォントサイズ

フォントサイズにも使えるので大きさを微調節したいときにも活用できます。

See the Pen
calc_ font
by 2 (@nakagawa1213)
on CodePen.

まとめ

calc()関数を使うといつもよりサイズ指定が楽になるかもしれませんね!
ぜひお試しください。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. CSS Grid Layoutで複雑なレイアウトを3ステップで作成

    Web

    【CSS】Grid Layoutで複雑なレイアウトを作成

    最近、Pinterestのようなギャラリーページなどで大きさが異なる画…

  2. Web

    CodePenの使い方を極めよう

    jqueryでスライダーなど調べた際に、出てくる「CodePen」を…

  3. Web

    目指せ!positionマスター!

    レイアウトに便利なposition!ようこそ!Dreamwea…

  4. Subtle Patterns

    Web

    WEBサイトの背景などに!商用OKの無料テクスチャ素材サイト「Subtle Patterns」の紹介…

    みなさんウェブサイト作りは捗っていますでしょうか?自分はやっとトップペ…

  5. Modern Fluid Typography Editor

    Web

    簡単なCSSでフォントサイズをレスポンシブ対応にしよう!

    フォントサイズのレスポンシブ対応WEBサイトをレスポンシブ対応にす…

  6. Web

    ハンバーガーメニューはなぜ動くのか!CSSだけ& jQuery使用のコードで確認しよう

    ハンバーガーメニューとはWebサイトを見ていると、右上などにメニュ…

人気の記事

おすすめの参考書

PAGE TOP