Mozilla Firefox 多段タブスレ Part.3 (974ﾚｽ)
Mozilla Firefox 多段タブスレ Part.3 http://egg.5ch.net/test/read.cgi/software/1710673850/
上
下
前次
1-
新
通常表示
512ﾊﾞｲﾄ分割
ﾚｽ栞
抽出解除
ﾚｽ栞
ﾘﾛｰﾄﾞ規制
です｡10分ほどで解除するので､
他のﾌﾞﾗｳｻﾞ
へ避難してください｡
874: 870 (ﾜｯﾁｮｲ 6b31-B3Cu) [sage] 2025/08/04(月) 15:31:35.52 ID:626kAffw0 タブの垂直間隔と水平間隔を見た目上1pxしたいが1pxで指定すると実際は2pxになります なので0.5pxで指定すると見た目上1pxになるが、アイコンと文字よりタブが下方向にずれたように見えます 環境によっては下のバーにタブが少し重なりますし、他にも色々と表示の乱れが出ますね。 対策として垂直間隔と水平間隔の余白を無くし、タブの右端と下端に背景色で'box-shadow'を使い擬似的に垂直間隔と水平間隔の余白を1pxに見えるようにしました。 多段タブや他の表示には影響は無いと思いますがどうでしょうか？ https://tadaup.jp/8nOfUBzqF.png /* タブ高さ・余白を調整する */ :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; } http://egg.5ch.net/test/read.cgi/software/1710673850/874
875: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 16:58:38.97 ID:R8dnqpmrH >>874 > タブの垂直間隔と水平間隔を見た目上1pxしたいが1pxで指定すると実際は2pxになります 上記の inline-padding や block-margin は、padding-left・right や margin-top・bottom を一括で設定する、Firefox の組み込みパラメータです。 そのため 1px を指定すると、実際には 2px の余白が追加されてしまいます また、小数点指定は環境によって表示の乱れなど様々な問題を引き起こすため、0.5px などの指定は避けた方が無難です なお、box-shadow は要素のサイズやレイアウトに影響を与えないため、安心して使用できます ただし、以下のルールでは組み込みパラメータを使用せず、margin や padding を直接指定するため、レイアウトが乱れる可能性があります： ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ .tabbrowser-tab { /* デフォルトは flex なので、inline-block は全然別のレイアウト設定です inline-block と flex の違いや動作原理を理解していない場合は、使用しないでください */ display: inline-block !important; /* タブ間の水平間隔は :root の --tab-overflow-clip-margin で指定してください */ margin-inline: 0 !important; } /* ピン留めタブの水平間隔は .tab-content[pinned] の padding-inline で指定してください */ .tabbrowser-tab[pinned] { padding-inline: 0 !important; } http://egg.5ch.net/test/read.cgi/software/1710673850/875
876: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 2025/08/04(月) 17:01:01.13 ID:R8dnqpmrH >>874 総括すると、このような感じ：https://tadaup.jp/8NRWj8SA6.png :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); } } http://egg.5ch.net/test/read.cgi/software/1710673850/876
ﾒﾓ帳
(0/65535文字)
上
下
前次
1-
新
書
関
写
板
覧
索
設
栞
歴
ｽﾚ情報
赤ﾚｽ抽出
画像ﾚｽ抽出
歴の未読ｽﾚ
AAｻﾑﾈｲﾙ
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.042s