CSS小技✨ 文字が1文字ずつ浮かび上がるアニメ🎶 JSで文字を <span> に分割して translateY＋rotate() で登場アニメ🎨 背景は linear-gradient()＋background-clip: text 文字ごとに色と方向を変えてカラフルに✨ 最後は letter-spacing を広げて 余韻を残すフィニッシュ😌 #CSS #Codejump pic.x.com/UA3ayh5xCM

223DAY216：ボタンがダサい→一気に垢抜け 👉 色＋文字色＋影で一気にプロ感 たった3行で印象が変わる #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css #cssコードは静かに咲く pic.x.com/izdsPvSW9J

CSS小技✨ subgrid未対応でも、.card の中で justify-content: space-between; を使うと 高さが違っても子要素が上下そろって見える！ Grid内でも自然に整列してくれる✨ Grid × Flexの組み合わせが地味に最強💪 #CSS #Codejump pic.x.com/2WK0ZAFDBp

10 / 9 (THU) ✅codejump１～８のレスポンシブ対応完了！ PCとレスポンシブは一緒にやるべきだった… でも勉強になったから良し！ #シーライクス #SHElikes #SHE捗 #codejump

DAY215：hoverで魅せる！差がつく小技集 👉 色変化・浮き上がり・下線アニメ 👉 たった一行で印象爆上げ #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css #css hover #cssコードは静かに咲く

Codejump 入門編 Profile ⏰所要時間120分 #codejump

CSS小技✨ hoverで文字が複雑に変形＋Gradient Animation🌀 - background-clip:textでグラデーション文字 - conic-gradientで色の切り替え - border-radiusアニメーションで形が変化 Chrome experimental feature corner-shape使用💡 #CSS #Codejump pic.x.com/lMn261y49p

本日の朝コーディング☀️ ☑︎Codejump入門編『PHOTOBOOK』 ⌛️所用時間：1時間40分 #codejump

DAY214：z-indexバグらせない3つの鉄則 👉 positionとセットで考える 👉 親要素の重なりに注意 👉 負の値は地雷 #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css #cssコードは静かに咲く

DAY213：nth-of-typeを制す者がCSSを制す 👉 nth-childとの違いを理解する 👉 要素の種類で選べるのが強み #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css #cssコードは静かに咲く

CSS小技✨ hoverでカードと背景を連動アニメ🎴 💡ポイント ・container:hoverで複数要素を同時に動かせる ・cardを上に、box::beforeを明るく ・hover対象を親要素にまとめるのがコツ！ #CSS #Codejump #Webデザイン pic.x.com/MBuq1SmIYK

模写コーディングを始めてみました。 ☑︎Codejump入門編『Profile』 ⌛️所用時間：2時間半 #codejump

CSS小技✨ %指定のwidth は親依存。 min-width を組み合わせると 「最小サイズ保証」ができる💡 画面幅を縮めて比較してみよう👇 #Codejump #CSS pic.x.com/AXIoeuTFm4

10 / 6 (MON) ✅codejumpのサイト7つ目(My Work)ヘッダー・メインビジュアルまで ------------------------- ✅運動30分 #シーライクス #SHE捗 #SHElikes #codejump

DAY212：Flexで横並び最速レイアウト 👉 display: flex; で横並び完成 👉 gapで余白もラクに調整 #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css #cssコードは静かに咲く

CSS小技✨ paddingでズレる？ それ、box-sizing知らんだけ📦 content-boxだとwidth増える😱 border-boxなら幅そのまま🎯 WP行く前に、 まずCSSの“箱の仕組み”を理解しろ💥 hoverで違い👇 #Codejump #CSS pic.x.com/5arjk5zVFb

DAY211：絶対に覚えるべきpositionの違い 👉 static / relative / absolute / fixed / sticky 👉 使い分けでレイアウト崩れが消える！ #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css #cssコードは静かに咲く

休みがちながらやっている。中級編。。トップページのPC版はややできているかな状態になってきたが、SP版は写しがちな感じ。 #codejump

CSS小技✨ CSSだけで改行ごとに文字色チェンジ✨ 🟥 あいうえお かきくけこ 🟦 さしすせそ たちつてと 💖 なにぬねの はひふへほ 🟨 まみむめも やいゆえよ spanを階層的に使って、画面幅によって色が変わる デモです🎨 JS不要で軽量👍 #CSS #Codejump pic.x.com/AattcvqHV7

Progateの連続学習日数100Daysを達成できました。 前回の31Daysから長かった～。 1つ目標にしていたことが達成できて、少し満足。 さて、この後はどうしようかな。Progateは12ヶ月プランなので、まだまだ学ぶことはできる。。。 でも、Codejumpもやりたいなぁ。 #progate #codejump pic.x.com/pAddPXQnTU

DAY210：hoverでリンクに矢印を追加 👉 hoverすると矢印が出る！ 　小さな変化だけど「クリックできそう感」を強められる。 #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css 【Before / After】で違いをチェック👇 pic.x.com/Zhrl4ahfnO

