PlusOne Blog

2022年3月に投稿した記事

【CSS】font-size に使われる rem とは

今回は、font-size によく使われる rem という単位について紹介します。
レスポンシブル対応には欠かせない単位になりますので、ぜひ理解して使いましょう。
 

rem とは

rem というのは root em の略になります。
すなわち、root のフォントサイズを 1rem とする単位です。
root とは html のことですので、html 要素のフォントサイズが 1rem になります。
 
例えば、html 要素のフォントサイズが「16px」のときは、1rem = 16px, 2rem = 32px, 3rem = 48px … となります。
 
html 要素のフォントサイズから相対的にサイズ指定できるのが rem になります。
 

rem を使うときは

主要なブラウザのデフォルトの文字サイズは 16px なので、そのまま rem を利用すると、
10px = 10 / 16 rem = 0.625 rem
12px = 12 / 16 rem = 0.75 rem
24px = 24 / 16 rem – 1.5 rem
と、キリの悪い数字で設定しにくいので、
 
あらかじめ

html {
  font-size: 62.5%;
}

と、ルート要素(html要素)のフォントサイズを10pxにしておきます。
 
これで、
10px = 16 / 10 rem = 1.6 rem
12px = 12 / 10 rem = 1.2 rem
24px = 24 / 10 rem – 2.4 rem
と、わかりやすくなります。

 

rem の使いかた(レスポンシブル対応)

rem は、レスポンシブル対応にとても適しています。
例えば、
720pxのスマートフォンなどの 720px では 62.5%
それ以上のサイズの時は 1.2 倍に拡大したいときは

html {
        font-size: 62.5%;
}
@media screen and (max-width: 720px) {
    html {
        font-size: 75%;
    }
}

とすれば良いのです。

 
 

 

この記事を読む

【JavaScript】手書き風グラフⅡ③

今回は、前回に続く”jsライブラリ「rawViz.js」の紹介の続きです。
前回は、基本的な記述法について説明しましたが、今回から、個々のフラフの種類の記述方法について紹介していきます。
 
今回は
 ・円グラフ(ドーナツ状)
 ・円グラフ(パイ状)
の2つについて、紹介していきます。
 
 

円グラフ(ドーナツ状)

 

new roughViz.Donut({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
 

 

 
 

円グラフ(パイ状)

 

new roughViz.BarH({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
 

 

この記事を読む

【JavaScript】手書き風グラフⅡ②

今回は、前回に続く”jsライブラリ「rawViz.js」の紹介の続きです。
前回は、基本的な記述法について説明しましたが、今回から、個々のフラフの種類の記述方法について紹介していきます。
 
今回は
 ・棒グラフ(縦)
 ・棒グラフ(横)
の2つについて、紹介していきます。
 
 

棒グラフ(縦)

 

new roughViz.Bar({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
 

 

 
 

棒グラフ(横)

 

new roughViz.BarH({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
 

 

この記事を読む

【JavaScript】手書き風グラフⅡ①

今回は、”色々な種類”の手書き風のグラフを作成するjsライブラリ「rawViz.js」を紹介します。
手書きで可愛いグラフが描画できますので、ちょっとしたアクセントに良いと思います。
 
 

ライブラリの読込

 

   <script src="https://unpkg.com/rough-viz@1.0.6"></script>

 

HTMLの記述

 

DIVタグを準備

   <div id="viz"></div>

 

JSの記述

 

new roughViz.Donut({
  element: "#viz",
  data: {
    labels: ["a", "b", "c"],
    values: [20, 10, 5]
  },
  colors: ["#0bd", "#fc2", "#f99"]
});

 

手書きグラフ

 

 

この記事を読む
記事一覧に戻る