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

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

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

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

4月17日（木）のCSS Nite「武器になるCSS〜カスタムプロパティの基本とレイアウト管理」では、以下のようなページをカスタムプロパティを活用して作ります。 カスタムプロパティとは？から始めますので、CSSの初学者さんに是非見てもらえたら嬉しいです。 #武器になるCSS

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

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

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

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

: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 #朝までマークアップshow more

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の確認show more

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

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

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

本日の動画更新しました！ 話題のFlip Bounceの特徴を作例を交えて話しています。 FlipBounceは話題になるだけ合ってとても便利なボックスだけどそもそもSMDVのソフトボックスが質もいいし便利なのでぜひ動画でチェックしてね～！ #SMDV #FlipBounce #PR

VScodeとFigmaを繋げる拡張機能「Figma for VS Code」が便利。 VSCode上で直接Figmaのデザインを見ることができ、さらにCSSのコードも簡単に取得できます。 これにより、コーディングの速度がぐっと上がります。 VScode上でFigmaにログインするだけで、すぐに使い始めることができるのでおすすめ。

みけねこ(潤羽るしあ)が、今まで使用していた配信タグをなぜか変更する ↓ 視聴者｢タグ被ってますよ｣ みけねこ｢何が悪いの？｣ (面倒な事になるので話題を即変える) ↓ 被り相手｢このタグ使うの辞めます…｣ こ、これは酷い

キラハピ2025(On Prism Records ‖ キラハピ)の公式サイトのアニメーションをお手伝いさせていただきました！ CSSアニメーションいっぱい使わせていただきました！ ミクさんもCSSアニメーションで動いております！ キラハピの方、ぜひご参加ください！✨ #キラハピ2025

これ便利すぎる。 海外で話題のやり方で、Claudeに「このアプリ全体を、1枚のHTMLと1つのJSONにまとめて」と頼むだけで、複雑なシステムをわかりやすく可視化できる。 ・いまの設計が“見える化”されて、頭の中の地図ができる ・人間が読む用はHTML、次のチャットや新しい作業をする相手用はJSON…役割が分かれてる ・コードベースが「自分で説明してくれる」状態になる 続きで、そもそも何が起きてるのかを噛み砕いて書く👇

「ずっとみていたくなるCSSアニメーション」をまとめたものを投稿しました