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

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

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

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

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

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

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

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

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

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

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

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

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、調べれば調べるほど便利。アクセス解析のあり方を根底からひっくり返すかもしれま... 続きを読む

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

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

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

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

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

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