iOSでヘッダーメニューが開かないバグに対応しました。
色々と問題が多くて大変でした。
PCでは問題なく動いていたため、iPhone実機で確認した際に気がつきました。
Android端末では動作確認ができていないため、他にも表示の不具合があるかもしれません。
お気づきの際は教えていただけると助かります。
以下メモ
① overflow: auto の中で position: fixed が壊れる
普通のブラウザなら position: fixed は常にviewport基準で固定されるはずなのに、
iOSだと overflow: auto/scroll の親があると「その親の中」で動いてしまう。
.menu-box に overflow-x: auto（横スクロール用）があった。
iOS Safariには「overflow: auto の中にある position: fixed は
viewportじゃなくてその親要素基準で動く」というバグがある。
なのでドロップダウンが画面に固定されず、
overflow コンテナの外に出たところで、はみ出た部分が切り取られて見えなくなっていた。
→ 解決策： ドロップダウンを<body> 直下に動的に生成することで、overflow の外に出した。
② <label> 要素のクリックイベントが発火しない
チェックボックストグルの仕組みで使っていた <label> が、
iOSではインタラクティブ扱いされないことがある。
onclick="" を付けるハックで回避できることもあるが不安定。
→ 解決策： <label> → <button> に変えた。
<button> はiOSが「インタラクティブ要素」と認識するので確実にクリックが発火する。
<label> はフォーム要素と関連付けられていない場合、iOSでは「ただのテキスト」扱いになることがある。
③ <summary> に display: block/flex を設定するとトグルが壊れる
<summary>は本来 display: list-item という特殊な表示形式になってる。
それを block や flex で上書きすると、Safariが「開閉機能のある要素」として認識するのをやめてしまう。
ChromeやFirefoxは多少上書きしても大丈夫なことが多いんだけど、Safariだけ厳格。
→ 解決策：<button> + JS でトグルにして <details> を使わないことにした。
#CSS
2026年4月 この範囲を時系列順で読む この範囲をファイルに出力する
サイトを公開しました。
サイトを公開しました。
去年の春頃からサイトを作り始め、国際ビーバーデーに（ギリギリ）合わせて公開することができました。
途中で体重測定のビーバーのように
「やる気をなくしてしまいました」
状態に何度かなりましたが、無事に公開までたどり着けました。
↓やる気をなくすビーバー参照
これからも少しずつになるかもしれませんが、
コンテンツを増やしていきたいので、よろしくお願いいたします。
去年の春頃からサイトを作り始め、国際ビーバーデーに（ギリギリ）合わせて公開することができました。
途中で体重測定のビーバーのように
「やる気をなくしてしまいました」
状態に何度かなりましたが、無事に公開までたどり着けました。
↓やる気をなくすビーバー参照
これからも少しずつになるかもしれませんが、
コンテンツを増やしていきたいので、よろしくお願いいたします。
2026年1月 この範囲を時系列順で読む この範囲をファイルに出力する
ビーバーモチーフの作業記録アプリを作りました（自分用）
ビーバーモチーフの作業記録アプリを作りました（自分用）
サイト作りの途中ですが、
ビーバーが枝を集めてダムを作る様子をモチーフにした、
自分用の#作業記録アプリ を、#JavaScript と #PHP で作りました。
（PHPはデータの保存用）
作業量を記録すると、ビーバーが画面の横から現れてダムを作っていきます。
この動きはCSSを使っています。
日ごとの進捗や、作業が少しずつ積み上がっていく様子がわかります。
シンプルな作りですが、ビーバーのイラストが可愛いので載せます。
イラストはフリー素材をお借りしました！
もう少し機能も追加するかも？
サイト作りの途中ですが、
ビーバーが枝を集めてダムを作る様子をモチーフにした、
自分用の#作業記録アプリ を、#JavaScript と #PHP で作りました。
（PHPはデータの保存用）
作業量を記録すると、ビーバーが画面の横から現れてダムを作っていきます。
この動きはCSSを使っています。
日ごとの進捗や、作業が少しずつ積み上がっていく様子がわかります。
シンプルな作りですが、ビーバーのイラストが可愛いので載せます。
イラストはフリー素材をお借りしました！
もう少し機能も追加するかも？
掲示板を設置しました。
掲示板を設置しました。
掲示板のプログラムが配布されていたので設置しました。
簡単な掲示板を作っていましたが、
PHPが難しくやる気が出なかったので、ありがたいです。
データベース管理の #DBeaver もインストールしました。
DBeaverは名前だけ知っていて気になっていたので少しテンション上がりました。
ソフトが日本語対応してるのも嬉しいです。
掲示板のプログラムが配布されていたので設置しました。
簡単な掲示板を作っていましたが、
PHPが難しくやる気が出なかったので、ありがたいです。
データベース管理の #DBeaver もインストールしました。
DBeaverは名前だけ知っていて気になっていたので少しテンション上がりました。
ソフトが日本語対応してるのも嬉しいです。
TOPページを賑やかな感じにしました。
TOPページを賑やかな感じにしました。
カラフルな絵が自由自在！虹色お絵描き！
レインボーアートで遊んでる気持ち。
もっと虹色を増やしたいけど、自重します。
SNSのボタンをCSSで作りました。可愛くできました。
（↓これはスクリーンショットです。）
X？ 知らない子ですね。
と言うのは置いておいても、今でも共有ボタンがTwitterのままのサイトが多い印象。
いまだに“旧Twitter”って呼ばれてるし。呼びづらいから……。
カラフルな絵が自由自在！虹色お絵描き！
レインボーアートで遊んでる気持ち。
もっと虹色を増やしたいけど、自重します。
SNSのボタンをCSSで作りました。可愛くできました。
（↓これはスクリーンショットです。）
X？ 知らない子ですね。
と言うのは置いておいても、今でも共有ボタンがTwitterのままのサイトが多い印象。
いまだに“旧Twitter”って呼ばれてるし。呼びづらいから……。