Robby_WebDesign Profile Banner
ろびー【CSS小技✨】 Profile
ろびー【CSS小技✨】

@Robby_WebDesign

Followers
4K
Following
279K
Media
2K
Statuses
4K

【課金しないコーダー👉技術を語る初学者の味方🎶】/Program学習2020年10月~ /Codejump(旧Codestep)で理解深める/ CSS & SCSS.JavaScript.jQuery.WordPress.Figma / #CSS小技✨/#阪神タイガース🐯

大阪→兵庫→東京→福岡→宮城→長野→埼玉
Joined April 2021
Don't wanna be here? Send us removal request.
@Robby_WebDesign
ろびー【CSS小技✨】
20 days
CSS小技✨ grid-template-columns 25% と 1fr の違い🎶 25%×4 は gap を計算に含まない ので 合計が100%+gap → 横スク💻 1fr×4 は gap を含めた残り幅を等分 するから はみ出さない❄️ この差だけで挙動が変わります ✨ #CSS #CSS小技 #Codejump
0
2
77
@Robby_WebDesign
ろびー【CSS小技✨】
11 hours
padding lhにfont-size clampを設定すると 親要素を縮小した時に反応する✨
0
0
4
@Robby_WebDesign
ろびー【CSS小技✨】
11 hours
CSS小技✨ 大事なので追記 paddingは % と lh で基準が違う👀 ① 親幅そのまま → hoverで文字を拡大  %は文字が大きくなると要素が押し広がる  paddingは変化なし  lhは文字サイズに比例してpaddingも膨らむ ② 親幅を縮小 →  %は親幅基準→余白も縮む  lhは独立→変化なし #CSS #Codejump
1
0
11
@Robby_WebDesign
ろびー【CSS小技✨】
16 hours
CSS小技✨ paddingの%とlhは基準が違います👇 1️⃣paddingの%は“縦でも”親の幅が基準😳 横にも縦にも効く。 2️⃣一方でlhはline-height基準🤔 文字サイズが変わると余白も変わる。 hoverで比べると差がクッキリ✨ #CSS #Codejump
0
0
27
@Robby_WebDesign
ろびー【CSS小技✨】
2 days
CSS小技✨ paddingにlh(line-height単位)を使うと 文字サイズや行間に合わせて余白が自動追従🎶 hoverで文字を大きくしても崩れません💻 左から → 1️⃣固定px 2️⃣文字に比例 3️⃣文字に比例+横固定px #CSS #Codejump
0
0
59
@Robby_WebDesign
ろびー【CSS小技✨】
3 days
🎄CSS小技✨ 文字を時間差でスライド表示 → 背景暗転 → 発光。 blur依存を避けて filter+疑似要素で安定表示に🎶 一連の動きが滑らかです👍 #CSS #Codejump #Christmas
0
2
29
@Robby_WebDesign
ろびー【CSS小技✨】
3 days
年末兵庫に帰省🚙 地元名物紹介 1️⃣姫路おでん...生姜醤油をかけて 2️⃣姫路流たこ焼き...ソースを塗って出汁に 3️⃣東来春シュウマイ...ソースを塗る 4️⃣御座候の回転焼き...あんこギッシリ 5️⃣駅そば...中華麺に和風出汁 6️⃣ひねぽん...卵を産み終えた親鳥...超歯ごたえ #姫路グルメ
0
0
8
@Robby_WebDesign
ろびー【CSS小技✨】
4 days
CSS小技✨ flex:1 だけじゃない。 flex:2 / 3 / 4 ...も使える🎶 flex-direction:column にすると 横じゃなく「縦」に伸び縮み😎 flex:n は flex-grow の比率が変わるだけ shrink は 1 のまま🤔 flex は移動距離が毎回変わるので easing を丁寧にすると 一気に気持ちよくなる👍 #CSS #Codejump
1
5
107
@Robby_WebDesign
ろびー【CSS小技✨】
5 days
CSS小技✨ flex:1 と flex:1 1 auto の違い🎶 flex:1 → 最初から均等割り → 文字数が片方増えても均等割り flex:1 1 auto → まず文字が収まる幅 → 文字数が片方増えると幅変化 → 残った余白は grow で等分 文字量を増やすと 挙動の差がはっきり出る👇 #CSS #Codejump
0
7
61
@Robby_WebDesign
ろびー【CSS小技✨】
6 days
CSS小技✨ フッター固定🎶 body { min-height:100vh; display:flex; flex-direction:column } main { flex:1 } これだけ...👇 ✔ コンテンツ少 → フッター最下部 ✔ 多 → 自然に下へ position:fixed 不要 FlexだけでOK #CSS #Codejump
0
1
33
@Robby_WebDesign
ろびー【CSS小技✨】
7 days
CSS小技✨ flex:1 vs width:100% 最初は flex:1 が動かない...なぜ? width:100% が 親幅を使い切っているから...🤔 hoverで width を縮めると 余白が生まれ flex:1 が伸びる👉flex は、余白担当🎶 #CSS #codejump
0
5
86
@Robby_WebDesign
ろびー【CSS小技✨】
7 days
CSS小技✨ flex-grow に transition 効く? 👉 効く width を変えずに 横幅が伸びるのは flex の再計算が補間されるから。 easing を変えると flex-grow でも 気持ちいい動きになります👇 #CSS #Codejump
0
7
144
@Robby_WebDesign
ろびー【CSS小技✨】
8 days
color-mixで疑似要素必要ないのは 色 × 色だけ... 画像と色を“重ねる”機能は持っていない🤔 1️⃣背景画像を透かしたい 2️⃣その上に色をかけたい この2層構造が必要 → レイヤー分離が必須 なので疑似要素必要
0
0
3
@Robby_WebDesign
ろびー【CSS小技✨】
8 days
CSS小技✨ テキストに触れると色が薄まる比較🎶 opacity は文字も含めて透けるので背景で色が変わるが、 color-mix() は色だけ薄まり、文字は透けない🤔 触るだけで違いが一発で分かる。 要はcolor-mix()は疑似要素必要なし💻 #CSS #Codejump
3
19
246
@Robby_WebDesign
ろびー【CSS小技✨】
9 days
現役ドラフトでヤクルトから阪神移籍の 濱田選手....🤔 いいドラフト分かるけど 何で打たれてるの阪神戦ばっか? #阪神タイガース https://t.co/A0kOUmzd4x
0
0
4
@Robby_WebDesign
ろびー【CSS小技✨】
9 days
CSS小技✨ transition: all は危険🤔 background も border も勝手にヌルッと動く。 動画の左は全部アニメ、右は transform だけ動いて 他は instant💻 この差を知らないとUIが崩れることも😟 実務は transform / opacity の個別指定が安全👍 #CSS #Codejump
0
1
22
@Robby_WebDesign
ろびー【CSS小技✨】
10 days
最近、Spaceでフォロワーを増やしている方で 過去に受けた質問のレベルが あまりに低くて驚いた❓ いつの間に実力上げたのか分からないけど… 少し不思議に感じた瞬間も🤔 でもこの世界ではよくある話かな🍆
0
0
8
@Robby_WebDesign
ろびー【CSS小技✨】
10 days
CSS小技✨ translate vs offset-path🎶 どちらも「位置を動かす」けど挙動がまったく違う🤔 1️⃣translate は直線移動のみ。 2️⃣offset-path はパスに沿って自由に移動できる。 最初から最終パスを設定すれば、 hoverでもちらつかず滑らかに動く👍 #CSS #Codejump
0
4
40
@Robby_WebDesign
ろびー【CSS小技✨】
11 days
CSS小技✨ background-attachment: fixed はPCでは 背景固定になるけど、スマホでは基本的に無効🤔 擬似要素に position: fixed を指定する方法を使うと、 同じように背景を固定表示できる👍 左右で比較すると挙動が完全一致🎶 スマホ対応時の背景固定テクとして 覚えておくと便利📱 #CSS #Codejump
0
2
45
@Robby_WebDesign
ろびー【CSS小技✨】
11 days
また閲覧範囲が狭まった🤔 イーロン・マスク氏買収後、多くの大手広告主が Xから撤退したため、Xは広告以外の 収益源(サブスクリプション)を強化せざるを 得ない状況に... 何でも有料や! Twiterが懐かしい✨
0
0
9
@Robby_WebDesign
ろびー【CSS小技✨】
11 days
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
0
1
49