Web制作者は要チェック！ Chrome 133で新しく追加された7つのCSSの機能

2025/02/18 9 users attr 要チェック WEB制作者 コンテナクエリ 機能

Chrome 133で追加された、CSSの新しい機能7つを紹介します。 今回のアップデートで目玉となるのはattr()関数のパワーアップ、新しい疑似クラス:open、スクロール状態のコンテナクエリ、テキストの垂直方向の整形を細かく制御できるtext-box-trimなど、Web制作者は要チェックです！ 【注意】Chrome 133は2/5にリリースさ... 続きを読む

これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック

2025/02/13 17 users モダンCSS CSS Grid レイアウト テクニック 中央

フルブリードレイアウトとは最近のWebサイトのUIでもよく見かける、記事は中央配置に、画像や動画などは幅いっぱいに表示されるレイアウトのことです。これまではCSS Gridなどで実装されていたと思いますが、今回紹介するのはモダンCSSで実装できるテクニック。 CSSはわずか4行ですが、モダンCSSのテクニックがたくさん... 続きを読む

負債になりにくいCSSをデザイナとつくるには？

2025/02/12 12 users Event デザイナ 負債 登壇資料 connpass.com

#Offers_DeepDive 「CSS設計完全ガイド／Tailwind-CSS実践入門著者に聞く 負債にならないCSSの書き方とは（2025年2月12日）」での登壇資料です。 https://offers-jp.connpass.com/event/342125/ 続きを読む

CSSによる「スタイリング」コントロールの苦悩と変遷

2025/02/12 7 users 苦悩 変遷 スタイリング 負債 コントロール

2025/02/12にオンラインにて開催された「CSS設計完全ガイド／Tailwind-CSS実践入門著者に聞く 負債にならないCSSの書き方とは」のセミナーにて、LTとして発表した内容の資料です。 CSSの始まりから、現代のスコープ付きコンポーネント環境に至るまでの変遷、パラダイムシフトとなったタイミングをざっくりまとめています。 続きを読む

Web制作者は要チェック！ 2025年、Webサイトやスマホアプリの実装に役立つモダンCSSのスニペットのまとめ

2025/02/06 11 users モダンCSS スニペット 実装 スマホアプリ 要チェック

Google Chromeの開発マネージャーであり、The CSS Working Groupのメンバーでもあり、VisBugやOpenPropsなどの開発者でもあるAdam Argyle氏による、2025年のUI/UX案件に役立つCSSのスニペットを紹介します。 一手間加えてCSSアニメーションを気持ちよく動かすスニペット、大きく進化したCSS変数の効果的な使い方、簡単に... 続きを読む

HTMLとCSSでつくる!　1文字ずつ変化するテキストのアニメーション - ICS MEDIA

2025/01/31 5 users ICS MEDIA ヘッダー アニメーション HTML 前回

前回、以下の記事でリンクテキストをホバーした際のアニメーション実装例をご紹介しました。 『HTMLとCSSでつくる！　リンクテキストのホバー時アニメーション11選』 さて、今回は少しだけ複雑になりますが、HTMLとCSSのみでより凝った表現をする方法を紹介します。 リンクテキストといえば、ヘッダーなどのメニューとし... 続きを読む

こんなやり方があったとは！ 境界線付きのボックスのスタイルを任意の要素に実装できるCSS -fieldset-legend.css

2025/01/30 5 users Legend fieldset ボックス 要素 ボーダー

フォーム要素のグループ化で使用されるfieldsetの境界線付きボックスとlegendの見出しを任意の要素に実装できるCSSを紹介します。 divやarticleを境界線付きボックスにし、h1を見出しにして下記のように実装できます。見出しで欠ける境界線は自動的にクリッピングされ、ボーダーも自由にスタイルできます。 fieldset-leg... 続きを読む

CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります

2025/01/28 8 users attr Data キャプション href title

CSSのattr()関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、hrefに記述した値をリンクとして表示したり、titleに記述した値を画像のキャプションとして表示したり、data-でさまざまな値を表示することができます。 このattr()関数がよりパワーアップします。 これまではcontentプロパティだ... 続きを読む

HTML Living StandardとモダンCSSに完全対応！ 使いやすくて見やすい、期待以上のリファレンス本 -HTML＆CSS全事典改訂4版

2025/01/24 14 users モダンCSS リファレンス本 プロパティ 補足 本書

※本ページは、アフィリエイト広告を利用しています。 本書の改訂版がでるのを待っていた人も多いと思います。私もその一人です。 前書から2年が経ち、その間にも多くのHTMLの要素やCSSのプロパティが増え、この改訂4版では100種類以上の項目が追加されています。 本書はHTMLとCSSのリファレンス本としてだけでなく、補足... 続きを読む

Web制作者は要チェック！ Chrome 132で新しく追加されたCSSとHTMLの3つの新機能

2025/01/21 13 users HTML dialog要素 縦書き ダイアログ 要チェック

