Googleサイトで作るグループウェア（33）ー縦スクロールのハイパーカード風CloudCardの作成ー

この記事を読んで欲しい方

Googleワークスペースを企業DXに導入したが、上手く広げられていない方
Googleワークスペースを導入しようと考えてる中小企業の方
無料のGmailやクラウドアプリだけ使っているテレワーカー
GIGAスクールなどでGoogle for Eduを導入している学校

①縦スクロールのCloudCard

前々回の記事で、CloudCardを縦スクロールにして、アンカーリンクを張るという内容をご紹介しましたが、それをちょっとデザインし直して、縦スクロール型のCloudCardを作ってみました。
詳しいアンカーリンクの作り方は、こちらを御覧ください。

こっちは縦ロール

②縦スクロールCloudCardの画面

赤い部分にアンカー（見出し設定）を絵文字の家🏠に埋め込んであります。
青い部分はリンク（目次）を挿入しています。
Card2のアンカーは実際には、背景と同じ色にして見えなくしています。
目次をクリックすると、それぞれのCardの先頭に飛びます。
また、ホームに、いつでも戻れます。

アンカー（見出し）とリンク（目次）の場所

残念ながら、目次は横には出来ませんが、基本的に縦スクロールなので縦の配置のほうが良いでしょう。
実際に縦スクロールCloudCardを使ってみると、ハイパーカードの横移動方式よりも、現在のブラウザーやタブレット環境にもマッチしていると感じます。
実際に動きを体験していただければありがたいです。
＞縦スクロールCloudCardデモ
（※いつものように、あなたの環境でそのまま動きます）