Mozilla Firefox 多段タブスレ Part.3

Mozilla Firefox 多段タブスレ Part.3 (959ﾚｽ)
上下前次 1-新
通常表示 512ﾊﾞｲﾄ分割ﾚｽ栞

829: 名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ ca31-/90x) [sage] 2025/07/29(火) 11:28:18.37 ID:373Vv71c0

以前タブ間の間に擬似的にスペースを入れてましたがCSSの仕様変更に影響を受けにくいように区切り線を入れるように変更してみました。
背景色でタブを削るより見栄えが若干ですが良くなると思います。

/* UI密度コンパクト用 タブ間に区切り線を入れる */
/* タブの右端に縦の区切り線を追加（最後のタブには表示しない） */
.tab-background:not(:last-child)::after {
content: ''; /* 視覚的な線を描くための空要素 */
position: absolute; /* 親要素 .tab-background を基準に絶対位置指定 */
top: 0; /* 上端から開始 */
right: 0; /* 右端に配置（区切り線の位置） */
width: 1px; /* 線の太さ：1px */
height: 100%; /* タブの高さ全体に伸ばす */
background-color: #d2d2d2; /* 区切り線の色（タブバーと同色推奨） */
}

/* 多段タブ用 タブの下に区切り線を入れる */
/* タブの下端に横の区切り線を追加（すべてのタブに適用） */
.tab-background::before {
content: ''; /* 視覚的な線を描くための空要素 */
position: absolute; /* 親要素 .tab-background を基準に絶対位置指定 */
bottom: 0; /* 下端に配置（横線の位置） */
left: 0; /* 左端から開始 */
width: 100%; /* タブの幅全体に線を伸ばす */
height: 1px; /* 線の太さ：1px */
background-color: #d2d2d2; /* 区切り線の色（タブバーと同色推奨） */
}

/* 区切り線を正しく描画するため、タブ背景に相対位置を指定 */
.tab-background {
position: relative; /* ::before / ::after の絶対位置指定の基準にする */
}

http://egg.5ch.net/test/read.cgi/software/1710673850/829

上下前次 1-新書関写板覧索設栞歴

あと 123 ﾚｽあります
ｽﾚ情報赤ﾚｽ抽出画像ﾚｽ抽出歴の未読ｽﾚ AAｻﾑﾈｲﾙ

ぬこの手ぬこTOP 0.018s