Googleサイトを使っていると、ページ内で横スクロールを追加したい場面が出てくることがあります。特に画像や表を横並びで表示したい時、もしくは大きなコンテンツを表示する際に便利です。この記事では、Googleサイトでページを横スクロールにする方法について解説します。
1. Googleサイトで横スクロールを使いたい理由
Googleサイトでは、デザインやレイアウトを自由に変更するのが難しい場合もありますが、横スクロールを活用することで、限られたスペースを有効に使える場合があります。例えば、ギャラリー形式の画像や、横に長い表を表示する際に有効です。
2. CSSを使って横スクロールを実現する方法
Googleサイトでは、デフォルトで横スクロールを追加するオプションはありませんが、HTML埋め込みやカスタムコードを使って簡単に実現できます。以下の手順で横スクロールを追加することができます。
ステップ1: カスタムHTMLを埋め込む
まず、Googleサイトの編集画面に移動し、「埋め込む」オプションから「埋め込みコード」を選択します。次に、以下のコードを挿入します。
<div style="overflow-x:auto; width:100%;"><table> </table></div>このコードでは、`overflow-x:auto;`というスタイルが横スクロールを有効にします。`table`タグの中にコンテンツを配置することで、横にスクロールできる範囲が作られます。
3. 画像やコンテンツを横に並べる方法
もし画像や他のコンテンツを横に並べて表示したい場合、`
<div style="display: flex; overflow-x:auto;"><img src="image1.jpg" alt="Image1" style="width:200px; margin-right:10px;"><img src="image2.jpg" alt="Image2" style="width:200px; margin-right:10px;"></div>このコードでは、`display: flex;`によって画像が横に並び、`overflow-x:auto;`によって横スクロール可能なエリアが作成されます。
4. スマートフォンとPC両方で使えるデザインにする方法
デバイスに合わせたデザインをするためには、レスポンシブデザインを使用するのが良いです。Googleサイトは自動的にレスポンシブ対応ですが、上記のコードを使用する際に、画面幅を調整することをお勧めします。例えば、`@media`クエリを使って、PCとスマートフォンでレイアウトを変えることができます。
@media only screen and (max-width: 600px) { .your-class { width: 100%; } }5. まとめ
Googleサイトで横スクロールを追加するためには、埋め込むHTMLコードをカスタマイズする必要があります。`overflow-x:auto;`を使うことで、テーブルや画像が横にスクロールできるようになります。レスポンシブデザインを意識し、PCやスマートフォンでも問題なく表示できるように調整することをお勧めします。
コメント