ネガティブマージン使ったら問題が発生した！
コーポレートサイトを構築する過程で、TailwindCSSを使ったかっこいいデザインを実現するために、以下の記事で紹介したネガティブマージンを使いました。
そうしたら以下の記事で作ったヘッダーの右側に寄せていたメニューアイコンが表示されなくなった。なぜこうなったのか？どうやったら対応できるのか、調査してみました。
fixedとの組み合わせが問題？原因を特定してみた
まずは現状整理から。HeaderはComponent化しているので、各ページで違いはありません。ページごとに表示される内容の差を確認したり、ChromeのデベロッパーツールでCSSを弄ってみたり、色々な調査をしていくと、どうもネガティブマージンを左右幅（Width）に設定している場合にのみ、メニューが表示されていないようです。
ネガティブマージンと何かの組み合わせの問題っぽい。。。HeaderにあてたCSSクラスをそれぞれ調査していくと、Headerにあてているposition:fixed (TailwindCSSのクラスではfixed)が疑わしいようです。困ったときの公式ドキュメントを見ていくと。
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport,https://developer.mozilla.org/en-US/docs/Web/CSS/position
とあり、position:fixedとしたときは、横幅(width)はContaining blockではなくViewportを基準にしているようで、top/bottom/left/rightはViewportに対して位置が決まっているようです。
Viewportの詳細な仕様までは調べきれなかったですが、おそらくマイナスのマージン（ネガティブマージン）を設定することでViewportが広がってしまい、表示領域の外にメニューが出てしまったようです。position:fixedとネガティブマージン、right指定の組み合わせで発生している問題のようですね。
width calcを使って無理やり問題を解決してみた
解決策をいくつか考えてみました。 (1) ネガティブマージンを使わない (2) メニューアイコンを右側に置かない（デザインを変更する） (3) メニューアイコンを右寄せ(right）ではなく左寄せ(left）にする
普通は(1)を選ぶのかな、と思います。ネガティブマージン以外にも https://www.kiharak-system.jp/2021/08/01/389/ で紹介したデザインを実現する方法はあると思います。
でもネガティブマージンのブログ記事を作っちゃったし、無理やり(3)の方法を取りにいきました！対応方法の概略は以下の絵の通りです。絶対位置の指定を右からではなく左から指定することで、Viewportが右に伸びても影響しない、という方法をとりました。絶対位置の指定にはcalcとvwを使って動的に計算できるようにしています。
TailwindCSSでcalcを使う方法は、公式ドキュメントでも紹介されています。公式ドキュメントを参照しながら、該当ページで読み込んでいるglobal.cssに独自のクラスを追記しました。
@tailwind base;
@tailwind components;
@tailwind utilities;
/* class for header menu */
.header-button-position {
left: calc(100vw - theme('spacing.14'));
}Spacingの値はTailwindの公式ページでは以下に記載してあります。
おわりに
ネガティブマージン、fixed、right、の組み合わせで発生する問題をTailwindCSSで解決するしてみました。もっと簡単な解決方法もあるのだろうけど、あえて面倒な方法でも解決できるよ、ということでCSS自体とTailwindCSSの勉強にもなりました。