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
サイトを公開しました。
サイトを公開しました。
去年の春頃からサイトを作り始め、国際ビーバーデーに（ギリギリ）合わせて公開することができました。
途中で体重測定のビーバーのように
「やる気をなくしてしまいました」
状態に何度かなりましたが、無事に公開までたどり着けました。
↓やる気をなくすビーバー参照
これからも少しずつになるかもしれませんが、
コンテンツを増やしていきたいので、よろしくお願いいたします。
去年の春頃からサイトを作り始め、国際ビーバーデーに（ギリギリ）合わせて公開することができました。
途中で体重測定のビーバーのように
「やる気をなくしてしまいました」
状態に何度かなりましたが、無事に公開までたどり着けました。
↓やる気をなくすビーバー参照
これからも少しずつになるかもしれませんが、
コンテンツを増やしていきたいので、よろしくお願いいたします。
ビーバーモチーフの作業記録アプリを作りました（自分用）
ビーバーモチーフの作業記録アプリを作りました（自分用）
サイト作りの途中ですが、
ビーバーが枝を集めてダムを作る様子をモチーフにした、
自分用の#作業記録アプリ を、#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”って呼ばれてるし。呼びづらいから……。
あけましておめでとうございます。
あけましておめでとうございます。
Xが少しゴタゴタしていて、
その影響もあってか、個人サイト文化がまた少し盛り上がってきているように感じます。
それに触発されて、しばらく放置していた当サイトを更新しました。
思うように絵が描けず、つい更新が止まりがちになっていましたが、
姉妹サイトの更新がひと段落し、去年は無事に公開までこぎつけることができました。
そのため、今年は、当サイトを中心に更新していきたいです。
年内には形にしていけたらいいな、と思っています。
また、これまで細かい修正については、あまり記録に残していませんでした。
しかし、作業内容を可視化したほうが、やる気や学びにもつながると感じたため、
今後はできるだけ記録していくことにします。
今日は、キリ番を踏んだときのメッセージ送信機能に挑戦していました。
PHPは難しくて、これまで掲示板の作成も放置気味でしたが、
これから少しずつ取り組んでいきたいと思います。
Xが少しゴタゴタしていて、
その影響もあってか、個人サイト文化がまた少し盛り上がってきているように感じます。
それに触発されて、しばらく放置していた当サイトを更新しました。
思うように絵が描けず、つい更新が止まりがちになっていましたが、
姉妹サイトの更新がひと段落し、去年は無事に公開までこぎつけることができました。
そのため、今年は、当サイトを中心に更新していきたいです。
年内には形にしていけたらいいな、と思っています。
また、これまで細かい修正については、あまり記録に残していませんでした。
しかし、作業内容を可視化したほうが、やる気や学びにもつながると感じたため、
今後はできるだけ記録していくことにします。
今日は、キリ番を踏んだときのメッセージ送信機能に挑戦していました。
PHPは難しくて、これまで掲示板の作成も放置気味でしたが、
これから少しずつ取り組んでいきたいと思います。
『マグナとふしぎの少女』という英語アプリを始めた
『マグナとふしぎの少女』という英語アプリを始めた
(Loading...)...
SNSの広告で見かけて、気になって始めてみた。
スピーキングが苦手なので、音声認識を使った発音チェック機能があるところが魅力に感じた。
また、声優にそれほど詳しくない私でも、名前を知っている声優さんが多く声を当てている。
サイトを見ると小学生が主な対象のような雰囲気だが、
年齢制限はなく、大人でも使えそう。
最初は小学生レベルの英単語からスタートする。
学習の進み具合に合わせてAIが問題を出してくれるらしく、
大学受験レベルの英単語まで対応しているようなので、
しばらく続けてみようかな、と思っている。
生き物ジャンルの英単語があるのも嬉しいポイント。
今のところは無料で学べている。
すごい時代だなー。
#英語 #スマホアプリ
(Loading...)...
SNSの広告で見かけて、気になって始めてみた。
スピーキングが苦手なので、音声認識を使った発音チェック機能があるところが魅力に感じた。
また、声優にそれほど詳しくない私でも、名前を知っている声優さんが多く声を当てている。
サイトを見ると小学生が主な対象のような雰囲気だが、
年齢制限はなく、大人でも使えそう。
最初は小学生レベルの英単語からスタートする。
学習の進み具合に合わせてAIが問題を出してくれるらしく、
大学受験レベルの英単語まで対応しているようなので、
しばらく続けてみようかな、と思っている。
生き物ジャンルの英単語があるのも嬉しいポイント。
今のところは無料で学べている。
すごい時代だなー。
#英語 #スマホアプリ