CSS

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

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

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

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

 

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