タグ「プロパティ」

タグプロパティ

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 237件)

CSSをより深く理解する、プロパティの値に無効な値を設定する（IACVT）とどのように処理されているのかを解説

2024/04/18 12 users カスタムプロパティ CSS キーワー解説 color

CSSで無効な値、たとえばcolor: 20px;のようにcolorプロパティにカラー値以外を設定したり、background-colorにカラー値以外をカスタムプロパティで設定したりすると当然その値は反映されません。 CSSにおいて値の処理がどのように実行されているのかを紹介します。無効な値だけでなく、値の上書き、値の継承、キーワー... 続きを読む

ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ

2024/03/26 92 users カーニング垂直方向ダークモード light-dark 中央

今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカ... 続きを読む

Yu Gothic UIに text-spacing-trim を適用するとバグる

2024/03/25 25 users パク游ゴシック Windows テキスト標準

以下のツイートを見て、自分の環境でも再現したので気になって調べてみた。現象 text-spacing-trim プロパティを Yu Gothic UI のテキストに適用すると、一部の括弧類が重なってしまう。これは値に space-all を設定すると解消される。 halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、G... 続きを読む

CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes

2024/02/07 24 users aspect-ratio border clip-path

HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？というときに覚えておくと... 続きを読む

GA4 と Microsoft Clarity で定量と定性分析の間で旅をする - ブログ - 株式会社JADE

2023/10/10 5 users 定量村山ユニバーサルアナリティクス株式会社JADE

こんにちはあるいはこんばんは。村山(X id:muraweb_net)です。ユニバーサルアナリティクスが2023年7月に終了し、少しずつデータが停止されるプロパティが増え、いまや GA4 で主に分析される方も増えたかと思います。ユニバーサルアナリティクスの次世代版としてリリースされた GA4 も分析において得意な面と不得意... 続きを読む

CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます

2023/10/04 19 users subgrid CSS 見出しテキストブラウザ

先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（... 続きを読む

CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ

2023/09/21 21 users CSS CSSアニメーションアニメーション実装要素

先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をア... 続きを読む

CSSの2023年現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど

2023/09/07 145 users フレームワーク CSS エバーグリーン疑似クラス要因

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

CSSのコード品質向上のためのStylelint入門 - ICS MEDIA

2023/05/25 48 users CSS ICS MEDIA lint コード品質向上重複

Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。プロジェクトのすべてのスタイルシートから構文エラーを検出するセレクターやプロパティの重複といった、問題になり... 続きを読む

GA4がわからないを分解して学習すべき項目を明確にする方法 - ブログ - 株式会社JADE

2023/05/18 387 users 株式会社JADE GA4 項目方法 Twitter

こんにちはあるいはこんばんは。村山(twitter id:muraweb_net)です。ユニバーサルアナリティクスを見ようとすると、アラートが表示されるようになりましたね。本格的に GA4 のことを考える方も増えてきたのではないでしょうか。 GA360 のプロパティや GA4 プロパティが存在するのに、アラートが一括で表示される手法は... 続きを読む

CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA

2023/03/30 42 users SVG animationプロパティ CSS おさらい一見

offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいを... 続きを読む

独立したCSS translate・rorate・scaleプロパティだからできる、豊かなアニメーションテクニック！ - ICS MEDIA

2023/03/09 102 users ICS MEDIA rotate CSS 記述両方

独立したCSS translate・rorate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtraslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。最新... 続きを読む

CSSで下線を引く方法まとめ - 様々な装飾方法とアニメーションに適した指定まで - ICS MEDIA

2023/01/26 26 users CSS ICS MEDIA アニメーション指定テキスト

CSSでテキストに下線を引く場合、皆さんはどのプロパティを使いますか？　 text-decorationかborder-bottomか、はたまたbackground-imageプロパティか…。いろいろな方法で下線を引けるために、どれを使えばよいのか迷った経験がある方もいるでしょう。この記事ではテキストの下線を引く方法を場面別に紹介します。たく... 続きを読む

2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど

2022/12/20 51 users フレームワーク CSS 疑似クラス進化転換期

CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ 2022年現在、CSSの使用状況を... 続きを読む

デベロッパツールの新機能が便利！そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

2022/11/02 310 users Flex デベロッパーツール Flexbox display

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携... 続きを読む

overscroll-behaviorがお手軽！モーダルUI等のスクロール連鎖を防ぐ待望のCSS - ICS MEDIA

2022/10/27 10 users モーダルUI Safari Firefox CSS 待望

overscroll-behaviorがお手軽！モーダルUI等のスクロール連鎖を防ぐ待望のCSS 2022年9月にSafari 16がリリースされ、すべての主要なブラウザで、CSSのoverscroll-behaviorプロパティが利用可能になりました。ChromeやFirefoxでは、2018年3月からサポートされていたプロパティだったので、耳にしたことがある方も多いの... 続きを読む

Webページの見栄えをよくするたった58バイトのCSS

2022/10/20 138 users 見栄え CSS ボーナスオプション最初

ほとんどのWebページの見栄えをよくするたった58バイトのCSSを紹介します。 3つのプロパティだけですが、Webページを実装する時の最初のスタイルとして用意しておくとよいかもしれません。また、ボーナスの100バイト版とオプションのさらに100バイト版も合わせて紹介します。 58 bytes of CSS to look great nearly eve... 続きを読む

CSSは確実に進化している！新機能、単位を変数として利用できる「Variable Units（変数単位）」

2022/08/02 130 users 変数 CSS 単位カスタムプロパティ新機能

今年になってもCSSの進化が止まりません、むしろ加速しています！ IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数（カスタムプロパティ）を使えるようになったのはありがたいですね。参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめそしてCSSの新機... 続きを読む

これなら簡単で便利！ Tailwind CSSのチートシートをすばやく表示できるChromeの機能拡張

2022/08/01 9 users Chrome チートシート Tailwind CSS コピペ

簡単にすばやく表示できる、Tailwind CSSのチートシートを紹介します。Chromeの機能拡張で、ツールバーから1クリックでチートシートを表示できます。チートシートは、Tailwind CSS v.3対応。Tailwind CSSの各クラスセレクタとそのプロパティと値が一覧でき、コピペで簡単に利用できます。 Tailwind Cheat Sheet inside ... 続きを読む

Tailwind CSSの実装やデバッグに便利！各セレクタに対応したプロパティや値を表示するデベロッパーツールの機能拡張 -Tailwind DX

2022/06/28 19 users デベロッパーツールセレクタデバッグ実装 P-1

デベロッパーツールでTailwind CSSの各セレクタに対応したプロパティや値を実装・デバッグできるChromeデベロッパーツールの機能拡張を紹介します。 .m-1や.p-1といったセレクタをはじめ、:smや:lgなど...記事の続きを読む続きを読む

CSSアニメーションの実装もこれで簡単！さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween

2022/06/21 16 users fff スクリプト CSSアニメーション DOM要素 CSS

Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表... 続きを読む

IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ

2022/06/14 219 users CSS object-fit level サポート外機能

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 ... 続きを読む

(1 - 25 / 237件)

次の25件 »