【pleasanter】一覧のスタイル①

プリザンター開発に挑んでいる初心者おばさん。会社でやっていて、一覧の横幅が思うようにならなかったので、ちまちま家で研究しました。

※おことわり
2024年5月時点の情報です。プリザンターのバージョンは 1.3.50.2 です。Google Chrome でやっています。
javascript,html,cssともに初心者です。調べながら、やってみながら、きっとこうすればいいんだ！という感じで書いていますので、間違っている場合、効率的な書き方ではない可能性が大いにあります。間違ってるよ！とか、こうしたほうがいいよ！ということがありましたら、コメント等で教えていただけると大変ありがたいです。

１．はじめに
２．一覧画面の列の横幅の調整
３．最後に
４．参考文献、記事

１．はじめに

会社でやっていて、一覧の横幅が思うようにならなかったので、ちまちま家で研究してみた。

おもに以下の公式サイトの FAQ を見ながらやりました。

FAQ：一覧画面で横幅のサイズを調整したい

FAQ：一覧画面の列の幅を調整したい

２．一覧画面の列の横幅の調整

一覧画面の例。開発者用ツールでスタイルなどをのぞいてみたけどよくわからなかった。

一覧画面自体を画面横幅いっぱい width:100%
最低の横幅はあり、入力値や分類項目か説明項目かなどの種類により、適当に調整されている？ように見える。

（１）比率でやってみた

担当者・分類、説明項目で幅を一定にしたいと思います。

比率でやってみます。

スタイルに以下のコードを入力します。出力先は「一覧」にチェックします。
比率は目分量でエイやです。O型なもので。

.grid-title-body {
    min-width:0;
}

[data-name="ResultId"],
[data-name="Status"]
{
    width: 3%;
}

[data-name="Owner"],
[data-name^="Class"]
{
    width:6%;
}

[data-name="TitleBody"],
[data-name^="Description"]
{
    width:20%;
}

こうなりました。測ってないけど、担当者と分類が同じくらいの幅で、説明とタイトルが同じくらいの大きめの幅で、こんなもんじゃね？って感じ。

簡単にcssコードの解説。
スタイルを指定する css は
何を { どのように } と書きます。
「何を」の部分はタグやID、クラスなどで「この要素を！」と指定します。
「どのように」の部分は何を：どうすると書きます。例えば背景色を黒では background-color : brack; のように書きます。

こちらの記事がわかりやすかったです。
CSSのセレクタとは？覚えておきたい25種類と書き方

.grid-title-body { min-width:0; }
これは、要るか要らないかわからなかったのですが、タイトル/内容、内容および説明項目の最小の幅が200pxに設定されているとのことでしたので、最低の幅200pxを解除しています。
FAQ：一覧画面の列の幅を調整したい

[data-name=”ResultId”],
[data-name=”Status”]
{
width: 3%;
}

IDと状況の列を全体の3%の指定にしています。

一覧の列を幅を指定する際は [data-name=”XXXX”]とすると、対象の列を指定できます。
XXXX部分が何になるかは、開発者ツールで見てみるとわかります。
また、カンマで区切ってつなげると、複数の要素を指定できます。

[data-name=”Owner”],
[data-name^=”Class”]
{
width:6%;
}

こちらも同じように指定しています。担当者と分類項目を全体の6%と指定しています。
分類項目は
[data-name^=“Class”] → Classで始まると指定しています。

同様に、タイトル/内容と説明項目は20％と指定しています。

更新者と更新日時は余った分でいいやと思って、指定していません。

（２）固定値でやってみた

項目を増やしました。担当者と管理者が幅が狭くなり折り返してしまったので、広げたいと思います。

スタイルに以下のコードを入力します。出力先は「一覧」にチェックします。

[data-name="Owner"],
[data-name="Manager"]
{
    width: 600px;
}

スタイル変更前後の画面イメージです。
担当者と管理者は広がった。よかった。ほかの項目がちょっと詰まったり、融通してくれているようです。

（３）一覧全体の幅を広げてみた。

項目をもっと増やしました。

すると、担当者と管理者の幅を600pxと指定するスタイルが無視されてしまいました。

後のほうの項目は横にはみ出ちゃっていいから、とにかく担当者・管理者の横幅はキープしたい！
table：100% となっていた、ここを120%広げてみました。（だいたいでやってみた）

table {
    width: 120%;
}

[data-name="Owner"],
[data-name="Manager"]
{
    width: 600px;
}

できた。適当だが、これでいいのだろうか。

３．最後に

スタイルをあれこれするのに、web界の素人はこちらの記事に大変助けられています。
CSSのセレクタとは？覚えておきたい25種類と書き方
ありがとうございます！

あとですね、web界の素人がプリザンターであれこれやりたいが。。。むむむむとなってしまいますが、「お悩み解決プリなま」を見ると非常に良いです。見るだけで「私にもできる」気になります。
正直なところ、公式サイトのマニュアルを見ても素人には「ちょっと何言ってるかわからない」となってしまうことがあるのですが、動画の「プリなま」を見るとわかるんです！親切に説明してくださってるんです。プリザンターの生みの親かつインプリム社長の内田さんが直々に。わかりやすいんです素人にも。

動画の目次？みたいなページがあるので、そこで興味のある所を探してみるもよし。第一回から通してみるもよし。私は第一回から通しで見始めています。
動画の目次？はこちらです。サンプルコードもあるです。
皆さまからいただいたお悩みを解決する生配信「プリなま」そのアーカイブ動画をサンプルコード付きで公開

本記事の次の回で、プリなまで学んだことも含めて一覧のスタイルをやっていますので、よろしければそちらもどうぞ。
【pleasanter】一覧のスタイル②