: 870 (ﾜｯﾁｮｲ 6b31-B3Cu) [sage] 2025/08/04(月) 15:31:35.52 ID:626kAffw0(1/5) AAS
タブの垂直間隔と水平間隔を見た目上1pxしたいが1pxで指定すると実際は2pxになります
なので0.5pxで指定すると見た目上1pxになるが、アイコンと文字よりタブが下方向にずれたように見えます
環境によっては下のバーにタブが少し重なりますし、他にも色々と表示の乱れが出ますね。
対策として垂直間隔と水平間隔の余白を無くし、タブの右端と下端に背景色で'box-shadow'を使い擬似的に垂直間隔と水平間隔の余白を1pxに見えるようにしました。
多段タブや他の表示には影響は無いと思いますがどうでしょうか？

画像ﾘﾝｸ


/* タブ高さ・余白を調整する */
:root {
--tab-min-height: 25px !important;
--tab-block-margin: 0px !important;
--tab-inline-padding: 6px !important;
}

/* 通常タブの水平間隔の余白を無くす */
.tabbrowser-tab {
display: inline-block !important;
margin-inline: 0 !important;
}

/* ピン留めタブの水平間隔を無くす */
.tabbrowser-tab[pinned] {
padding-inline: 0 !important;
}

---

878

876(3): Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 17:01:01.13 ID:R8dnqpmrH(2/6) AAS
>>874
総括すると、このような感じ：画像ﾘﾝｸ


:root {
--tab-overflow-clip-margin: 1px !important; /* タブ間の水平間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-inline-padding: 6px !important; /* タブの左右の余白 */
--tab-block-margin: 1px !important; /* タブ間の垂直間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-min-height: 25px !important;
}

.tab-label-container {
height: auto !important;
}

.tab-content[pinned] {
padding-inline: 5px !important; /* ピン留めされたタブの左右余白 */
}

/* 以下はスクリーンショットの真似 */
.tab-background {
--background: rgb(180, 180, 180);
background: var(--background) !important;
box-shadow: 1px 1px var(--background) !important;
border-radius: 2px !important;

&[selected] {
--background: rgb(148, 163, 179);
}
}

877(1): Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 17:32:18.01 ID:R8dnqpmrH(3/6) AAS
修正：

:root {
--tab-overflow-clip-margin: 0px !important; /* タブ間の水平間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-inline-padding: 6px !important; /* タブの左右の余白 */
--tab-block-margin: 0px !important; /* タブ間の垂直間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-min-height: 25px !important;
}

.tab-label-container {
height: auto !important;
}

.tab-content[pinned] {
padding-inline: 5px !important; /* ピン留めされたタブの左右余白 */
}

/* Active Tab BG */
.tab-background:is([selected], [multiselected]) {
background-color: #94a3b3 !important;
box-shadow:
inset 0 -1px 0 0 #d2d2d2, /* 下端に1pxの影 */
inset 1px 0 0 0 #d2d2d2 !important; /* 右端に1pxの影 */
}

/* Inactive Tab BG */
.tab-background:not([selected], [multiselected]) {
background-color: #a5a5a5 !important;
box-shadow:
inset 0 -1px 0 0 #d2d2d2, /* 下端に1pxの影 */
inset 1px 0 0 0 #d2d2d2 !important; /* 右端に1pxの影 */
}

880(1): Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 19:22:55.49 ID:R8dnqpmrH(4/6) AAS
>>878
>タブを背景色で削るんじゃなくてタブの色を端に足せばいいんですよね。

スクショの中に box-shadow の設定があるって気づいてなかったから、ただ真似してみただけで、特におすすめってわけじゃないです。

実際、どっちのやり方も少し瑕疵があるので：
画像ﾘﾝｸ

どっちが気になるかは、まあ人それぞれって感じですね。

もしかしたら完璧な方法もあるかもだけど、ざっと試した感じでは見つかりませんでした。

あと、「Page Title in URL Bar」（URLバーにページタイトルを表示）もぜひ試してみてくださいね：
外部ﾘﾝｸ[md]:github.com （＃の部分も含めてね）
スクリプトのダンロード：
外部ﾘﾝｸ[js]:raw.githubusercontent.com

ページタイトルが表示されつつ、UIもコンパクトにできるので、そういうのが好きな人にはけっこういいかも。

883(1): Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 21:57:51.32 ID:R8dnqpmrH(6/6) AAS
>>882

> または、タイトルバーが自動で隠れてマウスオンで表示してくれるギミックがあるならそういう時に欲しいです。

まぁ。。。 これではどうですか？
chrome に適当に JS ファイルを作って、以下のコードを貼り付けて再起動してみてください。
なぜ +2 なのかはもう忘れました、十年以上前の拡張機能のロジークからなので。
とりあえず適当に書いただけなので、バグがあるかもしれません。www

///////////////////////////////

let $ = s => document.querySelector(s);
let p = v => Services.prefs.setIntPref("browser.tabs.inTitlebar", v);
let t = $("#fullscr-toggler");
let b = $("#browser");
let d = document.documentElement;
let e = (n, e, a, c) => n.addEventListener(e, e => e.target == n && a(e), c);
t.style.setProperty("display", "block", "important");
e(t, "mouseenter", e => p(0));
e(b, "mouseenter", e => p(1));
e(d, "mouseleave", e => e.clientY < (outerWidth - d.clientWidth) / 2 + 2 && p(0), 1);