DAY99：formのデザインが崩れる 📌 inputとbuttonの高さがバラバラ… 🔹 line-height, vertical-align, box-sizing の調整で整う 🔹 ブラウザのデフォルトCSSに注意 ✅小さな違和感こそ丁寧に整える #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY96：横スクロールが止まらん 📌 どこかが画面からはみ出してる？ 🔹 幅を指定しすぎた要素があるかも 🔹 overflow-x: hidden; で一旦止めて、犯人探し ✅ 画面はキャンバス、整えてこそ映える #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY95：CSS変数に感動した日 📌 同じ色、何度も書いてた… 🔹 --main-color: #6c9; みたいに変数化できる 🔹 テーマの切り替えやすさが格段にアップ！ ✅ 変更に強いコードは美しい #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY94：position: absolute が迷子 📌 絶対配置したのに、どこか行ってしまう 🔹 親に position: relative; がないと body に対して配置される 🔹 ちゃんと親子関係をつくること ✅ 絶対には、居場所が必要 #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY93：スクロール禁止の方法 📌 モーダル開いたときに背景がスクロールしてほしくない！ 🔹 body { overflow: hidden; } を使うだけ 🔹 モーダル閉じるときに元に戻すのを忘れずに ✅ 表も裏も整えてこそ、やさしいUI #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY92：:nth-child(odd) が効かない問題 📌 奇数番目に色をつけたのに全部に？ 🔹 nth-child() はタグの並び順に反応する 🔹 nth-of-type() と混同しやすいから注意 ✅ セレクタはよく見ると意外と繊細 #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY89：意図しない余白が出る 📌 ブラウザによって余白が違う？ 🔹 margin, padding の初期値が原因 🔹 reset.css や normalize.css を活用する ✅ 初期設定で未来が変わる #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY88：文字がギュッとなる原因 📌 行間が詰まりすぎて読みにくい 🔹 line-height が小さすぎるかも 🔹 デフォルトは 1.2〜1.5くらいが読みやすい ✅ ゆとりのあるコードが心にも優しい #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY87：hoverが効かない！ 📌 マウスを乗せても反応しない 🔹 実は透明の別要素が上にかぶってるだけかも 🔹 DevToolsで要素の重なりを確認する ✅ 見えないバリアは z-indexで解決！ #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY86：remとemの違いに迷う 📌 どっち使えばいい？ 🔹 em は親要素に依存する 🔹 rem はルート（html）基準で安定 ✅ 基準がズレて困ったら rem に切り替えてみる #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY85：text-alignの落とし穴 📌 テキストが中央にならない… 🔹 display: flex にしてたら text-align だけじゃ効かない 🔹 中央寄せは justify-content や align-items を使おう ✅ 状況によって使い分けしよう #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY82：position: sticky で便利UI 📌 固定ヘッダーなどに便利 🔹 position: sticky; top: 0; 🔹 スクロールに応じて固定される ✅ JavaScriptなしで便利UIが作れる #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY81：pointer-events の裏技 📌 要素を無視してクリックを通す 🔹 pointer-events: none; → クリックをスルー 🔹 インタラクションを制御できる ✅ 意外と役立つプロパティ #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY80：vh の使いどころ 📌 ビューポートに合わせた高さ設定 🔹 height: 100vh; → 全画面の高さ 🔹 注意：モバイルではアドレスバーに注意！ ✅ レスポンシブに使いこなそう #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY79：object-fit で画像をきれいに 📌 画像のトリミングにめっちゃ便利 🔹 object-fit: cover; → はみ出さずにトリミング 🔹 object-fit: contain; → 全体を見せる ✅ 画像の扱いがうまくなる魔法 #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY78：z-index が効かない理由 📌 z-indexを指定したのに重ならない… 🔹 親要素に position がないと効かないことも 🔹 スタッキングコンテキストを見直そう ✅ z-index迷子は親を疑おう #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY75：justify-content の勘違い 📌 中央揃えにしたいのに動かない 🔹 display: flex を書き忘れ 🔹 指定だけじゃ動かないのがCSS！ ✅ まずはflexをセットすること #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY74：display: grid の罠 📌 gridを使ったのに思った通りに並ばない 🔹 子要素が grid-column を指定していなかった 🔹 gridは細かい配置設定がポイント ✅ まずはしっかり土台を作る！ #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY73：SVG画像がボケる理由 📌 SVGなのにぼやける原因 🔹 width と height をCSSだけで指定してた 🔹 viewBox を正しく設定するのが大事 ✅ SVGはスケーラブル！viewBox が命 #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY72：display: inline-block の落とし穴 🔸 要素同士に隙間ができる 🔸 inline-block は改行やスペースも影響 🔸 font-size: 0; で親の文字幅を潰すと解決 ✅ 隙間対策に flex も検討しよう #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY71：文字が滲む理由 🔸 CSSで transform: scale(1.01); を使ったら文字がぼやける 🔸 スケールで拡大するとブラウザが補間する 🔸 transform よりフォントサイズ調整が安全 ✅ スケールと文字は相性注意！ #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css