CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされていますCSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。 CSSでif～else文を実現するには...記事の続きを読む
これは覚えておきたい！ CSSの:has()疑似クラスを使うと、こんな面倒な実装も簡単なCSSだけできる
CSSの:has()疑似クラスは去年末にFirefoxでサポートされ、これですべてのブラウザにサポートされました。2024年は、:has()疑似クラスを使用する機会が増えますね。 CSSの:has()疑似クラスは指定した要素がある場合にのみスタイルを適用できる、if文のような非常に便利なCSSの機能です。この:has()疑似クラスの基本的な使い方とシンプルだけどクールな使い方を紹介します。 ↔️ Sideway selection in CSS with :has() by Francesco Vetere 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :has()疑似クラスのシンプルでクールな使い方 実装の解説 :has()疑似クラスのシンプルでクールな使い方 みなさん、こんにちわ！👋 この記事では、最近すべてのブラウザに
朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ
CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説
CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。 CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。 Trigonometric functions in CSS by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの三角関数が主要ブラウザにサポートされました CSSの三角関数とは: sin(), cos(), tan() CSSの三角関数とは: asin(), acos(), atan(), atan2() CSSの三
【全ブラウザ対応】CSSコンテナクエリって何？ - Qiita
概要 2023/2/14から全ブラウザで対応になったコンテナクエリについて、 興味を持ってもらうための記事です。 コンテナクエリとは Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics. コンテナー クエリは、ビューポートサイズやその他のデバイス特性に基づいて要素にスタイルを適用するメディア クエリに代わるものです。 引用： CSS Container Queries - CSS: Cascading Style Sheets | MDNより メディアクエリでは、「画面幅」を基準にスタイルの分岐をしていましたが コンテナクエリでは、基準を「親要素のサイズ」に設定す
UAスタイルシートとリセットCSSとは - 2023 - kojika17
以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド
CSSって難しい！ セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む
CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。 :is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません。どんな場合にそうなるのかを紹介します。 たとえば、下記の.a .b .cと.a :is (.b . c)は同じように見えるかもしれませんが、実は異なります。 Using :is() in complex selectors selects more than you might initially think by Bramus CSSの:is()疑似クラスやセレクタの読む順番について詳しくは、以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:wher
html { font-size: 62.5%; } は嫌いだ - デフォルトを変更するのは悪手です - Qiita
font-size: 62.5%;というテクニックがありますよね デフォルト値に手をかけるので、超絶嫌いなテクニックのひとつです なのにですね、あちこちで超見かけるんですよ。 検索かけても「便利！」という言葉がたくさん並んでいるんです。 超嫌いなんですが、いったいどこから湧いたテクニックなのかわからない。 そこで、時間を見つけて調べようと思って、タイトルを書くだけ書いたら1年溶けてました そろそろ廃れる頃合いだと思うのですが、現在Webサイト制作の勉強をしている初学者間では、いまだにメインストリームを歩んでいるっぽいので、流行りに乗り遅れたなあと思いつつ、つらつら調べてみました。 html { font-size: 62.5%; } の概要 フォントサイズをピクセルで指定した場合、ユーザーがブラウザ設定でフォントサイズを変更していてもフォントの大きさは変わりません。 はっきり言ってアクセシ
2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。 Chrome Platform Status CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。 sin() 引数として与えた数のサイン ボックスのサイズ
Tailwind CSS でつくるダークモード切り替えスイッチ
個人的なサイトで使うために作ったものですが、もしかしたら使う人もいるかなということで流用しやすいように整理して公開してみました。Tailwind CSS を使用することで CSS は一切書かずにダークモード対応します。 ソースコードは下記。 burnworks/tailwindcss-dark-mode-switch: Dark Mode/Light Mode switcher with Tailwind CSS 動作デモは下記。 Tailwind CSS Dark Mode Switch Sample Astro で使いやすいようにコンポーネントにしたものと、Pug の Mixin にしたものを参考に入れていますので、使いやすい方を使ってもらえれば。 ソースコード解説 たいして難しいことはやっていないので、ソースコード見ればわかると思いますが、一応使い方含めて簡単に解説。 まず、前提とし
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の100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項
先日リリースされたChrome 108で、CSSの新しいビューポート単位（svh, lvh, dvhなど）がサポートされました。SafariとFirefoxではすでにサポートされていましたが、Chromeでもサポートされたのは朗報です。 この新しいビューポート単位の基本的な使い方と注意事項を紹介します。 The large, small, and dynamic viewport units by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに おさらい: ビューポートとその単位 新しいビューポート単位の必要性 注意事項 リソース はじめに 先日リリースされたChrome 108で、動的なバーがあるスマホのビューポートを考慮したCSSの新しいビューポート単位がサポートされました。SafariとFirefoxではすでにサポート
CSS コンテナクエリの準備はできてる？ 安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました
コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍する新機能です。 そんなコンテナクエリが安定版のブラウザにサポートされ、ポリフィルも大幅にアップデートされたので、基礎知識、基本的な使い方、便利な新単位、ポリフィルの使い方と注意事項を紹介します。 CSSの新機能でネックになるのが、ブラウザのサポート。しかし、CSSの新機能コンテナクエリは、違います。サポートされていないブラウザ用にポリフィルも同時に開発されており、2年くらい前のブラウザでもサポートされています。 Container queries begin to land in stable browsers while the polyfill gets a big update by
"没IE時代" のCSSプロパティが凄い - Qiita
今まで「IE非対応」が壁となり業務での使用を躊躇していたCSSプロパティがいくつもありました。 しかし、ネットや各メディアでも話題になった通り、2022年6月16日、ついにIEのサポートが終了しました（一部OSを除く）。 そこで、IE終了により解き放たれた画期的なCSSプロパティを、個人的メモも兼ねて記載していきたいと思います。 全く新しいレイアウトの形「grid-template」 「grid-template」を初めて知った時は驚きました。 このプロパティを使用すると、以下コードのように視覚的にレイアウトをコントロールすることが可能となります。 See the Pen Untitled by monji (@monji88) on CodePen. これ、かなりやばくないでしょうか？見てわかるようにレイアウトはもちろん、各要素の高さ、幅、marginすらもgrid-templateプロ
IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-emphasisプロパティ text-stroke, text-fill font-variation-settingsプロパティ will-changeプロパティ CSS Grid Layout (level 1) IEでCSS Gridを使用する時の既知の問題 IE 11ではプレフィックス「-ms-」が必要。 異なるプロパティ名（grid-template-columnsと-ms-grid-columns）が存在する。 レイアウトにgrid-rowsが必要。 Chrome, Firefoxとは、グリッドの数え方が異なる。 参考: IEで
CSSの新機能カスケードレイヤーが主要ブラウザにサポートされます、最初に理解しておきたい基礎知識を解説
CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレイヤー化（階層化）でき、これまでのCSSの実装方法が大きく変わるものです。 Chromeのデベロッパーによるカスケードレイヤーの基礎知識を紹介します。 Cascade layers are coming to your browser by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに準じて翻訳しています。 はじめに CSSの詳細度とカスケード @layerの動作 レイヤーの優先順位の管理 インポートファイルの整理 レイヤーとカスケード カスケードレイヤーの注意点 カスケードレイヤーの参考リソース はじめに カスケードレイヤー（@layerC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