Chrome 132で追加された、CSSとHTMLの新しい機能3つを紹介します。 今回のアップデートで、dialog要素の開閉トグルイベントを取得できるようになります。これによりダイアログが表示されているのかどうか簡単に判定できます。ほかにもCSSによる縦書き、Anchor Positioningなど、Web制作者は要チェックです！ New in Chro... 続きを読む

ドラッグでリサイズするUIを実装するときに設定したいCSS

2025/01/06 12 users 挙動 ドラッグ マウス テキスト 実装例

例えばサイドバーの幅をドラッグで調整できるUIを実装した時、以下のような症状に遭遇したことはありませんか？ ドラッグ中になんか引っかかる・スムースに反応しない マウスのボタンを離してもドラッグ中判定のままになってしまう ドラッグ中にテキストが選択されてしまう 僕はあります。 挙動が微妙な実装例 以下は上... 続きを読む

なぜ今さら、Web 標準 なのか【2025 年】 - Qiita

2025/01/04 6 users Qiita hono Remix フレームワーク HTML

2020 年代に入り、Remix や Hono といったモダンな Web フレームワークが「Web 標準」を掲げるようになりました。HTML、CSS、JavaScript といった基盤技術は 1990 年代から存在しているのにも関わらず、なぜ 30 年を経た今、 Web 標準が再び注目を集めているのでしょうか？ Web 標準について解説している記事はたくさん... 続きを読む

alt 属性完全解説 - Master of Alternative Text

2024/12/19 10 users Alt アクセシビリティ 属性 文書 HTML

キーワード：alt 属性, 代替テキスト, マシンリーダビリティ, Web アクセシビリティ, 支援技術, スクリーンリーダー この文書は、2024年12月17日に私 @debiru_R によって記述されました。私は2000年頃より HTML, CSS を研究し始めましたが、2013年頃から MDN Web Docs（旧 Mozilla Developer Network）の日本語訳コント... 続きを読む

2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ

2024/12/19 118 users GitHub WEB制作者 一行 まとめ 新機能

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳し... 続きを読む

これがCSSだけで実装できるとはすごすぎる！ 窓から差し込む柔らかな日差しを実装 -sunlit

2024/12/18 15 users サッシ アニメーション シルエット スゴ技 観葉植物

CSSのスゴ技を見つけたので、紹介します。 画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエッ...記事の続きを読む 続きを読む

CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる

2024/12/10 16 users 100vh 単位 バーチャルキーボード 期待通り これら

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。 このバーチャルキーボード表示時に頭を... 続きを読む

UI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit

2024/12/05 10 users 線形 Orbit グリッドベース レイアウト 従来

ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。 Orbit Orbit -GitHub Orbitの特徴 Orbitのデモ Or... 続きを読む

【2025年版】ReactとVue.jsどちらを選ぶべきか？【アドベントカレンダー2025】 - Qiita

2024/11/30 184 users Qiita React getter Vue.js HTML

TL;DR Vue.jsはHTMLをJavaScriptの中に書かなくて済むので、可読性が高いです Vue.jsは双方向バインディングをサポートしており、Reactみたいなsetter/getterみたいな無駄な作業は必要ありません Vue.jsはHTMLとCSSとJavaScriptを分けて記述することができるため、どこを修正すればいいか直感的です ReactはJSX内で{}と(... 続きを読む

Tailwind CSS v4 で導入される CSS First Configurations

2024/11/30 72 users テーマ 設定 ファイル内 変更点

Tailwind CSS v4 で導入される CSS First Configurations 2024.11.30 Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで `tailwind.config.js` で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。 続きを読む

イマのCSSでできる
インタラクション最前線 + CSS最新情報

2024/11/23 183 users イマ

クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website 続きを読む

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

2024/11/21 249 users width Calc マージン かなり 左右

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能な... 続きを読む

Web制作者は要チェック！ Chrome 131で新しく追加された8つのCSSの機能

2024/11/14 14 users アコーディオン 要チェック WEB制作者 機能 アップデート

Chrome 131で追加された、CSSの新しい機能8つを紹介します。 今回のアップデートでは、CSSのハイライト継承が変更されたり、details要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを使用した印刷レイアウトが簡単になるなど、Web制作者は要チェックです！ New in Chrome 131 Chrome 131 beta 下... 続きを読む

CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

2024/11/12 18 users デベロッパーツール デバッグ AIアシスタント 検証

CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。 5 Cool Things To Do with DevTools AI Assistance AI assistance panel AI assistance fo... 続きを読む

2024年、CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証環境など

2024/11/07 15 users フレームワーク プロパティ エバーグリーン 疑似クラス 現状

CSSの進化は速く、IEのサポートが終了してさらに速くなりました。現在はエバーグリーンのブラウザ（最新版に自動アップデートするブラウザ）となり、モダンCSSの新機能が今までよりもすぐに使用できるようになっています。 2024年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2024」を紹介します。今年は例... 続きを読む

CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA

2024/11/06 132 users 文節 ICS MEDIA 活用術

ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れた... 続きを読む