Panda CSSとは はじめに、今回のメインテーマとなるPanda CSSについて簡単に紹介します。 CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience Panda CSSとは、上記公式サイト冒頭にもあるようにパフォーマンス面の課題をクリアしつつ、最高クラスの開発体験も両立したCSS in JSライブラリとなっています。 （最近ではNext.jsのReact Server Componentsが安定版になったこともあり）従来のようにランタイムCSS in JSを利用することが推奨されなくなってきている中、Chakra UIと同じ開発元によって、ゼロインタイムを実現したPanda CSSが新たにリリー
この資料は Meguro.css#9 のLT資料です。 メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります 自己紹介 yamanoku.icon @ yamanoku 大山奥人, おおやまみちのく a.k.a やまのく X（旧Twitter） GitHub 株式会社クラウドワークスにてフロントエンドにまつわる仕事をやっています 得意領域 マークアップ・フロントエンド・UIデザイン・アクセシビリティ 既婚で1児の父と猫🐈🐈🐈と犬🐶の飼い主 Meguro.css復活！！！！！ 株式会社オロ様、Nakayaさんありがとうございます（感謝） Meguro.css#4がエンジニアとしての初登壇イベントでした 今回のテーマ「2020年から2023年までに登場したCSSの変遷を振り返る」 前回のMeguro.cssが2020年1月開
Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります
間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chrome 122までは何もしませんでしたが、Chrome 123以降は適用されて異なるレイアウトになってしまう可能性があります。 これは同様に間もなくリリースされるSafari 17.4にも適用されます。 Support for align-content in block and table layouts by Rachel Andrew 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、
2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイムテーブル 10:10 [ゲストセッション]Figmaプロトタイプ入門〜インタラクションイメージの
お正月だからCSSで門松作った
皆様、あけましておめでとうございます。(ちょっと気が早い) お正月なのでCSSで門松を作りました。 個人的にも良くできたと思うので、こだわりポイントとかを書いていきます。 完成形 ↓実際の門松 ↓コード(github) こだわりポイント なんか丸いやつ background-image: radial-gradient(#d42c32 30%, #ffffff00 30%), radial-gradient(#d42c32 30%, #ffffff00 30%); background-size: 34px 34px; background-position: 8px 9px, 27px 26px; background-imageの中にradial-gradientを用いて水玉を作り、はみ出す部分をoverflow: hidden;で非表示にしました。 radial-gradientは元
ターミナルのUIを模した、モダンでミニマルなCSSの超軽量フレームワークを紹介します。 ターミナルで見かけるようなデザインのUIコンポーネントが豊富に揃っており、ライトテーマ・ダークテーマもサポートされています。 Terminal CSS Terminal CSS -GitHub Terminal CSSの特徴 Terminal CSSの使い方 Terminal CSSのコンポーネント Terminal CSSの特徴 Terminal CSSは、ターミナル愛好家のためのモダンでミニマルなCSSのフレームワークです。ソースはCSSで記述されており、アクセシブルで、非常に軽量（3k gzip）です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。
2023年7月10日CSS,JavaScript,アニメーション,デザインパターンアニメーションの実装はややこしいからCSS Transitionでできなければ実装したくない、そう思っていませんか？FLIPというテクニックを使うことで、CSS Transitionだけでは実装できないケースでも簡単にアニメーションを実装することができます。 FLIPとは #FLIP とは First, Last, Invert, Play の頭文字から取られた用語であり、アニメーションをこの4つのステップに分割して行うテクニックです。例えば、以下のようなリストの項目に追加、削除、並べかえができるUIに対して、簡単にアニメーションを付けることができます。 上のデモで追加、削除、並べかえを行った時に、項目の座標移動がアニメーションすることがわかると思います。これは CSS Transition だけでは実装する
dialog要素を使用したアクセシブルなモーダルウィンドウの実装メモです。このブログのハンバーガーメニューで使われている実装と同じものになります。 dialog要素は現在全てのモダンブラウザでサポートされているため、iOS Safariをどこまで対応するかに依りますが実務で使用しても差し支えないでしょう。
初めまして、プログラマーを始めて3年目の山田です。今回、日本発のReact UIコンポーネントライブラリYamada UIをリリースしたので、その素晴らしい機能の数々を紹介していこうと思います。 ちなみに、Yamada UIのYamadaは山田が名付けたわけではありません。気になる方は、山田に聞いてください。 Yamada UIとは 一言で言うならば、『すべてのUIコンポーネントライブラリを超えた(つもり)』のUIコンポーネントライブラリです。 現在のUIコンポーネントライブラリで代表的なものと言えば、Material UIやChakra UIであり、フロントエンドエンジニアであれば、誰でも知っている知名度だと思います。 しかし、現在主流となっているUIコンポーネントライブラリは数年前に開発されたものであり、色々な面(カラーモード・アニメーション・CSSプロパティ・型安全など)において首が
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。 スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。 参考: Scroll-Driven Animations Debugger by Bramus! 記事の掲載にあたり、元サイト様にライセンスを得ています。 まずは、さっそく機能拡張のインストールから。 下記のページにChromeでアクセスし、「Chromeに追加」をクリックするだけです。起動方法や使い方は後述します。 Scroll-Driven Animations Debugger -Chrome ウェブストア この機能
当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。 結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" fetchpriority="high" href="{href}" /> <link rel="stylesheet" href="{href}" media="print" onload='
はじめに結論から :is()または:where()を使うと、 これまで「前置修飾」で書かなきゃいけなかったセレクタが 「後置修飾」で書けて嬉しい！ /* 通常のスタイル */ .button {} /* 特定の要素と隣接するときのスタイル */ /* こう書いてたものが */ .link + .button {} /* こう書ける */ .button:is(.link + *) {} /* 特定の要素に内包されているときのスタイル */ /* こう書いてたものが */ header .button {} /* こう書ける */ .button:is(header *) {} /* 特に、「特定のクラスの中の要素に対するスタイル」を条件分岐させるときに便利 */ .container p {} .container p:is(h2 + *) {} .container p:is(secti
シルエット姿のネコがWebブラウザ上に集まりたわむれるだけのChrome拡張「ネッコサーフィン」の“問題”が解決した。俳優の阿部寛さんの公式Webサイト「阿部寛のホームページ」だけネコが来なかったのだが、有志が対策パッチを開発。同サイトにネコを召喚することに成功した。 ちなみにネッコサーフィンは、ロシアとウクライナでバズっており、ネコの癒やし効果は世界をで求められているようだ。 ネッコサーフィンは、発明家・デザイナーの「もにゃ」さんが開発した拡張。マウスの移動量に応じてネコが現れてたわむれるだけで、便利な機能はない。むしろちょっと邪魔だ。 「阿部寛のホームページ」は、1990年代にタイムスリップしたかのような古風なサイト。なつかしのframesetタグが利用されているため、ネッコサーフィンを入れたブラウザでもネコが現れないという問題が起きていた。 もにゃさんはユーザーに対して、「阿部寛のホ
春です。入社式のニュースが流れてくる季節ですが、当社もこの4月に多くの新入社員を迎えることができました。 そんな若者について、そもそもXHTMLという単語は何だろうという反応をするかもしれない一方で、長らくHTMLと付き合ってきた人は、XHTMLについて複雑な想いを抱く方も多いだろうと思います。そんな往年のXHTML1時代を過ごしてきた方に改めてお伝えしたいことは、XHTML（HTML Standardでは正確にはXML構文）でHTMLを書くことが推奨されないことが仕様に明示されるようになるというものです。 これは、HTML Standardを管理しているGitHubにWarn that the XML syntax is not recommendedというプルリクエストが作成されたことによります。 このプルリクエストは、XML構文が記載されている14章に次のWarningを追加するとい
2023年、Web制作・デザインに役立つ記事の総まとめ
2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2023年のもっとも大きなニュースの一つは、ChatGPTをはじめとするAIです。どのジャンルでもそうですが、完全に任せるのではな
Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。 簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。 非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。 導入の容易さ :
CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、:has()疑似クラスのおかげで、指定した要素がある場合にのみスタイルを適用できるようになりました。 WebサイトのUIでよく見かけるCSSの:has()疑似クラスの便利な使い方を紹介します。今までは少し面倒なCSS、もしくはJavaScriptが必要でしたが、:has()疑似クラスを用いると簡単に実装できます。 Some little ways I’m using CSS :has() in the real world by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポーネントライブラリの使用が可能であれば、それが最も堅牢な選択肢でしょう。) 参考 各ブラウザのスタイルシート HTMLのスタイルシート UAスタイルの中には、CSSのカスケードルールの範疇で実装されているものもあれば、レンダリングエンジンの特別処理として書かれていて作者スタイルシートでの上書きが不可能なものもあります。これはブラウザ実装により異なります。 スコープ UIコンポーネントを作るような場面を想定しています。したがって、要素名自体は固定として、その中で見落としがち
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro） - Qiita
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro）faviconVue.jsastroNext.jsSvelteKit 「開発環境」「プロダクション環境」などごとにファビコンを変えておくと、パッと見てわかりやすい 絵文字をファビコンに設定できる Next.js, Vue3, SvelteKit, Astro での実例を紹介した そもそもFavicon（ファビコン）って？ ウェブページのアイコンです。ブラウザでページを開いたときに、タブなどに表示されていたりします: Favicon - Wikipedia File:Wikipedia favicon in Firefox on KDE (2023).png - Wikipedia ファビコンの設定方法 pngなどの画像や、SVGファイルを用意して、それをHTMLのhead内で指定しま
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。 Izmir Izmir -GitHub Izmirの特徴 Izmirの使い方 Izmirのカスタマイズ Izmirの特徴 Izmirは、画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSのライブラリです。エフェクト用のclassはかなりの数が用意されており、HTMLにclassを追加するだけで、完璧なホバーエフェクトを実装できます。 MITライセンスで、商用プロジェクトでも無料で利用できます。 Izmir 主な特徴は、下記の通り。 エフェク
2023年10月5日頃、X (Twitter) でOGP画像が設定されたWebページの URLをツイート（ポスト）しても従来のようにページのタイトルや概要が表示されなくなり、OGP画像とドメイン名だけが表示されるようになりました。 このままでは、画像の投稿 なのか、リンクの投稿なのかが分かりにくくなり、「画像だと思ってタップしたら外部のページに遷移してしまった」とか、逆に「リンクだと思ってタップしたら画像だった」ということで困っている方もいらっしゃるようです。 Webメディアを運用している方や、 私のようにブログを運用している場合などは、 このままではサイトへの流入が減少するため困ると言う方もいらっしゃると思います。 そこで、この記事では、「閲覧者側」と「メディア運営者側」と「ツイート（ポスト）投稿者側」それぞれにできる対策をまとめました。 投稿者側の対策については、閲覧者側の対策の下に書
対象読者 CSSテンプレートで管理画面開発をしようとしている方 とにかく早く管理画面を作りたい方 管理画面開発の進め方で悩んでいる方 この記事の背景 私はローコードで管理画面を構築できる『クエリア』を作っています。 私自身もエンジニアなので、世の中のエンジニアには、メインのプロダクト開発に100%のリソースを使っていただきたいという思いでクエリアを開発しています。 最近では、お客様も増え、良いフィードバックをいただける機会も増えてきました。 その中で、BootstrapなどのCSSテンプレートを利用するよりも、ローコードで管理画面や社内ツールを開発したほうが便利になる可能性があるということを、もっと多くの方に知っていただきたいと思ったのが、この記事を書こうと思った経緯です。 CSSテンプレートも結局フロントエンドエンジニアの仕事 CSSテンプレートも結局はフロントエンドエンジニアの手を動か
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
Park UI
Build your own Design System Beautifully designed components built for your choice of JS and CSS frameworks. Get Started Make it yours@s`j�U@G�d�U
zenn.dev エディタを作っていると iOS Safari でキーボードを開いたときの挙動は本当に大変ですよね。 この記事では、キーボードを開いたままスクロールしてもフッターを固定できるようなワークアラウンドを最近見つけたので紹介します。 Safari 16 以降が必要。キーボード開閉時に追従が遅れる挙動は改善しません。 デモは https://mechairoi.github.io/ios-safari-virtual-keyboard/。iPhone か iOS Simulator でお試しください。 GitHub - mechairoi/ios-safari-virtual-keyboard Virtual Keyboard の挙動 Virtual Keyboard を開いたときには以下のようなことが起こっていると推測しています。 Visual_Viewport_API で取得で
コンテナークエリー（@container）は、CSSの新しいアットルールです。従来のメディアクエリー（@media）とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート（ブラウザ幅）を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。 コンテナークエリーを利用することで、再利用性の高いパーツを実装できます。とくに、カラム数が多いレイアウトや複雑な横並びの要素において、コンテナークエリーは有効な機能です。 この記事では、簡単な作例と使用上の注意点を紹介します。 コンテナークエリーの使い方 作例の紹介の前に、コンテナークエリーの使い方を簡単に説明します。 コンテナークエリーを使用するためには、使用したい親の要素にcontainer-typeプロパティを設定する必要があります。以下の2通りの指定ができます。 con
いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web
CSSのmarginをあまり書かなくなった話
この記事は、Lancers（ランサーズ） Advent Calendar 2023 の9日目の記事です。 本記事では、マークアップで、CSSのmarginプロパティをあまり書かなくなった話を紹介します。 Webサービスのレイアウトについて 大きく以下が考えられます。 縦に並べる 横に並べる 絶対配置 さらに、それぞれに対して以下が考えられます。 不規則的な配置 規則的な配置 今回は、縦に並べることに着目して、マークアップを考えてみます。 不規則的な配置のパターン marginを利用する .mt-4 { margin-top: 4px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } <div class="box box1"></div> <div class=
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。
CSSパフォーマンスに関する計測結果
CSSパフォーマンスに関して計測した結果を発表しました。 パフォーマンス改善系の話は具体的な改善手法みたいなのがウケてしまいがちだけど普遍的に適用できる手法は案外多くなくて、「理論的に最適な⼿法が実際に（あなたの環境でも）最適かどうかは計測するまで分からない」って事が言いたかったです。だから、ベンチマークの提示もない改善手法に飛び付かず、計測⇄ボトルネック特定⇄改善のサイクルを回すことが大切です。 この発表の10日前にJSConf JPで発表があり、JSConfが終わって10日間の間にゆっくり資料をつくるつもりだったものの体調を崩して1週間ほど何もできない日々が続き、大急ぎで資料を作りました。 無事に発表を終えることができてよかったです。
誤解しているかも！ CSSの詳細度について、よくある誤解を解説
CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。 このCSSの詳細度について、よくある誤解を紹介します。 Misconceptions about CSS Specificity by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 詳細度の誤解 1: 詳細度は10進数である 詳細度の誤解 2: style属性で詳細度が高くなる 詳細度の誤解 3:!importantで詳細度が高くなる 終わりに はじめに CSSの詳細度（Specificity）、ひいてはカスケード（Cascade）に関する記事が公開される度に、私はと
記事一覧や商品一覧など、要素の個数によって CSS を変えたいときに使えるテクニックです。目新しいテクニックではないですが、:has() セレクタで書き直したものになります。 要素の個数が N 個以上 N 番目の要素 :nth-child(N) を直下 > に持つ :has() <ul> 要素があれば、N 個以上と判定できます。
CSS subgrid Stay organized with collections Save and categorize content based on your preferences. CSS grid is a very powerful layout engine, but the row and column tracks created on a parent grid can only be used to position direct children of the grid container. Any author defined named grid areas and lines were lost on any other element than a direct child. With subgrid, track sizing, templates
StyleX
The styling system that powers facebook.cominstagram.comwhatsapp.comthreads.netGet StartedThinking in StyleX
フロントエンドカンファレンス沖縄2023のLTスライド資料です https://frontend-conf.okinawa.jp/
知っておくと便利なCSSの単位: コンテナクエリに基づく相対単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 第3弾となる今回はコンテナクエリに基づく単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を紹介します。 Container query length units -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 第1弾・第2弾は、下記をご覧ください。 フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説 ビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を解説 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか 2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 前回の記事の最後で、デザインシステムを構築する際にコンポーネン
chat.openai.com 上でマークアップを試行錯誤するための Chrome 拡張を試作してみた。 例えば html+preview のコードブロックを見つけるとその隣に HTML として挿入する。後述するが React Component もプレビューできる。 📎 をクリックすると展開したHTMLを画像としてクリップボードに入れることができる。 いい感じにコードを生成してくれるプロンプトのサンプル集はここに置いてる なぜ作ったか GPT-4 はそこそこ賢いコードを生成できるのだが、細かい修正は行うにはやはりプレビューしながら対話的に行う必要がある。 また、人間がその結果を言語化するより、生成されたHTMLを画像入力として修正プロンプトに使うのが精度がでる。 (備考: まだChatGPT Plus の一部ユーザーに開放されてない機能) react-component の生成: ts
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
話題のゼロランタイムなCSS-in-JSライブラリ「Panda CSS」をNext.jsに導入してみた
2020年から2023年までのCSSの変遷を振り返る - yamaScrapbox
フロントエンドカンファレンス沖縄 2023 公開資料・Xアカウントリンクまとめ
ターミナルのシンプルなUIが好きな人に！ モダンでミニマルなCSSの超軽量フレームワーク -Terminal CSS
アニメーションの実装が劇的に簡単になるFLIPテクニック - Katashin .info
dialog要素を使用したモーダルウィンドウの実装例 ｜ TAKLOG
日本発のReact UIコンポーネントライブラリ 『Yamada UI』
【令和最新版】Google Fontsの読み込み最適化の結論 ｜ TAKLOG
:is(), :where() を活用してCSSを「後置修飾」で書く
ネコがたわむれるだけのChrome拡張、「阿部寛のホームページ」で利用可能に 有志が対策パッチ開発
もうHTMLをXHTMLで書くことは推奨されないという話 | フロントエンドBlog | ミツエーリンクス
WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方
<button>とかのスタイルを消して書き直すときに考えることの備忘録
HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
X (Twitter) で従来のようにOGP画像にタイトル等のテキストを表示する方法まとめ
管理画面開発にCSSテンプレートを使うのはもうやめよう
不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
iOS Safari でキーボード表示時にフッターを固定するもう1つの方法 - *iroi*
要素の幅でレスポンシブ対応を行える！ コンテナークエリーの使い方 - ICS MEDIA
いざという時に使える7つのHTML&CSS Tips集vol.2 | BUILD Journal
CSSの:has()で要素の個数に応じてスタイルを適用する
CSS subgrid | Articles | web.dev
2023年の ゼロランタイムCSS in JS⚡️ を考える
UIコンポーネントの大きさは外から制御しよう - Qiita
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか | gihyo.jp
ChatGPT にHTMLをプレビューさせるChrome拡張を作ってみた
HTML attributes vs DOM properties