JavaScript/SpreadJS

角丸スタイルにも対応！SpreadJSでシートタブのスタイルをカスタマイズする

by MESCIUS-dev

2025年7月2日にリリースされた「SpreadJS（スプレッドJS）」の最新バージョン「V18.1J」では、シートタブの角を丸くしたスタイルが可能になりました。

シートタブの角丸スタイル

本記事では、この角丸スタイルをはじめとしたシートタブのスタイルをカスタマイズする方法について解説します。

開発環境

事前準備

今回作成するファイルは次の3つです。

index.htmlページ本体。ページの要素としてSpreadJSコントロールを配置します
app.jsSpreadJSコントロールを作成するコードを記載します
styles.css各種ページ要素のスタイル定義を記載します

SpreadJSコントロールの使用にはSpreadJSのモジュールを環境に配置する必要があります。npmなどから入手する方法もありますが、今回は環境に直接SpreadJSのモジュールを配置していきます。あらかじめSpreadJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。CSSファイルは以下に記載のもの含め7種類あるのでお好みのテーマのものを選択してください。

  • scripts/gc.spread.sheets.all.18.1.4.min.js
  • scripts/resources/gc.spread.sheets.resources.ja.18.1.4.min.js
  • css/gc.spread.sheets.excel2013white.18.1.4.css

角丸スタイルを設定する

まずは新機能の角丸スタイルを設定してみます。

SpreadJSライブラリの参照設定をHTMLファイルに追加し、SpreadJSのモジュールに加えて、前述の「app.js」と「styles.css」への参照も追加します。また、シートタブの位置をセレクトボックスで調整できるようにしています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="css/gc.spread.sheets.excel2013white.18.1.4.css" rel="stylesheet"/>
    <script src="scripts/gc.spread.sheets.all.18.1.4.min.js"></script>
    <script src="scripts/resources/gc.spread.sheets.resources.ja.18.1.4.min.js"></script>
    <link href="css/styles.css" rel="stylesheet"/>
    <script src="scripts/app.js"></script>
</head>
<body>
    <div id="setting">
        <fieldset>
            <legend>シートタブの配置</legend>
            <select id="align">
                <option selected>下に配置</option>
                <option>上に配置</option>
                <option>左に配置</option>
                <option>右に配置</option>
            </select>
        </fieldset>
    </div>
    <div id="ss"></div>
</body>
</html>

続いて「app.js」と「styles.css」を次のように作成します。省略している箇所は記事後半で解説します。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。

// ライセンスキーとカルチャの設定
GC.Spread.Sheets.LicenseKey = 'ここにSpreadJSのライセンスキーを設定します';
GC.Spread.Common.CultureManager.culture('ja-jp');

window.onload = () => {
    // SpreadJSの生成と設定
    const spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 3 });
    spread.options.tabStripRatio = 0.8;
    spread.options.tabStripWidth = 100;

    // シートの設定
    const sheet1 = spread.getSheet(0);
    const sheet2 = spread.getSheet(1);
    const sheet3 = spread.getSheet(2);
    sheet3.options.isProtected = true;

    // シートタブの状態に応じたスタイル（デフォルト）設定
    ・・・（中略）・・・

    // 指定したシートのシートタブスタイル（標準）の設定
    ・・・（中略）・・・

    // シートタブの配置を指定
    document.getElementById('align').addEventListener('change', (e) => {
        const sheetTabPos = GC.Spread.Sheets.TabStripPosition;
        switch (e.target.value) {
            case '下に配置':
                spread.options.tabStripPosition = sheetTabPos.bottom;
                return;
            case '上に配置':
                spread.options.tabStripPosition = sheetTabPos.top;
                return;
            case '左に配置':
                spread.options.tabStripPosition = sheetTabPos.left;
                return;
            case '右に配置':
                spread.options.tabStripPosition = sheetTabPos.right;
                return;
        }
    });
}
/* SpreadJSのスタイル */
#ss {
   width: 600px;
   height: 300px;
   border: 1px solid silver;
}

/* シートの下に配置したときはシートタブを角丸に設定 */
.sjs-tab-strip-bottom-tab {
   /* 左下と右下の角丸 */
   border-radius: 0 0 4px 4px;
   /* 左下の角丸 */
   /* border-radius: 0 0 0 4px; */
   /* 左上の角丸 */
   /* border-radius: 4px 0 0 0; */
}

/* シートの左に配置したときはシートタブを角丸にしない */
.sjs-tab-strip-left-tab {
   border-radius: 0;
}

/* シートの上に配置したときはシートタブの左上と右上だけを角丸に設定 */
.sjs-tab-strip-top-tab {
   border-radius: 4px 4px 0 0;
}

/* シートの右に配置したときはシートタブを角丸にしない */
.sjs-tab-strip-right-tab {
   border-radius: 0;
}

/* その他の要素 */
・・・（中略）・・・

