CSS in 2024 is amazing. Cross-browser support for nesting, :has(), container queries, and more¹ Powerful and fast new CSS tools Many frameworks and compilers to help optimize CSS loading performance This post will be a collection of my notes and thoughts about the CSS ecosystem and the tools I'm currently using. Design Constraints User Experience What does a great experience look like loading styl
この機能は2023年8月現在、ChromeやEdgeなどのChromiumベースのブラウザーではサポートされていますが、他のブラウザーではサポートされていません。 使用する場合はブラウザーのサポート状況を確認してから使用することをお勧めします。 皆さんはスクロール連動型アニメーションをご存知でしょうか？ スクロール連動型アニメーションとは、スクロール量に応じてアニメーションを発生させることができるCSSの機能です。 この機能を活用することでJavaScript不要でユーザーのマウススクロールに応じたアニメーションを実装することができます。 従来のanimationのCSSに加えて、animation-timelineというプロパティを指定することでアニメーションの進行度をスクロール量に応じて変化させることができます。 スクロール連動型アニメーションの使用例 使用例1.（パララックス） パラ
ゼロからはじめるPython(114) HTMLからPDFを作成するツール「wkhtmltopdf」が開発終了・代替ライブラリのxhtml2pdfとWeasyPrintを試してみよう
HTMLからPDFを作成するツール「wkhtmltopdf」が開発終了・代替ライブラリのxhtml2pdfとWeasyPrintを試してみよう HTMLからPDFを作成するwkhtmltopdfの開発が終了し、今年に入って多くの配布サイトで非推奨のツールとなった。筆者も長らくお世話になっており、どのライブラリに乗り換えるのか悩んだので、今回はwkhtmltopdfの代替ライブラリを紹介する。 wkhtmltopdfに替わるxhtml2pdfとWeasyPrintを試してみよう なぜwkhtmltopdfの開発は終了したのか？ HTMLから手軽にPDFを作成できる「wkhtmltopdf」は、とても便利だった。簡単なHTMLタグを書くだけでPDFを作成できた。内部でQtライブラリのブラウザ機能であるWebkitを利用していたため、基本的にChromeやEdge/Safariなどのモダンブラウ
Bootstrapが難しいので、苦し紛れにJavaScript関連用語だけざっくり調べた - Qiita
注記 この記事の投稿者はRuby on Rails初学者であり、自身の学習の備忘録目的で記事投稿を行なっております。 情報の正確さには最大限注意をしておりますが、もし誤り等がございましたらお知らせいただけますと幸いです。 ご覧いただきありがとうございます！ Ito と申します！ Ruby on Rails初学者です。 調べた動機、経緯 初めてのアプリを作成しようと思いRails new後、Bootstrapを導入しようとしたら数時間ハマりました。 開発環境はRails7系を使用していますが、ChatGPTに質問をしたところWebpackerを薦められました。 JavaScript周りの知識があればChatGPTのアドバイスの矛盾点に気付けたのでしょうが、知識の持ち合わせがなかった私は、なすがままに振り回されてしまいました。 悔しかったのと、「自分と同じように機械に使われる初学者さんを1人で
CSS :has() Interactive Guide
CSS :has() Interactive GuideAn extensive guide to CSS :has() selector. Intro We always wanted a way in CSS to style an element based on its descendants. It wasn’t possible until CSS :has() became supported in all major browsers. In this article, I will explore the problem and shed the light on some of the interesting use cases for CSS :has(). The problem Say we have a <figure> and we want to style
GitHub - webui-dev/deno-webui: Use any web browser as GUI, with Deno in the backend and HTML5 in the frontend.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Your skeleton will appear hereGet started by converting your component! About AE StudioWe are a development, data science and design studio that works closely with founders and executives to create custom software, machine learning and BCI solutions. Learn more about human agency Why did we build this?In the digital world, time is precious. We transformed loading delays into an opportunity by crea
「CSS Library / Framework」をテーマに「BARフロントえんどう #2」を開催しました！ - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。 フロントエンドエキスパートチームの Saji です 2024 年 4 月 19 日(金)にサイボウズのフロントエンドエンジニア主催で第 2 回 BARフロントえんどうを開催しました。 本記事では、当日の様子やセッションについて紹介します。 BARフロントえんどうとは BARフロントえんどうは Web フロントエンドのトピックからテーマを選び、登壇者や参加者の間で情報を共有することで知見を深めてもらおうというコンセプトの勉強会です。 第 2 回を迎える今回は「CSS Library / Framework」をテーマとして開催しました。 フロントエンドリアーキテクトをテーマとした第 1 回の開催報告も併せて こちら でご覧になれます。 セッション内容 今回はメインセッションとして poteboy さん、株式会社はてなの mizdra さん、ピクシブ株式会社の f_subal さん
スピッカートの金山(@spicato_kana)です。 久しぶり（約 1 年ぶり）のテックブログです。。。 今回は、最近よく見かける『要素が重なっていく表現』を再現してみたいと思います。 参考サイトリスト Casa ZIZO 株式会社ニューピース Heure Bleue この表現を使うことにより、レイヤー感を出すことで奥行きを出し立体感、没入感を出すことが出来るのかなと思っています。 実装方法はいろいろありますが、今回は GSAP を使って実装してみたいと思います。 実装内容 実際のコード内容を上記の codepen をご覧ください！ 今回は、GSAP を用いていますが、GSAP を使わなくても IntersectionObserver を使って実装することも可能です。 また、GSAP のpinを使っているサイトが多いのですが、どうしても安定して実装することが難しく、iPhone だとずれ
I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a DevTools extension to visualize and debug Scroll-Driven Animations. ~ Table of Contents Demo Get the extension Backstory Known Issues and Limitations Future Plans Spread the word ~ # Demo To jump right in here’s a video of the extension in action, tested on scroll-driven-animations.style: The extension adds a new
ZennサイトのUIにおいて、角丸のチューニングを行い、その大きな目的としては、前回のエレベーションのチューニングと同様にユーザー体験の向上を図りました。本稿では、実施した角丸のチューニングがどのようにユーザー体験向上に貢献するかについて解説し、さらにCSS変数の調整による柔軟性にも触れます。 角丸とは 「角丸」とは、オブジェクトの角に丸みを持たせるデザイン要素です。主に矩形のオブジェクトに適用され、CSSのborder-radiusプロパティを使用して角丸の半径を指定します。 角丸が持つ意味は、オブジェクトが丸みを帯びることで、そのオブジェクトがインタラクト（クリック/タップ/ドラッグ&ドロップ/フリック/スワイプ）可能であることを示します。これは物理世界のメンタルモデルと連動し、触れやすさや触れた際の怪我のしにくさを意味します。 Zennの角丸チューニングの経緯と目的 Zennでは、以
ウェブブラウザ「Firefox 117」の正式版が公開されました。CSSのネストに対応したほか、開発者ツールの機能強化や数式関連のプロパティがCSSに追加されるなどの更新が行われています。 Firefox 117.0, See All New Features, Updates and Fixes https://www.mozilla.org/en-US/firefox/117.0/releasenotes/ ◆開発者向けの変更点 ・CSSネストおよび「&」セレクターをサポート ChromeおよびSafariに続いてCSSのネストに対応しました。また、ネストしたCSSにおいて上位のルールと直接連結するためのセレクターである「&」についても同時にサポートしています。例えば、下記の通りネストしたコードを書いた場合を考えてみます。 .a { /* class="a"要素のスタイルを記述 */
Imagehover CSS Library
NotionページをChrome拡張機能「Stylus」でデザイン変更（CSS適用）する - みやもとブログ
今回はNotionページのデザイン変更（CSS適用）に関して書いていきます。 なお、NotionページにCSS適用するためにChrome拡張機能「Stylus」を使用します。 CSS適用するのは「見出し1～3」「引用ブロック」等です。 以前もNotion見出しデザイン案の記事を書いたのですが、これはNotionの機能の範囲内で背景色を変更したり文字色を変更したりする方法でした。 関連記事【6案】Notionの見出しデザイン案（区切り線/背景色/文字色/コード/絵文字） 上記の記事ではCSS適用しているわけではないため、見出しの数だけ毎回デザイン適用の設定をしなければならず、けっこう手間でした。 今回の対応ではCSSさえ書ければ、それ以降は手間がないので今回の対応の方が便利に感じる人も多いかなと思います。 それでは本題へ。 変更前後（画像） 変更前 変更後 参考リンク 適用したCSS Chr
button要素を非活性にする場合にdisabled属性がよく利用されます。 ただしdisabled属性には問題があってボタンにフォーカスが当たらなくなります。 フォーカスが当たらないとUI要素として認識がされにくいですのでフォーカスを当てた上で非活性であることを明示しようというのが本記事の意図です。 aria-disabledを利用する 基本的な対応は参照した記事に書かれている通りaria-disabled属性を利用するです。 ただ、以下のように普通に利用するだけではクリックイベントが実行されてしまいます。 <button aria-disabled onClick={() => console.log('click')}> ボタン </button> これを回避するためにButtonコンポーネントを作成してaria-disabled属性を受け入れる準備をしていきましょう。 クリックイベ
New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem — Smashing Magazine
Since the introduction of CSS viewport units in 2012, many of us have been using width: 100vw as a way to set an element’s width to the full width of the viewport. But, as Šime Vidas explains in this deep dive, 100vw does not always represent the full width of the viewport due to differences in how browsers handle scrollbars. Learn why this is an issue, how to avoid it, and what approaches we may
Firefox 121でCSSの関係擬似クラス:has()に対応し、主要ブラウザすべてで使用可能に 12月19日、Firefox121がリリースされた。このバージョンで、CSSの関係（リレーショナル）擬似クラス:has()に対応した。ほかの主要ブラウザ（Chrome、Edge、Safari）ではすでに対応しており、これで:has()が一般的に使えるようになったと言える。 :has()を簡単に説明すると、あるセレクタ（A）に結合子（>、+、~などの明示的な結合子、または暗黙的な子孫結合子）を使って相対するセレクタをhas()内に記述し、その関係性を実際に持つ場合にセレクタ（A）にスタイルを適用できるという擬似クラス。 :has()を使うことで、子の要素に○がある要素、次の要素が△である要素といった、これまでできなかったかたちでスタイルを適用できるようなり、より効率的にCSSを書けるように
HTMXを試してみたいのでWebSocketでSymbolの新規ブロックをリアルタイムで表示してみる - Qiita
はじめに HTMXというものがあることを知りました。 最近急に有名になっているそうで、AjaxをJavaScriptなしで直接HTMLに記述できるものみたいです。 そこで、勉強がてら、Symbolブロックチェーンと無理やり絡めて何かやってみようと思いました。 ネタを何にしようと考えましたが、HTMXはWebSocketも対応しているみたいなので、あまり使われていなそうなSymbolのRESTゲートウェイのWebSocketを使って、新規ブロックのリアルタイム表示なんかをやってみたいと思います。 結論から先に言いますが、HTMXだけでSymbolの新規ブロックをリアルタイム表示をすることはできませんでした。 インストール 今回はNode.jsなどを使用せず、HTMLを直接編集する形をとります。 その場合は、HTMLに以下の一行を追加するだけです。 <script src="https://u
DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから はい、DOMDOMタイムスです。知ってるよって？この挨拶は、まあ準備体操みたいなものなので。いつだって欠かさずやっていきます👶 さて、今日はcanvas-based renderingとa11yの話です。この前のJSConfセッションの最後のあたりで話したことと重複が大きいですが、面白がってくれる方が多かったので文章にしておこうと思いました。 (一応JSConfセッションの資料へのリンクも載せておきますね) canvas-based renderingの波 canvas-based renderingという言葉は、この記事では「canvasをゴリゴリに使ってwebコンテンツをレンダリングすること」ってくらいの意味で使います。通常のform要素やdiv要素ではなくて、canvas要素
Interop 2024 mid-year update Stay organized with collections Save and categorize content based on your preferences. As we head into the second half of the year, it's a great time to look at how Interop 2024 has improved web interoperability this year. Where we started At the beginning of the year, Chrome had an experimental browser support score of 83. Today that score is 90, with a score for stab
非依存で設定等もJavaScriptも不要、HTML要素にクリーンなプリセットスタイルを適用するCSSフレームワーク・「matcha.css」
matcha.css matcha.cssは非依存で設定等もJavaScriptも不要、HTML要素にクリーンなプリセットスタイルを適用するCSSフレームワークです。説明が上手くできないのですが、柔軟性のあるCSSリセットというイメージです。 デフォルトのブラウザスタイルシートと同様にHTML要素のスタイルを広範囲に設定したものですが、極力疑似要素を使うなど導入しても既存サイトに影響が出にくい配慮がなされており、多くのブラウザに対応できるようになっています。それだけでなく、カスタムビルドツールが用意されていて、自分のオリジナルmatcha.cssを作る事も可能です。 例えば以下のようなHTMLの場合 <nav> <ol> <li><a href="#">Viennoiseries</a></li> <li><a href="#">Tartelettes</a></li> <li><a hr
//html <input type="text" id="text" required> <span id="errorMessage"></span> //js const input = document.getElementById('text'); const errorMessage = document.getElementById('errorMessage'); if (input.checkValidity()) { // 標準のバリデーション機能 errorMessage.textContent = input.validationMessage; // 標準のバリデーションメッセージ } 標準機能を用いたバリデーション なにが嬉しいの？ Web APIにはクライアントのバリデーションに必要な機能が標準でいくつも実装されており、これらを利用することで「自分で書くコード
Revealing Images With CSS Mask Animations — Smashing Magazine
Let’s play with images and experiment with CSS masks. The idea is fairly simple: take a single <img> tag and harness the power of CSS to accomplish complex hover transitions. Through different demos, you will see how CSS masks combined with gradients allow us to create fancy effects — with efficient, reusable code. In a previous article, we explored fancy hover effects for images that involve shin
Franken UI
Home Changelog About Getting Started Introduction Installation Updated JavaScript Updated Web Components New Dark Mode Hooks Theming Typography Accessibility UIkit Components Accordion Alert Align Animation Article Background Badge Breadcrumb Button Card Close Column Comment Container Countdown Cover Description List Divider Dotnav Drop Dropbar Dropdown Dropnav Filter Flex Form Grid Heading Height
A wide range of CSS Generators to build the future of the web. Add your setting, get your CSS code.
はじめに この記事では、受託開発において WordPress テーマを制作する時に、ハイブリッドテーマで構築するための設計・アプローチを提案するものです。 記事タイトルに「受託開発における」と含めた理由は、WordPress テーマディレクトリに公開したり、不特定多数に配布するようなテーマにおいては、この記事のアプローチが必ずしもベストな方法ではないと考えるからです。あくまでも、特定の WordPress サイト (特定のクライアント・エンドユーザー) 向けに最適化したテーマを制作するというシチュエーションにおいての話となります。 ハイブリッドテーマとは ? まず、ハイブリッドテーマ含め、どのようなテーマの形態が存在しているかを、WP Tavern の記事 (Block, FSE, Hybrid, Universal? What Do We Call These New WordPress
Single file components consist of three distinct entities: template, script and styles. All of them are important but the latter is often being neglected even though it can become complex and often cause frustration and bugs. A better understanding can improve code reviews and decrease debugging time. Here are 7 tips to help you with that: Styling Scoped And Slotted ContentScoped Selector Performa
<details name> による排他的アコーディオンの動作デモ（Chrome canary 117） 複数の open 属性の設定 印刷時の考慮 複数の open 属性の設定 § HTML に直接 open 属性が書かれた場合 § 「排他的アコーディオン」なので、複数の名前付き <details> 要素に open 属性を設定することはできません。 <!-- これは NG な事例です --> <section> <h2>フレームの特徴</h2> <details name="frame-characteristics" open=""> <summary>材料</summary> <p>材料は...</p> </details> <!-- ↓ `open` 属性が指定されているが、実際は開かれない --> <details name="frame-characteristics" op
December 20, 2023 ONCE #1 is entirely #nobuild for the front-end The dream has come true. It’s now possible to build fast, modern web applications without transpiling or bundling either JavaScript or CSS. I’ve been working towards this personal nirvana ever since we begrudgingly started transpiling and bundling assets in the late 2000s. Browsers just weren’t good enough back then to avoid it. But
Class Variance Authority CSS-in-TS libraries such as Stitches (opens in a new tab) and Vanilla Extract (opens in a new tab) are fantastic options for building type-safe UI components; taking away all the worries of class names and StyleSheet composition. …but CSS-in-TS (or CSS-in-JS) isn't for everyone. You may need full control over your StyleSheet output. Your job might require you to use a fram
数日前から適用しているのですが、記事ページの最終更新日を調整しました。 元々、JavaScriptとCSSを追加適用して表示させていました。 ブログカスタマイズ【はてなブログ-カスタマイズ】更新日を追加表示するですが最近、はてなブログが「最終更新日の表示」に対応したみたいです。 はてなブログ開発ブログ記事ページに最終更新日が表示されるようになりましたせっかくなので、はてなブログが対応した方に乗り換えることにしました。 ですが簡単にはいかず、自分のブログカスタマイズと干渉してデザインが崩れてしまいました。 今回の記事では、どんなデザイン調整をしたのか書いていこうと思います。 変更内容（画像） 変更前 変更後（設定変更） 変更後（JS削除、CSS修正） 参考サイト コード 削除したコード 修正したコード 修正前 修正後 デザインの適用手順 注意事項 おわりに 関連記事 変更内容（画像） まずは
CHAPTER 1 最初に知っておこう！ Webサイトの基本 CHAPTER 2 Webの基本構造を作る！ HTMLの基本 CHAPTER 3 Webのデザインを作る！ CSSの基本 CHAPTER 4 シングルカラムのWebサイトを制作する CHAPTER 5 ２カラムのWebサイトを制作する CHAPTER 6 タイル型のWebサイトを制作する CHAPTER 7 外部メディアを利用する CHAPTER 8 うまくいかない時の解決方法 カバーイラストはこれまでと同様ICHIRAKU STUDIO様に描いていただきました！今回も素敵なイラストをありがとうございます！ 購入する こんな人におすすめ これからWebサイトを作り始める初心者 HTMLとCSSを基本から学びたい人 美しいデザインのWebサイトを作りたい人 Webサイト制作の最新技術を学びたい人 初心者向けにWebサイト制作を教え
Playing with Infinity in CSS
CSS has an infinity constant. When I first learned about this, my brain lit up with all kinds of absurd possibilities. Let’s discuss! There might even be some practical use cases. No promises, though. Before we get into things, there’s one important ground rule: infinity can only be used inside a calc() statement. Alright, let’s go. Never Lose a z-index Battle AgainHave you ever needed an element
A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view() | Codrops
A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view() With just CSS you can add scroll animations that toggle shadows on navbars, reveal images, add scrollytelling, link up carousel elements and much more. Let’s make a CSS scroll animation! No frameworks, no JavaScript. Connect user interaction with real time scroll interaction feedback; helping transition color, positi
An alternative proposal for CSS masonry | Blog | Chrome for Developers
The Chrome team is keen to see an implementation of masonry type layouts on the web. However, we feel that implementing it as part of the CSS Grid specification as proposed in the recent WebKit post would be a mistake. We also feel that the WebKit post argued against a version of masonry that no one was proposing. Therefore, this post aims to explain why we at Chrome have concerns about implementi
HTML の popover 属性が、すべてのモダンブラウザにおいて正式にサポートされ、足並みがそろいましたので、popover 属性について簡単に紹介します。 先日、Firefox 125 （125.0.1） が正式にリリースされましたが、このバージョンで、HTML の popover 属性、および popovertarget 属性、popovertargetaction 属性、CSS の :popover-open 疑似クラス、::backdrop 疑似要素の popover 対応といった Popover API 関連のサポートが行われました。 Firefox 以外のモダンブラウザではすでにサポートが完了していましたので、これですべてのブラウザで使用できる状態になったといえます。 popover - Can I use... 個人的に画面上に何かしらポップアップして表示するような UI
はじめに この記事は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 前回は、コンポーネントがmarginなどのレイアウトに関わるスタイルを持ってしまうと使いまわすことが難しくなるため、マルチクラスで対応するという「BEM」の「Mix」という書き方をご紹介しました。 今回はそのマルチクラスにおけるもう１つのメリット「詳細度を一定に保つ」というテーマで、そもそも詳細度ってなに？というお話からしていきたいと思います。 前回の振り返り 最初に軽く前回のおさらいをしておきます。 メディアが複数並んでいるレイアウトで、そのメディアコンポーネント自体にmargin-bottomを指定せず、.service-mediaというクラスを付与して、それにmarginを担当させよう、というお話でした。 詳細度について マルチクラス
はじめに 今回は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 とりあえずデザインやデモサイトを見ながらHTML、CSSを使ってコーディングできるけど、これからどのようにレベルアップすれば良いかわからない。 CSS設計って聞いたことあるけど、難しそう... そんな方に読んでいただければと思います。 CSS設計を始めるための目を養う CSS設計において大切な２つの法則があります。 抽象化する 分ける 「抽象化するってなに？」「分けるってなにを？」って感じだと思いますので、よりわかりやすくすると 共通する部分を見つける （パーツの大きさ・役割で）分ける となります。 では、上のことを意識しながら弊社のホームページを眺めてみてください。 共通する部分はわりと見つけやすいのではないでしょうか。 例えばこんなものが挙
My name is Cory Rylan, Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components. Follow @coryrylan With the introduction of the CSS Anchor Position API in Chrome 125, it's never been easier to position an element relative to another element. This is a great way to manage complex positioning use cases like popovers and tooltips. However, CSS Anchor Positition
by Kilian Valkhof published on Dec 02, 2023 Please don't feel antagonised by the title of this article. I don't hate JavaScript, I love it. I write bucketloads of it every single day. But I also love CSS, and I even love JSX HTML. The reason I love all three of these technologies is something called: The rule of least powerIt's one of the core principles of web development and it means that you sh
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How I'm Writing CSS in 2024
CSSだけで実現できるスクロール連動アニメーションの紹介
Tailwind Skeleton Generator
最近好きな『要素が重なっていく表現』を簡単に再現してみた！
Scroll-Driven Animations Debugger (DevTools Extension)
Zennサイトの角丸チューニングによるユーザー体験向上とCSS変数の整理
「Firefox 117」正式版リリース、CSSのネストに対応＆数式のレンダリングスタイルを指定可能に
Izmir - Imagehover CSS Library
アクセシブルでdisabledなButtonコンポーネントを作成
Firefox 121でCSSの関係擬似クラス:has()に対応し、主要ブラウザすべてで使用可能に | gihyo.jp
DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから
Interop 2024 mid-year update | Blog | web.dev
【HTML】フォームバリデーションの実装方法をもう一度見直してみる【生JavaScript】
CSS Generators: Your CSS code with less effort
受託開発におけるハイブリッドテーマ開発 – Aki Hamano
7 Quick Tips about Vue Styles You (Might) Didn’t Know
`<details name>` による排他的アコーディオンの実現
ONCE #1 is entirely #nobuild for the front-end
cva
【はてなブログ-カスタマイズ】記事ページの最終更新日を調整 - みやもとブログ
書籍執筆しました！『改訂版 1冊ですべて身につくHTML & CSSとWebデザイン入門講座』
popover 属性 （含む関連属性） がすべてのモダンブラウザで利用可能に
ホームページを眺めながらCSS設計について学ぼう【詳細度編】 - Qiita
ホームページを眺めながらCSS設計の初歩を学ぼう - Qiita
Flow Charts with CSS Anchor Positioning
You don't need JavaScript for that - HTMHell