最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選
この記事では、2024〜2025年にかけて主要ブラウザで使えるようになったCSS（一部HTML）の機能を10個紹介します。「昔はセレクターとか頑張って追いかけてたけど、最近は全然追えてない」という方を対象としています。 それぞれの機能について、目的・できること・昔のやり方・注意点をまとめました。コードを見ながら「こんなの使えるようになったのか」と感じてもらえたら嬉しいです。 1. CSS Nesting（ネイティブCSSネスト） 目的 SassやLESSなどのプリプロセッサなしで、CSSにネスト（入れ子）構造を書けるようにすることです。 できること セレクターを親子関係で入れ子にして記述できます。& を使って親セレクターを参照します。 .card { padding: 1rem; background: #fff; & .title { font-size: 1.25rem; font-w
CSSのアンカーポジショニング（Anchor Positioning）でマグネットのようにくっつくエフェクトを実装するテクニック
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。アンカーポジショニング（Anchor Positioning）を使用すると、レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Sli
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp
2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 一般的には、デザインシステムとは一貫したデザインや操作性でWebサイトやアプリケーションを提供するためのガイドラインの集まりと理解されます。使われ得る色のパレットや可能なスペー
I don't want to do front-end anymore
I started coding when I was 14, around 2007 or so. The very first thing I wrote was HTML, then CSS. I liked making stupid little web pages containing youtube embeds and guest books (anyone remembers those?) full of marquees, blinks and gifs. Lots of gifs. The pages were very simple, but joyful to make and also to use. At the time I had no idea that you could make any money with making web pages, I
私のゴールは世界中の言語でCSSを使えるようにすること EPUB3で縦書きを実現した、fantasai（エリカ・エテマッド）に聞く
はじめに この原稿は2013年に8割ほど書いたまま放置していたものを、Advanced Publishing Laboratory（APL）の「fantasaiの業績を日本でも知ってもらいたい」という意志に促され、サルベージして完成させたものです。したがって文中の「現在」は2013年中頃であることをお断りします。 原稿を放置したまま今日に至ったのは、私の怠慢以外に理由はありません。取材を受けてくださったfantasai、通訳をはじめ、さまざまな便宜を図ってくださった村上真雄・由美ご夫妻には、大変なご迷惑をおかけしたことを改めて深くお詫び致します。 このような中途半端な原稿ですが、多少なりとも読めるものになっているとすれば、それはfantasaiの努力や達成が本物だったからではないでしょうか。そのことをお伝えできれば良いのですが。（2018年9月5日 筆者識） ▼EPUB 3における陰の
edit#slide=id.g25ae9c179b_0_144
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
Is it possible to apply CSS to half of a character?
What I am looking for: A way to style one HALF of a character. (In this case, half the letter being transparent) What I have currently searched for and tried (With no luck): Methods for styling half of a character/letter Styling part of a character with CSS or JavaScript Apply CSS to 50% of a character Below is an example of what I am trying to obtain. Does a CSS or JavaScript solution exist for t
CSS3での日本語縦中横を考える - ちくちく日記
【問題】 日本語縦組で文字が縦中横されたとき、組まれた文字の文字幅はどうなっているのが正解か A. 1文字の幅（1em）に納める B. 何もせずそのままの幅にしておく ▲（左）A. 1文字の幅（1em）に納める （右）B. 何もせずそのままの幅にしておく 何の話をしているのかというと、これ、、CSS Writing Modes Level3で定義される日本語縦組での縦中横の処理の話である。 先日、村上さん、小形さんお二人の呼びかけで「fantasai（ファンタサイ）さんを囲む夕べ」という飲み会が開催されました。 W3C CSSWG Tokyo F2Fのため来日中のfantasai twitter.com/fantasai/statu… を囲む夕食会を来週に計画してます。興味ある方は私にDMください。— 村上真雄 MURAKAMI Shinyuさん (@MurakamiShinyu) 201
「CSS3でドラえもん」はスゴイけれど……
1． 画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなブックマークニュース 画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD CSS3 ドラえもん 画像を一切使わないCSS3で製作した新サイト「NetaGear」！ - 裏技shop DD NetaGear 「すごい」と思う。そのアイデアにも技術にも感心する。ただ私は、本題から外れたところで、ちょっと違うことを考える。 2． IEは非推奨です。IEでも一応閲覧は可能ですがGoogle Chrome、firefox、Operaのようなデザインでは表示できません。 ここで今IEを使っている人に言いたい！ そのブラウザを使うのをさっさとやめてくれ。あれはWeb業界の足を引っ張りまくっているお荷物なんだ！ もうIEとかネタでしかないし、早く滅びればいいのにｗ 昔からいっているのだけれども
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年のモダンCSS改
「CSSで縦書き」の普及を促進する「たてよこWebアワード」の受賞作発表、和風な「縦書きWebサイト」を表彰 
zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting