※おことわり
2026年8月時点の情報です。プリザンターのバージョンは 1.5.2.0 です。Google Chrome でやっています。
HTML、CSSともに初心者が、調べたり試したりしながら書いています。もっとよい書き方や間違いなどがありましたら、ぜひ教えてください！
プリザンターの画面を使っていると、「コメント欄をもう少し広くしたい」「入力する場所が分かりやすい見出しにしたい」と思うことがあります。
でも、CSSは少しなら分かるけれど、画面のどの部分を指定すればよいのかは自信がない……。
そんな私が、ChatGPTに相談したり、ブラウザでテスト環境を見てもらったりしながら、プリザンターのスタイルを整えてみました。
結論からいうと、AIはCSSのたたき台を作る相談相手として、とても頼りになりました。
ただし、AIが出したCSSをそのまま本番へ貼り付けるのではなく、テスト環境等で実際の画面を確認しながら調整することが大切です。
（後述していますが、2026年8月のアップデートで、「ドラフト出力」という機能が追加されています。本番環境には反映させず、手元でのみ追加したスタイルを確認することが可能となっています。こういった機能を使うのもお勧めです。私自身はまだ試していませんが。）
今回は、次の2つをやってみた記録を紹介します。
- 編集画面のコメントエリアを、入力エリアと50%：50%にする
- 編集画面の見出しを、スタイリッシュにする
１．この記事でできること
- AIへCSSを相談するとき、何を渡せばよいか分かる
- コメント欄と入力欄を半分ずつにするプリザンターでのCSSの考え方が分かる
- chatGPT workでのブラウザユースの使い方が分かる
- AIを使ってスタイルを変更するときの注意点が分かる
CSSを勉強し始めた方や、「自分で全部書くのは不安だけれど、少しずつ画面を使いやすくしたい」、またAIを利用したCSS書き方の補助について知りたい、という方向けの記事です。
２．CSSが得意ではないから、AIに聞いてみた
CSSは、画面の見た目を指定するものです。
Excelでいうと、セルに入力することと、列幅を広げたり、背景色を付けたりすることは別ですよね。プリザンターでも、項目そのものを作る設定と、画面を見やすく整えるスタイルは分けて考えると分かりやすいです。
私はCSSをまったく知らないわけではありません。
widthやbackground-colorは何となく分かる#Editorのような指定を見たことはある- でも、単純な項目のフィールド、コントロール以外の箇所は画面のどの要素に書けばよいか迷う
そこで今回は、AIに「CSSを書いて」とだけ頼むのではなく、何を変えたいか、画面がどうできているか、いま入っているCSSを渡して相談してみました。
AIが答えを知っているというより、「画面の構造を一緒に読む人」が隣にいる感じです。頼りになります✨
３. チャットで相談してみた：コメントエリアを広げる
最初のお題は、編集画面のコメントエリアです。
入力エリアに基本の議題を置いて、コメント欄にガツガツ各人から意見を書いてもらう、という運用を想定したものです。
どちらかというと「コメント」が読みやすく会ってほしいので、そうなると標準の画面では、左の入力エリアに比べて右のコメントエリアが狭く感じました。左右を同じくらいの広さにしたいところです。
今回は、新規作成画面と編集画面だけを対象にして、左の入力エリアと右のコメントエリアを50%ずつにしました。一覧画面は変更しません。
（１）AIに渡したもの
#Editor の中に全部入っていそうだ、と、ブラウザの開発者ツールで #Editor の outerHTMLをコピーし、個人情報などを含まない形にしてAIへ渡しました。
outerHTMLをコピーすると、対象としたタグの中に入っている要素も丸ごと持ってくることができます。
スタイルは、うまいコピーの仕方が分からなかったので、#Editorタグを選択している状態で、styleタブの中身を全選択してコピーしました。
今回確認できた構造は、ざっくり次のようなものでした。
<div id="Editor">
<form id="MainForm">
<div id="EditorComments">
<div id="CommentField"><!-- コメントの入力欄 --></div>
<div id="CommentList"></div>
</div>
<div id="EditorTabsContainer">
<!-- タイトル、内容などの入力欄 -->
</div>
</form>
</div>ここで分かったのは、左右に並べたい二つの領域は #Editor の直下ではなく、#MainForm の中にあることです。
| 要素 | 役割 | 表示したい位置 |
|---|---|---|
#EditorTabsContainer | タイトル・内容などの入力エリア | 左 |
#EditorComments | コメント入力欄・コメント一覧 | 右 |
#MainForm | 上記二つを含む親要素 | 横並びを管理する場所 |
このように、やりたいことだけでなく、検証で確認したHTMLと現在のスタイルを渡すと、AIも狙う場所を考えやすくなります。
（２）AIへ渡したプロンプト
プリザンターの新規作成・編集画面で、左の入力エリアと右のコメントエリアを
50%：50%にしたいです。対象はこのテーブルだけで、一覧画面は変えません。
CSSは少しだけ分かりますが、セレクタの指定に自信がありません。
以下に、Chromeの検証で確認した #Editor のouterHTMLと、
現在設定しているスタイルをそれぞれテキストファイルとして渡します。
1. 左右に並べる親要素と、それぞれの領域を理由付きで説明してください。
2. CSSの案を出してください。適切・簡潔なコメントも入れてください。
3. 新規作成画面・編集画面で確認する点を教えてください。
4. 分からない情報は推測で断定せず、質問してください。
5. 回答前に、プリザンター公式マニュアルの「スタイル」と「テーブルの管理：スタイル」を確認してください。今回の回答で根拠にした公式ページのURLも示してください。
https://pleasanter.org/ja/manual
6. Qiitaなど第三者の記事を参考にする場合は補助的な情報として扱い、公式情報と区別してください。記事のCSSをそのまま流用せず、今回のHTMLに合うか確認してください。
7. 公式資料では確認できず、今回のHTMLから判断した部分は、「今回の環境での推測」と分けて説明してください。
チャット欄に直接htmlを貼ってもよいのですが、長かったので、一旦メモ帳に貼り付けし、保存したものをアップロードしました。
outerHTML には、コメント本文、氏名、メールアドレス、社内URLなどが入ることがあります。AIへ渡す前に、社内ルールを確認し、必要な情報は伏せるようにします。
（３）最初は、幅だけを50%にしてみた
最初は、左右の要素の幅だけを変えればよいと思いました。
#Editor #EditorTabsContainer {
float: left;
width: 50% !important;
}
#Editor #EditorComments {
float: right;
width: 50% !important;
}入力エリアとコメント入力欄の幅は広がりました。
ところが、白い入力エリアと青いコメントエリアの背景の境界がそろわず、「おいっ」という仕上がりになりました。だめじゃん。
（４）親要素をFlexboxにして、背景も指定した
「こうなっちゃったんだけど」と画面のスクショを渡して、再度考えてもらいました。
で、出てきたもので試したところ、今度はちゃんと思った通りになりました。
子要素の幅だけではなく、二つを含む #MainForm を横並びを管理する親要素にした、とのこと。
最終的に、テーブルの管理画面にある「スタイル」へ登録したCSSはこちらです。
/* 編集・新規作成画面：
左の入力エリアと右のコメントエリアを50%ずつにする */
#Editor #MainForm {
display: flex !important;
flex-wrap: wrap;
align-items: stretch;
}
/* 左：入力エリア */
#Editor #EditorTabsContainer {
order: 1;
float: none !important;
flex: 0 0 50%;
width: 50% !important;
min-width: 0;
background-color: var(--base-bg) !important;
}
/* 右：コメントエリア */
#Editor #EditorComments {
order: 2;
float: none !important;
flex: 0 0 50%;
width: 50% !important;
min-width: 0;
background-color: var(--primarySub03) !important;
}
/* コメント入力欄の周囲にも親要素の青背景を表示する */
#Editor #EditorComments > #CommentField {
background-color: transparent !important;
}
（５）今回のCSSを、ざっくり読む
display: flex：親要素の中で、左右の領域を横に並べて管理するflex: 0 0 50%：左右それぞれに50%の幅を割り当てるfloat: none：標準の配置指定がFlexboxと競合しないよう解除するorder：HTMLではコメントが先に書かれていたため、入力欄を左、コメントを右に並べ替えるbackground-color：左右の親要素の背景を明示し、境界をそろえる
CSSが効かないときは、書き方が間違っているというより、狙っている場所が違う場合も多い気がします。
今回はまさにそれでした。幅だけではなく、どの要素が左右をまとめているのか、背景色をどこが持っているのかまで見る必要がありました。
（６）設定した場所と確認したこと
設定は、対象テーブルの次の場所で行いました。
管理 → テーブルの管理 → スタイル出力先は「新規作成」と「編集」を選びます。「一覧」は選ばないことで、今回の変更対象から外せます。
保存後は、次を確認しました。
- 新規作成画面で左右が半分ずつになっているか
- 編集画面で既存コメントが右側に表示されるか
- コメント入力欄は白いままで、周囲は青く見えるか
- 画面幅を狭めても、操作しにくくなっていないか
コメントエリアを少し広くしたい場合は、左を45%、右を55%のように変えることもできます。
#Editor #EditorTabsContainer {
flex-basis: 45%;
width: 45% !important;
}
#Editor #EditorComments {
flex-basis: 55%;
width: 55% !important;
}
４. chatGPT Workのブラウザユースでやってみた：見出しをスタイリッシュに
次は、説明項目の見出しを整えてみました。
前項ではchatGPTにチャットで「相談」という形でやりました。今回はchatGPT work でブラウザにプリザンターを表示して、ＡＩに直接見てもらいながらＣＳＳを生成、さらにスタイルの設定までやってもらうということをやりました。
対象は、ローカルのテスト環境に作った「記録テーブル」です。ブラウザでプリザンターＵＲＬを入力し表示、ＩＤ．パスワード手入力でログインしたあと、AIに画面を見てもらいながら相談しました。
ログインIDやパスワードをチャット本文に書いたわけではありません。認証が必要な操作は、自分でブラウザ上に手入力して進めます。
chatGPT「Work」で、右のサイドパネルを表示＞ブラウザをクリック＞プリザンターのURLを入力して、ログイン操作
今回、見出しで伝えたかったことは次の三つです。
| 見出し | 利用者に伝えたいこと |
|---|---|
| 必須入力欄 | 必ず入力してほしい |
| 補足事項 | 入力は任意 |
| レコード情報 | 情報のまとまりで、入力の中心ではない |
プロンプト例です。
右側のブラウザで開いているPleasanterの編集画面について、青い見出し部分をCSSで見やすく、スタイリッシュに改善したいです。
## 目標
入力する人が画面を見た瞬間に、各エリアの優先度を理解できるデザインにしてください。
必須入力欄必ず入力する項目があることが直感的に伝わる、最も目立つスタイルにする。
補足事項入力は任意であることが分かるようにする。ただし、必須入力欄よりは控えめな見た目にする。
レコード情報通常は入力の中心ではない情報なので、補足事項よりさらに控えめにする。
## デザイン条件
配色は3色以内にする。
見た目の違いだけでなく、「必須」「任意」「入力不要」のような意味が初見の利用者にも伝わるように考える。
既存の入力欄やレイアウトに影響しないよう、対象の見出しだけにCSSを適用する。
CSSには、意図が分かる簡潔なコメントを適宜入れる。
CSSは、Pleasanterの「テーブルの管理」→「スタイル」に貼り付けて利用できる形で提示する。
## 事前に確認してほしいこと
Pleasanterの構造やCSSの適用方法について、公式マニュアルと信頼できる技術記事を確認してください。
Pleasanter公式マニュアル
Qiitaなどの技術記事
そのうえで、ブラウザ上の編集画面の要素構造を確認し、実際のID・クラスに合わせたCSSを作成してください。
## 確認・提案の進め方
不足している情報がある場合は、作業前に確認してください。
画面の見た目を判断するためにスクリーンショットが必要な場合は、先にその旨を伝えてください。
CSSを提示する際は、各見出しのデザイン意図と、適用手順も短く説明してください。（１）最初のデザイン案では、意味が伝わりにくかった
最初のデザイン案は。。。なんか余計な日本語まで付け加えてきた。
いや、そうじゃなくて、と押し問答。
（２）最終的に決めた見せ方
| 区分 | 見せ方 | ねらい |
|---|---|---|
| 必須入力欄 | 濃い青緑の帯＋「入力必須」 | 最優先で入力してほしいことを伝える |
| 補足事項 | 薄い青緑の帯＋「任意」ラベル | 入力してもよいが、必須ではないと伝える |
| レコード情報 | 薄いグレーの帯 | 情報のまとまりであることを伝える |
補足事項の右側にあった説明文と、レコード情報の「入力不要」ラベル・右側の説明文は、最終的に外しました。
見出しの中に情報を詰め込みすぎず、必要な区別だけ残したほうが分かりやすかったためです。
（３）HTMLを見て、見出しごとに対象を絞る
確認した画面では、見出しは次のような構造でした。
<div id="SectionFields1Container">
<label class="field-section">必須入力欄</label>
</div>
<div id="SectionFields2Container">
<label class="field-section">補足事項</label>
</div>
<div id="SectionFields3Container">
<label class="field-section">レコード情報</label>
</div>見出しの文字そのものではなく、親要素のIDを使うと、対象を絞ってスタイルを付けられます。
- 必須入力欄：
#SectionFields1Container - 補足事項：
#SectionFields2Container - レコード情報：
#SectionFields3Container
単に .field-section とだけ書くと、ほかの見出しまで変わる可能性があります。「どの見出しの中の .field-section か」まで書くのが安心です。
（４）最終的に追加したCSS
必須入力欄の濃い青緑の帯は、すでにあったスタイルを使いました。ここでは、補足事項とレコード情報の見せ方を調整するために、既存のスタイルの末尾へ追記したCSSを掲載します。
/* 見出しの基本色：濃い緑・濃いグレー・白 */
:root {
--section-primary: #0F766E;
--section-neutral: #475569;
--section-white: #FFFFFF;
}
/* 3つの見出しに共通する設定 */
#SectionFields1Container .field-section,
#SectionFields2Container .field-section,
#SectionFields3Container .field-section {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin: 24px 0 12px;
padding: 10px 12px;
border-radius: 6px;
box-sizing: border-box;
}
/* Pleasanter標準の開閉アイコンは非表示 */
#SectionFields1Container .field-section > span,
#SectionFields2Container .field-section > span,
#SectionFields3Container .field-section > span {
display: none;
}
/* 必須入力欄：最も強く目立たせる */
#SectionFields1Container .field-section {
background: var(--section-primary) !important;
color: var(--section-white) !important;
font-size: 16px;
font-weight: 700;
letter-spacing: .04em;
box-shadow: 0 4px 12px rgb(15 118 110 / 24%);
}
#SectionFields1Container .field-section::after {
content: "入力必須";
margin-left: auto;
padding: 3px 8px;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
}
/* 補足事項：任意入力であることを示す */
#SectionFields2Container .field-section {
border: 1px solid rgb(15 118 110 / 40%);
border-left: 6px solid var(--section-primary);
background: rgb(15 118 110 / 10%) !important;
color: var(--section-primary) !important;
font-size: 15px;
font-weight: 700;
}
#SectionFields2Container .field-section::before {
content: "任意";
flex: 0 0 auto;
padding: 3px 8px;
border-radius: 4px;
background: var(--section-primary);
color: var(--section-white);
font-size: 12px;
font-weight: 700;
}
/* レコード情報：入力エリアより控えめにする */
#SectionFields3Container .field-section {
border: 1px solid rgb(71 85 105 / 30%);
border-left: 6px solid var(--section-neutral);
background: rgb(71 85 105 / 10%) !important;
color: var(--section-neutral) !important;
font-size: 14px;
font-weight: 700;
}このCSSで、補足事項には「任意」と表示し、レコード情報は補足事項より控えめな帯にしました。
CSSで文字も表現できるんですねえ。
（５）Workに頼むときに伝えたかったこと
ブラウザを見てもらえるAIでも、最初から「いい感じに変更して」と任せきりにするのは少し不安です。
利用者目線でどうしたら使いやすいか、目的をもって、次のように伝えると安心です。
プリザンターのテスト環境にある対象テーブルで、見出しの見た目を整えたいです。
目指すのは、毎日使う事務作業の画面として、派手すぎず、
初めて使う人にも「必須」「任意」が分かるデザインです。
まずは画面と既存スタイルを確認し、CSS案を複数提案してください。
私が選ぶまでは保存・変更しないでください。
変更対象は、このテーブルの「スタイル」だけです。
レコード、項目設定、権限設定、ほかのテーブルは変更しないでください。
設定後は、新規作成画面と編集画面を確認して、変更内容と確認結果を報告してください。「どこまで変えてよいか」と「いつ確認してほしいか」を最初に書いておくと、作業のイメージを共有しやすくなります。
５．Workの記録は、成果物として残しておく
通常のChatには共有リンクを作る機能がありますが、今回使ったWorkでは、作業の会話そのものを共有するボタンは見当たりませんでした。
そのため、今回の作業内容はMarkdownファイルとして保存しました。
- 変更前に何に困っていたか
- AIへ何を渡したか
- 最初の案でどうなったか
- 最終的に使ったCSS
- どの画面で確認したか
この五つを残しておくと、あとから「なぜこの !important があるのだろう？」となったときにも追いかけやすいです。
Workで作業したら、最後に「今回の作業内容、変更したCSS、確認結果、元に戻す方法をMarkdownでまとめてください」と頼むのもよさそうです。
６．AIでスタイルを変えるときの注意点
社内ルールを先に確認する
AIの利用は社内のルールを確認してから行ってください。
HTML、スクリーンショット、コメント本文には、社内情報や個人情報が含まれることがあります。
AIへ渡してよい情報かを確認し、必要ならテストデータに置き換えたり、伏せ字にしたりします。ログインID、パスワード、APIキーはチャットに書きません。
AIの答えを信じすぎない
AIが提案したCSSは、あくまでたたき台です。
プリザンターのバージョン、テーマ、項目の設定によってHTMLや標準CSSは変わるため、別の環境では同じように見えないことがあります。
次の確認をセットにします。
- テスト環境またはテスト用テーブルで試す
- 新規作成画面と編集画面の両方を見る
- 狙った場所以外に影響していないか見る
- 画面幅を変えたときも確認する
- 追加したCSSを消せば元に戻せるか分かるようにしておく
スタイルは、ほどほどにする
スタイルを変え始めると、色も線も文字サイズも、いろいろ変えたくなります。
でも、赤字や太字や枠線が多すぎると、結局どこが大事なのか分からなくなりそうです。
今回の見出しも、「おしゃれにする」より「入力する人が迷わない」ことを優先しました。伝えたいことを伝えるには、シンプルであることも大事ですね。
2026年8月のアップデート：ドラフト出力も使えそう
2026年8月12日のアップデートで、スクリプト・スタイル・HTMLにドラフト出力が追加されたとのことです。
利用者がいない夜中に、こっそり変更を試さなくてもよくなるかもしれません。これは朗報！
ただし、ドラフトで確認できても、本番と同じように新規作成画面・編集画面・画面幅を確認することは大切です。
プリザンターの直近のアップデート情報 から抜粋
・スクリプト、スタイル、HTMLのドラフト出力を追加。
記事の検証環境は 1.5.2.0、ドラフト出力の追加は 1.5.7.0 です。1.5.2.0ではドラフト出力を使えないため、今回は試していません。バージョンアップしなきゃ！
まとめ
今回のポイントは次の3つです。
- AIへ「やりたいこと」「HTML」「現在のCSS」を渡すと、CSSの相談がしやすい
- コメントエリアの幅を変えるときは、幅だけでなく親要素・背景色まで見ると整えやすい
- 見出しは色の濃淡だけでなく、「任意」のような短い言葉を添えると初見の人にも伝わりやすい
CSSに詳しくない人にとって、AIは便利な相談相手になりそうです。
ただし、最後に「これで本当に使いやすいかな？」と判断するのは、実際に使う私たちです。AIの案を参考にしながら、テスト環境で少しずつ試していこうと思います。
なお、今回はブラウザユースで設定の変更までAIにやってもらっていますが、これは「できるかな？」というテストもかねてやったことですので、普段はあまりAIに権限を渡しすぎるのはお勧めしません。テスト環境で行うならまだよいですが、本番環境では注意深く人間が設定の変更を行うことをお勧めします。
また、ちょいちょい同様のことをおこなうようであれば、プロジェクトにしておくと便利です。
今回は、chatGPTでやっていますが、Claudeでも同様に行えると思います。なお、今回はモデルはTerra、推論レベルは「高」でやっています。
お読みいただきありがとうございました！
コメント