DAY129：hoverアニメーションが早すぎる？ 📌 マウスを乗せた瞬間ピカッと… 🔹 transition: all 0.2s ease; から始めてみる 🔹 状況によって ease-in-out も使える ✅ 変化の速度は“印象”を変える #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

書籍の入門編を始めてみます。。 #codejump

💡CSS小技✨ 固定ヘッダー + スムーススクロールの時は scroll-padding-top が超重要！ html { scroll-behavior: smooth; scroll-padding-top: 64px; } Link先がHederの下に隠れない！ position: fixed なナビ付きのLPなどで必須💪 見出しは padding-top で空間調整も忘れず！ #Codejump #CSS pic.x.com/tkNRoCEXbs

DAY128：クラス名が「a」「b」「box2」になってる？ 📌 増えると管理できない… 🔹 構造・意味・役割を意識した命名を 🔹 section__title のような名前が◎ ✅ クラス名は「未来の自分への手紙」 #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

Code jump コーディング練習 『LP(英会話)』 制作時間：4時間30分 #coding #html #css #codejump #JavaScript pic.x.com/oxNQIkHH9c

7/14 学習内容(3h30m) 『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』 実践編contact,入門編 学んだこと ・labelとinputは初期状態でインライン要素。 親にtext-align: center;をつけると、2つまとめて中央に配置される #codejump #web制作勉強中

DAY127：hoverアニメーションが重たい？ 📌 動きがガクガクする… 🔹 transform と opacity はGPUで処理されるのでスムーズ 🔹 width や height には注意！ ✅ 軽やかな動きはプロっぽさ #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

DAY126：hoverで急に色が変わりすぎ？ 📌 パキッと切り替わるのが気になる… 🔹 transition を使ってなめらかに 🔹 background-colorだけでなくcolorやborderも対象に ✅ “ふわっ”と変わると印象がやさしい #cssコードは静かに咲く #Web制作 #codejump #フロントエンド #css

7/11(金) ■学習内容 【HTML/CSS コーディング練習】応用編：ギャラリーサイト／スクロールイベント デザインカンプからコーディング code-jump.com/gallery-menu/ 学習合計：4.5ｈ #Web制作 #独学 #codejump pic.x.com/oONpXpVitR

DAY125：PCだけ整ってスマホが崩壊？ 📌 スマホ用CSS、最後に慌ててない？ 🔹 モバイルファーストで考えてみよう 🔹 min-width の設計も選択肢のひとつ ✅ 設計の順番で仕上がりが変わる #cssコードは静かに咲く #Web制作 #codejump #フロントエンド #css

Code jump コーディング練習 『コーポレートサイト(ハウスメーカー)』 制作時間：3時間10分 #coding #html #css #codejump #JavaScript pic.x.com/ERAm7rp3LZ

上級編1番目。答え合わせ中。。 以前取り組んだ際、分からないまま写していたのだなと思えたので、ちょっとだけ進歩できている気がした。。 #codejump

CSS小技✨ width: stretch ついに使える！ Chrome138で追加された新値は、flex内で「残り全部使って広がれ！」の意味💡 autoや100%とは挙動が違う。 対応ブラウザ限定だけど、今後の主役になるかも…？ #CSS #新機能 #Chrome138 #Codejump pic.x.com/fJD7HlZDnt

💡CSS blendの罠⚠️ mix-blend-mode を使うと、hoverで別の要素を 表示しても後ろがうっすら透けることがある🤔 mix-blend-mode: normal; + color: transparent; に することで完全に打ち消せる🧼 isolation: isolate; より効果的な場面も！ #CSS #web制作 #Codejump pic.x.com/c4Y0hGqKhf

7/11 学習内容(4h30m) 『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』 実践編company ~ footer 学んだこと ・擬似要素で画像にフィルターをかけたら、上のテキストが後ろになったけど、 ::afterを::beforeに変えたらテキストが前に出てきてた。 #codejump

7/10(木) ■学習内容 【HTML/CSS コーディング練習】応用編：ギャラリーサイト／スクロールイベント デザインカンプからコーディング code-jump.com/gallery-menu/ 学習合計：3.5ｈ #Web制作 #独学 #codejump

DAY124：ブレークポイント、どこで切り替える？ 📌 とりあえず768px？ 🔹 デザインの「詰まり始め」に注目 🔹 デバイスではなくコンテンツ基準で考えよう ✅ 画面じゃなく“中身”に合わせる #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

上級編1番目。 できるところまで。続きは明日。。 #codejump

📘CSS小技✨ リストの::beforeと::afterを使って シンプルだけど映えるhover演出💡 🧡💛💚💙 → 🎉 に変身して消える 同時にカラフルなラインがスーッと出現 CSSだけでここまでできる！ list-styleいらずのリストアニメーション🎨 #CSS #Web制作 #Codejump #アニメーション好きと繋がりたい pic.x.com/pmoSDxSjO6

7/9(水) ■学習内容 【HTML/CSS コーディング練習】応用編：ギャラリーサイト／スクロールイベント デザインカンプからコーディング code-jump.com/gallery-menu/ 学習合計：2.5ｈ #Web制作 #独学 #codejump

