CSS ラップ: 2023 年 | Blog | Chrome for Developers
効果がありました。2023 年は CSS にとって大きな年でした。 #Interop2023 から、CSS や UI の領域に多数の新しい要素が登場し、かつてはウェブ プラットフォームで不可能だと考えられていた機能を実現しています。現在では、すべての最新のブラウザがコンテナクエリ、サブグリッド、:has() セレクタのほか、多数の新しい色空間と関数をサポートしています。Chrome では、CSS のみのスクロールドリブン アニメーションがサポートされており、ビュー遷移を使用してウェブビュー間をスムーズにアニメーション化できます。さらに、CSS のネストやスコープ スタイルなど、デベロッパー エクスペリエンスを向上させるための新しいプリミティブが数多く導入されています。 今年はどんな 1 年になりますか？そして、ブラウザ デベロッパーとウェブ コミュニティの皆様の多大な努力を称え、称えるとと
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
CSSの:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。 たとえば、子に画像がある場合とない場合、子の数が奇数の場合と偶数の場合、セレクタを追加したり変更することなく指定できます。また、コンテンツやフォームなどにも便利な使い方がたくさんあります。 :has(): the family selector by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 先日リリースされたChrome 105, Edge 105で:has()疑似クラスはサポートされ、コンテナクエリ（@containe
CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選 これまでの苦労が嘘のよう。新テクニックでデザインに差をつけよう 2022年は、CSSにとって過去最高の年になりました。 安定版ブラウザで、多くの新しいCSSプロパティやセレクタなどが対応となり、これまでは実装にJavaScriptなどが必要だったものも、CSSのみで表現できるようになっています。 ここでは、知っておくと便利な最新CSSテクニックや書き方をまとめてご紹介します。 「CSSって、こんなこともできるの?!」と思わず納得してしまう、驚きテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次 1. コンテナクエリ @container が全ブラウザ対応 2. CSSスタイルクエリの基本と具体サンプル例 3. グラデーション付き影のつくり方 4. どんな背景でも美しい影のつくり方 5.
2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ 2022年現在、CSSの使用状況を調査した「The State of CSS 2022」を紹介します。 The State of CSS 2022 The State of CSS 2022は、State of CSSでおこなわれたアンケートの調査結果（14,310人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は24-44才が多く、性別は男性が多めです。
これは便利で簡単！ モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons
Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。 100 Modern CSS Buttons 100 Modern CSS Buttons -GitHub 100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。 ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソース
最近のWebサイトで見かける！ フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ
最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9
CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components
<!-- Carousel --> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio"
CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ
2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。
2018年最新版！手軽なのにユニークなCSSフレームワーク4選
CSSは、標準規格でもさまざまなことが行えるようになりました。最近では*「The best CSS framework is NO framework.」(一番のCSSフレームワークはフレームワークを使わないことだ)*という言葉さえ生まれているほどです。 確かに、レスポンシブ対応にしたり、簡単な設定を行うだけであれば、標準のCSSで設定してしまうほうがかえって楽なのかもしれません。言い換えれば、レスポンシブ対応で、とっても簡単だと、同じような特徴ばかりのCSSフレームワークは淘汰されていくことになるでしょう。 そこで今回は、手軽なのにユニークでやたらと便利なCSSフレームワーク5選をご紹介します。使うべき必然性が見つかる、ユニークなフレームワークばかりなので、ぜひ利用を検討してみましょう。 手軽なのにやたらと便利なCSSフレームワーク5選 1. これ以上ないほどに超軽量「lit」 http
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
超便利！確認しておきたい最新CSSツール、リソースガイド 2017年度
トレンドの変化やCSSの進化によって、最近は大量のツールや便利なリソースが公開されるようになりました。 この記事では、2017年これまでにリリースされた便利CSSツールやリソースをカテゴリごとにまとめてご紹介します。 制作時間の節約にもなるCSSライブラリとツールは、より手軽に利用できるだけでなく、Flexbox や CSS Grid といったまだ完全に理解していないCSSプロパティを習得するのにも最適といえるでしょう。 【2016年版】ウェブ制作を快適にする、知っておきたい無料オンラインツール50選 デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度 コンテンツ目次 1. CSS Flexbox ツール＆ライブラリ 2. CSS Grid ツール＆ライブラリ 3. CSSコンポーネント 4. CSS アニメーションツール＆ライブラリ 5. CSSリファレンス、ガイド＆
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年に見かけたモダンなCSSの書き方を振り返る
「出会えたことに感謝したいCSSベスト3」まとめ
オンラインで、いろいろなブラウザのチェックができるサイト集 | コリス
有料ソフトとデザイン作業を無力化させる30のブックマークまとめ*ホームページを作る人のネタ帳
TableとCSSいろいろ - DesignWalker
サイトでグラフを使いたい時に使えるまとめ - DesignWalker