画面幅に応じてページの表示スケールを変更する
UserCSS.icon
app.css に指定されている Cosense 標準の値よりも広い段階でページ余白が小さくなるようにする
さらにテキストの表示サイズと行間を小さくする
行間を変えるのは、最適な行間が一行あたりの文字数に依存するため
フォントサイズと共に調整すること
ウィンドウサイズの違いは、単に端末のサイズやデスクトップの表示領域の制約によるもの
狭い画面に表示させるのは、「一度に表示される情報量を減らす」ためではない
フォントサイズと行間をブラウザの幅に応じて変動させる。
さらに、フォントサイズと行間に応じてページ余白の縮尺が変動するようにする。
手狭な画面サイズではテキストがわずかに小さく表示される（--page-font-sizeに指定）
これにより、モバイル端末での画面情報量が若干増加する。
画面全体の幅を基準 (@media) に寸法が変わるようになっている箇所（app.css）をページの幅基準 (@container) に置き換える
結果として app.css の閾値より広い画面幅からページの余白が縮小される
ページの余白が最小値になる画面幅は、ページ脇のメニューボタンが画面上部のナビゲーションバーに移動する閾値より大きい値から。
サイドバー表示時（Infobox等）にもページの表示スケールが自動的に縮小される
現在の正確なページ幅を算出可能にする（変数--page-widthを提供する）
UserCSSに正確なページ幅を参照させたいことがある
ページを横スクロール可能にすると、ページの幅より長いものが表示されているときに意味もなく横スクロールされるようになってしまう
「sectionを水平線で区切る」「.section-title の太字を見出しにするUserCSS」、等
2026-07-04 Steamにpaddingが適用されていなかった問題を修正
2026-05-17: 変数指定の誤りを修正
--page-max-font-sizeを指定すべき箇所に--page-max-line-heightを指定してしまっていた
2026-02-17: 軽量化した
2026-01-06: padding-right, padding-leftの最小幅を Cosense 標準の値である21px以下にならないように変更。
2026-01-06: プレゼンテーションモード時に適用されないようにした。
2025-12-04: 初期値としてclamp()を使用するように変更
2025-12-04: app.css のメディアクエリーをオーバーライドできていなかった問題を修正
値を変更しても反映されないという致命的な問題があった
2025-11-19: テロメアの:hover時の表示がwidth: 5pxになってしまう問題を修正
2025-11-17: 全面的に書き直した
ページの余白を文字サイズとの本来の比率になるように変更。
star文字サイズに応じて余白が調整される。
テロメアが非表示になってしまう問題を修正。
カードのフォントサイズに干渉してしまう問題を修正。
.lineクラスはページだけでなくカードにも存在するため。
Stream のレイアウト崩れの問題を修正。
ページタイトルの既定のスタイリングにも干渉してしまっていた。
code:style.css
.page {
--page-max-font-size: 15px;
--page-min-font-size: 14px;
--page-font-size: clamp(var(--page-min-font-size, 14px), (767cqw / 15 / 29), var(--page-max-font-size, 15px));
--page-line-height: calc(28 / 15);
--page-min-line-height: 1.8;
--telomere-width: 5px;
/* 次の変数は他のUserCSSから参照するためのもの */
--page-width: calc(100% + var(--page-padding-left, 42px) + var(--page-padding-right, var(--page-padding-left, 42px)));
--calculated-paragraph-line-height: calc(var(--page-font-size, 15px) * var(--page-line-height));
}
.page-wrapper,
.project-events {
container-type: inline-size;
container-name: page;
}
code:var.css
.page {
--page-layout-unit: calc(var(--page-font-size, 15px) * var(--page-line-height) / 4);
--page-padding-top: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-right: var(--page-padding-left, 49px);
--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-left: calc(var(--page-layout-unit, 7px) * 7); /* 49px */
}
code:style.css
.page,
.editor,
.stream .page {
font-size: var(--page-font-size, 15px);
line-height: var(--page-line-height, 28px);
}
.app:not(.presentation) .page,
.stream .page {
padding:
var(--page-padding-top, 42px)
max(21px, var(--page-padding-right, var(--page-padding-left, 49px)))
var(--page-padding-bottom, 35px)
max(21px, var(--page-padding-left, 49px));
}
.line .telomere .telomere-border {
left: calc(-1 * max(21px, var(--page-padding-left, 49px)));
min-width: var(--telomere-width, 5px);
}
@container page (max-width: 767px) {
.page {
--page-line-height: var(--page-min-line-height, 1.8);
--page-padding-top: calc(var(--page-layout-unit, 7px) * 4); /* 28px */
--page-padding-right: calc(var(--page-layout-unit, 7px) * 3); /* 21px */
--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-left: calc(var(--page-layout-unit, 7px) * 3); /* 21px */
}
.app:not(.presentation) .page,
.stream .page {
padding:
var(--page-padding-top, 28px)
max(21px, var(--page-padding-right, var(--page-padding-left, 21px)))
var(--page-padding-bottom, 42px)
max(21px, var(--page-padding-left, 21px)) !important;
}
.line .telomere .telomere-border {
left: calc(-1 * max(21px, var(--page-padding-left, 21px))) !important ;
min-width: var(--telomere-width, 5px) !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
:where(.app:not(.presentation)) .page { padding: inherit; }
}
@media (max-width: 767px) {
:where(.app:not(.presentation)) .page { padding: inherit; }
.line .telomere .telomere-border {
left: inherit;
width: inherit;
}
}
code:full.css
.app:not(.presentation) .page {
--page-max-font-size: 15px;
--page-min-font-size: 14px;
--page-font-size: clamp(var(--page-min-font-size, 14px), (767cqw / 15 / 29), var(--page-max-line-height, 15px));
--page-line-height: calc(28 / 15);
--page-min-line-height: 1.8;
--telomere-width: 5px;
/* 次の変数は他のUserCSSから参照するためのもの */
--page-width: calc(100% + var(--page-padding-left, 42px) + var(--page-padding-right, var(--page-padding-left, 42px)));
--calculated-paragraph-line-height: calc(var(--page-font-size, 15px) * var(--page-line-height));
}
.page-wrapper,
.project-events {
container-type: inline-size;
container-name: page;
}
.app:not(.presentation) .page {
--page-layout-unit: calc(var(--page-font-size, 15px) * var(--page-line-height) / 4);
--page-padding-top: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-right: var(--page-padding-left, 49px);
--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-left: calc(var(--page-layout-unit, 7px) * 7); /* 49px */
}
.app:not(.presentation) .page,
.editor,
.stream .page {
font-size: var(--page-font-size, 15px);
line-height: var(--page-line-height, 28px);
}
.app:not(.presentation) .page,
.stream .page {
padding:
var(--page-padding-top, 42px)
max(21px, var(--page-padding-right, var(--page-padding-left, 49px)))
var(--page-padding-bottom, 35px)
max(21px, var(--page-padding-left, 49px));
}
.line .telomere .telomere-border {
left: calc(-1 * max(21px, var(--page-padding-left, 49px)));
min-width: var(--telomere-width, 5px);
}
@container page (min-width: 768px) and (max-width: 991px) {
.app:not(.presentation) .page {
--page-padding-top: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-left: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 5); /* 35px */
padding:
var(--page-padding-top, 42px)
max(21px, var(--page-padding-right, var(--page-padding-left, 42px)))
var(--page-padding-bottom, 35px)
max(21px, var(--page-padding-left, 42px));
}
.line .telomere .telomere-border {
left: calc(-1 * max(21px, var(--page-padding-left, 42px)));
}
}
@container page (max-width: 767px) {
.app:not(.presentation) .page,
.stream .page {
--page-line-height: var(--page-min-line-height, 1.8);
--page-padding-top: calc(var(--page-layout-unit, 7px) * 4); /* 28px */
--page-padding-right: calc(var(--page-layout-unit, 7px) * 3); /* 21px */
--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-left: calc(var(--page-layout-unit, 7px) * 3); /* 21px */
padding:
var(--page-padding-top, 28px)
max(21px, var(--page-padding-right, var(--page-padding-left, 21px)))
var(--page-padding-bottom, 42px)
max(21px, var(--page-padding-left, 21px));
}
.line .telomere .telomere-border {
left: calc(-1 * max(21px, var(--page-padding-left, 21px)));
min-width: var(--telomere-width, 5px);
}
}
@media (min-width: 768px) and (max-width: 991px) {
:where(.app:not(.presentation)) .page { padding: inherit; }
}
@media (max-width: 767px) {
:where(.app:not(.presentation)) .page { padding: inherit; }
.line .telomere .telomere-border {
left: calc(-1 * max(21px, var(--page-padding-left, 21px)));
min-width: var(--telomere-width, 5px);
}
}
#UserCSS