CSSのcalc()関数でレスポンシブな3分割レイアウトと動的フォントサイズ調整の完全ガイド

Webデザインの世界では、見た目の美しさと使いやすさが重要です。そこで、CSSのcalc()関数を使ったデザインテクニックを紹介します。この関数は、サイズや値を動的に計算し、レスポンシブなデザインを実現するのに役立ちます。
今回は、特にエリアを3等分に分割し、ブラウザのサイズに合わせてフォントサイズを調整する方法を解説します。

CSSのwidth、height、font-size等サイズを指定できますがclac()を使うとブラウザのサイズから相対的に異なる単位でサイズや値を指定できます。

CSSのcalc()を使ったエリアの3等分割とフォントサイズの動的調整

CSSのcalc()関数を用いると、ビューポート（ブラウザの表示領域）の幅に応じてフォントサイズを変更できます。また、wrapクラス内の.boxクラスで領域を三分割することも可能です。
calc()でbodyタグでビューポート幅によってフォントサイズを変更される様にし、.wrapエリアを3つの.boxエリアで三分割してます。

<style type="text/css">
body{
  padding: 0;
  margin: 0;
  font-size: calc(100vw / 30);
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:15px 0 30px 0;
  font-size: 16px;
}
.wrap{
  width: 92%;
  margin: 0 auto;
}
.box{
    width: calc(100% / 3);
    float: left;
    height: 200px;
    background-color: #FFBFBF;
    text-align: center;
    border: solid 1px #FF4D4D;
    box-sizing:border-box;
    font-weight: bold;
    line-height: 200px;
}
</style>

HTMLの記述

class=”wrap”タグ内にclass=”box”タグを3つ用意しました。

<h1>ブラウザのwidth:92%のエリアを3分割し、かつブラウザサイズによって3分割したエリアのフォントサイズも変わります</h1>

<div class="wrap">
  <div class="box">BOX1</div>
  <div class="box">BOX2</div>
  <div class="box">BOX3</div>
</div>

実際のデモページ

実際にこのCSSのテクニックを用いたデモページを用意しました。以下のリンクから確認してみてください。

CSSのclac()関数を使って簡単にエリアを3等分に分割し、ブラウザサイズによってフォントサイズも変更するデモ

まとめ

CSSのcalc()関数を用いることで、ブラウザのサイズに合わせて動的にデザインを変更することが可能です。
これにより、さまざまなデバイスに対応したレスポンシブなWebデザインを実現できます。
デザイナーやエンジニアのみなさんは、このテクニックを活用して、より魅力的なWebサイトを作り上げてください。

　

※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。