SharePoint Listsの列をカスタマイズ

SharePointリストの書式設定を使用してカスタマイズすることが可能なようです。
（ブログを書く環境でSharePointリストを使用できないため、調べた結果をまとめておきます）

Jsonオブジェクトを使用してカスタマイズ

Jsonを使用して、その列の値に対して条件付き書式を設定したり、あるワードが入ったらそのワードに適したアイコンとワードを表示させたり、リスト全体に対してリストをより見やすいようにカスタマイズすることが可能です。

参考列の書式設定で SharePoint をカスタマイズするMicrosoft Learn

設定の仕方

列に設定する場合

カスタマイズしたい列を選択し、[列の書式設定] を選択します。 [列の設定] で、[この列の書式を設定する] を選択します。すると、デフォルトで簡単に設定できる列の書式設定が表示されます。

この下部分にある、詳細な設定をするをクリックするとJsonでカスタマイズできるウィンドウが表示されます。

ビューに設定する場合

リストの右上にある「現在のビューの書式設定」をクリックします。

列同様、デフォルトでデフォルトは1行ごとに色を変更する書式と条件付き書式を設定できる書式が表示されますが、画面下部分にある詳細な設定をクリックするとJsonでカスタマイズできるウィンドウが表示されます。

Jsonの書き方

2タイプの書き方があります。

デフォルトは下記のようなJSON形式。

Json

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "block"
},
"children": [
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}

もうひとつはExcelの関数のように書く方法です。

Json

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
  "padding": "4px",
  "background-color": "=if(@currentField < 40, '#ff0000', '#00ff00')"
  }
}

自分でJsonを一から書く場合は、使用できる関数などが下記のリストに載っていますので、こちらを参考に書いてください。

参考書式構文リファレンスMicrosoft Learn

また罫線や色はクラスを持っています。下記のWebサイトがまとめられていてとても分かりやすいです。
参考 SharePoint Online CSS ClassesSharePoint Online CSS Classes

設定したいことによって書き方が異なるため、したいことを見つけてコピーした方が早いかもしれません。SampleがMicrosoft Learnにも載っていますが、GitHubにまるまるコピーできるコードが載っているためこちらを参照すると簡単に設定可能です。