第84回 スマホで見やすくなるよう列幅・フォントを調整する

Googleスプレッドシートの「列を非表示」は、列のデータを消すのではなく表示だけをオフにする機能です。計算式は非表示にした列のデータを引き続き参照できますし、いつでも再表示できます。

スプレッドシートで列を非表示にすると、ウェブに公開・埋め込みした表示にも自動で反映されます。「パソコンでスプレッドシートを直接見るときは全列表示、ホームページの埋め込みではスリム表示」——という使い分けは残念ながらできません。どちらかに統一する必要があります。

列幅はGoogleスプレッドシートの列見出し境界線をドラッグして変更するか、列見出しを右クリック→「列のサイズを変更」で数値入力できます。

フォントサイズを7pt以下にすると文字が読めなくなります。スマホ実機で確認しながら調整してください。8〜9ptが読みやすさとコンパクトさのバランスがとれた目安です。

「画面サイズに応じて自動でサイズを変える」という意味です。パソコンで見ると大きく、スマホで見ると画面幅に合わせて小さくなる——というように、どの端末でも適切なサイズで表示される状態をレスポンシブといいます。

/* Googleスプレッドシート埋め込みiframeのレスポンシブ対応 */
.sheet-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet-wrap iframe {
  width: 100%;
  min-width: 600px;
  border: none;
}

overflow-x: auto は「横にはみ出た場合はスクロールバーを表示する」という指定です。iframeを完全に画面幅に収めるのではなく、横スクロールで見られるようにします。-webkit-overflow-scrolling: touch はiPhoneでのスクロールを滑らかにするための指定です。

<div class="sheet-wrap">
  <iframe
    src="https://docs.google.com/spreadsheets/d/【ID】/pubhtml?gid=【シートID】&single=true&widget=true&headers=false"
    height="500"
    frameborder="0">
  </iframe>
</div>

width="100%" は削除してCSSに移してあります。height は行数に応じて調整してください。野手シートはデータが多い場合、500〜800px程度が目安です。

これで試合後にフォームから入力するだけで、ホームページの成績表がスマホでも読みやすい形で自動更新される仕組みが完成しました。

• スマホで見づらい原因は「列数が多い」と「iframeの幅が固定されている」の2つ
• スプレッドシート側：優先度の低い列を非表示にして表示列を7〜8列に絞る——削除ではないのでいつでも再表示できる
• スプレッドシート側：列幅を40〜90pxに詰める・フォントサイズを8〜9ptに下げるとよりコンパクトになる
• WordPress側：追加CSSで overflow-x: auto を設定し、iframeを横スクロール可能なラッパーdivで囲む
• 確認はスマホ実機が最善。手元にないときはChromeのデベロッパーツール（F12）のスマホシミュレートで代用できる
• これで第10章が完結——次章（第11章）はトラブルシューティング。実際の運用でよく起きるエラーを1つずつ解決していく