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

2024/02/27 9 users CSS デフォルト 既存 仕様 要チェック

Chrome 122に追加された、CSSの新しい機能3つを紹介します。 今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能はデフォルトで、有効になっています。 Chrome 122 beta New in Chrome 122 下記は各ポイントを意訳したものです。 ※元... 続きを読む

CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しいプロパティ「light-dark()」が便利すぎる！

2023/10/31 11 users light-dark CCC CSS ダークモード 関数

CSS Color Module Level 5に追加された新しいプロパティlight-dark()関数を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark M... 続きを読む

CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更

2023/10/10 149 users content textarea CSS フォーム 文字量

今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-h... 続きを読む

CSSの数学関数min()、max()、clamp()の基本的な使い方

2021/11/04 162 users CLAMP Calc font-size ＭＡＸ min

IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。 数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な... 続きを読む

シンプルで軽量！ 新しいCSSリセット「The New CSS Reset」を作成したElad Shechterにインタビュー

2021/10/28 11 users 新しいCSSリセット where インタビュー not CSS

CSSの新しい機能:where()や:not()、allプロパティやunset値やrevert値などを使用したCSSリセット「The New CSS Reset」の特徴や機能の解説などを作成したElad Shechterに聞いたインタビューを紹介します。 CSSリセットの考え方や現在の扱い方、新しいプロパティや値の使い方・注意点、CSSの記述方法、box-sizingやlist-s... 続きを読む

CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる | コリス

2021/08/26 17 users プログレスバー コリス CSS ライ フォーム要素

フォーム要素のチェックボックス・ラジオボタン・レンジスライダー・プログレスバーのカラーを簡単に変更できるCSSの新しいプロパティ「accent-color」の基礎知識と使い方を紹介します。 CSS accent-color by Adam Argyle, Joey Arhar 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライ... 続きを読む

最近使いたいCSSの新しいプロパティが増えてきた！サポートしていないブラウザへの対応方法を解説 | コリス

2021/03/11 33 users ネック いわゆ コリス CSS 新しい機能

CSSの新しいプロパティがブラウザでサポートされると、使いたくなりますが、その時ネックになるのがサポートしていないブラウザへの対応方法です。 サポートしているブラウザにはその新しい機能を、サポートしていないブラウザには理想的ではないけれど情報をしっかり提供できるように実装する方法を紹介します。 いわゆ... 続きを読む

これは使わないと！レンダリングのパフォーマンスが向上する、CSSの新しいプロパティ「content-visibility」 | コリス

2021/02/04 265 users Opera Firefox Chrome コリス 去年

Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Firefox, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介しま... 続きを読む

[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説 | コリス

2018/06/08 92 users コリス 色相 CSS 一行 美しいエフェクト

ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いスタイルシートが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。... 続きを読む

[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリス

2017/07/26 309 users コリス Chromium プロパティ CSS Webフォント

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium ）。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は... 続きを読む

CSS Grid Layoutの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 | コリス

2017/04/14 87 users コリス コンセプト プロパティ 新しい用語 新しいコンセプト

CSS Grid Layoutでは、多くの新しいコンセプトが導入されています。新しいプロパティは17個、新しい用語も数多くあります。これらは今まで使ってきたものとは大きく異なるため、CSS Grid Layoutを始めるのを難しく感じさせるかもしれません。 CSS Grid Layoutの実装に役立つ基礎知識、コンセプト、主要なプロパティと用語をくわしく解説します。 CSS Grid Layout... 続きを読む

clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！ | コリス

2017/01/26 143 users clearfix コリス ワーキングドラフト 定義 ブラウザ

clearfixが登場してから早10年が過ぎ、お世話になった人もたくさんいると思います。 そんなclearfixさんの必要性がなくなる新しいCSSのプロパティが、2017年1月25日にW3Cのワーキングドラフトで定義され ...記事の続きを読む 続きを読む

これだけ押さえておこう！Universal Analyticsを使い倒すためのたった2つのポイント | Find Job ! Startup

2013/07/10 125 users 根底 Startup Googleアナリティクス 名前 あり方

今年の3月に一般公開され、ぼちぼち正式リリースとなるGoogleアナリティクスの新Ver.「Universal Analytics(ユニバーサル アナリティクス)」。 新しいプロパティを設定しようとすると突然現れるこの名前に「なんだこれ？」と思った方も多いのでは無いでしょうか？ このUniversal Analytics、調べれば調べるほど便利。アクセス解析のあり方を根底からひっくり返すかもしれま... 続きを読む

CSS3 での背景指定方法のまとめ | Unformed Building

2011/08/23 205 users Unformed Building プロパティ CSS 背景

CSS であれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3 ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3 現在の仕様です。 CSS 背景 & ボーダー モジュール ... 続きを読む