🧩 エンジニア豆知識──「100vhが効かない!?」を終わらせる100dvh / 100lvh / 100svh 完全攻略ッ！！🔥
戦え、エンジニア諸君！！スマホで100vhが足りない／はみ出す――その地獄はアドレスバーの伸び縮みが犯人だ。今日こそ 100dvh / 100lvh / 100svh を手に入れ、高さレイアウトの主導権を取り戻せッ！ ✅ […]
続きを読む →FIELD NOTES
タグ: CSS
🧩 エンジニア豆知識 #8──CSSだけで“電光掲示板”！途切れゼロの横スクロール見出しを極める🔥
戦え、エンジニア諸君！！ニュースサイトの速報帯、ポートフォリオの実績ライン… 走るテキストは視線を奪う最強のアクセントだ。ここではCSSオンリーで「継ぎ目のないループ＋フェード演出＋アクセシビリティ対応」まで ワンパッケ […]
続きを読む →🧩 エンジニア豆知識 #7──「複数行テキストを … で切る」もう jQuery も CMS 文字数制限もいらない！🔥
戦え、エンジニア諸君！！ブログカードや一覧リストで “本文がはみ出して崩れる” 問題―― 昔は substr() や jQuery プラグイン、果ては CMS 側で文字数カットしていた。 だがそれでは・改行／絵文字で文字 […]
続きを読む →🧩 エンジニア豆知識 #6── z-index は 100？ 1000？ MAX_INT？「数字インフレ地獄」に終止符を打つレイヤー設計🔥
戦え、エンジニア諸君！！モーダルが沈むたびに z-index: 9999; を書き足し、 気づけば 2147483647（32bit MAX）まで桁が暴走——そんな闇のレイヤー戦争に終止符を打つッ！今日は「いくつまで使う […]
続きを読む →📝【団長のデバッグ道場🔥 vol.16】CSS の height がアニメーションしない!? auto の壁を突破せよ！
アコーディオンを作りたい。transition: height .3s; を書いたのに、開閉が一瞬でパカッと切り替わる――「CSS が効かない！？」と嘆く諸君、それは height:auto に潜む“仕様の壁”だ。 🧩 […]
続きを読む →🧩 エンジニア豆知識 #4──「z-index が効かない!?」スタッキングコンテキスト完全攻略ッ！！🔥
戦え、エンジニア諸君！！モーダルが沈む？ ドロップダウンが背面に消える？？それは“数値の壁”ではなく、“島（スタッキングコンテキスト）の檻”に囚われているからだッ！今日こそ檻をぶち破り、レイヤー戦争に終止符を打つッ！！ […]
続きを読む →📝【団長のデバッグ道場🔥 vol.14】LEVEL：★★☆☆☆position: sticky が効かない…！？真犯人を探れ！
スクロールに合わせて要素をピタリと張り付かせる—— それが position: sticky; だ。 ところが、君のナビは動かない！ 「なぜだ！？ CSS は正しく書いたはずなのに…」 その疑問こそ、今回のデバッグ道場の […]
続きを読む →🧩 エンジニア豆知識 #3──「marginが効かない！？」“その原因”、実はコレです。
こんにちは、戦うエンジニア応援団長です。「CSSでmarginを指定したのに、なぜか反映されない…」という経験、ありませんか？実はこれ、初心者から現場のベテランまで一度はハマる“CSSの罠”の一つです。 1. margi […]
続きを読む →📝【団長のデバッグ道場🔥 vol12】親の境界線を越えるマージンの謎を解けッ！
おはようッ、戦うエンジニア諸君！🚀 今日は HTML／CSS の“あるある”バグ――子要素のマージンが親要素をすり抜ける現象に挑むッ！ その挙動、仕様を知れば必ず制御できる。解析の狼煙を上げよッ！🔥 ◆ 問題コード ◆ […]
続きを読む →📝【団長のデバッグ道場🔥 vol.10】LEVEL：★☆☆☆☆
おう、エンジニア諸君！！🔥今回のバグは “フォーム実装で 99 % が踏む地雷” ——「ラベルをクリックしてもラジオボタンが反応しない！」 だッ！ ❓ 本日の問題 次のコード、一見ふつうに見えるが……<label& […]
続きを読む →