Loading video...

Video Failed to Load

Go Home

CSSの新しいattr()が便利。 HTMLタグの属性値をCSSで扱えます。

clockmaker's profile picture

池田 泰延

31,409 subscribers

80,395 views • 4 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

HTMLの新しいpopover="hint"属性を使うと、ツールチップのフキダシ💭を簡単かつ丁寧に作れます。 HTML + CSS + JSのポップオーバーは便利なので、ぜひ覚えたい機能です。
0:11

HTMLの新しいpopover="hint"属性を使うと、ツールチップのフキダシ💭を簡単かつ丁寧に作れます。 HTML + CSS + JSのポップオーバーは便利なので、ぜひ覚えたい機能です。

池田 泰延

157,915 views • 1 year ago

<dialog>タグのモーダル実装、2025年最新版。 JavaScriptなしで、HTMLの属性値だけで開閉可能に。 command属性にid紐付け、commandfor属性で操作を記載。 最新のSafari・Firefox・Chromeなど全ブラウザ対応。 CSSを組み合われば、JSなしで開閉モーションも付けられます。 #Web制作
0:14

<dialog>タグのモーダル実装、2025年最新版。 JavaScriptなしで、HTMLの属性値だけで開閉可能に。 command属性にid紐付け、commandfor属性で操作を記載。 最新のSafari・Firefox・Chromeなど全ブラウザ対応。 CSSを組み合われば、JSなしで開閉モーションも付けられます。 #Web制作

池田 泰延

53,206 views • 7 months ago

モーダル開閉のUIアニメーション。 HTMLのdialogタグと、CSSの@​starting-style、allow-discreteを使うと、こんな簡単に実現できます。 全モダンブラウザ対応済みです。
0:15

モーダル開閉のUIアニメーション。 HTMLのdialogタグと、CSSの@​starting-style、allow-discreteを使うと、こんな簡単に実現できます。 全モダンブラウザ対応済みです。

池田 泰延

45,571 views • 11 months ago

CSSの新しいinterpolate-size と calc-size() が便利。 width: auto; や height: auto; に対してトランジション可能になります。固定サイズなら簡単ですが、autoなサイズが今まで難しかったので、楽になります。
0:13

CSSの新しいinterpolate-size と calc-size() が便利。 width: auto; や height: auto; に対してトランジション可能になります。固定サイズなら簡単ですが、autoなサイズが今まで難しかったので、楽になります。

池田 泰延

56,451 views • 1 year ago

ICS MEDIAで新しい記事が公開されました。 HTMLとCSSでつくる、1文字ずつ変化するテキストのアニメーションです。アイデアのストックにどうぞ！ （担当： naomi）
0:11

ICS MEDIAで新しい記事が公開されました。 HTMLとCSSでつくる、1文字ずつ変化するテキストのアニメーションです。アイデアのストックにどうぞ！ （担当： naomi）

池田 泰延

16,864 views • 1 year ago

CSSの新しいsibling-index()を使うと、順番に出現するモーションを簡単に実装できます。
0:19

CSSの新しいsibling-index()を使うと、順番に出現するモーションを簡単に実装できます。

池田 泰延

78,920 views • 6 months ago

【CSSデザイン本11/21発売📕】 ちょっと垢抜けたwebサイト制作を勉強したい方必見！ Webの基礎はもちろん、HTMLの構造図やCSSの細かい解説も充実、さらにCSSだけで実装できるアニメーションが満載！ 好きなパーツを組み合わせて1Pのサイトを作ったり、ボタンや見出しのデザインを変えたり、サンプルサイトからコピペができるので初心者でも自由自在です🌷 CSSで好きなものを作ってSNSにアップするのが大好きだった私。 出版のお声がけをいただいた頃は実務3年目でしたが、ベテランではないからこそ、初心者や駆け出しの方により近い目線で執筆することができました。 マネするだけでセンスいい！CSSデザイン 11/21発売です。ご予約受付中👉
0:14

【CSSデザイン本11/21発売📕】 ちょっと垢抜けたwebサイト制作を勉強したい方必見！ Webの基礎はもちろん、HTMLの構造図やCSSの細かい解説も充実、さらにCSSだけで実装できるアニメーションが満載！ 好きなパーツを組み合わせて1Pのサイトを作ったり、ボタンや見出しのデザインを変えたり、サンプルサイトからコピペができるので初心者でも自由自在です🌷 CSSで好きなものを作ってSNSにアップするのが大好きだった私。 出版のお声がけをいただいた頃は実務3年目でしたが、ベテランではないからこそ、初心者や駆け出しの方により近い目線で執筆することができました。 マネするだけでセンスいい！CSSデザイン 11/21発売です。ご予約受付中👉

ユイ🌷著書CSSデザイン本

125,214 views • 2 years ago

ﾈｺﾁｬﾝのCSSアニメーションのソースコードを公開しました
0:12

ﾈｺﾁｬﾝのCSSアニメーションのソースコードを公開しました

yui540

13,775 views • 2 months ago

ブックマークのCSSアニメーションのソースコードを公開しました
0:11

ブックマークのCSSアニメーションのソースコードを公開しました

yui540

49,317 views • 2 months ago

あ、これやばい..。 ChataGPTのImage2.0をCanvaの新機能「Magic Layer」で編集するのが便利すぎる。 まだ日本では対応していないんだけど、 無料で使える裏技があるので解説します↓
0:16

あ、これやばい..。 ChataGPTのImage2.0をCanvaの新機能「Magic Layer」で編集するのが便利すぎる。 まだ日本では対応していないんだけど、 無料で使える裏技があるので解説します↓

