GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法


みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

GASユーザーのためのHTML入門ということで、簡単なWebページの作り方をお伝えしています。

前回の記事はコチラ。

GASのWebページのナビゲーションをBootstrapでスタイルする方法
GASユーザーのためのHTML入門ということで、簡単なWebページの作り方をお伝えしています。今回は、GASのWebページのナビゲーション、つまりnavタグ内をBootstrapでスタイルする方法です。

Bootstrapでナビゲーションメニューのスタイルを設定する方法についてお伝えしました。

今回も、Bootstrapでいい感じのスタイルをしていきますが、テーマは「レイアウト」です。

ということで、GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法です。

では、行ってみましょう!

前回のおさらい

前回作成したHTMLファイル「index.html」はコチラです。

前回はBootstrapを使って8~13行目のnavタグ内、つまりナビゲーションメニューのスタイルの設定を行いました。

他のファイルに関しては、特にいじってないし、今日もいじりませんので、前回の記事をご参考くださいね。

Webページを表示すると以下のようになります。

GASで作成したWebページ

ですが、このWebページ。なんか左右がピッタリしすぎて窮屈な感じしますよね。

Bootstrapでは、文字とか背景のスタイルだけではなくて、レイアウトに関しても優秀な機能を簡単に利用することができます。

今回はそのうち、ジャンボトロンとコンテナについて紹介します。

Bootstrapでジャンボトロンを使う

ジャンボトロンとは

ジャンボトロンとは、Webページの主要なコンテンツを配置するボックスのことです。

つまり、Webページを開いたらドドーンとメインで表示させる部分です。

過去に一世を風靡した(?)SONYの巨大テレビを彷彿させますね。

class属性jumbotronでジャンボトロンを作る

要素にclass属性jumbotronを指定すれば、その範囲が「ジャンボトロン」としてスタイルされます。

「index.html」の14,15行目をジャンボトロンにしてあげたいので、範囲を指定するdivタグを使って以下のようにしてあげます。

これで表示すると…

GASのWebページでBootstrapのジャンボトロンを適用

おお!いい感じですね!

class属性をひとつ追加するだけですからね…なんて楽なんでしょう。

Bootstrapでコンテナを使う

コンテナとは

では、続いてその下のコンテンツの部分です。

ここは相変わらず窮屈ですね。

実は、Bootstrapではコンテンツを収容するボックスとして「コンテナ」というものを利用するのが基本となります。

Bootstrapの最大の特徴とも言えるページを段組みする便利なグリッド・システムもそうですし、「基本的にコンテンツはコンテナに入れてね」ということのようです。

class属性containerでコンテナを作る

それで、class属性containerを指定した要素内が「コンテナ」としてスタイルされます。

では、その下の部分、冒頭の16~33行目を全部divタグ内に放り込んで、そこにclass属性containerを付与してみましょう。

表示してみると…

GASのWebサイトでBootstrapのコンテナを適用

おお、いい感じになりましたね!

まとめ

以上、GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法をお伝えしました。

メインの部分はジャンボトロン、それ以外はコンテナに格納するだけで、だいぶそれっぽくなりますよね。

Bootstrapでは本当にたくさんのスタイルを利用することができますが、ここまでをベースとして、必要に応じて追加していけば良いかなと思います。

Bootstrap
The most popular HTML, CSS, and JS library in the world.

ジャンボトロンとコンテナについては、以下の記事もぜひご覧くださいね。

Bootstrapで横幅いっぱいに画像を表示しよう!ジャンボトロン(jumbotron)の設置方法
サイトのメイン画像によく使われる、横幅いっぱいのメイン画像をBootstrapで簡単設置。ジャンボトロン(jumbotron)をサンプルで詳しく解説しています。
Bootstrapでコンテンツを中央寄せするcontainerの役割を覚えよう!
Bootstrapでコンテンツを中央に配置する為のcontainer。レイアウトの際、多用するこのクラスについて、使用例や挙動などを詳しく解説しています。

では、次回。Webページのタイトルを設定する方法です。

GASでWebページを作るときにページのタイトルを設定する方法
GASユーザーのためのHTML入門ということで、簡単なWebページの作り方を紹介しています。今回は、GASでWebページを作るときにページのタイトルを設定するsetTitleメソッドの使い方です。

どうぞお楽しみに!

連載目次:GASユーザーのための初めてのHTML・CSS講座

Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ!
  1. Google Apps Scriptで最も簡単なWebページを作成して公開する
  2. GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
  3. GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説
  4. 【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
  5. 【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方
  6. GASのWebページにGoogleドライブ内の画像を挿入する方法
  7. GASで作ったWebページにCSSでスタイルをする最初の一歩
  8. 【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
  9. 【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
  10. GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
  11. GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
  12. GASのWebページのナビゲーションをBootstrapでスタイルする方法
  13. GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
  14. GASでWebページを作るときにページのタイトルを設定する方法
  15. GASで作成したWebページにファビコンを設定する方法
  16. GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定

The following two tabs change content below.
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ ★フォロー頂ければ嬉しいです。

コメント