DAY123：form要素の余白がバラバラ？ 📌 テキストとの間隔に違和感… 🔹 ラベルと入力欄に上下の揃えを意識 🔹 margin-bottom やgapで整理 ✅ 入力フォームも整っていると安心する #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

CSS小技✨ GSAP × split-text風演出！ 文字を1文字ずつ<span>で分解し ランダムに散らしてから… ふわっと集合 → ズームアウト！ 🎨 偶数/奇数/3n番目で色変えもOK！ #Codejump #GSAP #CSSアニメーション #JavaScript pic.x.com/BWxGFcdYjf

7/9 学習内容(3h50m) 『HTML&CSS Webデザイン』 応用編activity~fixed-btn 学んだこと ・scrollTopは、要素がどれだけスクロールされたかを取得するメソッド #Codejump #Web制作

DAY122：ボタンのタップ領域が小さい？ 📌 スマホで押しづらい… 🔹 padding は上下8〜12px以上が目安 🔹 min-height を使うのもアリ ✅ 小さいボタンはやさしさを失う #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

ちょっとプライベートがバタついていたので、また今日から頑張ります！ スクリプト沼にハマっていると効率悪いことに気付いた（遅😓）ので、またサイト模写していこうと思ってます🐾 本がめちゃくちゃ気に入ってたので、Codejumpさんのサイトからやってみる🌟 #Codejump

7/8 学習内容(4h) 『HTML&CSS Webデザイン』 応用編header~introduction レイアウトを考えながらコーディング。 ちょっとずつ、手が動くようになってきた気がする #Codejump #Web制作勉強中

7月8日（火） ✅Codejump 入門編：フォトサイト ⏰所要時間：1時間32分 ✅Codejump 入門編： フォトサイト２ ⏰所要時間：1時間07分 ✍️コメント ・figure要素の正しい使い方を学んだ ・主な要素はidで、その他共通スタイルはwrapper,inner,contentなどでまとめクラス名を最小限に #codejump

DAY121：inputがちょっと浮いて見える？ 📌 他の要素と馴染まない… 🔹 border-radius や box-shadow を調整 🔹 line-height も揃えると整う ✅ フォームもUIの一部としてデザイン #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

初級編〜4番目。 PC版できるところまで。 #codejump

7/7 学習内容(3h30m) 『HTML&CSS Webデザイン』 上級編blog,blog1ページ YouTubeのiframeにaspect-ratioを指定すると、画面幅が変わってもサムネイルが潰れずキレイに表示される #codejump #web制作学習

🌌CSS小技✨七夕ver 背景のぼかしと文字出現をずらして、 幻想的な雰囲気に。 clip-path×背景画像×text-clip✍ #CSS #七夕 #Codejump pic.x.com/Uh64lIbCg6

7月7日（月） ✅Codejump 入門編：プロフィールサイト ⏰所要時間：1時間34分 ✍️コメント ・後々要素を追加したり編集しやすいようなコードを意識して記述した ・クラス名の命名規則を明日以降から明確にする #codejump

DAY120：テキストが左右に寄って見える？ 📌 見た目の中心がズレてるような… 🔹 text-align だけでなく、文字量・行数も確認 🔹 英数字のときはフォントにも注目 ✅ 見た目のバランスは感覚＋検証 #cssやさしく整える日々 #web制作 #codejump #フロントエンド #css

7/6 学習内容(4h30m) 『HTML&CSS Webデザイン』 上級編top,conceptページ iframeにwidth:100%をつけても、親がflexコンテナでwidthの指定がなかったら広がらないことがある。 flexは中身に合わせて縮むから、iframeを広げたいなら親にもwidth:100%をつける! #Codejump #Web制作

DAY119：レスポンシブで画像が飛び出す？ 📌 スマホだけ画像が画面外に… 🔹 img { max-width: 100%; height: auto; } 🔹 要素に overflow 設定もチェック ✅ 画像も器の中で気持ちよく #cssコードは静かに咲く #Web制作 #codejump #フロントエンド #css

初級編〜3番目。 tableの装飾が出来ていない。。 #codejump

7/5 学習内容(3h50m) 『HTML&CSS Webデザイン』 上級編topページ <iframe>をレスポンシブ対応するには、親に .map { max-width: 580px; width: 100%; height: 360px; } 子のiframeに width: 100%; height: 100%; を指定する。 #codejump #Web制作勉強中

7/4(金) ■学習内容 【HTML/CSS コーディング練習】応用編：ランディングページ／CSSアニメーション デザインカンプからコーディング code-jump.com/lp-menu/ 学習合計：8ｈ #Web制作 #独学 #codejump pic.x.com/bUSXOWhViX

DAY118：本文が読みづらい？ 📌 一文が長くてダラける… 🔹 max-width をつけよう（例：65ch） 🔹 幅を狭めると、集中して読める ✅ 読者ファーストの幅感覚を #cssコードは静かに咲く #Web制作 #codejump #フロントエンド #css