State of CSS 2023
CSS is going through a period of unprecedented progress. Between :has(), container queries, subgrid, and many more, new features are making their way to browsers seemingly every month. The consequence of all this growth is that things can get a bit overwhelming. Thankfully this year we had Chen Hui Jing to help design the survey and guide us through the CSS jungle. And speaking of the survey, did
【はてなブログ-カスタマイズ】囲み枠、目次、蛍光マーカーのデザインをCSSで変更 - みやもとブログ
数日前から適用していますが、「囲み枠」「目次」「蛍光マーカー」のデザインを少し変更してみました。 少し前に見出しのデザインを変更して、それによって他のデザインも気になってきて変更してみた次第です。 関連記事【はてなブログ-カスタマイズ】見出しデザインをCSSで変更 どの変更も色合いを調整したくらいのものですが、せっかくなので変更した内容を書いていこうと思います。 それではサクッと本題へ。 変更内容（画像） 囲み枠 目次 蛍光マーカー 適用したCSS 囲み枠 目次 蛍光マーカー デザインの適用手順 注意事項 おわりに 変更内容（画像） まずは「囲み枠」「目次」「蛍光マーカー」それぞれの変更前後の画像を貼ります。 画像の左側が「変更前」、右側が「変更後」です。 囲み枠 囲み枠囲み枠の変更前は、引用と同じグレー背景でした。 ちょっとデザイン的に似ているなと思い、別の色に変更したくなりました。 囲
Useful CSS Tips And Techniques — Smashing Magazine
The times for CSS have probably never been more exciting than today. In this quick read, we’ve got some useful CSS tips and techniques for you that you can apply to your work right away. Let’s dive deeper into self-modifying CSS variables, hanging punctuation, and more. If you’ve been in the web development game for longer, you might recall the days when CSS was utterly confusing and you had to co
Most designers are familiar with responsive design, a column-based layout approach with fixed breakpoints to cover all screen sizes. However, we can move beyond the rigid structure with modern CSS layouts, crafting flexible and dynamic designs that seamlessly adjust to different screen sizes. Designers and developers having different mental models when discussing layout, especially grid, leads to
HTML+CSSでPhotoshop風選択範囲のアニメーションを再現しようとしたら凄く面倒くさかった - Qiita
ことの発端 先日、息子からの夏休みの宿題として個人でアイロンビーズエディタ(IBE)というのを開発しました。 今回はその時に実装しようとした選択範囲のUI/UX(↓こんなの)を再現する話です。 実物を触って見てもらった方が良いと思いますので、こちらに用意しています。 開発秘話的なものはnoteに記載しているので省略しますが、一言で言えばペイントツールにありがちな「選択範囲」と「コピペ」を実装しようと思ったからです。 エクセルやAdobeのphotoshop的なUI/UXにしたい。 言うまでもありませんが、後発のツールのUI/UXは他のツールからの影響を多大に受けます。 簡単なもので言うと、多くのアプリケーションがCtrl(Command)+ZでUndoを実装していたり、Ctrl+Cでコピーできるのは当たり前の世界になっています。 そのスタンダードなUI/UXの1つに「選択範囲」を示すものが
CSS Values and Units Module Level 5 の Editor's Draft を眺めていて気になった、ランダムな値を生成するための random() と random-item() 関数について簡単に紹介してみます。 昨日、CSS Values and Units Module Level 5 (Editor's Draft) が更新されたのに気がついたんですけども、今ってどんな内容になってんの...... と思いつつなんとなく眺めてたら、ランダムな値を生成するための random() と random-item() 関数ってのが入ってました。 Editor's Draft （編集者草案） ってのは、W3C の仕様策定プロセスにおいてはまだ非公式、非承認のドキュメントですから、あまりここに書いてある内容を Web 標準仕様になるとか、ブラウザの実装が進む前提で話
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
It’s Time To Talk About “CSS5” — Smashing Magazine
Have you ever wondered what happened after CSS3? It’s common knowledge that we never saw CSS4 come after it, yet we have a plethora of new features that have no similar way of defining when they were introduced. The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3
@property: 次世代の CSS 変数にユニバーサル ブラウザのサポートを追加 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 CSS パワーアップの準備をしよう@property ルールは、CSS Houdini API の包括的な機能の一部であり、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、CSS カスタム プロパティ（CSS 変数）の制御性と柔軟性が高まり、スタイルシートがよりスマートで動的なものになります。 @property のメリット セマンティックな意味: @property を使用して、カスタム プロパティの型（構文）を定義します。これにより、カスタム プロパティが保持するデータの種類（色、長さ、数値など）をブラウザに伝えることで、予期しない結果を防ぎ、グラデーションのアニメーションなどの新たな
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
Most days, I’m writing vanilla CSS. Thanks to CSS variables and nesting, I have fewer reasons to reach for Sass or any other preprocessor. The times I reach for Sass tend to be when I need a @mixin to loop through a list of items or help keep common styles DRY. That could change for me in the not-so-distant future since a new CSS Functions and Mixins Module draft was published in late June after t
「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 さん
2009年、JavaScriptの会社として株式会社ピクセルグリッドを設立。 多数のWebリニューアル、新規立ち上げを取り仕切った経験を持ち、情報設計、フロントエンド、クラウド活用、開発フローの効率化を得意とする。 Webをより発展させるため、新しくブラウザに実装された機能の活用事例を数多く生み出しつつ、日々、クラウドサービスを利用した効率のよい制作・開発手法の試行錯誤を続けている。現在の興味はWeb Componentsを使ったマークアップの改善とJamstack。 著書に『WebクリエイティブのためのDOM Scripting』（単著：毎日コミュニケーションズ、2007年）など。ここ数年は書籍の執筆をせず、フロントエンド技術情報メディア「CodeGrid」で精力的に執筆活動を行っている。
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"要素のスタイルを記述 */
NotionページをChrome拡張機能「Stylus」でデザイン変更（CSS適用）する - みやもとブログ
今回はNotionページのデザイン変更（CSS適用）に関して書いていきます。 なお、NotionページにCSS適用するためにChrome拡張機能「Stylus」を使用します。 CSS適用するのは「見出し1～3」「引用ブロック」等です。 以前もNotion見出しデザイン案の記事を書いたのですが、これはNotionの機能の範囲内で背景色を変更したり文字色を変更したりする方法でした。 関連記事【6案】Notionの見出しデザイン案（区切り線/背景色/文字色/コード/絵文字） 上記の記事ではCSS適用しているわけではないため、見出しの数だけ毎回デザイン適用の設定をしなければならず、けっこう手間でした。 今回の対応ではCSSさえ書ければ、それ以降は手間がないので今回の対応の方が便利に感じる人も多いかなと思います。 それでは本題へ。 変更前後（画像） 変更前 変更後 参考リンク 適用したCSS Chr
こんにちはです。あっちのそららです。 今回は、HTMLとCSS（ウェブ制作などで使う言語）で、太陽を描画してみました。 「Result」で確認できます（レスポンシブ対応済）。 静止画だとシンプルすぎて味気なかったので、遊び心でアニメーションも加えました。 ギザギザ部分は、複数の正方形をつなげて再現。円周上に並べるため、三角関数を使用したので、ざっくり解説します。 正方形を描画する spanタグで正方形を作ります。数が多いほどギザギザが細かくなりますが、見た目のバランスと計算のしやすさを考慮し、今回は10個としました。 <span style="--i: 0;"></span> <span style="--i: 1;"></span> <span style="--i: 2;"></span> <span style="--i: 3;"></span> <span style="--i:
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を書けるように
The CSS Custom Highlight API provides a mechanism for styling arbitrary text ranges on a document by using JavaScript to create the ranges, and CSS to style them. Styling text ranges on a webpage can be very useful. For example, text editing web apps highlight spelling or grammar errors, and code editors highlight syntax errors. The CSS Custom Highlight API extends the concept of other highlight p
最近のGoogle広告にはブログの本文の途中に差し込まれるものがあり、記事と広告の区別がわかりづらいことがある。PCからの閲覧時に広告が目立つよう、下のようなCSSをしつらえた。 div.entry-content div.google-auto-placed.ap_container { margin: 4em 0; /* 広告と本文との上下間隔を広くとる */ padding: 2em 0; /* 広告の上下に広告領域の背景色が見える場所を作る */ background-color: rgb(0 0 0 / 0.1); /* 背景色の指定。透明度10%の黒 */ border-radius: 5em; /* 背景色の領域に大きめのRをつけて目立たせる */ } これが こんな感じになる（画像処理ソフトで制作したイメージです） 広告と本文がよりはっきり分離されて、だいぶわかりやすくなっ
DOMDOMトークス #1 about me Pasta-K / @pastak 京都で主にJavaScriptを書いて暮らしています 京都サンガF.C.サポーター Kyoto.jsオーガナイザー Kyoto.js 21の宣伝 https://kyotojs.connpass.com/event/311584/ イタリアのローマのJavaScriptコミュニティRomaJSよりコミュニティマネージャーをされているMatteo Manchiさんが京都に旅行に来られるそうなので、それに合わせて開催します！！！！！MatteoさんにはReact NativeについてとRomaJSやイタリアにおけるJavaScriptコミュニティについてトークをして頂きます！ 良ければ、東京にお住まいの皆さんも観光がてらどうぞ 3月13日なので、まだ桜とか咲いてなくて(桜の時期などのハイシーズンと比べると)空いて
A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains. New feature fatigue Permalink to “New feature fatigue” #Right now, we’re in the middle of a real renai-css-ance (the C is silent). It’s a great time to write CSS, but it can also feel overwhelm
Hi folks! 👋 Today I would like to share with you this codepen I created in order to showcase a simple but really cool use for the recently introduced :has() selector. If you hover with your mouse over any of the emojis, you'll notice that not only the hovered emoji smoothly pops up, but its previous and next siblings also get affected a little bit, creating a very pleasant effect. This cool effec
Tailwind CSSを使用しておしゃれなウェブサイトを素早く開発する方法 開発者として経験を積んでいくと、少ないコードで、より多くのことを実行できる技術を使用したいと思うようになるもの。Tailwind CSSのような強固なフロントエンドフレームワークは、そんな開発者の望みをかなえる存在です。 この記事では、ウェブページの構築とデザインを支援するCSSフレームワーク、Tailwind CSSについて学びます。Tailwind CSSのインストール方法や、プロジェクトへの統合方法、そしていくつかの実用的なアプリケーションもご紹介します。また、カスタムスタイルやプラグインの作り方についても見ていきましょう。 Tailwind CSSを使ってサイトを構築する方法について、動画での解説もご用意しています Tailwind CSSとは Tailwind CSS Tailwind CSSは、ユーテ
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
The Easiest way to generate your CSS Code A wide range of CSS generators to make your developer's life easier! Get an optimized code with modern CSS in no time. Custom Borders Custom Corners Section Divider Triangle Shapes Starburst Shapes Polygon Shapes Wavy Shapes Flower Shapes Wavy Circle Ribbon Shapes Tooltips/Speech Bubbles Gradient Shadows CSS Shape CSS Pattern CSS Loaders
FigmaからコピペでWebサイトが完成！ HTMLもCSSも書かないノーコードツール「STUDIO」がスゴすぎる（Web担当者Forum） - Yahoo!ニュース
直感的なUIと高い表現力を強みとする、ノーコードWeb制作プラットフォーム「STUDIO（スタジオ）」。2018年のリリース以来、ユーザー数は35万人※を超え、2022年12月には米国に子会社を設立するなど、いま勢いにのっているサービスだ。 2023年8月には、デザインツールの「Figma」で制作したデザインをSTUDIOにインポートできる新機能「Figma to STUDIO （Beta）」をリリース。操作は、Figmaでデザインをコピーして、STUDIOにペーストするだけ。Figmaユーザーにとっては大幅に時短が叶うとあり、X（旧 Twitter）を中心に話題を集めている。 STUDIOのオフィスを訪れ、新機能の概要と今後の展望について代表取締役CEOの石井穣氏に話を聞いた。 ※2023年9月現在 Web制作の「面倒の解消」と「高い表現力」を両立したノーコードツールSTUDIOは、HT
今回のTechFeed Experts Nightは、「Web標準技術最前線 ー HTML/CSS/JSの「いま」」がテーマです。 プログラミングのエキスパートたちが、HTML/CSS/JSのトレンドからマニアックまで12分間のLTに凝縮！それらをネタに、エキスパートたちが語り合う！ エキスパートも、エキスパートを目指す方々も、楽しめること必至の60分！ セッション開始通知機能もあるので、見たいところだけ見れる！ さあ、技術をネタに盛り上がろう！🍻 TechFeed ❤ Developers & Communities
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サイト制作を教え
現在の私のObsidianの見た目ぼくがかんがえた最強のObsidian設定 という前回の記事がそこそこウケたので、二匹目の泥鰌というわけではないですがあれから色々いじった部分等を徒然話していきたいと思います。 有用なプラグイン最近台頭してきた優秀なプラグインを紹介していきます。 2Hop Links PlusScrapboxであるような二段階バックリンクを実現します。Plusじゃないバージョンの方はバグり散らかしていたのですが、こっちは問題なく動作するため大変便利です。 まるでローカルのScrapbox！File Indicatorsアイコン追加系プラグインの一種ですが、個人的にはすべてのアイコンプラグインを過去にしたと思っています。なぜか。 1. 軽い プラグインフォルダで容量を確認すればわかるが、圧倒的に軽い。90kb以下 参考までにobsidian-icon-folderはmain
HSL: An Intuitive Way to Represent Color in CSS - Help Scout
When writing CSS, the most common formats we use for expressing a color are either a hex code or an RGB value. But are they the best way? Learn to see color as an artist with HSL.Read the full article
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
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
CSS has been undergoing a quiet renaissance lately. Lots of big features which previously required an external tool to use, are now native parts of the language, and its growing more and more all the time. If you haven't used CSS in a long time, for whatever reason, now is the time to take a look again. Brief history, and how CSS became "not-fun"Back in the late 90s, we styled our websites using i
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更（4回目） - みやもとブログ
この記事は移転しました。約2秒後に新記事へ移動します。 移動しない場合は以下をクリックしてください。 miya-moto-memo.hatenablog.com
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
はじめに 今回は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 とりあえずデザインやデモサイトを見ながらHTML、CSSを使ってコーディングできるけど、これからどのようにレベルアップすれば良いかわからない。 CSS設計って聞いたことあるけど、難しそう... そんな方に読んでいただければと思います。 CSS設計を始めるための目を養う CSS設計において大切な２つの法則があります。 抽象化する 分ける 「抽象化するってなに？」「分けるってなにを？」って感じだと思いますので、よりわかりやすくすると 共通する部分を見つける （パーツの大きさ・役割で）分ける となります。 では、上のことを意識しながら弊社のホームページを眺めてみてください。 共通する部分はわりと見つけやすいのではないでしょうか。 例えばこんなものが挙
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why UI designers should understand Flexbox and CSS Grid
CSS Values and Units Module Level 5 に追加された random() 関数が面白そう
How I'm Writing CSS in 2024
@property: 次世代の CSS 変数にユニバーサル ブラウザのサポートを追加 | Blog | web.dev
「Google Chrome 125」が正式リリース ～ゼロデイ脆弱性を修正／HTML要素の配置指定で役立つ「CSS Anchor Positioning」などの開発者機能に対応
CSS Functions And Mixins Module Notes | CSS-Tricks
行く2023年、来る2024年 | 中編 HTML/CSSの新しい機能とこれからの実装
Zennサイトの角丸チューニングによるユーザー体験向上とCSS変数の整理
「Firefox 117」正式版リリース、CSSのネストに対応＆数式のレンダリングスタイルを指定可能に
【CSSイラスト】三角関数で太陽を描いてみた - そららのクリエイティブログ
Firefox 121でCSSの関係擬似クラス:has()に対応し、主要ブラウザすべてで使用可能に | gihyo.jp
CSS Custom Highlight API - Web APIs | MDN
はてなブログの本文中に差し込まれる広告を見分けやすくするCSS - ただいま村
フルページスクリーンショットとDOMとCSSと - pastak-pub
Old Dogs, new CSS Tricks
↔️ Sideway selection in CSS with :has()
Tailwind CSSを使用しておしゃれなウェブサイトを素早く開発する方法
CSS Generators: Your CSS code with less effort
TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」
書籍執筆しました！『改訂版 1冊ですべて身につくHTML & CSSとWebデザイン入門講座』
【2024年2月】Obsidianの便利なプラグイン・CSS｜古村藍
CSS is fun again • pdx.su
Flow Charts with CSS Anchor Positioning
ホームページを眺めながらCSS設計の初歩を学ぼう - Qiita