calc()を利用した技術が書かれている専門書はありますでしょうか

Question

あれば教えて欲しいです。
ネットで検索はしましたが、思ったほど使いみちは少ないですね。

Comments

[Lhankor_Mhy]

「利用した技術」というのがイメージがわきませんでした。
実例が欲しい、というようなことですか？

Answer 1

書籍については「便利な使い方」という形で紹介しているものはまだ見たことがないです。
が、私はよく使うので、以下に例を挙げてみます。

ネットで検索はしましたが、思ったほど使いみちは少ないですね。

例を挙げると以下です。

/* line-heightのルールを指定。SCSSの場合は「calc(...)」の記述を変数化しています。 */
line-height: calc(1em + 10px);

/* 余白ありの3分割の横幅を指定 (display: grid;でもいいですが、IE11では専用の記述が必要なので) */
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc((100% - 20px - 20px) / 3);

/* 円の中にフォントアイコンがあるような場合。 */
/* paddingで内側の余白を指定すると若干上にズレる場合があるのでdisplay: flex;で上下左右中央配置をしたい */
.btn-circle {
  /* 子要素を上下左右中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 余計な余白が生じないようにする + 角丸の指定 */
  line-height: 1;
  letter-spacing: 0;
  border-radius: 50%;
  
  /* 文字サイズ (=アイコンのサイズ) + 左右の余白 */
  width: calc(1em + 0.75em + 0.75em); /* 文字の横幅 (=アイコンのサイズ) + 左右の余白 */
  height: calc(1em + 0.75em + 0.75em); /* 文字の高さ (=アイコンのサイズ) + 左右の余白 */
}
.btn-circle > .icon {
  /* フォントアイコン */
}

/* .containerなどラッパー要素について、ブレークポイントを使わなくてもこの記述だけでOKかもしれません。 */
.container {
  margin: 0 auto;
  width: 640px;
  max-width: calc(100vw - 15px - 15px); /* 15pxは左右の余白 */
}

/* 無理やり感がありますが.. */
/* 3行の高さを持つ要素の高さの半分だけ上方向にはみ出すような場合 (行の高さ * 3行、上下のpaddingは20px) */
top: calc(-1 * ((1em + 5px) * 3 + 20px + 20px) / 2); 

異なる単位の数字を計算するようなシチュエーションで便利なことがよくあります。

「44px」など数値だけ指定されていると、なぜその数値になっているのかわからずデザインを作るときや、デザインラフがない状況でレスポンシブ対応をしなければならないときに数字の根拠が持てないのですが、calc()を使って指定していると、悩まずに済む場合もあります。

Comments

[taka_oct092018]

new1ro様
実例を示して下さってありがとうございます。

Answer 2

とりあえずmdnは確認しましたか？

• calc() - CSS: カスケーディングスタイルシート | MDN

Comments

[taka_oct092018]

yambejp様
はい、調べました。