No.17, No.16, No.15, No.14, No.13［5件］ - 土俵裏日誌黒糖丸部屋スタッフの日記

個人サイトWebオンリーめぐる市に参加します。

個人サイトWebオンリーめぐる市に参加します。

ピクリエで6月6日～6月7日開催される
個人サイトのオンラインイベントに参加します。
https://picrea.jp/event/a306c73ff0f8e27b...

暑さでダウンしていて、ようやくサークルカットを作れました(･ω･; A)

イベントまでにコンテンツも作りたいと思っています。
よろしくお願いします。

アクセス数100突破ヽ(＾▽＾)ﾉ

100人目のアクセスは……
素通りでした

急激なアクセス増加に喜んでいたところ、
そのうちの40件ほどは古いバージョンのChromeを装った
偽装クローラーであることが判明しました。
ネット上のIPアドレスに対して、総当たりでアクセスを試みているようです。

クローラーはカウント対象から除外するように設定していますが、
こういった偽装クローラーの対策は難しく、
今後もこうしたクローラーとの戦いは、いたちごっこになることが予想されます。

キリ番についても、クローラーによるものではないかと疑わしい状況です。
次にキリ番を踏まれた方は、ぜひコメントを残していただけると嬉しいです。

(＜●＞ω＜●＞)

#キリ番

iOSでヘッダーメニューが開かないバグに対応しました。

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

サイトを公開しました。

サイトを公開しました。

去年の春頃からサイトを作り始め、
本日4月7日の国際ビーバーデーに（ギリギリ）合わせて公開することができました。

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

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

これからも少しずつになるかもしれませんが、
コンテンツを増やしていきたいので、よろしくお願いいたします。

ビーバーモチーフの作業記録アプリを作りました（自分用）

ビーバーモチーフの作業記録アプリを作りました（自分用）

サイト作りの途中ですが、
ビーバーが枝を集めてダムを作る様子をモチーフにした、
自分用の#作業記録アプリを、#JavaScript と #PHP で作りました。
（PHPはデータの保存用）

作業量を記録すると、ビーバーが画面の横から現れてダムを作っていきます。
この動きはCSSを使っています。
日ごとの進捗や、作業が少しずつ積み上がっていく様子がわかります。

シンプルな作りですが、ビーバーのイラストが可愛いので載せます。
イラストはフリー素材をお借りしました！
もう少し機能も追加するかも？

初期表示に戻る

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31