CSS小技✨ grid-template-columns 25% と 1fr の違い🎶 25%×4 は gap を計算に含まない ので 合計が100%＋gap → 横スク💻 1fr×4 は gap を含めた残り幅を等分 するから はみ出さない❄️ この差だけで挙動が変わります ✨ #CSS #CSS小技 #Codejump

padding lhにfont-size clampを設定すると 親要素を縮小した時に反応する✨

CSS小技✨ 大事なので追記 paddingは % と lh で基準が違う👀 ① 親幅そのまま → hoverで文字を拡大 　%は文字が大きくなると要素が押し広がる 　paddingは変化なし 　lhは文字サイズに比例してpaddingも膨らむ ② 親幅を縮小 → 　%は親幅基準→余白も縮む 　lhは独立→変化なし #CSS #Codejump

CSS小技✨ paddingの%とlhは基準が違います👇 1️⃣paddingの%は“縦でも”親の幅が基準😳 横にも縦にも効く。 2️⃣一方でlhはline-height基準🤔 文字サイズが変わると余白も変わる。 hoverで比べると差がクッキリ✨ #CSS #Codejump

CSS小技✨ paddingにlh（line-height単位）を使うと 文字サイズや行間に合わせて余白が自動追従🎶 hoverで文字を大きくしても崩れません💻 左から → 1️⃣固定px 2️⃣文字に比例 3️⃣文字に比例＋横固定px #CSS #Codejump

🎄CSS小技✨ 文字を時間差でスライド表示 → 背景暗転 → 発光。 blur依存を避けて filter＋疑似要素で安定表示に🎶 一連の動きが滑らかです👍 #CSS #Codejump #Christmas

年末兵庫に帰省🚙 地元名物紹介 1️⃣姫路おでん...生姜醤油をかけて 2️⃣姫路流たこ焼き...ソースを塗って出汁に 3️⃣東来春シュウマイ...ソースを塗る 4️⃣御座候の回転焼き...あんこギッシリ 5️⃣駅そば...中華麺に和風出汁 6️⃣ひねぽん...卵を産み終えた親鳥...超歯ごたえ #姫路グルメ

CSS小技✨ flex:1 だけじゃない。 flex:2 / 3 / 4 ...も使える🎶 flex-direction:column にすると 横じゃなく「縦」に伸び縮み😎 flex:n は flex-grow の比率が変わるだけ shrink は 1 のまま🤔 flex は移動距離が毎回変わるので easing を丁寧にすると 一気に気持ちよくなる👍 #CSS #Codejump

CSS小技✨ flex:1 と flex:1 1 auto の違い🎶 flex:1 → 最初から均等割り → 文字数が片方増えても均等割り flex:1 1 auto → まず文字が収まる幅 → 文字数が片方増えると幅変化 → 残った余白は grow で等分 文字量を増やすと 挙動の差がはっきり出る👇 #CSS #Codejump

CSS小技✨ フッター固定🎶 body { min-height:100vh; display:flex; flex-direction:column } main { flex:1 } これだけ...👇 ✔ コンテンツ少 → フッター最下部 ✔ 多 → 自然に下へ position:fixed 不要 FlexだけでOK #CSS #Codejump

CSS小技✨ flex:1 vs width:100% 最初は flex:1 が動かない...なぜ？ width:100% が 親幅を使い切っているから...🤔 hoverで width を縮めると 余白が生まれ flex:1 が伸びる👉flex は、余白担当🎶 #CSS #codejump

CSS小技✨ flex-grow に transition 効く？ 👉 効く width を変えずに 横幅が伸びるのは flex の再計算が補間されるから。 easing を変えると flex-grow でも 気持ちいい動きになります👇 #CSS #Codejump

color-mixで疑似要素必要ないのは 色 × 色だけ... 画像と色を“重ねる”機能は持っていない🤔 1️⃣背景画像を透かしたい 2️⃣その上に色をかけたい この2層構造が必要 → レイヤー分離が必須 なので疑似要素必要

CSS小技✨ テキストに触れると色が薄まる比較🎶 opacity は文字も含めて透けるので背景で色が変わるが、 color-mix() は色だけ薄まり、文字は透けない🤔 触るだけで違いが一発で分かる。 要はcolor-mix()は疑似要素必要なし💻 #CSS #Codejump

現役ドラフトでヤクルトから阪神移籍の 濱田選手....🤔 いいドラフト分かるけど 何で打たれてるの阪神戦ばっか？ #阪神タイガース https://t.co/A0kOUmzd4x

CSS小技✨ transition: all は危険🤔 background も border も勝手にヌルッと動く。 動画の左は全部アニメ、右は transform だけ動いて 他は instant💻 この差を知らないとUIが崩れることも😟 実務は transform / opacity の個別指定が安全👍 #CSS #Codejump

最近、Spaceでフォロワーを増やしている方で 過去に受けた質問のレベルが あまりに低くて驚いた❓ いつの間に実力上げたのか分からないけど… 少し不思議に感じた瞬間も🤔 でもこの世界ではよくある話かな🍆

CSS小技✨ translate vs offset-path🎶 どちらも「位置を動かす」けど挙動がまったく違う🤔 1️⃣translate は直線移動のみ。 2️⃣offset-path はパスに沿って自由に移動できる。 最初から最終パスを設定すれば、 hoverでもちらつかず滑らかに動く👍 #CSS #Codejump

CSS小技✨ background-attachment: fixed はPCでは 背景固定になるけど、スマホでは基本的に無効🤔 擬似要素に position: fixed を指定する方法を使うと、 同じように背景を固定表示できる👍 左右で比較すると挙動が完全一致🎶 スマホ対応時の背景固定テクとして 覚えておくと便利📱 #CSS #Codejump

また閲覧範囲が狭まった🤔 イーロン・マスク氏買収後、多くの大手広告主が Xから撤退したため、Xは広告以外の 収益源（サブスクリプション）を強化せざるを 得ない状況に... 何でも有料や！ Twiterが懐かしい✨

CSS小技✨ 文字がカッコ良く出るeasing7選💫 微差だけど印象は変わる。 opacity＋translateYで再現OK。 cubic-bezier🎉 1️⃣ .25,1,.25,1 高級感 2️⃣ .19,1,.22,1 重厚 3️⃣ .4,0,0,1 近代UI 4️⃣ .16,1,.3,1 上品 5️⃣ .34,1.56,.64,1 勢い 6️⃣ .55,0,.1,1 キュッ 7️⃣ .11,.99,.43,1 滑らか #CSS #Codejump