グーグル・キーワード・ランキング

2018年8月29日に本ウェブサイトをアップロードして直ぐから、グーグルにてキーワード「モバイル ウェブ デザイン レイアウト」(red lines)、途中から「モバイル スワイプ」(blue lines)のランキング調査を開始した。

最初の時点で「モバイル」をチューニングしてあるから、途中で入れた「モバイル スワイプ」のランキングの上昇は短期間で実行できた。

chart.jsを折れ線グラフで使ってみた。レスポンシブのセンタリングを強引に決めてみた。「position:relative」がポイントだ。<canvas>には「vh」、「vw」を使うことが出来ない。このページのようにウェブで段落とチャートを併せて表記する場合は、<div> で各々を囲んであげる必要がある。そうしないと、フォントサイズなどが設定通りに表示されないなど、少々クセがある。

chart.js のデザイン・レイアウトには単独で作りこむのが良いようだ。モバイルではモーダルで開いてズームさせれば良いだろう。

参考：レスポンシブ・チャート