ブラウザの強制ダークテーマ対策で `border-color: transparent` を避ける

投稿 : 2026年2月22日

Web 技術は後方互換性を確保しつつ発展していますから、古い技術で作られた Web ページでも正しい使い方をしている限りは基本的に壊れることはありません。しかし既存の概念を覆す大きな出来事が起こった場合、稀にこの原則から外れることがあります。

2024年から2025年にかけて複数のブラウザに強制ダークテーマが実装されたことは、CSS 的にはこれまでの歴史の中でもエポックメイキングな出来事だったと思います。Netscape と IE が覇権争いをしていた時代と比べて、今はブラウザごとの表示差異に悩まされることは皆無となってきたところ、強制ダークテーマはレンダリングエンジンとは無関係にバラバラの表示結果となり、またそのナレッジも充分に蓄積されていません。

すなわち強制ダークテーマは利用者としては革命的な機能である一方で、Web 制作者の立場からは相当に悩ましい存在と言えます。そして本来あってはならないことですが、現実問題として「既存サイトが壊れる」事象が多数発生しています。

`border-color: transparent` の強制表示

そのようなものの一つに border-color: transparent があります。ボタンと説明文が横並びになっているコンポーネントを考えてみましょう。ボタンには通常細い枠線があるものですが、隣接する説明文も高さ位置調整のため透明な枠線を付けておくテクニックがあります。

<style>
  .button-with-description {
    display: block flex;
    gap: 10px;

    & button {
      all: unset; /* Reset style */
      border: 10px solid currentColor;
    }

    & .description {
      border: 10px solid transparent;
    }
  }
</style>

<div class="button-with-description">
  <button type="button">ボタン</button>
  <span class="description">ボタンの説明</span>
</div>

ブラウザの表示はこうなります。

サムネイル画像 — ボタンと隣接する説明文に `border: 10px solid transparent` が設定されたコンポーネントを Edge 144 で閲覧した様子。ボタンのみに枠線が表示、テキストの下端位置は揃っている。オリジナル画像

しかし強制ダークテーマを備えたブラウザのうち、Edge（ページの色）や Firefox（コントラスト制御）では transparent 時の罫線も表示される事象があります。本例の場合、単なる説明文に過ぎない .description も枠線が表示されることで、色違いのボタンが2つ並んでいると誤認されてしまいます。

このように border-color: transparent を使ったテクニックは制作者スタイルシートとして間違ったやり方ではないものの、2024年以降の強制ダークテーマの普及を考えると極力避けた方がよいと言えるでしょう。

脚注の改善事例

border-color: transparent のもうひとつの使用事例として脚注を取り上げます。

脚注を多く使った代表的なサイトといえばなんといっても Wikipedia でしょう。Wikipedia の脚注は <ol> 要素が使われており、脚注番号は list-style-type: inherit で表現されています。しかしこれだと桁数によって余白が変わってしまう欠点があります。Wikipedia の場合は固定値で ol { margin-inline-start: 3.2em } と大きめのスペースが確保されているため、左側にはみ出す心配はまずない一方で無駄なスペースが気になる状況となっています。

このような場合は display: table を使うことで桁数に応じた幅にすることが可能です。ただし table-row や table-cell な要素に対して margin は設定できないので、間隔を空けるには工夫が必要です。

<style>
  .footnote {
    padding-inline-start: unset; /* Reset style */
    display: block table;

    & > li {
      display: table-row;

      & > * {
        display: table-cell;

        & + * {
          border-inline-start: 0.5em solid transparent; /* `.footnote > li > * + * { margin-inline-start }` の代替表現 */
        }
      }

      & + li {
        & > * {
          border-block-start: 1em solid transparent; /* `.footnote > li + li { margin-block-start }` の代替表現 */
        }
      }
    }
  }

  .footnote_no {
    text-align: end;
  }
</style>

<ul class="footnote">
  <li>
    <span class="footnote_no">1.</span>
    <span class="footnote_text">HTMLという名前は従来はHyperText Markup Languageの略称だったが、……</span>
  </li>
  <!-- 中略 -->
  <li>
    <span class="footnote_no">10.</span>
    <span class="footnote_text">バージョン番号はないが「HTML 1.0」などとも呼ばれる</span>
  </li>
</ul>

しかし前述のとおり、強制ダークテーマでは透明なはずの罫線が見えてしまう事象が起こります。

空きを border でなく padding に置き換えることでとりあえず解消可能ではあるものの、本質的な改善にはなりません。一昔前は技術的な制約からこうするしかなかったのですが、今は Grid で実装することができます。

<style>
  .footnote {
    padding-inline-start: unset; /* Reset style */
    display: block grid;
    grid-template-columns: auto 1fr;
    gap: 1em 0.5em;

    & > li {
      display: block grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
    }
  }

  .footnote_no {
    text-align: end;
  }
</style>

<!-- マークアップは同一 -->
<ul class="footnote">
  <li>
    <span class="footnote_no">1.</span>
    <span class="footnote_text">HTMLという名前は従来はHyperText Markup Languageの略称だったが、……</span>
  </li>
  <!-- 中略 -->
  <li>
    <span class="footnote_no">10.</span>
    <span class="footnote_text">バージョン番号はないが「HTML 1.0」などとも呼ばれる</span>
  </li>
</ul>

このように subgrid を活用することで table を使わずに桁数に応じた幅の設定が可能になります。脚注同士の間隔も gap で設定できるのでひじょうに簡単ですし、強制ダークテーマでの表示も問題ありません。なにより border を本来のプロパティ用途から外れた使い方をせずに済むメリットがあります。

border-color: transparent の強制表示

脚注の改善事例

`border-color: transparent` の強制表示