GASでスプレッドシートの背景色・文字色・
罫線を設定する方法

帳票やレポートを自動生成するとき、値の書き込みだけでなく見た目も整えたい。setBackgroundsetFontColorsetBorderで、背景色・文字装飾・罫線をコードから一括設定する方法を解説します。

|対象: GAS / スプレッドシート / 書式設定

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開発をご相談いただけます。

GAS開発の対応範囲を見る