セルスタイル

ReoGrid Web では、個々のセルまたは範囲全体にスタイルを設定できます — フォント、色、配置、テキスト折り返し、罫線に対応しています。

CellStyle プロパティ

スタイル設定時、すべてのプロパティは任意です。未設定のプロパティは以下のデフォルト値にフォールバックします。

セル単位のスタイル設定

setStyle()（チェーン可能）を使うか、style プロパティに直接代入します。

// チェーンメソッド（推奨）
worksheet.cell('A1')
  .setValue('合計')
  .setStyle({ bold: true, fontSize: 12, backgroundColor: '#1e3a5f', color: '#ffffff' })

// プロパティ代入
worksheet.cell('B2').style = { italic: true, textAlign: 'right' }

各 setStyle() 呼び出しは既存のスタイルにマージされます — 指定したプロパティのみが変更されます。

worksheet.cell('A1').setStyle({ bold: true })    // bold を設定、他はそのまま
worksheet.cell('A1').setStyle({ color: '#e11d48' }) // color を追加、bold は維持

範囲へのスタイル設定

range.setStyle() は範囲内のすべてのセルに同じスタイルを適用します。

// ヘッダー行
worksheet.range('A1:F1').setStyle({
  bold: true,
  backgroundColor: '#1e3a5f',
  color: '#ffffff',
  textAlign: 'center',
})

// 交互行の背景色
worksheet.range('A2:F2').setStyle({ backgroundColor: '#f8fafc' })
worksheet.range('A3:F3').setStyle({ backgroundColor: '#ffffff' })

背景色のみの場合、簡略メソッドがあります:

worksheet.range('A1:F1').setBackgroundColor('#dbeafe')

テキスト配置

// 水平配置
worksheet.cell('A1').setStyle({ textAlign: 'left' })    // デフォルト
worksheet.cell('B1').setStyle({ textAlign: 'center' })
worksheet.cell('C1').setStyle({ textAlign: 'right' })

// 垂直配置
worksheet.cell('A2').setStyle({ verticalAlign: 'top' })
worksheet.cell('A3').setStyle({ verticalAlign: 'middle' })
worksheet.cell('A4').setStyle({ verticalAlign: 'bottom' }) // デフォルト

テキスト折り返し

デフォルトではテキストはセルの境界でクリップされます。折り返しを有効にすると長いコンテンツを表示できます。

// セル境界で折り返し（単語を尊重）
worksheet.cell('A1').setStyle({ textWrapMode: 'wrap' })

// 単語の途中でも改行
worksheet.cell('A1').setStyle({ textWrapMode: 'break-word' })

// 折り返しなし（デフォルト — コンテンツはクリップ）
worksheet.cell('A1').setStyle({ textWrapMode: 'none' })

折り返し使用時は行高を適宜設定してください:

worksheet.cell('A1').setValue('これは折り返されるべき長い説明文です。')
worksheet.cell('A1').setStyle({ textWrapMode: 'wrap' })
worksheet.row(0).height = 60

罫線

罫線は個々のセルではなく範囲に対して設定します。 range.border(options, sides?) を使用します。

// 範囲の全辺にボーダー
worksheet.range('A1:E10').border({ style: 'solid', color: '#cbd5e1' })

// 特定の辺のみ
worksheet.range('A1:E1').border({ style: 'solid', color: '#1e3a5f', width: 2 }, ['bottom'])
worksheet.range('A1:E10').border({ style: 'dashed', color: '#94a3b8' }, ['top', 'bottom'])

ボーダーオプション

ボーダーの辺

sides を省略すると、範囲の外側全辺にボーダーが適用されます。

テーブルとヘッダーの典型的なパターン

// 外枠
worksheet.range('A1:D10').border({ style: 'solid', color: '#475569', width: 1.5 }, ['outside'])

// 内側のグリッドライン
worksheet.range('A1:D10').border({ style: 'solid', color: '#e2e8f0' })

// 太いヘッダー下線
worksheet.range('A1:D1').border({ style: 'solid', color: '#475569', width: 2 }, ['bottom'])

計算済みスタイルの読み取り

const style = worksheet.cell('A1').getStyle()
console.log(style.bold)          // true / false
console.log(style.backgroundColor) // '#1e3a5f'

getStyle() はデフォルト値を含む完全に解決されたスタイルを返すため、すべてのプロパティが常に存在します。