CSS小技✨ hover時に“背景だけ”薄くしたい人向け！ 「opacityを使うと文字まで薄くなる😱」 そんなときは背景だけ透過✨ いろんなやり方があるけど、 それぞれの特徴をまとめてみた💡 #CSS #Codejump #Web制作 pic.x.com/2dQAmufkfe

💡CSS小技✨ JSなしで作る 🔹円が広がるフルスクリーンMENU🔹 checkbox＋transform: scale() ＋opacityで滑らかに展開✨ 複雑そうに見えて 実はCSSだけ！ #Codejump #CSS pic.x.com/UmtVDfRkEL

CSS小技✨ --theme-color: 255 255 255; と書いておけば rgb(var(--theme-color) / 0.5) や rgb(var(--theme-color) / 0.8)みたいに使える！ RGBを1つの変数でstyle管理できるの 意外と知られてない😎 透過だけ変えるアニメにも使えるよ💡 #Codejump #CSS pic.x.com/Ph4fTnFe54

10 / 4 (SAT) ✅codejumpの入門編サイト6つ目(Wooden Jewelry)模写！ #SHElikes #SHE捗 #シーライクス #codejump

今日の進捗💻 スニーカーサイト完成まであと少し👟✨ 残タスクは ✅ スクロール追従ヘッダー ✅ レスポンシブ対応 明日で完成させます🔥 #Web制作 #ポートフォリオ #駆け出しエンジニア #今日の進捗 #コーディング #HTML #CSS #JavaScript #codejump pic.x.com/pOv79ORSay

DAY209：ボタンをhoverで明るく ✨ Before → After で違いは一目瞭然！ 👉 ちょっと明るくするだけで「クリックできそう感」が出せる。 #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css #cssコードは静かに咲く pic.x.com/4AvrSeZhB5

CSS小技✨ JSを使わずにCSSだけで 画像をランダムに動かす🎶 ポイントはanimation-timing-functionに linear()を細かく設定して 独特のリズムを作ること！ #CSS #Codejump pic.x.com/aDTivJCK0O

10 / 3 (FRI) ✅codejumpの入門編サイト5つ目(Recipe Diary2)模写！ --------------- ✅運動30分👟 #SHElikes #SHE捗 #シーライクス #codejump

CSS小技✨ 文字を1文字ずつ「Big → Small」でアニメーション💡 ポイント👇 ・JSでテキストを1文字ずつ <span> に分割 ・CSS animationで scale & opacity を制御 ・animation-delay を0.15s刻みにして自然なリズムに 一気に動かすより、順番に動かすだけで映えます👍 #Codejump #CSS pic.x.com/gXJxnAV5tH

DAY208：hover × transition 👉 transition: 0.3s; を加えるだけで、hoverが自然に 👉 color, background, transform に使うと洗練度up #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css

🎬Web制作学習記録 今日は初めてjQuery + Slickを導入して、スライダーを実装しました！ 挙動がまだ掴めてない部分もあるけど、動くと嬉しい…！今は表示や自動再生の確認中。 画面録画を貼ってます👇 #Web制作 #jQuery #今日の積み上げ #codejump

DAY207：z-indexの基本 👉 数字が大きいほど上に表示 👉 positionがないと効かない場合あり 👉 stacking contextに注意⚠️ #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css

CSS小技✨ 上下の背景を使った Scale animation + Clip-text 1. 下の画像を scale:1 -1; で反転 2. 暗転で演出 3. clip-path で文字出現 映画のオープニング風に仕上がります🎬 #CSS #Codejump pic.x.com/7gK7gord5v

DAY206：nth-child() vs nth-of-type() 👉 nth-child(n)：親の順番ベース 👉 nth-of-type(n)：タグごとの順番ベース 👉 同じ「2」でも結果が変わる！ #Web制作 #フロントエンド #コーディング #駆け出しエンジニアと繋がりたい #codejump #css

10/1(4h30m) ☑︎イラレの5分ドリル #3 ☑︎10日でBlender #1 ☑︎codejump 上級編ストアサイト ☑︎ハンドメイドサイトのワイヤーフレーム作成 デザインからWordPress化まで、一通りの流れを覚えるのが目標！ #Codejump #Web制作 #Blender #Illustrator

CSS小技✨ 画像のclip-pathをanimationさせて 斜めカットが出現する演出📸 opacityと組み合わせるとふわっと浮かぶ感じに💡 スライダーやヒーローヘッダーのアクセントにも👍 #Codejump #CSS pic.x.com/ZmiojRYnyv

📘Web制作学習記録 今日の進捗👉 残りのページのコンテンツをひと通り配置完了！ ここからはCSSとJavaScriptを使って装飾していきます💻✨ いよいよサイト全体が形になってきたので、デザインを整えるのが楽しみ！ #Web制作 #模写コーディング #今日の積み上げ #codejump pic.x.com/EnstFEhWkX

:has() は「親に条件を課す」ことができる 便利なelector🎶 子要素の画像に応じて CARD全体の背景色 を 変えるDEMO👇 .card:has(.画像1) { background: lightgreen; } .card:has(.画像2) { background: #ff6af6; }... 親から子を見る逆発想！ レスポンシブgridと合わせると映える🎨 #Codejump #CSS pic.x.com/NDbuNRp7rB