CSSのバグ修正

chromeで上手く行っているが、

safariで崩れている。

「崩れている」というよりも、二本線が上にずれている。

これを修正していこう。

AIではなく、他人ではなく、自分の頭で考える。

それが確かな未来を作る。

自分の感覚を信じ切るしかない。

これまでもそうやってやってきた。

ボタンのHTML

button要素の中に線が二つとMenuというテキストが一つある。

<button class="site-menu-toggle" type="button" aria-controls="site-menu-panel" aria-expanded="false">
        <span class="site-menu-toggle__line"></span>
        <span class="site-menu-toggle__line"></span>
        <span class="site-menu-toggle__text">Menu</span>
      </button>

ボタンのCSS

button要素

.design-refresh .site-menu-toggle {
    display: inline-grid;
    grid-template-columns: 20px auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

一つ目の線

.design-refresh .site-menu-toggle__line {
    grid-column: 1;
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease;
}

二つ目の線

.design-refresh .site-menu-toggle__line + .site-menu-toggle__line {
    margin-top: -10px;
}

AIは有効活用する

車がある時代に馬車を使わないのと同じように、AIがある時代に自分の頭を使わないという方針も大事になってくる。

AI × 自分の頭

これで、加速しよう

原因はここっぽい

二つ目の線

.design-refresh .site-menu-toggle__line + .site-menu-toggle__line {
    margin-top: -10px;
}

margin-top: -10px; の部分はブラウザによって解釈差があるらしい

試しにchromeとsafariで、この指定を外してみたら、

同じ見た目になった。

修正する

修正箇所は、header.phpの52行目

      <button class="site-menu-toggle" type="button" aria-controls="site-menu-panel" aria-expanded="false">
        <span class="site-menu-toggle__line"></span>
        <span class="site-menu-toggle__line"></span>
        <span class="site-menu-toggle__text">Menu</span>
      </button>

これを以下に修正する。

<button class="site-menu-toggle" type="button" aria-controls="site-menu-panel" aria-expanded="false">
  <span class="site-menu-toggle__icon" aria-hidden="true">
    <span class="site-menu-toggle__line"></span>
    <span class="site-menu-toggle__line"></span>
  </span>
  <span class="site-menu-toggle__text">Menu</span>
</button>

二つの線を専用の箱に入れた。

design-refresh.cssの1861行目で定義されているbutton要素のCSSは、

.design-refresh .site-menu-toggle {
　display: inline-grid;
　grid-template-columns: 20px auto;
　align-items: center;
　gap: 10px;　
　min-height: 42px;
　padding: 0 14px;
　border-radius: 999px;
　font-size: 12px;
　font-weight: 700;
}

以下に修正する。

.design-refresh .site-menu-toggle {
　display: inline-flex;
　align-items: center;
　gap: 10px;
　min-height: 42px;
　padding: 0 14px;
　border-radius: 999px;
　font-size: 12px;
　font-weight: 700;
}

以下の専用の箱のCSSを追記した。

.design-refresh .site-menu-toggle__icon {
　display: flex;
　flex-direction: column;
　justify-content: center;
　gap: 8px;
　width: 20px;
}

design-refresh.cssの1873行目で定義されている線のCSSは、

.design-refresh .site-menu-toggle__line {
　grid-column: 1;
　display: block;
　width: 18px;
　height: 2px;
　background: currentColor;
　transition: transform 0.2s ease;
}

以下のように変更する

.design-refresh .site-menu-toggle__line {
　display: block;
　width: 18px;
　height: 2px;
　background: currentColor;
　transition: transform 0.2s ease;
}

以下の記述は削除する

.design-refresh .site-menu-toggle__line + .site-menu-toggle__line {
  margin-top: -10px;
}

修正完了

safari

chrome

safariとchromeで、差異が発生している

chromeの本番環境を見ていた

これは実務でよくある

先ほどの画像は、本番環境（https://ki-hi-ro.com/）

MAMPのローカル環境（http://localhost:8888/）では、差異は発生していなかった

safariもchromeも以下のようになっていた