はじめに
この記事は「Ateam LifeDesign Advent Calendar 2023」で完走賞を狙って25記事書いているうちの21日目の記事です。今年も完走目指して頑張るぞ！
作るもの
昨日はGASで作ったサイトにフォームを追加する処理を見ていきました。
こんなサイトができました。今日はBootstrapをつかって見た目を整えていこうと思います。
Bootstrapとは？
BootstrapとはWebサイトやアプリのデザインを効率的に構築するためのフレームワークです。Bootstrapではレスポンシブデザインをサポートしているので、異なるデバイスや画面サイズに適応することができます。そのため、モバイルデバイスからデスクトップまで、様々な端末でウェブページが適切に表示されるように設計されています。便利ですね〜。
サンプルコード
スクリプト
それでは実際に処理を見ていきましょう。
<head>
<base target="_top">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
head部分に上記の1行を追加してcssを読み込みます。これだけで準備はOK。そしてBootstrapで用意されてるレイアウトがあたるように以下のようにbodyの中身を書き換えていきます。前回のものから処理自体は変えておらずdivやclassを追加しているだけの変更になっています。
<body>
<div class="container" style="max-width: 1000px;">
<h1>簡単なサイトを作るよ。</h1>
<table class="table table-striped">
<thead>
<tr><th>日付</th><th>顔</th><th>食べ物</th></tr>
</thead>
<tbody>
<? for(let i = 1; i < items.length; i++){ ?>
<? let item = items[i]; ?>
<tr><td><?= item[0] ?></td><td><?= item[1] ?></td><td><?= item[2] ?></td></tr>
<? } ?>
</tbody>
</table>
<form method="post" action="<?= deployURL ?>" class="mt-4">
<div class="mb-3 row">
<div class="col">
<label for="kao" class="form-label">顔文字</label>
<input type="text" class="form-control" id="kao" name="kao">
</div>
<div class="col">
<label for="fruit" class="form-label">くだもの</label>
<input type="text" class="form-control" id="fruit" name="fruit">
</div>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
</div>
</body>
今回はフォームとテーブルを使っているので、フォームのクラス適用例とテーブルのクラス適用例を参考に見ていきます。
container
<div class="container" style="max-width: 1000px;">
この<div>はBootstrapのcontainerクラスを使用しており、コンテンツを中央に配置し、コンテンツの最大幅を制限しています。max-widthスタイルを用いて、コンテナの最大幅を1000pxに設定しています。
tableとtable-striped
<table class="table table-striped">
Bootstrapのクラスを使用してテーブルを整形しています。tableクラスは基本的なテーブルスタイルを提供し、table-stripedは行に対して交互に行にストライプをつけます。
mt-4
<form method="post" action="<?= deployURL ?>" class="mt-4">
フォームの部分です。Bootstrapのクラスを利用してフォームを整形しています。mt-4は上側のマージンを追加しており、間隔を空けています。
row
<div class="mb-3 row">
これはBootstrapのグリッドシステムを使用しており、rowクラスは水平方向にコンテンツを配置するためのものです。また先程のmt-4に似ていますがmb-3は下側のマージンを追加します。
col
<div class="col">
rowクラスが水平方向に配置するのに対して、colクラスはコンテンツを列に配置するためのものです。ここでは、2つの列が作成され、それぞれに顔文字とくだものの入力フィールドを配置しています。
btnとbtn-primary
<button type="submit" class="btn btn-primary">送信</button>
送信ボタンをBootstrapのスタイルで整形しています。btnはボタンスタイル、btn-primaryはプライマリなアクションを示す色を表しています。
完成品
なんだか昨日作ったものよりオシャレ！
cssが苦手かつセンス皆無な私でも簡単にレイアウトを整えることができました。
最後に
今日は昨日までで作ったGASでのウェブアプリケーションにBootstrapを使うことでレイアウトを整えていく方法を見ていきました。とても簡単にいい感じのページにすることができましたね！