表のタイトルで挙動を変えたい

久しぶりの更新。

9月から/alea-areaというXIの情報サイトを作り始め、そちらでもscrapboxで運用しているため改めてscrapboxの仕様について理解しなおす機会になっています

さて、そのなかでも特に最近勉強してるのはuserCSSについて。

私は元々CSSを触ったことが無かったので右も左も分からない状態でしたが、他のscrapboxプロジェクトを見たりsettingや開発用ツールを使ってちょっとずつ理解できるようになってきました。楽しい。

scrapboxでは独自記法で、本文中に文字装飾やブロックの挿入ができますが、テーブルがあまりにも使いにくい。

デフォルトのデザインはかなり地味だし、表が大きくなったり情報量が増えるとすぐに視認性が悪くなりやすいという問題があります。

他プロジェクトではuserCSSを使って表スタイルをカスタマイズしている例がありました。

なるほど、CSSを使うと自由にデザインできるらしい。

...特定の表タイトルを持つ表にだけデザイン指定できないかな

他のプロジェクトではタイトル指定の表カスタマイズ例が見つからなかった

結論

一部ブラウザでは非対応だが実装は可能

:has()疑似クラスが使えるブラウザ→〇

2023/10/13現在、FireFox除く大体のブラウザで使用可能

FireFoxでも詳細設定を変更すればできる

:has()自体実装が比較的最近なので、ブラウザバージョンが少しでも古いと対応できない可能性がある

code:style.css

/*「test」の1行目だけ文字を大きくする*/

.line:has( ahref$="/test.csv" ) + .line .table-block .cell{

font-size: 1.5em;

}

2行目以降を選択するときはセレクタを.line:has( a[href$="/test.csv"] ) + .line + .line + (...) .table-block .cell と[+ .line]を増やせばok

構造

scrapboxの大体の構造は次のようになっています

table:構造

行数階層1 階層2 階層3 階層4 階層5

表タイトル div .line div .telemere 略

style data-table-id='hogehoge'

span .table-block span .indent-mark 略

span .indent span .c-0.c-1....

a href=[テーブルapi] span .char-index6

span .char-index7

略

表1行目 div .line div .telemere

span .table-block span .indent-mark 略

span .indent span table-data-id='hogehoge' .cell

表タイトルを取得するには.table-block内のaタグ[href=$'(表タイトル).csv'で指定できます、

しかし、表の本文などは上の表で示すところの「表1行目」かつ「階層4」の所にあります。

つまり親階層が異なるため、:has()疑似クラスを使う必要があります

開発者用ツールなどから、table-data-idを取得することで:has()を使わずに特定の表のみに適応させることができますが、拡張性は低いです