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

CSSのwidth、height、font-size等サイズを指定できますがclac()を使うとブラウザのサイズから相対的に異なる単位でサイズや値を指定できます。
今回はclac()関数を使って簡単にエリアを3等分に分割し、ついでにブラウザサイズによってフォントサイズも変更する

Contents

エリアを3等分に分割し、ビューポート幅によってフォントサイズを変更するCSS記述
CSSにcalc()を使って簡単にエリアを3等分に分割し、ブラウザサイズによってフォントサイズも変更するHTML記述
CSSのclac()関数を使って簡単にエリアを3等分に分割し、ブラウザサイズによってフォントサイズも変更するデモページ

エリアを3等分に分割し、ビューポート幅によってフォントサイズを変更するCSS記述

※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>

CSSにcalc()を使って簡単にエリアを3等分に分割し、ブラウザサイズによってフォントサイズも変更する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>