ろびー【CSS小技✨】

課金しない、媚びない、自爆もしない✨
140文字の制限下、自分の言葉とロジックだけでCSSの面白さをどこまで伝えられるか。「明日から使える」を、誰よりも泥臭く検証して発信中。
初学者の味方 / Codejump/ 🐯阪神タイガース
CSS / JS / WP / Figma / COBOL #CSS小技

[ろびー【CSS小技✨】 @Robby_WebDesign]

CSS小技✨
「gap」って色指定できたっけ？

実はgapに色を塗るのではなく、親の背景を「隙間」から覗かせているだけ👀

ホバーでgapがゼロから広がり
背景色がガラッと変わる💻
・body:has(.menu-item:hover)
・.menu:has():not(:hover)
#CSS #Web制作

[ろびー【CSS小技✨】 @Robby_WebDesign]

久しぶりに聴いても
ええ曲やね🎶

#阪神タイガース2023

https://t.co/DTRiN7UtqX

[ろびー【CSS小技✨】 @Robby_WebDesign]

何やってんねん💢

#クライマックス #阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

群馬の道の駅
川場田園プラザ行ってきた

#道の駅

[ろびー【CSS小技✨】 @Robby_WebDesign]

佐藤輝明2026三冠王おめでとう🐯

#阪神タイガース #サトテル三冠王

[ろびー【CSS小技✨】 @Robby_WebDesign]

margin-trim なら、親要素に1行書いておくだけで、
中身が p だろうが ul だろうが、どんなタグが
最後に来ても自動で一発解決します。

[ろびー【CSS小技✨】 @Robby_WebDesign]

CSS小技✨
Chrome 155の margin-trim が便利。
.card {
margin-trim: block-end; 💡これだけ
}
.card p {
margin-bottom: 20px;
}
これだけで、最後の子要素の不要な下マージンを
自動カットしてくれます。
コンポーネントの余白設計が
めちゃくちゃ綺麗になる…！
#WEB制作 #CSS

[ろびー【CSS小技✨】 @Robby_WebDesign]

阪神タイガース最終試合のヤクルト戦 By甲子園
出塁率取らせるため、森下途中から引っ込めたな
出塁率 = (安打 + 四球 + 死球) ÷ (打数 + 四球 + 死球 + 犠飛)
サトテルは４０号かかってるから、引っ込めない( ´∀｀ )
昨年の４０号🐯
#阪神タイガース

https://t.co/CFMDKbaiUg

[ろびー【CSS小技✨】 @Robby_WebDesign]

嗚呼💦
優勝決まってもた🐯
なんか...

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

他力本願で優勝するより
明日勝って優勝した方がええな🤔
負けた広島で宿泊して
胴上げもなく優勝？
巨人が負けたらビールかけするんかぁ？
ほんまフラストレーション溜まるわ🐯

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

いよいよやね🐯

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

ヤクルトはん...
勝ってほしかったな🤔

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

DeNA必死やろな！
クライマックス新ルール⚾
１0ゲーム差以上と勝率５割未満はアドバンテージ２...
やで🐯

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

何で石井やねん？

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

よしよしヾ(・ω・｀)

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

今日は「告白」最終回
躍る大捜査線あるけど
見たいやんか( ´∀｀ )

https://t.co/cz0ItSVI9K

[ろびー【CSS小技✨】 @Robby_WebDesign]

これでM13
巨人とのゲーム差１

久びりに大量得点🐯
そんなにいらんから明日以降にな...
前回完封された床田にリベンジや！

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

巨人も負けたから
順位変わらんけど
１０安打で１点かい！
おいおい！

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

投手？・打線...最悪
首位陥落＆マジック消滅かぁ
何してんねん💢

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

巨人負けたのに
何してんねん💢

#阪神タイガース

[ろびー【CSS小技✨】 @Robby_WebDesign]

CSS小技✨
従来は片方をスクロールにすると
他方の完全固定（クリップ）が困難だった🤔
Chrome 153で「単一軸スクロール」がサポート！
overflow-x: auto
overflow-y: clip

overflow: auto clip などの直感的な1行指定で
縦横のスクロール・はみ出し制御が
超スマートに完結します💻

#CSS #Web制作