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

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