GASでスプレッドシートの背景色・文字色・
罫線を設定する方法
帳票やレポートを自動生成するとき、値の書き込みだけでなく見た目も整えたい。setBackgroundsetFontColorsetBorderで、背景色・文字装飾・罫線をコードから一括設定する方法を解説します。
Table of Contents
書式をコードで設定するメリット
スプレッドシートの色や罫線は手で塗ることもできますが、GAS(Google Apps Script、Googleのサービスを自動化するスクリプト)でコード化すると、次の場面で効いてきます。
帳票・レポートの自動生成
毎月のレポートを作るたびに、ヘッダーの色や罫線を同じ見た目で自動的に整えられる
データに応じた色分け
売上が目標未達の行を赤く塗るなど、値を見ながら動的に色を変えられる
手作業のばらつきをなくす
担当者ごとに色や罫線が微妙に違う、といった見た目の乱れを防げる
大量セルの一括処理
数百行の表でも、setBackgrounds()で一度に塗ればクリック地獄にならない
なお、条件(しきい値や数式)で自動的に色を変え続けたい場合は、GASで都度塗るより条件付き書式のルール自体をコードで設定する方が向いています。ここでは「実行した時点の色を確定させる」書式設定を扱います。
背景色を塗りつぶす(setBackground)
基本はrange.setBackground(色)です。色は「#ffff00」のような16進のカラーコードか、「yellow」「red」などのCSSカラー名で指定します。nullを渡すと塗りつぶしなしに戻せます。
function setBackgroundColors() {
const sheet = SpreadsheetApp.getActive().getSheetByName("売上");
// 単一セル: A1を黄色で塗る
sheet.getRange("A1").setBackground("#ffff00");
// 範囲: A1:D1(ヘッダー行)を薄いグレーで塗る
sheet.getRange("A1:D1").setBackground("#f0f0f0");
// CSSカラー名でも指定できる
sheet.getRange("A2").setBackground("red");
// 色を消す(塗りつぶしなしに戻す)
sheet.getRange("A2").setBackground(null);
}文字色・太字などフォントを装飾する
文字まわりはsetFontColor(文字色)、setFontWeight(太字)、setFontSize(サイズ)などで設定します。これらのsetメソッドは同じ範囲を返すため、.でつないで一気に書けます(メソッドチェーン)。ヘッダー行の装飾を例にします。
function styleHeaderRow() {
const sheet = SpreadsheetApp.getActive().getSheetByName("売上");
const header = sheet.getRange("A1:D1");
header
.setBackground("#0a0a0a") // 背景を黒に
.setFontColor("#ffffff") // 文字を白に
.setFontWeight("bold") // 太字(通常は "normal")
.setFontSize(11) // 文字サイズ
.setFontFamily("Arial") // フォント
.setHorizontalAlignment("center"); // 中央寄せ
// 取り消し線・下線は setFontLine
sheet.getRange("A10").setFontLine("line-through");
}罫線を引く(setBorder)
罫線はsetBorder(top, left, bottom, right, vertical, horizontal, color, style)の8引数で指定します。上下左右と、範囲内の縦・横の区切り線を、それぞれ引くならtrue、触らないならnullにします。太さはBorderStyle(SOLID / SOLID_MEDIUM / SOLID_THICK / DOTTED / DASHED / DOUBLE)で選べます。
function drawBorders() {
const sheet = SpreadsheetApp.getActive().getSheetByName("売上");
const table = sheet.getRange("A1:D10");
// setBorder(top, left, bottom, right, vertical, horizontal, color, style)
// 引きたい辺を true、引かない辺は null で指定する
// 表全体に細い実線のグリッドを引く
table.setBorder(
true, true, true, true, true, true,
"#cccccc",
SpreadsheetApp.BorderStyle.SOLID
);
// ヘッダー行の下だけ太い線を引く(他の辺は触らない)
sheet.getRange("A1:D1").setBorder(
null, null, true, null, null, null,
"#0a0a0a",
SpreadsheetApp.BorderStyle.SOLID_MEDIUM
);
}値に応じて一括で色分けする(setBackgrounds)
行ごとに色を変えたいとき、ループの中でsetBackground()を何度も呼ぶと遅くなります。範囲と同じ形の二次元配列を作り、複数形のsetBackgrounds()で一度に反映するのが定石です。色を変えない箇所はnullにしておけば既存の色が保たれます。
function highlightByValue() {
const sheet = SpreadsheetApp.getActive().getSheetByName("売上");
const startRow = 2; // ヘッダーの次の行から
const amountCol = 4; // D列に売上金額が入っている想定
const numRows = sheet.getLastRow() - 1;
if (numRows < 1) return;
// D列の値を一括取得
const amounts = sheet.getRange(startRow, amountCol, numRows, 1).getValues();
// 各行の色を二次元配列で組み立てる
const colors = amounts.map(([amount]) => {
if (amount >= 1000000) return ["#d9ead3"]; // 100万以上は緑
if (amount < 100000) return ["#f4cccc"]; // 10万未満は赤
return [null]; // それ以外は変更しない
});
// 一括で色を反映(ループ内でsetBackgroundを呼ぶより速い)
sheet.getRange(startRow, amountCol, numRows, 1).setBackgrounds(colors);
}配列の行数・列数は必ず範囲と一致させます。ズレているとsetBackgrounds()がエラーになります。文字色をまとめて変えたい場合は同じ要領でsetFontColors()が使えます。
書式のリセットとコピー
一度塗った書式を白紙に戻すにはclearFormat()を使います。値は残したまま、色・罫線・表示形式だけが初期化されます。既存の書式を別の範囲に写したいときはcopyTo()にPASTE_FORMATを渡せば、値を変えずに見た目だけコピーできます。
function resetAndCopyFormat() {
const sheet = SpreadsheetApp.getActive().getSheetByName("売上");
// 値は残したまま、書式(色・罫線・表示形式)だけリセット
sheet.getRange("A2:D100").clearFormat();
// A1:D1 の書式を A2:D2 にコピー(値はコピーしない)
const source = sheet.getRange("A1:D1");
const target = sheet.getRange("A2:D2");
source.copyTo(target, SpreadsheetApp.CopyPasteType.PASTE_FORMAT, false);
// 設定済みの色を読み取る
const bg = sheet.getRange("A1").getBackground(); // 例: "#0a0a0a"
Logger.log("A1の背景色: " + bg);
}カスタムメニューから実行する
書式を整える処理は、スプレッドシート上部のメニューから手動で呼べると便利です。onOpen(ファイルを開いたとき自動で走る関数)でメニューを作り、各書式関数をボタン感覚で実行できるようにします。
function onOpen() {
SpreadsheetApp.getUi()
.createMenu("書式ツール")
.addItem("ヘッダーを装飾", "styleHeaderRow")
.addItem("金額で色分け", "highlightByValue")
.addItem("書式をリセット", "resetFormat")
.addToUi();
}
function resetFormat() {
const sheet = SpreadsheetApp.getActiveSheet();
sheet.getDataRange().clearFormat();
}実務での注意点
1. ループ内で1セルずつ塗らない
色や罫線の設定はスプレッドシートへの書き込み操作です。行数分だけsetBackground()を呼ぶと、その回数だけ通信が発生して遅くなります。二次元配列を作ってsetBackgrounds()で一括反映しましょう。
2. 条件付き書式とは別物
ここで塗った色は「その時点で固定された色」です。あとから値が変わっても自動では追従しません。値の変化に連動させたいなら、条件付き書式のルールを設定する方が適しています。
3. 色だけに意味を持たせない
「赤=未達」のように色だけで情報を表すと、色覚特性のある人や印刷時に伝わりません。ステータス列のテキストなど、色以外の手がかりも併せて残すと親切です。
まとめ
GASでのセルの書式設定は、背景色はsetBackground、文字装飾はsetFontColor系、罫線はsetBorderが基本です。行ごとに色を変えるときは複数形のsetBackgroundsで一括反映すると速く安定します。帳票やレポートの自動生成に組み込めば、見やすい表を人手をかけず量産できます。
よくある質問
対象のセル範囲をgetRange()で取得し、setBackground("#ffff00")のように色コードを渡すだけです。色は「#ffff00」のような16進のカラーコードか、「yellow」「red」などのCSSカラー名で指定できます。範囲全体が同じ色で塗りつぶされます。
できます。setBackgrounds()(複数形)に、範囲と同じ行数・列数の二次元配列を渡すと、セルごとに違う色を一度のAPI呼び出しで設定できます。ループ内でsetBackground()を何度も呼ぶより大幅に速くなります。色を変えない箇所はnullを入れておけば既存の色が保たれます。
range.setBorder(top, left, bottom, right, vertical, horizontal, color, style)で引きます。引きたい辺をtrue、引かない辺をnull(またはfalse)で指定します。colorに色コード、styleにSpreadsheetApp.BorderStyle.SOLIDなどを渡すと、太さや色も指定できます。
range.clearFormat()を使うと、セルの値やコメントは残したまま、背景色・文字色・罫線・表示形式などの書式だけを初期状態に戻せます。値ごと消したい場合はclear()、値だけ消したい場合はclearContent()と使い分けます。
できます。range.getBackground()で単一セルの背景色を、getBackgrounds()で範囲全体の色を二次元配列で取得できます。色は「#ffff00」のような16進の文字列で返るため、条件分岐や別シートへの引き継ぎに使えます。
GAS開発・業務Webシステムを
相談する。
書式設定の自動化のほか、帳票のPDF出力・グラフ作成・Gmail通知など、レポート業務まわりのGAS開発をご相談いただけます。