CSS小技✨ CSS Anchor Positioning API Chrome125🎶 ２つのanchor要素に相対的に配置する👍 .box { position: absolute; top: anchor(--one bottom); left: anchor(--one right); right: anchor(--two left); bottom: anchor(--two top);... #Codejump #Web制作 #デイトラ pic.twitter.com/wA623PUEgr

初級編のラスト。縦書きの店舗サイトです。 「News」の文字が重なっています。 line-height:1;の書き方が正解。高さがないと重なって表示されるわけですね。 line-height:1px;は、サイトタイトルのロゴを入れる箇所で使っているので、やってしまいました。😅 #今日の積み上げ #Codejump #web制作 pic.twitter.com/GXOICFDEvJ

今日は9連勤の6日目。幸い仕事は午後からだったので午前中は勉強。いま取り組んでいる中級編の課題が終わったら #codejump のcodejump proを再開したいと思います。codejumpさま、近日中に再度申し込みをします。時間がかかりましたが、またよろしくお願いします🙂 #webデザイン初心者

昨日の疑問がようやく解決。 疑似要素が表示されず、模範解答との差分をとってスタイルシートを確認するも、なかなか気付かず。😣 原因は、疑似要素の手前に *コメント*/ /*コメント*/ という書き方をしたことが原因でした。 「/」の付け忘れですね。😅 #今日の積み上げ #Codejump #web制作 #Figma

😳「セクションタイトル付近って、共通パーツにできるんとちゃう？」 🙂「margin-bottomまで含めると、間隔が同じでないのが出てくるから、個別にmargin-topで対応するか」 なんてやってます。共通パーツが決まると、レイアウトが一気に整いますね。😆 #今日の積み上げ #Codejump #web制作 #Figma

CSS小技✨ flex: 1でアコーディオン🎶 .parent { display: flex; align-items: center; flex-direction: column; .child { transition: 0.5s ease-out; .child:hover { flex: 1; #Codejump #Web制作 #デイトラ pic.twitter.com/obHzTQDg0q

初級編を続けています。コーポレートサイトに取り掛かっていますが、スマホで見た場合、かなり縦長になってきました。やりごたえありますね。😳 モニタ２画面でも狭く感じるこの頃です。😇 ３画面でコード書いている方、いらっしゃるのかな～？ #今日の積み上げ #Codejump #web制作 #Figma

CSS小技✨ 小さいSizeのFontを使用したい場合は、 太いWeightを使用する🎶 1️⃣左：大きい文字のfont-weight: 300; 小さい文字のfont-weight: 600; 2️⃣右：どちらの文字もfont-weight: 300; 小さいSizeのFontは細く、薄く見える🤔 #Codejump #Web制作 #デイトラ pic.twitter.com/Jx1sW01Mya

☑リスト系営業メール３件 ☑#Codejump LP 7h ホバーするとカーテンぽくみえる所が良き👍 pic.twitter.com/nrlVGiY6D3

初級編を継続中。 text-align:center; align-items:center; justify-content:center; vertical-align:middle; 他に似通ったのあったっけ？😵‍💫 まとめて壁にでも貼っておきます。😆 #今日の積み上げ #Codejump #web制作 #Figma

Webページを作成する際に、頻出する組み方が分からないと遅々として進まなくなります。そこで立ち止まって深掘り中。😇 レイアウト構成を学ぶため、モノクロコピーをとってカラーペンを使ってます。 この後は、クラス名を収集して、名付け方のヒントを掴む予定です。 #今日の積み上げ #Codejump pic.twitter.com/fpxWgvd7IC

CSS小技✨ 車の背景をモノクロ→カラー🎶 div { background: url(元画像)#000; background-blend-mode: luminosity; position:rekative; div::before { background: url(車のみ)...; position: absolute; z-index: 2; div::after { background: url(元画像); z-index: 2; #Codejump #デイトラ pic.twitter.com/W7PVW0ep9D

CSS小技✨ widthを理解する🎶 max-width: 800px; width: 100%; →親要素幅の100%で最大幅800px max-width: 1000px; width: 80%; →親要素幅の80%で最大幅1000px width: 80%;→親要素幅の80% width: 800px;→幅800px固定 max-width: 800px; min-width: 600px;→幅800px～600px #Codejump #デイトラ pic.twitter.com/TFMaW11XLk

CSS小技✨ transitionは、Defaultで全てのanimation可能propertyに適用するため、allは書く必要はない💻 なぜ書くか🤔 1. 明示性 　全てのpropertyに適用している事が一目で分かる 2. 一貫性 意図的にallを書くことで、一貫性を保つことを好む 3. 知らないだけ #Codejump #Web制作 #デイトラ pic.twitter.com/9sa3zfsv0i

初級編をいったん中止。😳 imgタグのプロパティで、 width、max-width、height、object-fitがある場合、それぞれがどう関係しているか？　画像ファイルの幅、要素の幅、親要素の幅、ブラウザの幅、単位がvwの際の対応は？　疑問点を解決中です。😆 #今日の積み上げ #Codejump #web制作 #Figma

CSS小技✨ color-mix🎶 color-mixはbackgroundのみ可能💻 background-clipでtext-colorに反映👍 :root { --color-90: color-mix(in srgb,#6ac187 90%, #fff);... span:nth-child(n) { background-color: var(--color-green-90); background-clip: text; color: transparent; #Codejump #デイトラ pic.twitter.com/Xg13by9QMB

CSS小技✨ positionの相対値と絶対値🎶 一番オーソドックスなrelativeとabsolute relativeを指定して基準点を作り、absoluteで基準点からの値を指定💻 font-sizeやwidthなどを可変設定した場合 absoluteの値は%などの相対値を指定しないと 位置がずれるpxはNG🤔 #Codejump #Web制作 #デイトラ pic.twitter.com/cmu1iZkYtt

CSS小技✨ align-itemsとalign-content🎶 1️⃣align-items：flex-itemが折り返されていると 列ごとに配置が決まる 2️⃣align-content：flex-itemを折り返していると flex-item全体としてのまとまりで配置が決まる 双方１行の時は同じ #Codejump #Web制作 #デイトラ pic.twitter.com/GRCa65g9IK

昨日どなたかの投稿でこの #Codejump (旧Codestep)のサイトを見て思い出した過去の投稿。 そう言えばどっか行ったなって笑

入門編→初級編へ。 スタイルの値を変えたり、削除したりして表示を確認しつつ学習中。 手が止まった原因や理解が曖昧なところを言語化してメモ。text-alignって、奥が深いですね。深堀りする必要がありそうです。😆 #今日の積み上げ #Codejump #web制作 #Figma

CSS小技✨ 背景透過した画像のbackground anime🎶 base画像の背景をtransparent z-index: -1;で順番に背景画像を潜らせる💻 後からコーディングした画像が上に来るので 全てz-index: -1; これにもう一つだけanime追加👍 #Codejump #Web制作 #デイトラ pic.twitter.com/ZlvPlI8mN4

CSS小技✨ 背景透過した画像のbackground anime🎶 base画像の背景をtransparent z-index: -1;で順番に背景画像を潜らせる💻 後からコーディングした画像が上に来るので 全てz-index: -1; #Codejump #Web制作 #デイトラ pic.twitter.com/O9nu5DxBu8

#Codejump これで約4日間ってまだ遅いよな〜。 cssアニメーションに触れられて良かったけども。 pic.twitter.com/dfKdqoYyEN

#今日の積み上げ #CodeLesson #codejump 【学習予定】 コーポレートサイトを実装しよう 【HTML/CSS コーディング練習】初級編：ポートフォリオサイト／LP　進捗率40％〜 おはようございます！3時起き達成です👍 早起きが楽しみ過ぎて2時に一回起きてしまいましたが😅 今日も学習開始です！

入門編の続き。 使用しているリセットCSSの違いで、書くべきコードが変わってくることに気付きました。😳 このmargin-left:20px;って、何で入っているんだろう？　という疑問が氷解！（リストナンバーの入る余白のあるなしでした）😆 #今日の積み上げ #Codejump #web制作 #Figma

🖥学習記録 【内容】 　#codejump 　初級編 ストアサイト縦書きCSS 　#デイトラ 　上級編 DAY5 PHP 　#studio 　デモサイト作り 【つまずき】 　方向性 【対処】 　この1ヶ月仕事を調整して 　自分時間が延ばせた。 　恩恵は学びの広がり、 　弊害は混乱。 　シンプルにする。 　足元をみる。

CSS小技✨ 背景を透過した画像を重ねる🎶 <div class="wall"><p>Now let's paint!</p></div> .wall { background: url(画像1)...; .wall::before { position: absolute; background: url(画像2)...; p { position: absolute; top&left: 50%; translate: -50% -50%;... #Codejump #デイトラ pic.twitter.com/VMbHfS2vLX

CSS小技✨ いいねボタン🎶 <button class="button" onclick="like()">いいね！</button> <span class="count" id="like">0</span> <script> let count = 0; function like() { count++; document.getElementById('like').textContent = count; } </script> #Codejump #Web制作 #デイトラ pic.twitter.com/2HBTQHgB8e

🖥学習記録 【内容】 　#codejump 　初級編 ストアサイト縦書き 　#デイトラ 　上級編 DAY5 PHP 　自分の価値の言語化 　#studio 　デモサイト作り 【つまずき】 　価値探し 【対処】 　ワーク実施 　自分史を振り返る #せか才 amzn.asia/d/g3fJCNQ

Codejump（旧Codestep）開始。入門編から。 デイトラとは異なり、PC版を記述した後で、スマホ版を書いていく構造。こういうのにも対応せねばっ！🤔 デザインカンプで余白を計測する前に、レイアウト構成を正確に組めるようになりたいですね。😆 #Codejump #今日の積み上げ #web制作 #Figma

CSS小技✨ 哀愁を感じる画像🎶 ...ダメだ...🤔 つくづく感じるセンスのなさ💻 もう少しいじってみるか‼ #Codejump #Web制作 #デイトラ pic.twitter.com/nwIKtLFMjU

#codejump 良いと感じる点 ・1つ完成にさほど時間を要さない ・達成感をいくつも味わえる ・様々な種類のサイトが作れる ・緩やかに難易度が上がる ・デモサイトがある 大変お世話になっています。

🖥学習記録 【内容】 　#codejump 　初級編 EC site 　#デイトラ 　上級編 DAY4 PHP 　自分の価値の言語化 【つまずき】 　税込価格の決済表示 【対処】 　ChatGPTに丸投げしてみた 　提案コードを参考に作成 　うまく行く。 　最近自分と向き合う時間が多い 　案外よくわかっていないと知る。

CSS小技✨ ３枚の同画像を重ねる🎶 div { background: url() #000; background-blend-mode: luminosity; position: relative; p { backdrop-filter: blur(3px); div::before { background: url() rgba(); position: absolute; clip-path... div::after {... #Codejump #Web制作 #デイトラ pic.twitter.com/wrLci3cpFs

ここ数日PCに触れていないから、ぶっちゃけカンニングしながらの勉強です😝 とはいえイメージトレーニングしながらなので頭は働きます。気持ちがダレないように心がけます。 #webデザイン初心者 #codejump

スキマ時間にコード見ながら勉強します。 #webデザイン初心者 #codejump pic.twitter.com/HHB1ZtWFNj

#今日の積み上げ #Web制作 209日目 #codejump 上級FA EXHIBITION GW急遽実家に帰ることになり、🖥️に向かえなかったけどお手本コードとの答え合わせは戻ってすぐやれた！ 背景が出てくるアニメーションは「タイトルが見えた時」じゃなくて「スクロール量」をトリガーにしてるのが勉強になった😁 pic.twitter.com/0UeNhTYWqA

CSS小技✨ 同じ画像を重ねて、clip-pathで部分的にずらし Out of focus表現🎶 div { background: url()...; position: relative; div::before { position: absolute; background: url()...; clip-path: circle(); top: 10px; left: 10px; opacity: .5; #Codejump #Web制作 #デイトラ pic.twitter.com/rVkE4OkW7Z

CSS小技✨ grid layoutでrandom指定🎶 @function random-color() { @return rgb(random(255), random(255), random(255)); } @for $i from 1 through 20 { $color: random-color(); .box#{$i} { background-color: $color; width: random(200) + px;... #Codejump #デイトラ pic.twitter.com/WjbYeJGxQa