レスポンシブウェブをつくるFontサイズとGrid Layout

このマルチデバイス時代、いろいろなデバイスに対応したウェブサイトを意識したいものです。

そして、以前より０からプログラムを書くことにハマっています。CSSもJSも0から書いてみるとその仕組や言語の特性がわかることがとてもメリットです。

しかし、ある程度の垢抜けたデザインや気の利いた関数など、他の人がつくった関数、フレームワークを使うことには多大なるメリットがあるので、使うときは潔く使うということを考えてゆく必要があるかと思います。

なので、今回はレスポンシブウェブサイトつくるときに、フレームワークを使うにせよ、活かせるポイントを３点ご紹介します。

１．「フォントサイズ」から始まるレスポンシブ

これは幾つかの勉強会や実践されている方から話を聞いて伺ったところ、まずはここから設定するようです。

・ページサイズの横幅の最大値は"vw"を使って、100vw。
・ページサイズの縦幅の最大値は"vh"を使って、100vh。
・縦幅と横幅の大きさを比較して大きいほうが"vmax"
・逆に比較して小さい方が"vmin"
・実際に指でタッチしたりするサイズの絶対値の大きさ"cm"。

それぞれこの単位を使いながらページの中でどのような文字を表示するのか、最適値を探っていきます。

例えば、縦長だったら、横長だったら、ちょうど正方形だったらなど、それぞれの場合で表示を考えていきます。（ちなみに、縦横の変動でカクカク文字の大きさが変わることは微妙にエンジニア的に恥ずかしいらしいです。）

/* VARIABLES */
:root{
  /* FONT SIZE*/
  --ty-p-s-size: calc(0.1cm + (0.4vmax - 0.4vmin)*4);
  --ty-p-m-size: calc(0.2cm + (0.4vmax - 0.4vmin)*4);
  --ty-h3-size: calc(0.3cm + (0.6vmax - 0.6vmin)*4);
  --ty-h2-size: calc(0.4cm + (0.6vmax - 0.6vmin)*4);
  --ty-h1-size: calc(0.5cm + (0.6vmax - 0.6vmin)*4);
}

.p-m {
  font-size: var(--ty-p-m-size);
  margin: 0;
  padding: 0;
}

.p-s {
  font-size: var(--ty-p-s-size);
  margin: 0;
  padding: 0;
}

h3 {
  font-size: var(--ty-h3-size);
  margin: 0;
  padding: 0;
}

h2 {
  font-size: var(--ty-h2-size);
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--ty-h1-size);
  margin: 0;
  padding: 0;
}

calc()関数は自動的にブラウザが反応して動かしてくれます。文字の大きさをそれぞれ段階的に大きくして変えていくことでどの画面になっても見やすくする計算が必要です。

２．グリッドレイアウトで柔軟に

CSSをべた書きすることを初めて最も衝撃を受け、「これなら自分にもできる！」と思わせてくれたのはGrid Layoutでした。今回は下記のようなレイアウトを作ります。ちなみに、"fr"という単位は、"fraction（分数）"の意味であり、割合にして、親要素の全体の幅（高さ）から、長さを割り出してくれます。

まずはindex.htmlの一部。ボックスがa,b,cと３つで、それぞれ上記のように配置するので、クラス名をつけています。

<div class="home">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

お次は、CSSファイル。main.cssに下記のように書いていきます。

.home {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 2fr;
}

.a {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.b {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.c {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
}

"grid-row: 1 / 2;"などを多用することでうまく当てはめていくことができます。

全体のウィンドウ幅を下記のように指定しておけば、画面にピッタリのうまくいくウェブサイトになることでしょう！

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

３．デザインガイド

こうしたサイトを構築していくときには下記のGoogle Material Designを参考にしたり、Apple Human Interface Guidelinesを参考にすると良いでしょう。

Material Design

Human Interface Guidelines | Apple Developer Documentation

ボタンの作り方、アニメーションの仕方など細かいところまで決められているます。

うまく、参考にしながらぜひレスポンシブなウェブサイトにチャレンジしてみてください！