@Robby_WebDesign profile picture
ろびー【CSS小技✨】 @Robby_WebDesign
Joined April 2021
  • Tweets 4,312
  • Following 67
  • Followers 4,483
2,586 Photos and videos
CSS小技✨ 「width: 100%」と「width: stretch」の違い 説明できますか？ marginを設定すると、100%だとその分だけ 親要素からはみ出してしまう🤔 stretchなら計算不要で残りの空間にピタッと収まる💻 calc(100% - 20px) のようにmargin分を引く 計算式を書く必要がなくなる🎶 #CSS #Codejump
0:20
11
87
1,161
98,813
CSS小技✨ 「fit-contentは親要素の幅を超えない」は間違い🤔 Space区切りの英語は一番長い単語の幅 （min-content）以下に縮まないため 親がそれ以下になると普通にはみ出します💻 でも1文字単位で改行できる日本語は綺麗に収まる。 実務で焦る前に仕様のソロバンを叩いておく🧮 #CSS #Web制作
0:10
18
1,468
CSS小技✨ 往復(alternate)は再生回数が奇数(片道)か偶数(往復)かで 終了時の見た目が激変！ 🔻forwards：最後を固定 🔻both：最初と最後の【両方】を固定 検証コードで同じに見えるのは元のCSSと0%の幅が 同じだから🤔 この罠を常に美しく往復＆静止させるのが 下段の％等分です💻 #CSS #Web制作
0:17
1
16
1,086
CSS小技✨ 1行で文字数に応じた可変幅と、上限の自動改行を 両立させる魔法の1行🎶 最先端のcalc-size()にmin()をガッチャンコ！ 文字が増えるほど幅が上限付きで広がるドラマを 動画でどうぞ💻 siblingでさらばnth-child！ #CSS #Web制作 #100DaysOfCode
0:15
1
48
2,252
CSS小技✨ 【calc-size()の集大成】 知識を合算した30秒のドラマ📺 1️⃣親幅連動stretch 2️⃣max-width80%縮小 3️⃣ラストは制限を上書き破壊して1.2倍限界突破！ 4️⃣clip-path卒業、max-content,sizeで文字出現 ⚠️偶数往復を「初期状態」で美しく完全固定する 両端キープのbothが必須！ #CSS #Web制作
0:32
3
29
1,286
CSS小技✨ 最新のcalc-size()で「外側基準」と「内側基準」の 余白挙動を徹底比較🎶 ㊧親幅に連動して余白が縮む ㊨中の具材（min-content）の1.5倍をキープする 時間差アニメーションでの動きの違いに注目です💻 #CSS #Web制作 #100DaysOfCode
0:23
2
36
2,220
CSS小技✨ object-positionで四隅をなめらかに移動後 object-view-box×scale(4)で狙った位置へ 一気に超クローズアップ🎶 仕上げにbackground-clipで背景を吸い込んだ 文字を浮かび上がらせ、セピア色にぼかす演出まで 全てCSS💻 脱JSの限界突破技です👍 #CSS #Web制作 #100DaysOfCode
0:14
5
47
1,705
CSS小技✨ object-view-boxとpositionの合わせ技🎶 img { object-position: 0% 0%; object-view-box: inset(0% 0% 0% 0%); } img:hover { object-position: 0% 100%; object-view-box: inset(40% 30% 0% 10%); } 後はtransition & delayで時間差で繋ぐだけ #CSS #Web制作 #100DaysOfCode
0:07
4
28
918
CSS小技✨ object-view-box でホバーズームを作る時のTips💻 ・inset() の対になる辺の合計％を揃えると 画像が歪まない ・position: absolute と組み合わせると 枠からのはみ出しを確実に防げる scaleの単純拡大とは違う ドラマチックな動きが作れて楽しい🎶 #CSS #Web制作 #100DaysOfCode
0:11
1
7
66
3,288
CSS小技✨ ホバー時に「3回リアルに弾む着地アニメ」、 まだ重いJSを使って消耗してる？ ❌過去：cubic-bezierは仕様上1回しか弾めない ⭕️現在：最新のlinear()なら、バウンドの数値を 細かく並べるだけで複数回弾むリアルな動きが作れる JS不要の新常識‼️ #CSS #Web制作 #100DaysOfCode
0:10
1
18
877
CSS小技✨ パスワードの伏字を解除する時、まだJSでinputの type属性を書き換えて消耗してる？ ❌過去：JS必須＆自動入力が誤作動する原因に ⭕️現在：text-securityとclip-pathを同期JS不要で SF映画みたいにヌルッと解読される 神アニメが2行で完成！ #CSS #Codejump #100DaysOfCode
0:07
1
5
70
2,493
💡 リプ欄用補足： input.type = 'text' と書き換える従来のJSだと ブラウザのpassword管理ツールが誤作動する 致命的なバグがあった🤔 最新CSSの text-security なら、typeを変えずに 『見た目だけ』を黒丸にできるので ツールを邪魔しない💻 clip-pathなら文字も1ミリもズレずに美しく動く👍
1
5
490
CSS小技✨ 「画像幅に下の説明文を自動で折り返す」時 まだ固定pxやJSで消耗してる？ ❌過去：画像sizeが変わる度に親のwidth変更が必要 ⭕️現在：width: calc-size(min-content, size) 　　　　 画像の可変animationに枠もtextも 追従する神機能！ #CSS #Codejump #100DaysOfCode
0:10
1
13
143
7,407
CSS小技✨ ホバーで色を混ぜたい時、まだ疑似要素で消耗してる？ ❌過去：文字の濁りを防ぐためにbefore側への transitionやopacity、z-index調整が必要で複雑 ⭕️現在：:hover で background: color-mix(in srgb, color1, color2 〇%); 1行で綺麗に混色できる神機能👍 #CSS #Web制作 #100DaysOfCode
0:08
2
45
1,331
CSS小技✨ 【スマホの「タップしにくい」を1行で解決】 insetはマイナス指定ができる！ 1️⃣基本：inset: 0;（4行を1行に） 2️⃣応用：inset: -10px;（外に拡大） デザインを崩さず、タップ領域だけ広げる神UX💻 beforeを空っぽにすれば文字も歪まない👍 #CSS #Web制作 #100DaysOfCode
0:16
4
68
4,048
CSS小技✨ CSSではみ出す神技の最新版🎶 画面幅へ広げる従来のはみ出しハックは 出す幅の半分を手動計算してmarginをシンクロさせる 複雑さがあった🤔 最新のcalc-size()ならstretch特性を保ったまま 1箇所に幅を書くだけ👍 中央から綺麗に広がる💻 #CSS #Web制作 #100DaysOfCode
0:17
1
1
33
2,513
※calc-size()やstretchはChromium系（Chrome等）で 先行実装されている最先端の仕様です。 ぜひChromeでこの「引き算いらず」の 感動的な挙動を検証してみてください！
5
332
阿部慎之助現行犯逮捕やて？ news.yahoo.co.jp/articles/1e…
2
2,683
CSS小技✨ 最新の兄弟結合子（~）で一括制御する 立体交差アナグラム🎶 hoverで複雑な放物線を描く時の核心は 「transition」に頼らず「@keyframes」を仕込むこと🤔 横移動はセレクタの連鎖でスマートに 縦と拡大縮小は％で立体的に支配💻 #CSS #Web制作 #100DaysOfCode
0:07
3
30
1,164
CSS小技✨ 2秒後に空間がドロッと溶け出す JS不要の「有機液体（メタボール）」ハック🧪 1️⃣コツは親玉（文字）と子玉（丸）を【同じ色】にする 2️⃣後から親要素へfilter: blur(15px) contrast(30)を指定 普通の文字と丸が、粘り気のある水滴に変身💻 #CSS #Web制作 #100DaysOfCode
0:15
3
46
2,069
CSS小技✨ 斜めの境界線がシンクロするシネマティック反転🎥 ・mix-blend-mode: differenceで白黒反転 ・斜めグラデをhoverでslide ＆「:has()」と「clip-path」を組み合わせ bannerの反転ラインと同じ角度で画面全体の 背景画像を劇的に切り裂く最強演出💻 #CSS #Web制作 #100DaysOfCode
0:06
6
51
1,942
Load more