#codejump search results
✨CSS小技✨ clampは幅だけじゃない🎶 width:50%は親に依存し、 font-size:2vwは極端に小さくなりがち💦 でもclamp()ならどちらも安定🙌 width: clamp(300px,50%,800px) font-size: clamp(1rem,2vw,2rem) 柔軟だけどブレないLayoutに💫 親要素は max-width: 1000px width: 100% #CSS #Codejump
CSS小技✨ mix-blend-mode: difference;で hoverした部分だけ“色が反転”🌗 さらにborder-radiusをつけると、 反転エリアが丸く流れ込むように広がる💫 重なった部分だけ色が反転する、不思議なblend効果🎨 #CSS #Codejump
CSS小技✨線の両端を丸くする！ 普通に ::after で線を引くと、端が四角くなります。 でも border-radius を線の太さの半分以上にすると、 線の“端”まできれいに丸くできます！ border-radius: 9999px;👍 線を伸ばすアニメも加えれば完成🌈 #Codejump #CSS #webデザイン
CSS小技✨ カードが飛び出すCSSマジック💥 transform＋easingで♠️🔶♣️♥️が 奥からスムーズに動く🎯 ※疑似要素は2つまでだけど、子要素を追加すれば 3枚以上も重ねられるテクニック付き💡 #CSS #Codejump
CSS小技✨ 光が走るクリスマス演出🎄 左右が開き、光が走り抜け、最後に円が広がる✨ clip-path・mix-blend-mode・corner-shapeで 2025風の動きを表現してみた🎅 🎨 アニメーションの流れ 開く → 光る → 包む #CSS #Codejump #クリスマス
💡CSS小技✨ flex-shrink の動きを “逆に” 見せるデモ🎥 flex: 1 1 400px → grow:1（広がる） → shrink:1（縮む） → basis:400px（基準幅） hoverしたBarだけ flex-shrink:3 で縮み、 widthは変えてないのに 他のBarが相対的に広がって見える💫 ラベルは attr() で切り替え🎶 #CSS #Codejump
CSS小技✨ CSSで複数画像ブレンドするならこれ1択👍 background-blend-modeが最強🎶 1要素で無制限レイヤー、位置・サイズ・ ブレンド自由、DOM増やさず高速GPU描画🎉 アニメも扱いやすくコードも短い最強仕様💪 #CSS #Codejump
CSS小技✨ 文章を行ごとにspanで分けると、 hover時に下線が1行ずつ順番に伸びる animationが作れます💡 「自動改行されたように見える文章」でも、 spanを手動で分ければ順番に線が追いかける 演出が可能です🎉 transition-delayだけで簡単にできるので見栄え◎ #Codejump #CSS
CSS小技✨ `mix-blend-mode` ではなく `background-blend-mode` を使うと、 背景色と画像が“同じレイヤー内”でブレンド🎨 だから透過せず、背景色ともちゃんと同期できる💡 opacity＋animationで溶けるような表現も可能🫧 #CSS #Codejump
CSS小技✨ cross-fadeの落とし穴と裏技🎶 cross-fade() は画像をBlendできる関数🎨 background-blend-mode と違い、 Blend割合を数値で指定できる のが特徴💡 でも transition は効かない😢 そこで割合の違うcross-fadeを2枚用意し、 opacityで切り替えれば自然に見える👍 #CSS #Codejump
CSS小技✨ 画面幅によって 2枚の画像を「分割」→「重ねる」🎶 PCでは左右に並べて、 スマホでは 合成。 背景を2枚重ねるときは、 background-imageで複数指定できる👍 background-blend-modeを組み合わせると幻想的に！ #CSS #Codejump
Progateの連続学習日数100Daysを達成できました。 前回の31Daysから長かった～。 1つ目標にしていたことが達成できて、少し満足。 さて、この後はどうしようかな。Progateは12ヶ月プランなので、まだまだ学ぶことはできる。。。 でも、Codejumpもやりたいなぁ。 ＃progate #codejump
CSS小技✨ object-fit: none; と object-position で 画像の“上だけ・下だけ”を切り取って見せる🎨 さらにhoverの「行き」と「帰り」で transitionを変えて、動きにリズムをつけた💡 #CSS #Codejump
CSS小技✨ 行ごとに先頭文字だけ順番にアニメ🎨 ::first-letter は transform効かない💡 各先頭を<span>で囲って動かすのが確実！ ミソは親spanにdisplay: block 子spanにdisplay: inline-block💯 各行は nth-of-type() で指定できるので👇 span:nth-of-type(n) 共通class { style } #CSS #Codejump
CSS小技✨ シリーズ総仕上げ🎶 魔法のflex:1 1 0 の意味は👇 1️⃣ grow: 伸びる力1 2️⃣ shrink: 縮む力1 3️⃣ basis: 基本幅0 hoverで個別に幅を変えて波打つ アコーディオン風アニメ💨 順番にちょっとずつ遅延させて弾む動きも表現 色も個別に変えられるので見た目もわかりやすい👍 #CSS #Codejump
CSS小技✨ transitionを:hover内に書くとhover中は効くけど、 外した時は効かない⚠️←初心者が陥りやすい罠🤔 両方で動かすなら初期状態に書くのが正解💡 さらに「hover時と戻る時で動きを変えたい」時は 両方に書く！ #CSS小技 #Codejump
CSS小技✨ CSSで複数画像ブレンドするならこれ1択👍 background-blend-modeが最強🎶 1要素で無制限レイヤー、位置・サイズ・ ブレンド自由、DOM増やさず高速GPU描画🎉 アニメも扱いやすくコードも短い最強仕様💪 #CSS #Codejump
#17日目 #予定 〇11/15（土） 今日は休日。ただ深夜に仕事の問い合わせ対応あり…。 待ち時間が多いから、その時間でこっそり勉強して、 codejump入門編２のコーディングを今日こそ完成させたい。 あ、どでかい観葉植物ほしいなぁ。 今日も一歩前進！ #codejump #HTMLCSS #観葉植物
#16日目 #実績 〇11/14（金） codejump入門編２（途中） 朝と夜に1hずつ作業実施 なんとなく見えていた動きが「こうするとこうなる」と少しずつ予測できるように。 ただ、基礎って学んだつもりが書いてあるコードをなぞって書くだけではやっぱり頭に入ってないな…。実感…。 #codejump
#16日目 #本日の予定 〇11/14（金） codejump入門編２ コーディング（完成） display: flex の細かい調整やフォント周りの整理、 padding・marginで全体の見た目を整えていく予定。 正直、このあたりが一番むずかしい…。 CSSの動作検証サイトも使いつつ進めていく。 今日も一歩前へ。 #codejump
#15日目 #実績 〇11/12（水） １日遅れで投稿💦 CSSを自分で考えて組んでみて少し進んだが形が崩れる… 最近、仕事に追われてしまって勉強がなかなかできていない。でも無理にやろうとせずモチベを保てるようにはしたい。だからといってサボることなく少しづつでもやろう♪楽しく♪ #codejump
✨CSS小技✨ clampは幅だけじゃない🎶 width:50%は親に依存し、 font-size:2vwは極端に小さくなりがち💦 でもclamp()ならどちらも安定🙌 width: clamp(300px,50%,800px) font-size: clamp(1rem,2vw,2rem) 柔軟だけどブレないLayoutに💫 親要素は max-width: 1000px width: 100% #CSS #Codejump
CSS小技✨ cross-fadeの落とし穴と裏技🎶 cross-fade() は画像をBlendできる関数🎨 background-blend-mode と違い、 Blend割合を数値で指定できる のが特徴💡 でも transition は効かない😢 そこで割合の違うcross-fadeを2枚用意し、 opacityで切り替えれば自然に見える👍 #CSS #Codejump
CSS小技✨ 光が走るクリスマス演出🎄 左右が開き、光が走り抜け、最後に円が広がる✨ clip-path・mix-blend-mode・corner-shapeで 2025風の動きを表現してみた🎅 🎨 アニメーションの流れ 開く → 光る → 包む #CSS #Codejump #クリスマス
#15日目 #本日の予定 〇11/12（水） codejump入門編２ コーディング（8割目標） ・調べながら完成形に近づける ・５分調べてわからなかったらヒントを参照 ・動きを理解しながらコーディングする よし！今日もがんばろう！ #codejump
#14日目 #本日の実績 〇11/11（火） codejumpの入門編 display: flexの中に組み込んだgapの動きがイマイチわからない… こういう細かいことはやっぱり講師がいる間に学びたかったな。 調べつつ、数値を変えてどう変わるのかを見て理解していくしかないなー #codejump
Codejump 初級編Mag88 🕰️12時間45分 初めてほとんど自力で position使うんだなとかはチラ見 作ってからクラス付け方とか少しお手本参考にした でもどうしても文字位置合わないとこ２つあって悔しい これ以上自分で考えても時間の無駄だから今度質問する #codejump #webデザイン #コーディング
#14日目 #本日の予定 〇11/11（火） 昨日の夜から、喉の奥が痛い…。 実家でもらってきてしまったかも💦 今日は出社予定だったけど、リモートにさせてもらおう。 9時までちょっとhtmlやって二度寝するか… #codejump
11月10日(月)20:00〜21:30(1.5h) [11月累計 21h] 初級編codejump ストアサイト position:relative、absolute; が 当たった状態のテキスト、画像配置に 苦戦中 #codejump #デイトラ
Progateの連続学習日数100Daysを達成できました。 前回の31Daysから長かった～。 1つ目標にしていたことが達成できて、少し満足。 さて、この後はどうしようかな。Progateは12ヶ月プランなので、まだまだ学ぶことはできる。。。 でも、Codejumpもやりたいなぁ。 ＃progate #codejump
4/9(水)デイリーレポ 残業より帰宅し、待ち侘びていたCodejumpさんの書籍が届いてるーーー🥹✨ まださらっと見ただけだけど、 早く取りかかりたーい！！ 厚さもあり！やりごたえありそう！ Codejumpさん（呼び方あってる？笑）の素材だったりデザインがツボなんだな☺️ #famm卒業生 #codejump
【HTML/CSS コーディング練習】入門編：ブランドサイト（ジュエリー）／1カラムのコーディング 模写じゃなく、デザインカンプからコーディングできるように練習中😤いつもよりも時間はかかりましたが試行錯誤しながら完成させることができました！ #codejump #コーディング勉強中 #WEB制作
おはようございます⛅ 昨日は #Codejump 初級のプロフィールサイトを模写。 3度目の挑戦で完成できました💦 所要時間：1時間57分 さらっと出来そうな見た目でも時間かかりますな😅 でも復習してわからんとこはないけ、次進みます！ これから #朝活 開始🔥
#今日の積み上げ #Web制作 205日目 #codejump 上級FA EXHIBITION ページ読み込み時に関数が実行されてるのがどうしようもなくて、結局ifでいろんな条件足して無理矢理実装…😖 こっちなおしたらあっちが変になるみたいなの繰り返して、結局紙にまで書いて流れを整理してやっとおかしな挙動を直せた😧
#今日の積み上げ #Web制作 203日目 #codejump 上級FA EXHIBITION 背景の表示・非表示アニメーション！ タイトルが画面に入った場合と消えた場合だけifで指定したらいいかと思いきや、画面が縦に短いときとか変な挙動になるので、それを防止するためにコード複雑化…大変だったけど何とかできたかな😖
#今日の積み上げ #Web制作 207日目 #codejump 上級FA EXHIBITION メインビジュアルアニメーション！ スクロール量に対応してwidthを変化させるのは、本で学んだスクロールバーを作るやつと似てるなと思って、本見ながらやったらできた😁 PCとSPとの動きの違いもSneakersの時の復習になってよかった✊
#今日の積み上げ #Web制作 208日目 #codejump 上級FA EXHIBITION レスポンシブも全部完了！ 最後スマホでもjsの動きおかしくないことを確認🔎 過去最高に難しかったし、苦戦したけど何とか持てる知識を総動員して、それでも分からないことは調べまくって作り上げられた！😁 明日はお手本みて学ぼう✊
2/12,2/11の記録 #irocode , #codejump ：2h+3h その他学習：1h+0.75h 一昨日の #よるごはん 主食：雑穀米 主菜：酒粕豆乳鍋 副菜：揚げ出し豆腐(残り物) 鍋で主菜と汁物を兼任してもらった。 豚肉と鮭、椎茸。冷凍にしていた残り物処分でボリュームを出してある。
Something went wrong.
Something went wrong.
United States Trends
- 1. Wemby 42.5K posts
- 2. Steph 83.1K posts
- 3. Draymond 20.2K posts
- 4. Good Saturday 17.8K posts
- 5. Spurs 35K posts
- 6. #Truedtac5GXWilliamEst 177K posts
- 7. #PerayainEFW2025 127K posts
- 8. Massie 62.3K posts
- 9. PERTHSANTA JOY KAMUTEA 579K posts
- 10. #NEWKAMUEVENTxPerthSanta 575K posts
- 11. Warriors 59.1K posts
- 12. Clemson 11.4K posts
- 13. Marjorie Taylor Greene 54.7K posts
- 14. Bubba 61.9K posts
- 15. #dubnation 2,247 posts
- 16. Bill Clinton 203K posts
- 17. Zack Ryder 17.6K posts
- 18. Aaron Fox 2,764 posts
- 19. Harden 16.4K posts
- 20. Jaden Bradley N/A