GASのWebページのナビゲーションをBootstrapでスタイルする方法


navigation

photo credit: TheBetterDay Fine Drive CAR Navigation Q100 via photopin (license)

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

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

前回の記事はコチラ。

GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
GASユーザーのためのHTML入門、簡単なWebページの作り方をお伝えしています。今回はGASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法をお伝えします。

GASでWebページを作る際にCSSフレームワークBootstrapを導入する方法についてお伝えしました。

Bootstrapを使うと、CSSで細かくスタイル設定をしなくても、それっぽいWebページが簡単にできるようになります。

今回はそのBootstrapの威力をみていくことにしましょう。

まずは、GASのWebページのナビゲーションをBootstrapでスタイルする方法です。

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

前回までのおさらい

前回作成したところからスタートしますので、おさらいをしておきましょう。

まず、実際にWebページとして表示する内容を記述するHTMLファイル「index.html」はコチラ。

URLにアクセスがあったときに、上記のHTMLを表示するためのサーバー側の処理がこちらの「コード.gs」です。

はい、続きまして、BootstrapのCDNを指定しているだけですが、CSSのファイル「css.html」と、クライアント側JSファイル「js.html」がそれぞれコチラです。

コチラの2つのファイルはしばらくはいじりません。このままでOK。

それで、この状態でWebページを確認してみると、以下のようなページが表示されます。

Bootstrapを導入したGASのWebページ

今回は、ここをスタートとして、index.htmlに色々とちょっとした追加をすることで、Bootstrapの威力を確認していきます。

Bootstrapでナビゲーションを設定する

前述のindex.htmlの8,9行目ですが、以下のように変更をします。

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

GASのWebページでnavタグを追加

Webページの冒頭、つまりナビゲーションの部分ですが、いくつかスタイルが適用されていますね。

一つ一つ解説をしていきます。

navタグとは

まず、今回編集したHTMLの箇所ですが、全体として以下のnavタグで囲っていますね。

<nav>ナビゲーション</nav>

navタグはこの囲った範囲が「ナビゲーション」であることを表します。

ウェブサイト内の他ページへのリンクや、サイトタイトルなど、常に表示をするような主要なナビゲーションの範囲を指定するのに適しています。

ただ、navタグで囲うだけ、つまり

というコードでは、以下のような表示に。

GASのWebページのナビゲーションをnavタグで囲っただけ

…ていうか、何も変わってないですね。

これで、表示をいい感じにするためには、Bootstrapの力を借りる必要があります。

navタグをBootstrapでスタイルする

Bootstrapの力を借りてnavタグ、つまりナビゲーションのスタイルを設定するには、navタグの中に、あらかじめ指定されているclass属性を指定します。

以下のように、navbarと背景の指定、背景色という3つのclass属性を設定するのが基本です。

  • navbar:常に指定
  • 背景の指定
    • navbar-light:明るい背景
    • navbar-dark:暗い背景
  • 背景色
    • bg-*

背景色については、以下のページを参考にしてください。

Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

今回は、class属性として、navbarと、明るい背景navbar-light、そしてbg-lightを設定して、以下のようにします。

この設定をすると、以下のようにnavタグ内のナビゲーションがうっすら背景色が設定されます。

GASのWebページのナビゲーションをBootstrapでスタイル

ただ、テキストリンクが右寄せになっちゃいましたね。

ナビゲーション内のブランド名を指定する

テキストリンクですが、こちらもいい感じにしていきましょう。

「いつも隣にITのお仕事」は「ブランド名」ですもんね。

Bootstrapでは、ブランド名のスタイルを適用するためのclass属性navbar-brandというのを付与することができます。

このようにすると

GASのWebページでブランド名をBootstrapのnavbar-brandでスタイル

おお、ちょっとブランド名っぽいスタイルになりましたね。

ただ…なぜが右寄せ。

これを解決するために、アイコン画像とテキストをclass属性としてnavbar-brandを指定したタグに両方とも収めます。

今回はaタグ内に入れちゃいましょう。

こんな感じです。

これを表示すると…

GASのWebページでブランド名とアイコンをBootstrapのnavbar-brandでスタイル

おお、ブランドアイコンとブランド名が一体化した感じになりましたね。

まとめ

以上、GASのWebページのナビゲーションをBootstrapでスタイルする方法をお伝えしました。

navタグと、それに使用できるBootstrapのclass属性を紹介しました。

色々とありますが、好みのパターンをいくつか見つけて、それを使い回すのが良いかと思います。

HTMLファイルをいじるだけでスタイルできるのがBootstrapの最大の魅力ですね。

てか、今回のやつ「ナビゲーション」ってほどメニューないっすけどね…汗

次回は、レイアウト関連についてBootstrapでスタイルしていきたいと思います。

GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
GASユーザーのためのHTML入門、簡単なWebページの作り方をお伝えしています。今回は、GASとBootstrapでWebページを簡単にいい感じのレイアウトにする方法。ジャンボトロンとコンテナを使います。

どうぞお楽しみに!

連載目次: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の開発、講師、執筆などをしております。→詳しいプロフィールはコチラ ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ ★フォロー頂ければ嬉しいです。

コメント