スプレッドシートの埋め込みをレスポンシブで表示させる方法！

グーグルのスプレッドシートのグラフを作ってウエブで公開したものの、スマホのサイズがはみ出してしまうと悩んでいるかと思います。

私も色々試してみましたがうまくいかず、悩みましたがパソコン用とスマホ用に分けることで下記のようにうまくいきました。（パソコンとスマホで両方で確認していただけると分かるかと思います。）

今回、パソコンとスマホ表示を切り替えることでグラフをレスポンシブに表示する方法をご紹介します。

この記事の執筆者：ユウ, 博士 Ph.D.

大阪大学大学院卒業。外資系IT企業でマネージャーとして勤務。スマートフォン、サーバー、AI、自動車に使用されるデバイスを開発。グーグルやクアルコムに採用。これまで行ってきた仕事で奨励賞やGrand Awardを受賞。運営しているサイトで役に立つ情報を発信中（年間5万PV）。電気工事士。安全衛生推進委員会委員長として社員の健康と安全を向上。FAST WING運営者情報

パソコンとスマホ用の2種類のグラフを用意
切り替え判断のコードを追加
CSSの切り替えコード追加
まとめ

パソコンとスマホ用の2種類のグラフを用意

まずはじめにパソコン用のグラフとスマホ用のグラフを用意します。

左の大きいグラフがパソコン用。

右の小さい方がスマホ用です。

次にパソコン用のグラフとスマホ用のグラフのコードを下記のようにコピーします。

自分のサイトにはhtml形式でパソコン用とスマホ用のコード下記のようにペーストします。

コードはグラフ右上の三つの点をクリックすると出てきます。

<iframe width="600" height="371" seamless="" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSVcL427V1VoXe5eqv03r8X_9VNHhS_ev1bTpl7QExWh34gTtOA_TyPzAtxbjuzu0buC_JMVHgSPjU8/pubchart?oid=1275108995&format=interactive"></iframe>

<iframe width="391" height="241" seamless="" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSVcL427V1VoXe5eqv03r8X_9VNHhS_ev1bTpl7QExWh34gTtOA_TyPzAtxbjuzu0buC_JMVHgSPjU8/pubchart?oid=1646547738&format=interactive"></iframe>

切り替え判断のコードを追加

今度は下記のように<iframe の後にclass=”pc”　class=”sp”を追加します。

この記述で切り替え判断を行います。

pcがパソコン用。

spがスマホ用になります。

<iframe class="pc" width="600" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSVcL427V1VoXe5eqv03r8X_9VNHhS_ev1bTpl7QExWh34gTtOA_TyPzAtxbjuzu0buC_JMVHgSPjU8/pubchart?oid=1275108995&format=interactive"></iframe>

<iframe class="sp" width="391" height="241" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSVcL427V1VoXe5eqv03r8X_9VNHhS_ev1bTpl7QExWh34gTtOA_TyPzAtxbjuzu0buC_JMVHgSPjU8/pubchart?oid=1646547738&format=interactive"></iframe>