<![CDATA[ カテゴリ「更新履歴」に属する投稿［6件］ - 土俵裏日誌 黒糖丸部屋スタッフの日記 ]]> https://sumo.bibanana.com/staff/ ja Copyright 2026 Sat, 11 Apr 2026 16:51:07 +0900 Powered by てがろぐ Ver 4.8.0 ]]> <![CDATA[ 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 -- Posted by ビバナナ 〔1078文字〕 No.15 ]]> https://sumo.bibanana.com/staff/?postid=15 https://sumo.bibanana.com/staff/?postid=15 update Wed, 08 Apr 2026 00:00:15 +0900 <![CDATA[ サイトを公開しました。 ]]>
去年の春頃からサイトを作り始め、国際ビーバーデーに（ギリギリ）合わせて公開することができました。

途中で体重測定のビーバーのように
「やる気をなくしてしまいました」
状態に何度かなりましたが、無事に公開までたどり着けました。

↓やる気をなくすビーバー参照
Umekomi

これからも少しずつになるかもしれませんが、
コンテンツを増やしていきたいので、よろしくお願いいたします。 -- Posted by ビバナナ 〔198文字〕 No.14 ]]> https://sumo.bibanana.com/staff/?postid=14 https://sumo.bibanana.com/staff/?postid=14 update Tue, 07 Apr 2026 00:00:55 +0900 <![CDATA[ 掲示板を設置しました。 ]]>
掲示板のプログラムが配布されていたので設置しました。
簡単な掲示板を作っていましたが、
PHPが難しくやる気が出なかったので、ありがたいです。

データベース管理の #DBeaver もインストールしました。
DBeaverは名前だけ知っていて気になっていたので少しテンション上がりました。
ソフトが日本語対応してるのも嬉しいです。 -- Posted by ビバナナ 〔179文字〕 No.12 ]]> https://sumo.bibanana.com/staff/?postid=12 https://sumo.bibanana.com/staff/?postid=12 update Fri, 09 Jan 2026 22:46:44 +0900 <![CDATA[ TOPページを賑やかな感じにしました。 ]]>
カラフルな絵が自由自在！虹色お絵描き！
レインボーアートで遊んでる気持ち。
もっと虹色を増やしたいけど、自重します。

SNSのボタンをCSSで作りました。可愛くできました。
（↓これはスクリーンショットです。）
20260107212419-biba7.png

X？ 知らない子ですね。

と言うのは置いておいても、今でも共有ボタンがTwitterのままのサイトが多い印象。
いまだに“旧Twitter”って呼ばれてるし。呼びづらいから……。 -- Posted by ビバナナ 〔220文字〕 No.11 ]]> https://sumo.bibanana.com/staff/?postid=11 https://sumo.bibanana.com/staff/?postid=11 update Wed, 07 Jan 2026 21:24:19 +0900 <![CDATA[ 更新履歴をRSS表示に変更しました。 ]]>
これまで更新履歴はHTMLに手打ちで書いていましたが、数が増えてきたため、
新しく設置したスタッフブログのRSSを、#JavaScript で読み込んで表示する方式に変更しました。
その際、ブラウザのセキュリティ機能である「CORS（クロスオリジンリソース共有）」にブロックされてしまいました。
どうやら、別のドメインからデータを取得しようとすると、CORSの制限に引っかかるようです。

以下、技術的なメモ

（続きを読む） -- Posted by ビバナナ 〔1112文字〕 No.2 ]]> https://sumo.bibanana.com/staff/?postid=2 https://sumo.bibanana.com/staff/?postid=2 update Fri, 09 May 2025 08:02:31 +0900 <![CDATA[ スタッフブログを設置しました。 ]]>
ここでは、サイトの更新記録や創作の裏話、日記などを綴っていく予定です。

これまでは「おかみの囁き」にこれらの内容も載せていましたが、
今後は「おかみの囁き」は相撲部屋のビーバー力士たち専用の投稿スペースにすることにしました。
（現在は工事中）

SNSを私物化してるスタッフみたいになっていたので…反省です。 -- Posted by ビバナナ 〔172文字〕 No.1 ]]> https://sumo.bibanana.com/staff/?postid=1 https://sumo.bibanana.com/staff/?postid=1 update Thu, 08 May 2025 21:03:41 +0900