【Firefox 158】サイドバーをマウスオーバーで自動開閉する方法【Nova UI対応】

Tips

概要

Firefoxのサイドバーを、マウスオーバーで自動開閉できるようにカスタマイズしました。

通常時は20pxの幅に収納し、マウスを乗せると200pxに展開します。

今回のポイントは、サイドバーを展開してもWebページの表示領域が変わらないことです。

単純にサイドバーの幅を変更する方法では、開閉のたびにWebページが押し縮められてしまいます。

そこで、サイドバーの占有幅を固定し、内部の表示部分だけをWebページの上に重ねる「オーバーレイ方式」を採用しました。

今回の動作確認環境は以下のとおりです。

項目環境
ブラウザFirefox 158.0（64-bit）
サイドバーUINova UI
設定sidebar.revamp = true
タブ管理Tree Style Tab
カスタマイズuserChrome.css

サンプルコード

以下のCSSを userChrome.css に記載します。

/* ==========================================
   Firefox 158 / Nova UI
   サイドバー自動開閉（オーバーレイ方式）

   通常時：20px
   ホバー時：200px
   Webページの表示幅は固定
   ========================================== */

:root {
    --sidebar-closed-width: 20px;
    --sidebar-open-width: 200px;
    --sidebar-animation-speed: 160ms;
}

/* サイドバーの占有幅を固定 */
#sidebar-box {
    position: relative !important;
    box-sizing: border-box !important;
    flex: 0 0 var(--sidebar-closed-width) !important;

    width: var(--sidebar-closed-width) !important;
    min-width: var(--sidebar-closed-width) !important;
    max-width: var(--sidebar-closed-width) !important;

    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
    z-index: 4 !important;
    transition: none !important;
}

/* サイドバー本体をWebページ上に重ねて表示 */
#sidebar-box > .sidebar-browser-stack {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    box-sizing: border-box !important;
    width: var(--sidebar-open-width) !important;
    min-width: var(--sidebar-open-width) !important;
    max-width: var(--sidebar-open-width) !important;
    height: 100% !important;

    /* 通常時は20pxだけ残して非表示 */
    clip-path: inset(
        0
        calc(var(--sidebar-open-width) - var(--sidebar-closed-width))
        0
        0
    ) !important;

    opacity: 0 !important;
    z-index: 4 !important;

    transition:
        clip-path var(--sidebar-animation-speed) ease !important;
}

/* マウスオーバー時に展開 */
#sidebar-box:hover > .sidebar-browser-stack {
    clip-path: inset(0) !important;
    opacity: 1 !important;
}

/* サイドバー内部ブラウザの幅を固定 */
#sidebar-box > .sidebar-browser-stack > #sidebar {
    width: var(--sidebar-open-width) !important;
    min-width: var(--sidebar-open-width) !important;
    height: 100% !important;
}

/* サイドバーの境界線を非表示 */
#sidebar-splitter {
    display: none !important;
}

CSSを保存したら、Firefoxを再起動して反映します。

詳細

userChrome.cssの有効化

Firefoxの画面をCSSでカスタマイズするには、userChrome.css を有効にする必要があります。

まず、Firefoxのアドレスバーに about:config と入力します。

続いて、以下の設定を検索し、値を true に変更します。

toolkit.legacyUserProfileCustomizations.stylesheets

次に、about:support を開き、「プロファイルフォルダー」から使用中のプロファイルを確認します。

プロファイルフォルダー内に chrome フォルダーを作成し、その中に userChrome.css を配置します。

既にファイルがある場合は、今回のCSSを追記するか、既存のサイドバー関連CSSと置き換えてください。

Webページの表示幅を固定する仕組み

通常、FirefoxのサイドバーはWebページと横並びに配置されています。

そのため、サイドバーの幅を20pxから200pxに変更すると、Webページの表示領域も変化します。

今回のCSSでは、外側の #sidebar-box の幅を常に20pxに固定しています。

#sidebar-box {
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
}

これにより、サイドバーがレイアウト上で占有する幅を一定に保っています。

一方、内部の .sidebar-browser-stack は position: absolute で配置し、幅を200pxに固定しています。

#sidebar-box > .sidebar-browser-stack {
    position: absolute !important;
    width: 200px !important;
}

この構成にすることで、サイドバーの表示部分だけをWebページの上に重ねられるようになります。

マウスオーバーによる開閉

サイドバーの開閉には clip-path を使用しています。

通常時は200pxのサイドバーのうち、左端20pxだけが表示対象になるように切り取ります。

clip-path: inset(0 180px 0 0);

マウスオーバー時には、切り取りを解除します。

#sidebar-box:hover > .sidebar-browser-stack {
    clip-path: inset(0) !important;
    opacity: 1 !important;
}

これによって、Webページのレイアウトを変更せずにサイドバーを展開できます。

収納時のタブ表示を非表示にする

当初は、収納した20px部分にTree Style Tabのアクティブタブの枠が残っていました。

そこで、通常時に opacity: 0 を指定し、収納中の内容を透明にしています。

マウスオーバー時には opacity: 1 に切り替えることで、サイドバーの内容が表示されます。

なお、収納時の20px部分は見た目上は透明ですが、マウスオーバーの判定領域として残ります。

幅やアニメーション速度の調整

収納幅、展開幅、アニメーション速度は、CSSの冒頭で変更できます。

:root {
    --sidebar-closed-width: 20px;
    --sidebar-open-width: 200px;
    --sidebar-animation-speed: 160ms;
}

例えば、展開幅を250pxに変更したい場合は、--sidebar-open-width を 250px に変更するだけです。

ただし、現在のCSSでは透明度の切り替えは即時に行われ、clip-path のみにアニメーションが適用されます。

注意点

今回のCSSは、Firefox 158.0のNova UI環境で動作を確認しています。

Firefoxのアップデートによって内部の要素構造やスタイルが変更された場合、正常に動作しなくなる可能性があります。

また、既存のサイドバー用CSSと競合する場合があるため、導入前に userChrome.css をバックアップしておくことをおすすめします。

おすすめ書籍

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

1冊ですべては身につきませんが、HTML と CSS について丁寧に解説されています。全体像を理解できるので初心者にもお勧めです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
created by Rinker
CSS設計完全ガイド　～詳細解説＋実践的モジュール集

CSS について学ぶのであれば必須の1冊です。丁寧に解説されていますので内容についてもわかりやすいです。CSS 設計で重要視しなければいけないポイントや、保守性の高いコードを書くためのルールが具体的な例と一緒に書かれています。CSS だけでなく他のコードを書く際にもこの考え方が役に立つためおすすめします。ただ、書籍版は分厚いのでご注意ください。

CSS設計完全ガイド　～詳細解説＋実践的モジュール集
created by Rinker

関連記事

【Firefox 158対応】サイドバーのヘッダーを非表示にする方法（userChrome.css）
概要Firefoxのアップデートにより、サイドバーの構造が変更されたようで、これまで使用していた #sidebar-header {display: none !important;} ではヘッダーを非表示にできなくなりました。Firefo…
naberium.com

おわりに

Firefoxのサイドバーを、マウスオーバーで自動開閉する方法を紹介しました。

今回の方法では、サイドバーの占有幅を20pxに固定し、必要なときだけ200pxのサイドバーをWebページの上に重ねて表示します。

これによって、Webページの表示領域を変更せずにサイドバーを開閉できるようになりました。

Tree Style Tabなどのサイドバーを活用しながら、Webページの表示領域も広く確保したい場合に便利なカスタマイズです。

タイトルとURLをコピーしました