コンドウハルキ｜7/15初出版/ズルいほど稼げるデザイナーの仕事術

88,821 views • 3 months ago

CSSカスタムハイライトを使えば、<span>タグで区切らなくてもテキストを装飾できます。 次のデモは、文章を肯定的・否定的な表現を区別するためにAI分析で色塗りしたもの。驚くことに、spanタグで区切らずに着色されています。
0:16

CSSカスタムハイライトを使えば、<span>タグで区切らなくてもテキストを装飾できます。 次のデモは、文章を肯定的・否定的な表現を区別するためにAI分析で色塗りしたもの。驚くことに、spanタグで区切らずに着色されています。

池田 泰延

24,342 views • 3 months ago

CSSの Scroll-driven Animations、scroll() と view() の違いです。 scroll() はスクロールコンテナ全体の進捗。 view() は要素自身が表示領域を通過する進捗。 ページ全体に連動させたいなら scroll()、 要素が見えてくるタイミングで動かしたいなら view() と使い分けましょう。 #CSS
0:10

CSSの Scroll-driven Animations、scroll() と view() の違いです。 scroll() はスクロールコンテナ全体の進捗。 view() は要素自身が表示領域を通過する進捗。 ページ全体に連動させたいなら scroll()、 要素が見えてくるタイミングで動かしたいなら view() と使い分けましょう。 #CSS

長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro

21,825 views • 1 month ago

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。 子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。 参考: #CSS #cssnite #朝までマークアップ
0:15

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。 子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。 参考: #CSS #cssnite #朝までマークアップ

鹿野 壮 Takeshi Kano

33,703 views • 1 year ago

CSSのモーションパスを使えば、手書き文字のアニメーションを作れます。 Appleの「hello」みたいな演出も簡単に。
0:18

CSSのモーションパスを使えば、手書き文字のアニメーションを作れます。 Appleの「hello」みたいな演出も簡単に。

池田 泰延

83,040 views • 21 days ago

CSSのdisplay: grid → flexにモーションを加え、 レイアウト変更をオシャレに。 Anime.jsで簡単に実現できました。
0:10

CSSのdisplay: grid → flexにモーションを加え、 レイアウト変更をオシャレに。 Anime.jsで簡単に実現できました。

池田 泰延

59,271 views • 6 months ago

ImageFX駆動開発できた！Gemini強し！ Geminiプロンプト → ImageFX → Gemini 画像からhtml変換 → htmlとcss調整 -------------------------------------------------- 1 ImageFXでファーストビューを生成 -------------------------------------------------- 日本語でGeminiに依頼して英語のプロンプトにしてもらってImageFXに投げる -------------------------------------------------- 2 Gemini 2.0 Flash Thinking Expでhtml変換プロンプト -------------------------------------------------- EX. --------- このファーストビューの画像をhtml cssで完全に再現します フォントサイズや幅などは全て比率で換算してください 抜け漏れがないように全ての要素を分析して ヒントは最大幅が1600px 画像左上はロゴのエリア、右はナビゲーションエリア、メインビジュアルの左にリード文、右に椅子 ------------- とりあえずAIにヒントをあげてみる -------------------------------------------------- 3 PhotoShop 生成塗りつぶし -------------------------------------------------- 画像の文字列を塗りつぶし 画像が小さい場合はAIツールでアップスケーリング -------------------------------------------------- 5 cssの微調整 -------------------------------------------------- EX. --------- メインビジュアルで使っているフォントはなんですか？ ------------- 画像を投げてfontの確認
0:12

ImageFX駆動開発できた！Gemini強し！ Geminiプロンプト → ImageFX → Gemini 画像からhtml変換 → htmlとcss調整 -------------------------------------------------- 1 ImageFXでファーストビューを生成 -------------------------------------------------- 日本語でGeminiに依頼して英語のプロンプトにしてもらってImageFXに投げる -------------------------------------------------- 2 Gemini 2.0 Flash Thinking Expでhtml変換プロンプト -------------------------------------------------- EX. --------- このファーストビューの画像をhtml cssで完全に再現します フォントサイズや幅などは全て比率で換算してください 抜け漏れがないように全ての要素を分析して ヒントは最大幅が1600px 画像左上はロゴのエリア、右はナビゲーションエリア、メインビジュアルの左にリード文、右に椅子 ------------- とりあえずAIにヒントをあげてみる -------------------------------------------------- 3 PhotoShop 生成塗りつぶし -------------------------------------------------- 画像の文字列を塗りつぶし 画像が小さい場合はAIツールでアップスケーリング -------------------------------------------------- 5 cssの微調整 -------------------------------------------------- EX. --------- メインビジュアルで使っているフォントはなんですか？ ------------- 画像を投げてfontの確認

kk@study

129,754 views • 1 year ago

CSSアニメーションのTipsをGitHubに公開しました ソースコード:
0:18

CSSアニメーションのTipsをGitHubに公開しました ソースコード:

yui540

16,975 views • 3 months ago

製作したアークナイツ公開求人補助アプリです。 便利さが伝わるかなと思って動画を作りました。タグを選ばなくてもいいのが最大のポイントです。こんな風に動きます。🐰
0:11

製作したアークナイツ公開求人補助アプリです。 便利さが伝わるかなと思って動画を作りました。タグを選ばなくてもいいのが最大のポイントです。こんな風に動きます。🐰

アーミヤCEO

256,732 views • 1 year ago

この4つのCSSアニメーションをGitHubに公開しました ソースコード:
0:15

この4つのCSSアニメーションをGitHubに公開しました ソースコード:

yui540

33,359 views • 3 months ago