Panda CSS - Build modern websites using build time and type-safe CSS-in-JSCSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience
Tailwind CSSで親要素や兄弟要素の状態変化を簡単にスタイリングする
こんにちは、 Gaji-Labo 横田です。Tailwind CSS には親要素や兄弟要素の状態をスタイリングしたり制御できるクラスが用意されています。今回はこのクラスを簡単に紹介します。 親要素を制御できる group クラス親要素に group クラスのマークを付け、子要素に group-* 接頭辞クラスを使用することで親の状態に基づいたスタイリングが可能になります。 以下は公式ドキュメントから引用したコード例です。 <a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"> <div class="flex items-center spa
Tailwind CSS のテンプレート & UI キット集【まとめ】 - Qiita
Tailwind CSS のテンプレートサイトを使えば Web サイトを効率よく作成できます。簡単ではありますが個人的に素敵だと思った Tailwind CSS のテンプレートサイトをまとめてみました。 Tailwind CSS テンプレート＆ UI キットサイト Tailwind UI（有料） https://tailwindui.com/ すべてのテンプレートを使用するにはライセンス購入が必要 シンプルなデザインはとても汎用的 React や Vue を使用したテンプレートも有 Headless UI https://headlessui.com/ ドロップダウンやダイアログ等の「機能」をメインとした UI コンポーネント集 サンプルコードは React か Vue.js の2種類から選択できる。 MIT ライセンス Preline UI https://preline.co/ 無料で
CSS値の「initial」「inherit」「unset」「revert」の違い - Qiita
一言で言うとプロパティの初期化になるのですが、 それぞれが異なる動きをします。 自分のまとめも兼ねて投稿します。 これは何？ CSSの値のキーワード プロパティに対して、初期値・継承値をセットします。 この為、プロパティをリセットしたい時に使用できます。 使いたい場面 ABテスト等で特定のstyleを消したい時。 CSSフレームワークを使用する際に、特定のstyleを消したい時。 急ぎ（障害対応等）でstyleを設定したい、かつ複数のセレクタが入り混じって何だか分からない時に、一旦styleを消してしまいたい時。 基本的には「初期値・継承値をセット」なのですが、それぞれ異なる働きをするので、注意が必要です。 各プロパティ そのstyleのプロパティの初期値又は規定値を設定する。初期値に戻したい時に使用できる。 ここでの初期値は、ブラウザーのスタイルシートで指定された値ではありません。 使用
2023年モダンCSSの最新トレンド
Demo https://codepen.io/tonkotsuboy/pen/JjmYWmw レスポンシブ対応で、 画像の縦横比を変えたい aspect-ratio いろんなアスペクト比で画像を表示したい アスペクト比とは 従来: padding ハック .box::before { content: ""; display: block; padding-top: calc(100% * 9 / 16); /* 56.25% */ } @media (width <= 500px) { .box::before { padding-top: calc(100% * 3 / 4); } } 現在: aspect-ratio プロパティ .item { aspect-ratio: 16 / 9; } @media (width <= 500px) { .item { aspect-rati
原理から考えるCSSアニメーションのパフォーマンス改善
ブラウザに描画されるWebページをデジタルイラストに例えて、レンダリングの仕組みからCSSアニメーションのパフォーマンスを考える視点を解説します。 また、近い将来、GPUアクセラレーションをはじめとするパフォーマンス事情がどう変わっていくのかについても触れ、新たに主流になるかもしれないアニメーション実装手法をご紹介します。 本記事は、TechFeed Experts Night#14 〜 絶対役立つ！最先端のCSS総ざらいのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 今回はブラウザのレンダリングの大まかな仕組みから、CSSアニメーションのパフォーマンスを予測できるようになるというお話をしたいと思います。実際にChromeで計測した数値をまじ
【2023年】iOSにおけるモーダルウィンドウの背景固定（スクロール抑止）＆下までスクロールできない問題の解決方法
はじめに 今回は、モーダルウィンドウが開かれた時に背景を固定（背面コンテンツのスクロールを抑止）する方法を改めて紹介したいと思います。 以前まで、PCやAndroidでは比較的簡単に実現させることができましたが、iPhoneもしくはiPad（iOS or iPadOS）では別の方法で実装しなければ、実現できませんでした。 しかし、それはもう過去の話。今ではもう、簡単に実現できます🙆♂️ ※ただし考慮すべき点はあるので、最後まで読み進めていただければ幸いです。 iOSにおけるモーダルの背景固定が楽になっている!? PCやAndroidでは容易に実現できるものの、つい数年前までiOS端末では同じ方法で実現できない背景がありました。しかし現在では、以下いずれかの方法を使えばiOSでも容易に実現することができます。 bodyにoverflow: hiddenを設定 モーダルウィンドウが開かれた
Vue.js: SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法MEMO - Madogiwa Blog
Vue.js SFCでscoped cssを利用しているとdefaultでは以下の通りslotで挿入した要素にスタイルを当てることができません。 デフォルトでは、スコープ付きスタイルは親コンポーネントが所有するコンテンツとみなされ、でレンダリングされるコンテンツに影響を与えません。 SFC スタイルの機能 | Vue.js こういう場合にどういう方法があるのかメモ📝 SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法 ディープセレクタを使う :deepを使うとscoped cssで定義したスタイルを子要素にも伝搬させることができます。これはslotで挿入した要素にも反映されます。 scoped スタイルのセレクタを「深く」したい場合、例えば子コンポーネントに影響を与えたい場合は、:deep() 擬似クラスを使用できます。 <style scoped>
iOS（Safari）でスクロールバーを常に表示したい...CSSだけでは表示できない！？
スマホ閲覧時に画面からはみ出したテーブル要素などを横スクロールで表示する事がありますが、このスクロールバーを常に表示できないか？という内容です。 以前までのiOSのバージョンならCSSの「-webkit-scrollbar」というプロパティを使うだけで簡単にスクロールバーを常に表示出来たのですが、新しいiOSでは消えてしまうようです。 CSSではダメなのでJavaScript（jQuery）で何とかできないか考えました。 iOS(Safari)でスクロールバーを常に表示するスマホなどの画面が小さいデバイスに対して、テーブル要素などの横長の表のようなコンテンツを表示する時には横スクロールが良く使われます。 表を横にスクロールできることは周知されている動作だとは思いますが、いい感じに画面の端で表がピッタリ切れていると自分で見ても横にスクロールできるのかどうか分からない事があります。 そこでCS
SPA view transitions land in Chrome 111 | Blog | Chrome for Developers
The View Transition API lets you update the DOM in a single step, while generating an animated transition between the two states. Transitions created with the View Transition API. Try the demo site–Requires Chrome 111+. These kinds of transitions were a frequently-requested feature from developers, including me, and I think we've managed to land it in a way that balances good defaults with extensi
クライアント側のフォーム検証 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — ウェブの構造化HTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化マルチメディアと埋め込みマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML 表HTML 表HTML の表の基本HTML 表の高度な機能とア
Container Queriesの沼へようこそ - kojika17
2023年2月13日にFirefoxでCSS Container Queriesが実装されたため、一部の機能がすべてのブラウザ使用できるようになりました。 さらに記事公開の本日、Google Chorome 111で、新しいContainer Queriesも実装されました。 私も待ち望んでいた機能なので、どう使うのか？ どういう問題点があるのか？ 解説していきます。 Container Queriesとは？ Container Queriesは、コンテンツにあわせてレイアウトを変化させる技術です。 例えば、写真付きのカードがあり、大きい画面では写真と説明が横に並ぶようなデザインがあったとします。 このような見た目の変化を従来のCSSではMedia Queriesを使用するしかなく、ブレイクポイントやクラスを付与して指定して変化させるしかありませんでした。 最初にこの問題に触れたのは no
こびと on Twitter: "すご！！マジでなった！！ *{ all:unset; display:revert; } ↑ all ...全プロパティ unset ... ブラウザが初期値として設定してくる値を全部消す react ... reve… https://t.co/OQ4n7YwuUM"
すご！！マジでなった！！ *{ all:unset; display:revert; } ↑ all ...全プロパティ unset ... ブラウザが初期値として設定してくる値を全部消す react ... reve… https://t.co/OQ4n7YwuUM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今すぐTailwindでの開発を楽にするお手軽2ステップ
CSSでよく混同する「initial／inherit／unset」の違いについて | TOBI Designer's Blog
https://twitter.com/clockmaker/status/1642898046039236609
ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ
iOS 14 and browser scroll bars (we… | Apple Developer Forums
stylelint-a11y
https://twitter.com/ixkaito/status/1631123206827544576