ガジェット通信 GetNews

見たことのないものを見に行こう

サイズ指定に役立つ!CSSでcalc()を使う方法【初心者向け】

DATE:
  • ガジェット通信 GetNewsを≫

CSSで書くcalc( )の使い方について解説しています。

レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

calcファンクションとは

CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。

通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px+50pxや、3em – 1em のように四則演算を使えるようになります。

 

calcファンクションの書き方

calcファンクションの書き方は、

width: calc(100px + 50px);

font-size: calc(3em + 1em);

のように、通常のサイズ指定を行うように計算式を指定することで設定されます。

 

実際に書いてみよう

それでは実際に書いてみましょう。「calc.html」を作成して以下を記述します。

calc.html
———————————————————–

calcの使い方

body {
width: 800px;
}
.calc_div {
width: calc(100% – 500px);
height: calc(100% – 500px);
color: rgb(255, 0, 0);
}
.font {
font-size: 3em;
}
.calc_font {
font-size: calc(3em + 2em);
color: rgb(255, 0, 0);
}

ここはcalcを使っていないdivです。

ここはcalcを使っているdivです。

ここは3emを指定しているdivです。

ここはcalc(3em + 2em)を指定しているdivです。

———————————————————–

ブラウザで表示してみます。

 

それぞれ、計算されて設定されていることがわかります。

フォント調整やフォントの幅を設定する際に自動で指定することができ、便利です。

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。

カテゴリー : デジタル・IT タグ :
TechAcademyマガジンの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。