CSS小技✨. transition-behavior: allow-discrete;で離散プロパティ(displayなど)の切り替えタイミングを制御可能に。.左：すぐ切替.右：transition終了後切替.displayはアニメーションしません⚠️.#CSS #codejump

CSS小技✨.SCSSの@functionは自作関数を作れる機能💡.実はこれ…10年以上前からSassに実装されていて、.Browser依存なし🙌.Chromeのバージョンも関係なく、コンパイル後は.全Browserで動きます。.@function rem($px) {. @return ($px / 16) * 1rem; 👈 純粋にpx→rem変換.}.#Codejump #SCSS

📘CSS小技✨.Chrome138新機能‼.順番で動く兄弟たち🎶.兄弟の順番と数を取れるCSSだけの魔法が登場！.nth-child()不要で動的にCSSで！. sibling-index()で開始タイミングをずらし💻.sibling-count()で幅を自動分割💻. 順番も数もCSSだけで制御◎. #CSS #Codejump #chrome138 .コードはリブで👇

✨CSS小技✨.📸InstagramロゴをCSSだけで再現！.画像ゼロ・SVGナシ・完全CSS構成で容量も超エコ🎈.@keyframes でパーツを時間差で出現させ.グラデ・円・borderでロゴ感を演出🎨.派手なのに超軽量、まさに“静かなる職人技”🛠. #CSS #省エネCSS #Codejump

💡CSS小技✨.固定ヘッダー + スムーススクロールの時は. scroll-padding-top が超重要！.html {. scroll-behavior: smooth;. scroll-padding-top: 64px;.}.Link先がHederの下に隠れない！. position: fixed なナビ付きのLPなどで必須💪.見出しは padding-top で空間調整も忘れず！. #Codejump #CSS

📘CSS小技✨.リストの::beforeと::afterを使って.シンプルだけど映えるhover演出💡.🧡💛💚💙 → 🎉 に変身して消える.同時にカラフルなラインがスーッと出現.CSSだけでここまでできる！.list-styleいらずのリストアニメーション🎨. #CSS #Web制作 #Codejump #アニメーション好きと繋がりたい

CSS小技✨.📜スクロール連動アニメ🎞.animation-timeline: view()でcard��順にscale＋sticky🧲.animation-range: entry 60% entry 100% で発火🧲.4段重ねでも自然に動くのが最高👏.CSSだけで完結＆JS不要✨.#CSS小技 #Codejump #ScrollAnimation

DAY155：見えないけど効果的なキーボード操作補助. 📌 タブ移動で迷子にならないために. 🔹 tabindex の適切な管理で操作の順序を制御.🔹 skip link で素早くメインコンテンツへジャンプ. ✅ 見えなくても使いやすいサイト作り. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

CSS小技✨.:has() で親にtransitionをかけると、.子要素にも意��せず影響が出ることも😳. 疑似要素::before経由なら.背景だけを独立して変化させられます🙌. 便利さと制御のバランスが大事！.#Codejump #CSS

💻Webサイト制作（模写コーディング）.⏰3.5h.📝コーディングの���習として、↓この本とCodejumpで模写コーディングを始めました！.簡単そうに見えても、いざ書こうとすると難しいー😅.#codejump #デイトラコミュニティ

買おうか迷ってたけど本屋で見かけてHTML＆CSS参考書買いました✌️.コーディングもできるデザイナーになりたいもん…がんばる！. #codejump

CSS小技✨.🎨 CSSだけで作るGlassmorphism UI. 背景2枚を順番にフェードイン＋ガラスエフェクト✨.::before & ::afterで背景を2段階表示. backdrop-filter: blur()でガラス質感. フレームワーク不要・純CSSのみ. #CSS #Webデザイン #Glassmorphism #Codejump

コーディング練習してるけど慣れないうちはやっぱり難しい😬.できた時の達成感はあるけど🧸. #Codejump .ページは大きくないのになかなか終わらない.なれるように頑張る💻.

CSS小技✨. width: stretch ついに使える！.Chrome138で追加された新値は、flex内で「残り全部使って広がれ！」の意味💡. autoや100%とは挙動が違う。.対応ブラウザ限定だけど、今後の主役になるかも…？.#CSS #新機能 #Chrome138 #Codejump

DAY156：チェックボックスの見た目整え方. 📌 そのままだとデザインが古い印象…. 🔹 appearance: none; で自由にカスタマイズ.🔹 :checked 状態で色や形を変えてみよう. ✅ 自分らしいチェックボックスに変身. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

「HTML&CSS Webデザイン　現場レベルのコーディング・スキルが身につく実践入門」ぜんぶ作り終えました〜🤩. 知ってるはずが、あれ😯？？ってなるようなお題が多いから、ほんとに「実践」という感じがした〜. ニガテ📝.・max-widthやaspect ratioのいるいらない.・どこを可変にするか. #codejump

書籍版Codejump｜3章1周目📖.4ヶ月振りの再開👏. 下層ページ1枚目「サービスページ」のコード模写をしました！. 久々のCSSだったけど、Sassを触っているうちにCSSの理解も進んでたみたいで、前より楽に解読できる🙌. clip-path: polygon()も、苦手意識より親近感が上回ってきました😁. #Codejump

#今日の積み上げ メモ. ✅GAS_3時間講座.✅コーディング案件の面談.✅Codejump応用編_写経. #駆け出しエンジニア.#駆け出しエンジニアと繋がりたい.#ウェブデザイン.#HTML.#CSS.#GAS.#Laravel.#侍エンジニア.#侍テラコヤ.#侍エンジニア.

🌌CSS小技✨七夕ver. 背景のぼかしと文字出現をずらして、.幻想的な雰囲気に。.clip-path×背景画像×text-clip✍.#CSS #七夕 #Codejump