Nobu_helloworld's profile picture. SNS離れしてます

のじさん

@Nobu_helloworld

SNS離れしてます

Pinned

📍7月ストック 【学習】 ・静的サイトのコーディング ・vite-static-templateの更新 ・JavaScriptアニメーション ・GSAP 【メモ】 ・WordPressのヘッドレス化 ・Astro ・Jamstack ・React ・Next


引き続きGSAPでローディング画面の実装中です🧑🏻‍💻 アニメーション自体はほぼ完成ですがbody要素のチラツキがあるので改善したい所 #Web制作 #デイトラ


久々にローディング画面の実装中🧑🏻‍💻 バーの進捗とテキストの切り替わりはGSAPで実装しました。 後日プログレスバーのスタイルや全体のアニメーションをGSAPで追加していきます!


JavaScriptでAPI叩くとこまでは復習出来た。 しばらくはGSAP触ってサイト作りながらGSAPアニメーション実装していく方向で進めよう。 TypeScriptも今度学習してTypeScriptでコードかけるようにしたい🧑🏻‍💻


のじさん reposted

一次元の横並びだからといって`display:flex`を使ったほうがいいかはよく考えたほうがいい🫵 #Web制作

tak_dcxi's tweet image. 一次元の横並びだからといって`display:flex`を使ったほうがいいかはよく考えたほうがいい🫵

#Web制作
tak_dcxi's tweet image. 一次元の横並びだからといって`display:flex`を使ったほうがいいかはよく考えたほうがいい🫵

#Web制作
tak_dcxi's tweet image. 一次元の横並びだからといって`display:flex`を使ったほうがいいかはよく考えたほうがいい🫵

#Web制作

しばらくはサイトのコーディングやりつつJavaScriptの学習に力をいれる💪 ・基本的な構文 ・非同期処理 ・型 ・連想配列 ・JSON ・アニメーション ・GSAP


実装出来たのでコードストックして寝ます!改良の余地はたくさんあると思うのですが一旦満足🙏


今までドロワーの背景固定bodyにoverflowで対応してたけどios16より前だと効かないって記事を見て対応してるけど結構苦戦中。まだまだシャア率高いから落とせない所。 スムーススクロールと競合しちゃってうまく動かないから格闘中 qbook.jp/column/1662.ht…


toggletrackで時間計測。 Googleカレンダーで記録用のカレンダーを作って記録する。Googleカレンダーで作業時間や自己投資した時間を振り返れるのでとても便利。 scriptを作ってくださっている方の記事を貼っておいたので気になる方は試してみてください! m-kawaguchi.hatenablog.jp/entry/2017/11/…


HTMX!?👀 全然知らなかった。少し調べてみよう


card型のデザインでtextにline-height1.7とかで指定して高さが0.2pxとかずれてるとピクパ調整の時に枚数多いと結構ずれるのなんとかなんないかな・・・ text関連にline-height当てるとほどんど端数のpxが出てしまう。


のじさん reposted

⛩YouTube⛩ “Nighty night!” from 2023.11.21 全国開闢禊 -最高- at 東京ガーデンシアター 公開💫 来週 6/2(日)ミリオンロック禊に向けて チェックしておくように🧑‍🏫📄 ▽FULL youtu.be/jWPObSBuUxE


HTML,CSSもよりよい記述たくさんでてるんだなぁ🤔 少し離れたら浦島太郎状態 モダンな知識をインプットしなければ


のじさん reposted

これでもうロゴのSVGを探さないで済む! SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svgl coliss.com/articles/build…

colisscom's tweet image. これでもうロゴのSVGを探さないで済む!
SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svgl

coliss.com/articles/build…

のじさん reposted

現代ではチェックボックスやラジオボタンに独自のデザインを適用する場合にinputを隠して空のspan要素等を用意する必要はなく、`appearance:none`しておけばinput要素にスタイル直書きで問題ないです🫵(疑似要素も使用できます)

tak_dcxi's tweet image. 現代ではチェックボックスやラジオボタンに独自のデザインを適用する場合にinputを隠して空のspan要素等を用意する必要はなく、`appearance:none`しておけばinput要素にスタイル直書きで問題ないです🫵(疑似要素も使用できます)
tak_dcxi's tweet image. 現代ではチェックボックスやラジオボタンに独自のデザインを適用する場合にinputを隠して空のspan要素等を用意する必要はなく、`appearance:none`しておけばinput要素にスタイル直書きで問題ないです🫵(疑似要素も使用できます)

あと少しで今作ってる静的サイト終わるから、Viteの静的サイト制作用のテンプレートをアップデートしよう🧑🏻‍💻 使ってみてこうしたいっていう所がたくさん。ブラッシュアップ🐾 github.com/bunobu/coding-… #web制作


のじさん reposted

従来のSassのmixinでline-heightの上下の余白(ハーフ・レディング)を打ち消す方法、現代ではユーティリティクラスのみで実現できます🫵 Tailwindとの相性もバツグン🫵 画像3枚目のように`lang="en"`の時は`calc((1cap - 1lh) / 2)`とすることで大文字の高さを基準とした値の算出も可能です #Web制作

tak_dcxi's tweet image. 従来のSassのmixinでline-heightの上下の余白(ハーフ・レディング)を打ち消す方法、現代ではユーティリティクラスのみで実現できます🫵
Tailwindとの相性もバツグン🫵
画像3枚目のように`lang="en"`の時は`calc((1cap - 1lh) / 2)`とすることで大文字の高さを基準とした値の算出も可能です

#Web制作
tak_dcxi's tweet image. 従来のSassのmixinでline-heightの上下の余白(ハーフ・レディング)を打ち消す方法、現代ではユーティリティクラスのみで実現できます🫵
Tailwindとの相性もバツグン🫵
画像3枚目のように`lang="en"`の時は`calc((1cap - 1lh) / 2)`とすることで大文字の高さを基準とした値の算出も可能です

#Web制作
tak_dcxi's tweet image. 従来のSassのmixinでline-heightの上下の余白(ハーフ・レディング)を打ち消す方法、現代ではユーティリティクラスのみで実現できます🫵
Tailwindとの相性もバツグン🫵
画像3枚目のように`lang="en"`の時は`calc((1cap - 1lh) / 2)`とすることで大文字の高さを基準とした値の算出も可能です

#Web制作

のじさん reposted

自分の使っているベースCSSをnpmにアップロードした。CDNも配信しているからCodePenで呼び出すときに便利。 #Web制作 npmjs.com/package/taks-c…


Loading...

Something went wrong.


Something went wrong.