プリザンターの編集画面で、「入力欄を広くしたい」「ラベルを目立たせたい」「この項目だけ色を変えたい」と思うことって、ありますよね。
私も最初は、CSSをどこに書けばよいのか、フィールドCSSとコントロールCSSのどちらを使えばよいのかが分からず、あれこれ当てては「あれ？思ったんと違う。。。」となっていました。
でも、編集画面を項目全体（フィールド）・ラベル・入力欄という部品の集まりとして見るようになったら、何を変えたいときにどこを見るかが、だいぶ分かるようになりました。
この記事では、細かなCSSの呪文を覚える前に、編集画面のスタイルをどう捉えればよいかを整理します。
CSSで対象を指定する方法には、自分でクラスを付ける方法と、画面にもともとあるid・class・タグを使う方法があります。この記事では、まず理解しやすく、使い回しもしやすい自分でクラスを付ける方法を中心に説明します。
この記事でできるようになること
- スタイル（CSS）が何をするものか、ざっくり分かる
- 「項目全体」「ラベル」「入力欄」のどこを変えたいのか判断できる
- クラスを付ける場合の、フィールドCSSとコントロールCSSの使い分けの入口に立てる
- 思った場所にスタイルが効かないとき、最初に確認する場所が分かる
動作確認環境は、Pleasanter 1.5.2.0、Google Chromeです（2026年7月執筆時点）。
※ 画面構成やHTMLの細部はバージョン、項目の種類、読取専用などの設定で変わることがあります。
そもそも「スタイル」とは？
スタイルは、画面の見た目を指定するためのCSS（カスケーディング スタイル シート）のことです。プリザンターでは、テーブル管理画面の「スタイル」タブにCSSを設定します。CSSとは、webページのデザインを整えるための言語です。
参考：CSSとは？できることや書き方を初心者向けにわかりやすく解説
プリザンター既定の見た目のまま使うのではなく、「横に広くする」「背景を薄い色にする」「周りに余白を入れる」といった、自分が実現したい見た目に変更するためには「スタイル」タブにCSSを設定します。項目を表示すること自体は、プリザンターがやってくれています。
Excelでたとえるなら、セルに文字や数値を入力することと、セルの塗りつぶし・罫線・列幅を整えることは別ですよね。プリザンターでも、項目そのものと、その見え方は分けて考えると分かりやすいです。
ただし、スタイルでできるのは基本的に見た目の調整です。「この値なら必須にする」などの業務ルールは、スタイルではなく、項目設定・状況による制御・スクリプトなどで考えます。
まずは、編集画面を3つの部品に分けて見る
編集画面の一つの項目を、次のように捉えてみます。
項目全体（フィールド）
├─ 項目名（ラベル）
└─ 入力する場所（コントロール）たとえば「状況」という項目なら、項目全体の中に「状況」というラベルと、文字を入力（選択）する欄があります。
この3つを分けて考えるのが、今回のいちばん大事なところです。
| 変えたいこと | まず考える部品 | 例 |
|---|---|---|
| 項目の幅、外側の余白、項目全体の枠 | フィールド | 分類項目を横長にする |
| 項目名の文字色、大きさ、表示／非表示 | ラベル | ラベルを目立たせる |
| 入力欄の背景色、文字色、入力欄の大きさ | コントロール | 入力欄だけを薄い黄色にする |
公式マニュアルでも、フィールドCSSはラベルを含む項目のフィールド要素に、コントロールCSSはラベルを除く入力要素にCSSを適用するための設定と説明されています。迷ったら、まずこの違いに戻るとよさそうです。
スタイルを変えるときに見る場所は二つあります
CSSそのものは、テーブル管理画面の「スタイル」タブに書きます。一方、どの部品にCSSを効かせるかを指定する方法は、主に次の二通りです。
- エディタタブで自分でクラスを付けて、そのクラス名をスタイルタブで指定する方法
- 画面にもともとあるid・class・タグを、スタイルタブで指定する方法
後者では、Chromeの「検証」で実際に表示されている部品を確認してから、CSSの対象を絞ります。既存のidなどを使えば、エディタタブでクラスを設定しない場合もあります。
この記事では、初心者が「どの項目に、どのスタイルを付けたか」を追いやすい、前者（１）の自分でクラスを付ける方法を中心に扱います。この方法では、次の二か所を往復します。
- エディタタブで、どの項目に目印（CSSクラス）を付けるか決める
- スタイルタブで、その目印をどう見せるかCSSで指定する
公式マニュアルでは、エディタタブでレコード編集画面に「どの項目を」「どこに」「どの順番で」「どのような詳細設定を施して」配置するかを設定できると説明されています。
設定までの道順
対象のテーブルを開き、次の順に進みます。
管理 → テーブルの管理 → エディタ見た目を変えたい項目を選び、詳細設定を開きます。ここにある「フィールドCSS」「コントロールCSS」が、項目に目印を付ける欄です。
その後、同じ「テーブルの管理」のスタイルタブで、目印に対するCSSを書きます。
管理 → テーブルの管理 → スタイルスタイルの設定では、CSSを書くほか、どの画面でそのスタイルを出力するかも選べます。新規作成画面と編集画面で確認したい場合は、出力先の「新規作成」「編集」を選びます。
最初は「クラスを付けて当てる」方法がおすすめ
「タイトル」「分類A」などの項目にスタイルを付けるなら、フィールドCSSまたはコントロールCSSにクラス名を付ける方法が分かりやすく、使い回しもしやすいです。
「クラスを付けて当てる」手順をご紹介します。
ここでは、分類項目を少し広くして、入力欄の背景を薄いピンク色にしてみます。
1. エディタでクラス名を付ける
分類項目の詳細設定で、次のように入力します。
| 設定欄 | 入力するクラス名 | 何の目印？ |
|---|---|---|
| フィールドCSS | input-wide | 項目全体 |
| コントロールCSS | input-attention | 入力欄そのもの |
クラス名は任意です。あとで見返したときに役割が分かる名前にすると、未来の自分が助かります。red や test1 より、input-wide や required-item のような名前のほうがよさそうです。
2. スタイルタブでCSSを書く
スタイルタブで新規作成し、次のCSSを入力します。出力先は「新規作成」と「編集」にチェックを入れました。
/* 項目全体を横に広くし、下に少し余白を入れる */
.input-wide {
width: 680px;
margin-bottom: 10px;
}
/* 入力欄だけを薄いピンクにする */
.input-attention {
background-color: lightpink;
}クラス名の前に付いている .（ドット）は、「これはクラス名ですよ」という印です。
この例では、input-wide は項目全体に、input-attention は入力欄に付けました。したがって、幅や余白は項目全体（フィールド）に、背景色は入力欄（コントロール）だけに効く、という考え方です。
クラスを使うもう一つの利点は、エディタで複数の項目に同じクラスを設定しておくことにより、複数の項目に同じスタイルが適用できる、というところです。
なお、一つの項目にクラスを複数設定することも可能です。その場合は半角スペース区切りで設定します。
どちらに書けばよいか迷ったときの考え方
ここまでの内容を、判断順にするとこうなります。
項目全体を動かしたい、囲みたい
「項目を横長にしたい」「項目どうしの間隔を空けたい」「項目を枠で囲みたい」ときは、まずフィールドCSSを考えます。
ラベルも含めた、項目まるごとを対象にするためです。
.grouped-item {
border: solid 1px #8ecae6;
padding: 8px;
margin-bottom: 12px;
color: red;
}入力する場所だけを変えたい
「入力欄だけを狭くしたい」「入力欄だけ色を変えたい」ときは、コントロールCSSを考えます。
.short-input {
width: 120px;
background-color: lightblue;
}ただし、分類項目は設定によって、プルダウン・ラジオボタン・読取専用の表示など、内部の部品が変わることがあります。スタイルが思ったように効かなくなったら、「いまこの項目は、どんな部品として表示されているのかな？」を確認するのが近道です。
ラベルだけを変えたい
ラベルは入力欄とは別の部品です。コントロールCSSに色を指定しても、ラベルの文字色までは変わりません。
ラベルを含めて項目全体を整えたいならフィールドCSSから考えます。それでも「このラベルだけ」に細かく指定したくなったときは、Chromeの開発者ツールでラベルの for 属性や親要素を確認してから、対象を絞って指定します。
いきなり難しい指定方法を覚えなくても大丈夫です。まずはクラスでできる範囲を試し、必要になったら次の手に進めばよいと思います。
うまくいかないときは、Chromeの「検証」で部品を確認する
CSSを書いたのに思った場所に効かないときは、やみくもにコードを増やす前に、画面の部品を確認してみます。
(以下はChromeを利用した場合の操作方法です）
- 編集画面で、変えたい場所を右クリックする
- 「検証」をクリックする
- 開発者ツールで、選ばれた部品のタグ・id・classを確認する
- 「これは項目全体？ ラベル？ 入力欄？」と考える
開発者ツール上で試した変更は、通常は画面を再読み込みすれば元に戻ります。まずは枠線や背景色を一時的に付けてみると、どの範囲に効くのか分かりやすいです。
/* 調べるときだけ使う目印。確認できたら削除します */
.input-wide {
outline: solid 2px red;
}「効かない」のではなく、違う部品に効いていることが、初心者にはけっこうあります。私も、入力欄だけを狭くしたかったのに項目全体を狭くしてしまったり、その逆だったりしました。
最初から全部を変えないほうがよさそう
スタイルは楽しいのですが、最初から色・幅・余白・位置・ラベルを一度に変えると、あれ？となった時に何が原因で崩れたのか分からなくなります。
おすすめの順番は、こんな感じです。
- 変えたい項目を一つだけ決める
- 何を変えたいかを「項目全体／ラベル／入力欄」に分ける
- クラス名を一つ付ける
- CSSを一つだけ書く
- 新規作成画面と編集画面で確認する
特に実際に使うテーブルでは、いきなり本番のスタイルを大きく変えず、テスト用のテーブルや一時的なスタイルで試すのが安心です。公式マニュアルには、設定済みのスタイルをまとめて無効化する機能も案内されています。
まとめ
編集画面のスタイルは、CSSをたくさん暗記しなくても、次の3つを押さえると取りかかりやすくなります。
- スタイルは、項目の見た目を調整するもの
- まず「項目全体・ラベル・入力欄」のどこを変えたいか考える
- 迷ったら、クラスを付けて少しずつ試し、検証で部品を確認する
編集画面がどういう構造でできているかが少し分かると、幅の調整、ラベルの装飾、入力欄の色変更なども、「これはこっちに当てればよさそう」と考えられるようになります。
私も、ここが分かってからスタイルをいじるのがだいぶ楽しくなりました。次は、ラベルだけを指定する方法や、複数の項目に同じスタイルを付ける方法もやってみたいと思います。
なお、CSSの書き方がわからないときは生成AI先生に聞くとスラスラと教えてくださいます。私はデザインセンスもないので、「どうしたらいいと思う？」から聞いちゃってます。
コメント