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
サイトを公開しました。
サイトを公開しました。
去年の春頃からサイトを作り始め、国際ビーバーデーに（ギリギリ）合わせて公開することができました。
途中で体重測定のビーバーのように
「やる気をなくしてしまいました」
状態に何度かなりましたが、無事に公開までたどり着けました。
↓やる気をなくすビーバー参照
これからも少しずつになるかもしれませんが、
コンテンツを増やしていきたいので、よろしくお願いいたします。
去年の春頃からサイトを作り始め、国際ビーバーデーに（ギリギリ）合わせて公開することができました。
途中で体重測定のビーバーのように
「やる気をなくしてしまいました」
状態に何度かなりましたが、無事に公開までたどり着けました。
↓やる気をなくすビーバー参照
これからも少しずつになるかもしれませんが、
コンテンツを増やしていきたいので、よろしくお願いいたします。
掲示板を設置しました。
掲示板を設置しました。
掲示板のプログラムが配布されていたので設置しました。
簡単な掲示板を作っていましたが、
PHPが難しくやる気が出なかったので、ありがたいです。
データベース管理の #DBeaver もインストールしました。
DBeaverは名前だけ知っていて気になっていたので少しテンション上がりました。
ソフトが日本語対応してるのも嬉しいです。
掲示板のプログラムが配布されていたので設置しました。
簡単な掲示板を作っていましたが、
PHPが難しくやる気が出なかったので、ありがたいです。
データベース管理の #DBeaver もインストールしました。
DBeaverは名前だけ知っていて気になっていたので少しテンション上がりました。
ソフトが日本語対応してるのも嬉しいです。
TOPページを賑やかな感じにしました。
TOPページを賑やかな感じにしました。
カラフルな絵が自由自在！虹色お絵描き！
レインボーアートで遊んでる気持ち。
もっと虹色を増やしたいけど、自重します。
SNSのボタンをCSSで作りました。可愛くできました。
（↓これはスクリーンショットです。）
X？ 知らない子ですね。
と言うのは置いておいても、今でも共有ボタンがTwitterのままのサイトが多い印象。
いまだに“旧Twitter”って呼ばれてるし。呼びづらいから……。
カラフルな絵が自由自在！虹色お絵描き！
レインボーアートで遊んでる気持ち。
もっと虹色を増やしたいけど、自重します。
SNSのボタンをCSSで作りました。可愛くできました。
（↓これはスクリーンショットです。）
X？ 知らない子ですね。
と言うのは置いておいても、今でも共有ボタンがTwitterのままのサイトが多い印象。
いまだに“旧Twitter”って呼ばれてるし。呼びづらいから……。
更新履歴をRSS表示に変更しました。
更新履歴をRSS表示に変更しました。
これまで更新履歴はHTMLに手打ちで書いていましたが、数が増えてきたため、
新しく設置したスタッフブログのRSSを、#JavaScript で読み込んで表示する方式に変更しました。
その際、ブラウザのセキュリティ機能である「CORS（クロスオリジンリソース共有）」にブロックされてしまいました。
どうやら、別のドメインからデータを取得しようとすると、CORSの制限に引っかかるようです。
以下、技術的なメモ
対策として、.htaccess にCORSヘッダーを設定することで解決しました。
以下を追記すると、外部からのアクセスが許可されるようになります。
ただし、この設定を自分のサイトの管理画面やAPIに適用すると、
外部からのアクセスが許可されてしまい、セキュリティ上のリスクがあります。
.htaccess の設定はそのファイルを置いたディレクトリ以下にのみ適用されるため、
「ブログ専用のディレクトリにだけ追加する」のであれば、基本的には安全です。
それでも不安だったので、私はローカル開発用の固定IPに限定して許可する形に変更しました。
オリジンの定義
CORSは「オリジンが違うとブロックする」仕組み。
オリジンは「スキーム（http/https）＋ホスト名＋ポート番号」だけで構成されているので、
フォルダ名やスラッシュ(/)は含めないルールです。
Allow-Methods や Allow-Headers をあわせて指定しておくと、
fetch() での事前リクエスト（preflight）エラーが起きにくくなります。
畳む
これまで更新履歴はHTMLに手打ちで書いていましたが、数が増えてきたため、
新しく設置したスタッフブログのRSSを、#JavaScript で読み込んで表示する方式に変更しました。
その際、ブラウザのセキュリティ機能である「CORS（クロスオリジンリソース共有）」にブロックされてしまいました。
どうやら、別のドメインからデータを取得しようとすると、CORSの制限に引っかかるようです。
以下、技術的なメモ
対策として、.htaccess にCORSヘッダーを設定することで解決しました。
以下を追記すると、外部からのアクセスが許可されるようになります。
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>ただし、この設定を自分のサイトの管理画面やAPIに適用すると、
外部からのアクセスが許可されてしまい、セキュリティ上のリスクがあります。
.htaccess の設定はそのファイルを置いたディレクトリ以下にのみ適用されるため、
「ブログ専用のディレクトリにだけ追加する」のであれば、基本的には安全です。
それでも不安だったので、私はローカル開発用の固定IPに限定して許可する形に変更しました。
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "ここにローカル開発＋固定IPのURL（最後の / はつけない）"
Header set Access-Control-Allow-Methods "GET, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>オリジンの定義
- スキーム http or https
- ホスト名 ドメイン名やIPアドレス
- ポート番号 通信に使う番号（例：8080、80、443）省略されることもある。
CORSは「オリジンが違うとブロックする」仕組み。
オリジンは「スキーム（http/https）＋ホスト名＋ポート番号」だけで構成されているので、
フォルダ名やスラッシュ(/)は含めないルールです。
Allow-Methods や Allow-Headers をあわせて指定しておくと、
fetch() での事前リクエスト（preflight）エラーが起きにくくなります。
畳む