シェア:Tweet
GASで作ったWEBサイトにスタイルシート(Bootstrap)を適用する方法
「GASでWEBサイトを作れる?実はいろいろできるみたいです」でGoogleAppsScript(GAS)でWEBサイトが作れることを紹介しました。
せっかくGASを使うのであればデータベースなどにつないでシステムぽいものを作りたくなりますが、見た目がかっこよくないとテンションもあがりません。
そこで、GASで作ったWEBサイトにスタイルシート(Bootstrap)を適用する方法を紹介します。
そもそもBootstrapとは?
WEBサイトの見た目をかっこよくするためにスタイルシート(CSS)を使います。これで、ボタンが「オレンジにするよー」とか「見出しの右側に飾りのラインを入れるよー」など決めておけば、サイト内のボタンや見出しが同じデザインになります。
でも、1つずつ決めていくのは大変です。
そこで、すでにあるスタイルシートを使うという方法があります。ちなみにこのサイトも「Materialize(https://materializecss.com/)」という外部のスタイルシートを使っています。
GASで作るWEBサイトでは、有名な「Bootstrap(https://getbootstrap.jp/)」を使います。
しかも、既存のHTMLに数行のコードを追加するだけという手軽さもおすすめのポイントです。
もちろん、完全のオリジナルを目指すのであれば全てイチから作ってもいいのですが、今回の目的はあGASでWEBサイトを作ることなので、楽ができるところは積極手に楽をしていきます。
さて、今回Bootstrapを採用した理由は・・・。
「世界で一番人気のあるフロントエンドライブラリ」と言っているので技術的な資料もたくさんあるだろうという期待です。
もちろん「Materialize」もシンプルで良いのですが日本語のドキュメントが少なく、このサイトを作るときにも結構苦労をしたので、今回は使いません。
前置きが長くなりましたが、ここからBootstrapを使えるようにしていきましょう。
Bootstrapが使えるようにする
Bootstrapを使えるようにするために、前回作ったindex.htmlのファイルを編集していきます。
今回はCDN(コンテンツデリバリネットワーク)を利用します。
普通はCSS用に1つのファイルを作るのですが、CDNを使えが必要ありません。その都度ネットワーク上にあるBootstrapのファイルを読みに行ってくれます。
ではさっそく、index.htmlのコードを編集していきましょう。今回は公式のドキュメントに沿って作っていきます。
HTMLのコード
まず、</head>を見つけます。この上に
<!--Bootstrap(CSS)--><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
を入力します。これでHTMLを読み込む時にCSSも参照してくれます。
次に</body>を見つけます。その上には
<!--Bootstrap(JS)--><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
を入力します。これは演出などに使うJavaScript用です。
では、ここまで全体コードを確認しましょう。
<!DOCTYPE html><html><head><base target="_top"><!--Bootstrap(CSS)--><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"></head><body><h1>フリーランス向け会計システム(β)</h1><p>フリーランス向けに必要な機能に絞って簡単に使える会計システムです。</p><!--Bootstrap(JS)--><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script></body></html>
せっかくスタイルシートを使うので<h1>の部分をかっこよくしてみましょう。
これもBootstrapのドキュメントの中にある”見出しを目立たせる必要がある場合”で紹介されている class="display-1" を使います。
<h1>フリーランス向け会計システム(β)</h1>
の部分を
<h1 class="display-1">フリーランス向け会計システム(β)</h1>
に書き換えましょう。これでOKです。
では「保存」ボタンを押してから「デプロイテスト」でURLにジャンプしてみましょう。
タイトルの部分のデザインが替ったのに気づきましたか?なにもしないと
こんなデザインです。他にもテーブルなどのデザインもかっこよく(+簡単に)できるので、スタイルシートの作成に時間を取りたくないときには積極的に使っていきましょう。
では、次回は動きのあるサイトを作っていきましょう。
よく読まれている記事
-
このサイトで過去に「Googleサイトを使ったWEBサイト」の作り方を紹介したことがありました。 GoogleSiteでホームページをつくろう#01:GoogleSiteで簡単にホームページが作れる GoogleSiteでホームページをつくろう#02:GoogleSit...
-
SDGsと騒がれながら、なぜパソコンはどんどん買い替えを迫られるのか?そんなことを日々考えています。挙句の果てにはWin11に対応するため、ちょっと古いパソコンは強制買い替えを迫られ「Windows10が最後っていったじゃん!」という叫びの記事もあります。 ゴニョゴニョして無理や...
-
GAS(GooleAppsScript)でスプレッドシートのデータを表示できました。次に新しいデータを入れられるようにしたいところですが、まずは「リンク」でページの移動をできるようにしましょう。 最初の画面の「追加」ボタンをおすと取引を追加する画面に移動するイメージです。 使うの...
-
GoogleBlogger(ブロガー)でオリジナルホームページを作ろう ------- 再構成した記事もあります: https://mono-kuro-palette.blogspot.com/2020/04/blogger01.html ------- Wor...
-
続いて、カルーセルを設置しましょう。カルーセルとは複数枚の画像を切り替えられるアイテムです。 絶対必要ではありませんが、ホームページのかっこよくするうえではすごく効果があるので、さっそく設置していきましょう! 画像カルーセル
-
最初に基本のアイテムを設置していきます。 Googleサイトにはたくさんのアイテムがありますので、好きなアイテムを設置していいのですが、ここでは基本的なものを紹介していきます。 下準備
-
今日は、久々のテクニカルなことをやって見ようとおもいます。そう。Instagramにちょいちょい入っている、広告をプレゼンソフトの定番「パワーポイント」で作ってみるというものです。 もちろん、個人的に広告で出すようなものもなければ、外注さんに頼めるほどの仕事もないので「っぽい」と...
-
サイトの公開ができましたが、どうにもアドレスが気に入らない!もっと短くしてくれないとかっこ悪い! そんな方にはダイナミックDNS(DDNS)に登録してアドレスを貰って、設定をすることで短いアドレスでホームページを開くことができます。 では、実際の操作方法を見ていきまし...
-
このページで以前に「Bloggerでオリジナルのホームページを作ろう」という記事を書きましたが、なんとGoogleが無料でホームページを作れるサービスまでやっていました。 あまりメジャーではありませんが(僕は最近まで知らなかった・・・)直感的に構築ができるので、初心者でも簡...
-
ホームページづくりも最終段階。最後はフッターにコピーライトを入れてあげます。 コピーライトというのは「写真とかテキストの著作権は私が持っている」ことを証しするもので、書き方や意味などたくさんのサイトで取り上げられています。 ただ、読んでも三者三様だったりしてちょっと...