デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2017年01月01日 CSS

CSSで四則計算!CSS calcの使い方

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

新年あけましておめでとうございます!

皆さんいかがお過ごしでしょうか?

12月に全くと言っていい程更新ができなかったため、今月からまた記事をしっかりと更新していきたいと思います!どうぞ宜しくお願いします!

新年第一弾はレスポンシブ設計のWebサイトを作る時に重宝するCSS calcというファンクションの紹介です!

パーセント指定だけじゃレイアウトが崩れてしまう...

img

パディング設定をして、パディング部分に背景で画像を設置する状況の場合、パーセント指定だと上記の画像のように背景画像が他コンテンツ部分へはみ出してしまいます。

そこで、もしCSSで例えばpadding-right:200px;の場合width:100%-200px;とかできたら便利だと思いませんか?

これができればpaddingも含めて横幅100%になるのでブラウザ幅からはみ出ることがありませんよね?

これを実現するのがcalc()ファンクションです。

(実はwidth指定しなければいいだけですし、box-sizing設定をすればwidth指定しても大丈夫なのですがcalc設定の説明のために今回は上記条件で説明をします。)

設定方法

設定方法は簡単です。

先程、上の項目で書いた

width:100%-200px;

width: calc(100% - 200px);

という書き方に変更するだけなのです。

これは、横幅の例ですが、例えばフォントサイズでも

font-size:calc(1em + 5px);

という風に記載することで、1emサイズより5px大きいフォントサイズという独特な設定が可能になります。

ただし、ここで気をつけなければいけないことは、対応していないブラウザもあるということです。

そこで、実際に導入するときは念のため以下のように設定するようにしましょう。

.font-size {
      font-size: calc(1em + 5px);
      font-size: 110%;/* IE8以下とAndroid4.3以下用 */
      font-size: -webkit-calc(1em + 5px);/* safari6.0以下用 */
      font-size: -moz-calc(1em + 5px);/* firefox15以下用 */
}

まとめ

近年CSSでできることが大幅に増えました。以前は要素に角丸をつけるだけでJSで強制的につけたりしていたものです。

CSSが高度になっていく背景には、表示速度がSEO上大きな影響を及ぼすことが理由としてあるのかもしれません。今後はさらにCSSが発展して、表示速度アップに大きく貢献してくれると思っています。そして今以上にデザインとしての画像(<img>タグ)を必要としないホームページが一般的になるのではないでしょうか。

だからこそ「CSSでこういうことってできないかな〜」と思ったときにはまず検索をしてみると実は既に実装ができるようになっているかもしれませんよ。


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

2017年12月10日コレで完結!Bootstrapの使い方3
2017年12月07日まだまだ出来ることたくさん!Bootstrapの使い方まとめ その2
2017年12月01日スマホサイト構築に便利!Bootstrapの使い方まとめ その1
  • Facebookページ
  • 公式twitterアカウント