ブログ

2026/01/21
【プリザンター】 第330回)リッチテキストエディタの表を列ごとに装飾する簡単テクニック

たった数行のCSSで表が生まれ変わる小ネタ

こんにちは、シーイーシーカスタマサービスの新村です。

リッチテキストエディタで作った表を、もっと見やすく・もっと使いやすくしたいと思ったことはありませんか。
プリザンターは標準機能だけでも十分便利ですが、「列ごとに背景色を変えたい」「特定の列だけ強調したい」といった細かな装飾になると、ツール側では設定できなかったり、どうしても手間がかかったりします。

そこで今回は、表を列単位で自由にデザインできる小技を紹介します。
一度設定してしまえば、あとはリッチテキストエディタで普通に表を作るだけ。
毎回スタイルを調整する必要もありません。

「プリザンターの表をもっと見やすくしたい」「業務画面をちょっとだけリッチにしたい」
そんな方にぴったりのテクニックです。

拡張HTMLにCSSを設定して表をカスタムする方法

今回は、項目の拡張HTMLへCSSを設定する方法をご紹介します。
設定は一度きりでOK。以降はリッチテキストエディタで表を作るだけで、自動的にスタイルが反映されます。
手順はとてもシンプルです。

1.「テーブルの管理」の 「エディタ」 タブを開き、リッチテキストエディタ項目の 詳細設定 を開きます。
2.「拡張HTML」 タブを開き、「フィールドの前」 にCSSを設定します。

これだけで準備完了です。
あとは通常どおりリッチテキストエディタで表を作成すれば、1列目・2列目・3列目…といった具合に、指定したスタイルが自動で適用されます。

今回はサンプルとして、以下のCSSを設定した場合の動作をご覧ください。

1列目:セル内の div にだけ 青背景+白文字+太字を適用しています。
2列目:淡い緑背景にし、点線の枠を追加しています。
3列目:グレー背景+赤系文字+斜体で、柔らかい強調をしています。



作成した表の1列目〜3列目に、設定したスタイルが反映されていることが確認できます。

✅CSSの内容は利用シーンによって調整が必要になります。カスタマイズをご希望の際は、お気軽にお問い合わせください。

まとめ

今回紹介した「拡張HTMLにCSSを設定する」方法を使えば、リッチテキストエディタで作成した表を列ごとに自由に装飾できるようになります。
設定は一度きりで、あとは表を作るだけで自動的にスタイルが反映されるため、日々の運用もぐっと楽になります。

紹介したCSSはあくまで一例ですが、背景色・文字色・枠線・フォントなどは自由にアレンジ可能です。
また、拡張HTMLではなく、項目の既定値にあらかじめCSSを設定しておく方法もあります。
さらに、表以外のスタイルのカスタマイズも可能です。

業務に合わせてデザインを統一したり、重要な情報を強調したりと、さまざまな場面で活用できますので、
プリザンターの画面をもう一歩見やすくしたい方や、ちょっとした工夫で業務効率を高めたい方は、ぜひ今回のテクニックを試してみてください。

弊社では、プリザンター導入・活用に関して以下のサービスをご提供しています。
年間サポート
各種書籍
帳票出力(Excel/PDF)支援パック

プリザンターの導入から開発・運用をあらゆる角度から全力サポートいたします。
ぜひお気軽にご相談ください!

☆☆☆
サービスの説明などをご希望の方は【 問い合わせフォーム 】よりお気軽にお問い合わせください。
☆☆☆

お問い合わせ
PAGE TOP