以上を記述した後にアプリケーションを実行すると、アクティブシート「Sheet1」のシートタブの左下と右下の角が丸くなっています。

シートタブの角丸スタイル

シートタブの四隅の一部、または全部を角丸にするには、下記のCSSクラスでborder-radiusプロパティを使用します。

シートタブの配置使用するCSSクラス
シート下部に表示している場合.sjs-tab-strip-bottom-tab
シート上部に表示している場合.sjs-tab-strip-top-tab
シート左側に表示している場合.sjs-tab-strip-left-tab
シート右側に表示している場合.sjs-tab-strip-right-tab

border-radiusプロパティの各要素は、左から「左上」、「右上」、「右下」、「左下」の順に角丸の半径をピクセル単位で指定します。上図の場合は、シート下部にシートタブを表示しているので、「.sjs-tab-strip-bottom-tab」を使用しています。
※ シートごとに異なる角丸スタイルを設定することはできません。

.sjs-tab-strip-bottom-tab {
   /* 左下と右下の角丸 */
   border-radius: 0 0 4px 4px;
}

なお、シートタブがシート下部に表示されている場合にシートタブの左上だけを角丸にすると次のようになります。

シートタブの左上だけを角丸

このときのCSSは下のとおりです。

.sjs-tab-strip-bottom-tab {
   /* 左上の角丸 */
   border-radius: 4px 0 0 0;
}

角丸スタイルについて製品ヘルプでも詳しく解説していますので、ご一読いただければと思います。

状態に応じたスタイルを設定する

ここからは、従来から利用可能なシートタブのスタイルを設定する機能について紹介します。

SpreadJSでは、シートタブのスタイル（背景色、文字色、フォント、アイコン）を次のような状態ごとに設定することができます。

状態SheetTabState列挙体
標準Spread.Sheets.SheetTabState.normal
アクティブSpread.Sheets.SheetTabState.active
ホバーSpread.Sheets.SheetTabState.hover
読み取り専用Spread.Sheets.SheetTabState.protected
選択Spread.Sheets.SheetTabState.selected

ここでは、すべてのシートに適用されるデフォルトスタイルを設定する例を紹介します。「app.js」の「シートタブの状態に応じたスタイル（デフォルト）設定」で省略していた箇所に下記のコードを記述します。

・・・（中略）・・・
// シートタブの状態に応じたスタイル（デフォルト）設定
spread.options.defaultSheetTabStyles = {
    // アクティブ
    [GC.Spread.Sheets.SheetTabState.active]: {
        backColor: 'red',
        foreColor: 'black'
    },
    // ホーバー
    [GC.Spread.Sheets.SheetTabState.hover]: {
        backColor: 'lime',
        foreColor: 'black'
    },
    // 読み取り専用
    [GC.Spread.Sheets.SheetTabState.protected]: {
        icons: [{ src: '../images/lock.png', width: 20, height: 20}]
    },
    // 選択
    [GC.Spread.Sheets.SheetTabState.selected]: {
        backColor: 'lightpink',
        foreColor: 'blue'
    }
};
・・・（中略）・・・

アプリケーションを実行して各状態でのシートタブのスタイルがどのように変化するか確認してみます。

状態に応じたシートタブのスタイルについては、ヘルプでも詳しく解説しているので、ご参考にしてください。

シートごとに異なるスタイルを設定する

デフォルトスタイルはすべてのシートに適用されるものですが、シートごとに状況に応じたスタイルを設定することもできます。

この設定は、WorkbookクラスのsheetTabStylesプロパティが参照するSheetTabStyleManagerクラスのaddメソッドを使って行います。

先ほど「app.js」に記述した「シートタブの状態に応じたスタイル（デフォルト）設定」をコメントアウトし、「指定したシートのシートタブスタイル（標準）の設定」で省略していた部分に下記のコードを記述してシートごとのスタイルを設定します。

ここでは、「標準（GC.Spread.Sheets.SheetTabState.normal）」スタイルだけを設定していますが、前述の各状態に応じたスタイルを設定することも可能です。

・・・（中略）・・・
// 指定したシートのシートタブスタイル（標準）の設定
spread.sheetTabStyles.add(GC.Spread.Sheets.SheetTabState.normal, {
    backColor: 'gold',
    foreColor: 'blue'
}, [sheet1.name()]);
spread.sheetTabStyles.add(GC.Spread.Sheets.SheetTabState.normal, {
    backColor: 'yellowgreen',
    foreColor: 'blue'
}, [sheet2.name()]);
spread.sheetTabStyles.add(GC.Spread.Sheets.SheetTabState.normal, {
    backColor: 'deepskyblue',
    foreColor: 'blue'
}, [sheet3.name()]);
・・・（中略）・・・

アプリケーションを実行して各シートのタブをクリックすると次のようになります。

今回ご紹介した内容については以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。

さいごに

今回の記事では、「SpreadJS」のシートタブのスタイルを変更する方法について解説しました。

製品サイトでは、SpreadJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／