ろびー【CSS小技✨】

CSS小技✨ 「width: 100%」と「width: stretch」の違い 説明できますか？ marginを設定すると、100%だとその分だけ 親要素からはみ出してしまう🤔 stretchなら計算不要で残りの空間にピタッと収まる💻 calc(100% - 20px) のようにmargin分を引く 計算式を書く必要がなくなる🎶 #CSS #Codejump

CSS小技✨ 「gap」って色指定できたっけ？ そう錯覚させるCSSの遊び心🎶 実はgapに色を塗るんじゃなく 親の背景を「隙間」から覗かせてるだけ🤔 縦に割って100px広げれば、窓が開くような演出に hoverでgap0 → 100px & flex1→ 3💻 #CSS #Codejump #100DaysOfCode

今日は結婚記念日... ショートケーキ🍰買ってきた( ´∀｀ ) ケーキも物価高騰の波に乗ってるなぁ🤔

CSS小技✨ スクロールバーのカスタマイズ まだあの長い「おまじない」書いてる？ 今までは -webkit-scrollbar が必須だったけど これからは標準プロパティ scrollbar-color たった1行で完結🎶 ダークモード実装時はマジで必須💻 明日からこれだけでOK！ #CSS #Codejump #100DaysOfCode

「あ、中央揃えにanimationは趣味やから 気にせんといて( ´∀｀ ) 大事なのは、top/right/bottom/leftを1行に まとめられる inset の潔さ。 1pxでもコードを削りたい職人なら、 こっちが正解やな( ´∀ッチ )」

CSS小技✨ 上下左右中央寄せは方法多数あるけど animationさせながら成立させるとなると…… 一気に「パズル」の難易度が上がります💻 insetを歪ませて「ワープ」させ最後は... 中央（inset:0）へ強烈にOvershoot！ #CSS #Codejump #100DaysOfCode

CSS小技✨ 1️⃣文字の縁取り、太くすると中身が潰れる悩み🤔 2️⃣解決策：擬似要素に同じ文字を重ねる💡 最新の @property ならアニメーションも自在！ 3️⃣実は paint-order なら1行 ただし、animationの「戻り」の美しさは 擬似要素に軍配💻 #CSS #Codejump #Web制作 #100DaysOfCode

CSS小技✨ 1️⃣親に border: 8px を指定。 2️⃣height: 80vh は、親のボーダーを 無視して突き進む（16pxのはみ出し） 3️⃣max-height: 80vh は、親の枠内に 賢く収まる。 4️⃣height: 100%は80vh超えても追随 box-sizing: border-box を過信してると この16pxに泣かされるで🤔 #CSS #Codejump

CSS小技✨ width: stretchは、max-widthとの相性も抜群🎶 親要素に合わせて柔軟に伸びつつ max-widthで「広がりすぎ」をスマートに防ぐ💻 この組み合わせを知るだけで レスポンシブの微調整が劇的に楽になる👍 SafariやFirefoxはプレフィックスが必要 -webkit-fill-available #CSS #Codejump

補足：意外と勘違いされがちですが… 「width: 100% ＋ box-sizing」は、実は**内側（padding）**しか守れません🤔 marginがあると、結局枠外に突き抜けます💻 だからこそ、全てを自動で収める stretch が 「呪縛からの解放」なんです！( ´∀｀ )

CSS小技✨ 「width: 100%」と「width: stretch」の違い 説明できますか？ marginを設定すると、100%だとその分だけ 親要素からはみ出してしまう🤔 stretchなら計算不要で残りの空間にピタッと収まる💻 calc(100% - 20px) のようにmargin分を引く 計算式を書く必要がなくなる🎶 #CSS #Codejump

@kenfee_official その通りです！100%だと枠外に溢れる心配が ありますが、stretchなら親要素の余白を尊重して 『ピタッ』と収まってくれます。 box-sizingの呪縛から解放される感覚 ぜひ実戦で試してみてください！( ´∀｀ )

width: stretch を使うと、box-sizingを指定しなくてもレイアウトがずれないってことですね！

CSS小技✨ 同じ flex-grow: 3 でも、これだけ差が出る🎶 上：ベースが「flex: 1」 下：ベースが「flex: 2」 指定した数値は同じなのに、周囲の設定次第で 「3」の価値が変わる💻 これが Flexbox の面白くて、面倒なところ🤔 #CSS #Codejump

「結局、数字は嘘をつかない。」 どんなに言葉を飾っても、1pxの挙動が ズレていれば、書いたコードは嘘をつく✨ 自分の数値を盛ることに必死になるより、 周囲とのバランス（相対比）で最適解を見つける💻 CSSもSNSも、本質はそこにある気がします🎶 #CSS小技

CSS小技✨ 配置で変わる挙動の差💻 左（center）では食い違う「height変化」と「scale」 右（flex-end）に揃えると全く同じ動きに見える🤔 transform-origin: bottom; で起点を固定し 文字の歪みを calc で補正するのがポイント🎶 #CSS #Codejump

CSS小技✨ 深夜のflex遊び🎶 ただの「flex: 1」でどこまで遊べるか🤔 0.1秒のベジェ曲線と、hover時の伸長比を 2:3:4 に変えるだけで、UIの触感はこれだけ変わる💻 戻る時の余韻（transition）を計算し尽くすのが 深夜の醍醐味😎 #CSS #Codejump

CSS小技✨ Chrome 147新機能 border-shape🎶 border-radiusやcorner-shapeの「角」制御を超え、 枠線全体の形状を polygon() 等で自由に定義可能に💻 clip-pathと違い、中身を削らず「境界線の形」だけを 変形・アニメーションできる😲 CSSの表現力が別次元へ🤔 #CSS #Codejump

CSS小技✨ Chrome 147新機能 contrast-color()🎶 背景に応じて文字色を自動選択してくれるけど 基本は「白か黒」 結局センスの良い色にしたいなら 人間が候補を指定しなきゃいけない💻 AIじゃないから、デザインのセンスまでは 肩代わりしてくれない🤔 結局、最後は人間側なんだよね #CSS #Codejump

実はこれ、背景は fixed 1行で同期させてるんだよね✨

CSS小技✨ CSSだけで16分割アニメーション🎶 sibling-index() を使い、16個の要素に 自動で「色の波」を発生させました。 背景は fixed ひとつで全パーツを同期💻 複雑な計算もJSも不要。 最新のCSSなら、たった数行でここまで表現できます👍 #CSS #Codejump

CSS小技✨ テキストの背景のみ透過させる🎶 1️⃣clip-path に scale を掛け合わせて 弾む質感を表現 単純な数値指定では出せない オーバーシュートのこだわり 2️⃣最新の interpolate-size で高さを制御しつつ CSSだけで height: auto を動かす #CSS #Codejump