#codejump 6/16 初級編のcorporate-2 HTMLと CSSの細部を実装中。 結局ここに一番時間かかりそう..明日には8割終わらせる所存 時間1.5h

今日はコーディングを少し✍️　明日は子供連れての引っ越しだから、気合をいれなければー！ #fammスクール #famm卒業生 #webdesigner #ウェブデザイナー #codejump

#今日の積み上げ ・adobe学ぶaftereffects ・codejumpさん初級 #adobe #aftereffects #codejump #webデザイン #コーディング

おはようございます🌤 ここ数日、4時スタートできてません💧 終了時間決まっとるけ、時間大切にせんと🥲 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編 　・JavaScript学習 　・jQuery学習 #Codejump 　HTML&CSS入門編：プロフィールサイト模写 今日はこれで頑張ります🔥

#codejump 6/16 初級編のcorporate-2 HTMLと CSSの全体的な実装。残りは細部をつめる 時間4.5h

おはようございます☀ 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編 　・JavaScript学習 　・jQuery学習 　・Sass学習 #Codejump 　HTML&CSS入門編：プロフィールサイト模写 今日はこれで頑張ります🔥

#codejump 6/15 初級編のcorporate-2 ノートにレイアウト作成 大枠のHTMLとCSS実装 1.5h

CSS小技✨ 背景とtext-clipの位置を合わせanimation🎶 div { url(画像) p { url(画像) background-clip: text; color: transparent; -webkit-text-stroke: 4px #fff; clip-path: inset(100%); backdrop-filter: blur(10px); keyframes { clip-path: inset(0); #Codejump #デイトラ pic.twitter.com/SmXHznMGWw

CSS小技✨ ２枚の画像で朝焼けをimage🎶 .parent { url(画像1) .parent::after { url(画像2) opacity: 0; anime opacity: 0.4; .child { backdrop-filter: brightness(50%); anime backdrop-filter: brightness(200%); p { clip-path: inset(0 100% 0 0); #Codejump #デイトラ pic.twitter.com/vxNmfqrvPo

おはようございます🌤 今日は起きんかった😱 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編：jQuery学習・実践編 #Codejump 　HTML&CSS入門編：プロフィールサイト模写 カンプ模写はデイトラ中級編にあったので、一旦寝かしときます😴 今日は子供の運動会👟と通院🏥 それまで頑張ります🔥

本日はWebでの勉強会2本！いろいろと勉強になりました！ #fammスクール #famm卒業生 #webdesigner #ウェブデザイナー #codejump

CSS小技✨ 要素にfilterを適用すると、全ての子要素（疑似要素を含む）に適用される。 ::beforeの疑似要素も要素の一部と見なされるため、 filterの影響を受ける💻 対策(右が対策済) 1️⃣疑似要素を親要素の外に出す 2️⃣backdrop-filterに変更する #Codejump #デイトラ pic.twitter.com/e9rbM9PV5N

おはようございます☀ 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編：jQuery学習・実践編 #Codejump 　HTML&CSS初級編：コーポレートサイト カンプ模写 今日はこれで6時まで頑張ります🔥 悩みが減るのも増えるのも成長の証ですよね😌 前進あるのみ！

目標見直し！デザインのインプットアウプットは1デザイン／weekにして、コーディングを1点／weekにします🫡　コーディングをしっかりできるようになることを目指して、、、！ #fammスクール #famm卒業生 #webdesigner #ウェブデザイナー #codejump

おはようございます🌤 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編：jQuery学習 #Codejump 　HTML&CSS初級編：コーポレートサイト模写 今日もこれで6時まで頑張ります🔥 昨日は模写できんかったけど、とにかく毎日継続して、少しでも考えたりコード書いたりする時間を作っていきたい！

今日はコーディングの練習！コーディングは忘れがちだからコンペの合間に練習を続けよう！ #fammスクール #famm卒業生 #webdesigner #ウェブデザイナー #codejump

CSS小技✨ maskがとれていく🎶 div { background: #000; animation: bgAnime 1s linear 3.8s forwards; p { color: #fff; height: 1em; animation: p1... p::after { height: 1.2em; background: #000; animation: p2...; #Codejump #Web制作 #デイトラ pic.twitter.com/yyzbO1KlSr

残念ですが脱落です。稼ぐまでの距離と取り組むペースがかけ離れていると判断しました。#codejump 様にはお世話になりました。現実を見せていただいたことに感謝します。ありがとうございました☺️

おはようございます🌤 昨日は終電でしたー☠️ 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編：jQuery学習 #Codejump 　HTML&CSS初級編：コーポレートサイト模写 時間短いけど朝活頑張ります😪

CSS小技✨ 狐の嫁入り🎶 div { background: url(画像1) center/cover; div::before { position: absolute; background: url(画像2) center/cover; inset: 0; opacity: 0.2; animation:  opacity 4s 2s ease-out forwards; keyframes { 100% { opacity: 0.7; #Codejump #デイトラ pic.twitter.com/7jrfoByCpg

おはようございます🌤 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編：jQuery学習 #Codejump 　HTML&CSS初級編：コーポレートサイト模写 今日は目覚ましより先に起床！ でも眠気出てきたー😪 もう一度顔洗って、今日も朝活頑張ります🔥

CSS小技✨ clip-pathとbackdrop-filter🎶 div { background: url(画像) center/cover; .p-1 { backdrop-filter: blur(3px); div::before { background: url(画像) center/cover; clip-path: ellipse(37% 30% at 50% 55%); .p-2 { color: #fff; background: rgba( );... #Codejump #デイトラ pic.twitter.com/IUdiKgsI0E

おはようございます🌤 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編：jQuery学習 #Codejump 　HTML&CSS初級編：コーポレートサイト模写 昨日からjQ入ったけど、JSと同じく暗号状態😇 とりあえず前進しつつ、繰り返し頑張ります！

CSS小技✨ 縦書き＆ふりがな🎶 body { writing-mode: vertical-rl; <p><ruby>地名<rt>ふりがな</rt></ruby></p> #Codejump #Web制作 #デイトラ pic.twitter.com/cCndgSkTmL

CSS小技✨ 切り取り🎶 div { background: url() no-repeat center/contain #000; background-blend-mode: luminosity; div::before { background: inherit; clip-path: circle(0% at 50% 30%); keyframes... clip-path: circle(16% at 50% 30%); scale: 3 1; #Codejump #デイトラ pic.twitter.com/4ttxLCElDT

おはようございます🌧 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編：JavaScript学習 #Codejump 　HTML&CSS初級編：コーポレートサイト模写 getElementById、3回ぐらい動画見てやっと意味分かった💦 でも最近はquerySelectorがオススメみたい！ JSなかなか頭に入らんけど今日も頑張ろう🔥

CSS小技✨ Solid ColorとGradientの融合🎶 div { background: url() no-repeat center/cover; div::before { background-color: rgba(255,0,0,0.5); background-image: linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0), rgba(255,255,255,0.8)); #Codejump #デイトラ pic.twitter.com/vSqnI0vEaS

CSS小技✨ min-height: 100svh🎶 min-height: 100vh; を使用すると、 フッターがコンテンツの下に表示されなくなる 可能性あり💻 browser window全体：min-height: 100vh; contents領域のみ：min-height: 100svh; #Codejump #Web制作 #デイトラ pic.twitter.com/mlTByjlQG0

おはようございます⛅ 体調だいぶ良くなりました！ 🔽今日の朝活メニュー #デイトラ 　Web制作コース初級編：JavaScript学習 #Codejump 　HTML&CSS初級編：ECサイト模写 JSは基礎学習ループしてやっとるけど、途中で眠気が･･･😅 模写は<table>でつまづきまくり💦 今日は目標4時間、頑張ります😄

CSS小技✨ 文字にぼかしを入れる🎶 左 p { filter: blur(3px); 右 p { position: relative; p::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(3px); 左がメジャー、右は悪趣味💻 #Codejump #Web制作 #デイトラ pic.twitter.com/CeoRSmYPLq

CSS小技✨ 詳細度最強は？🎶 セレクタ　　　　 詳細度 :root .class#id　 2 :root [attr]#id 2.1 :root #id:hover 2.1 .class#id 1.1 [attr]#id 1.1 #id:hover 1.1 .class.class 0.2 #Codejump #Web制作 #デイトラ

inner、wrapper、content、container等は、どういった使い分けをするのか検証しているのですが、どうも決め手に欠けます。😵‍💫 innerクラス単体では、display:flex;は使っていないようですが、まあこれは当然か。 うーん、規則性ってないのかな？🤔 #今日の積み上げ #デイトラ #web制作 #Codejump pic.twitter.com/ubZyHVYZ3v

おはようございます☀ 昨日から体調不良で今朝は朝活休みました💦 健康診断は毎年ほぼAなんだけど、月1で体調崩すわし😇 今日は午後出社なので、洗濯👕してから積み上げます！ #デイトラ 　Web制作コース初級編：JavaScript学習 #Codejump 　HTML&CSS初級編：ECサイト模写

CSS小技✨ 背景をぼかす２つの方法🎶 1️⃣div { background: url()...; div::before { background: url()...; filter: blur(3px); 2️⃣div { background: url()...; p { height: 100%; backdrop-filter: blur(3px); 2️⃣が省力化 #Codejump %Web制作 #デイトラ pic.twitter.com/Agr6uP0ZMH

やべぇ...気持ちが折れそう。#codejump の仮想案件が来てから20日が経過したけどpcの形がまだ不完全。足りないのは作業量と自分の取り組み方。ブログで挫折した時と同じだな。何か...何かを切り替えないと...。その何かが分かるような分からないような。このままでは二の舞だな。

CSS小技✨ ２つの画像でanime🎶 .box { background: url(画像1)...; .box::before { content: "bình Minh"; position: absolute; background: url(画像2)...; mix-blend-mode: color-dodge; opacity: 0; transition: 0.5s;... #Codejump #Web制作 #デイトラ pic.twitter.com/YfWj1qL3jd

CSS小技✨ css変数をtransition🎶 1️⃣--color: #c00; background: var(--color); transition: --color 1s; &:hover { --color: #00f; } 2️⃣1️⃣に加えて 　@property --color { syntax: "<color>"; inherits: true; initial-value: transparent; } #Codejump #デイトラ pic.twitter.com/Ws536mv1XA

テキストの頭だけ出して折り返し方法をまなびました😁 #webデザイン初心者 #codejump pic.twitter.com/1TRBuWtO4M

CSS小技✨ グラデーションボーダー🎶 border-imageは疑似要素要らず 簡単に完成👍 border-image: linear-gradient border-style: solid でも角丸は出来ない🤔 ::after { background-image: linear-gradient height: border-radius: 高さの1/2以上 content: ""; display: block; #Codejump #デイトラ pic.twitter.com/9V5Tiw0Bnd