JavaScriptで実現するFLIPアニメーションの原理と基礎 - ICS MEDIA
アニメーション実装のテクニックのひとつにFLIPと呼ばれるものがあります。FLIPアニメーションは2つの状態をなめらかにつなげるテクニックで、とくに移動や拡大といった動きに有効です。FLIPアニメーションを用いると、次のようなアニメーションを実装できます。 本記事では、ライブラリに依存しないFLIPアニメーションの原理を理解し、実装する方法を紹介します。 FLIPアニメーションとは FLIPとは、First, Last, Invert, Playをまとめた造語です。これらはFLIPアニメーションの手順を説明したものになります。 First：アニメーションを開始するときの状態 Last：アニメーション終了時の状態 Invert：変化量を計算し、Lastの状態に適用してFirstの状態を復元します Play：Invert量を徐々に減らしてLastの状態に近づけていきます FLIPのおもしろい点
display:contents;って何？どんな時に使うと便利なの？ - Qiita
先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents; とは？ 2-1. display:contents;の概要 display:contents;を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。 Mdn Web Docsでは以下のように説明されています。 これら
has()疑似クラスでコーディングが変わる！ CSS最新スタイリング - ICS MEDIA
2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。
要素の幅でレスポンシブ対応を行える！ コンテナークエリーの使い方 - ICS MEDIA
コンテナークエリー（@container）は、CSSの新しいアットルールです。従来のメディアクエリー（@media）とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート（ブラウザ幅）を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。 コンテナークエリーを利用することで、再利用性の高いパーツを実装できます。とくに、カラム数が多いレイアウトや複雑な横並びの要素において、コンテナークエリーは有効な機能です。 この記事では、簡単な作例と使用上の注意点を紹介します。 コンテナークエリーの使い方 作例の紹介の前に、コンテナークエリーの使い方を簡単に説明します。 コンテナークエリーを使用するためには、使用したい親の要素にcontainer-typeプロパティを設定する必要があります。以下の2通りの指定ができます。 con
2024年の実装に役立つCSSの新機能と使い方のまとめ
2023年の後半に、CSSの多くの新機能がすべてのブラウザにサポートされました。新機能が登場するときもワクワクしますが、やはりすべてのブラウザにサポートされてからが本番です。 2024年の実装に役立つCSSの新機能とその使い方を紹介します。セレクタを条件式のように記述できる:has()、複数のカード内でテキストを揃えられるsubgrid、CSS内でネストを使用できるCSSネスト、レスポンシブ対応のコンポーネントに役立つコンテナクエリ単位など、次のプロジェクトに役立つCSSがたくさんあります。 5 CSS snippets every front-end developer should know in 2024 by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
aspect-ratioで矩形サイズの記述が便利（最近便利なCSSおれおれAdvent Calendar 2023 – 23日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 23 日目 ほとんどの場面では width と height を指定すれば良いんですが、それが面倒な場合や難しい場面もあります。aspect-ratio で縦横の比率を指定できるので便利です。 例 デモ：https://codepen.io/ginpei/pen/JjzjBmK 縦横の片方だけ指定するともう片方は自動で決まります。 取る値 <width> / <height> のような組か、0.5 のような数値 1 つです。 スラッシュは区切りであって割り算の意味ではないんだけど、1 / 2 と 0.5 は結果的に同じです。 大きさに幅がある場合 サイズが max-width 等で指定されていると、それに収まる範囲で縦横比が算出されます。 こんな風にすると必ず画面内に収まる大きさで、かつ縦横比が黄金比になります。
セレクターの入れ子がマジで便利（最近便利なCSSおれおれAdvent Calendar 2023 – 24日目） | Ginpen.com
仕様に駄目と書いてあります。 逆にクラスセレクターとかには不要なだけで、付けたければ付けても大丈夫です。 理由はパフォーマンス 仕様では “Why are there restrictions on nested rule selectors?” （なぜ入れ子ルールのセレクターには制約があるのか）というコラムみたいなのを用意して説明しています。 例えば padding-left:hover と書かれていたらどうでしょう。まあ混乱しますね。 人でなくてもブラウザーのエンジンが CSS の文法解析を行う際も大変です。そこまで読んだら判断をいったん保留して先読み lookahead を行う必要があるためです。 読んでから、次が ; ならプロパティ（値 hover は無効）、あるいは { なら入れ子になったスタイル定義（要素型 padding-left はおそらくカスタム要素）と判断を確定すること
:is()と:where()で複数セレクターが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 13日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 13 日目 例えば td と th とか。似たような位置にある似たようなセレクターをまとめて書けるので楽ちんです。 例 デモ：https://codepen.io/ginpei/pen/yLZWJrz .TheTable > :is(thead, tbody) > tr > :is(th, td) { border: 1px solid lightgray; } :is() の詳細度に注意 :is() はその引数で与えられるセレクター群の中で最も詳細度が高いものになります。 例えば :is(a, .b, #c) と書いた場合、詳細度はそれぞれ a が 0,0,1 、 .b は 0,1,0 、 #c は 1,0,0 で、:is() 全体の詳細度は 1,0,0 になります。 これはちょっと注意が必要です。合致する対象ごとじゃ
【CSS】スタイルが適用される範囲を限定する@scopeが非常に便利で有能 - Qiita
CSSの大きな問題点のひとつとして、スタイルが影響する範囲を指定することができませんでした。 そのため一か所だけ書き替えたと思ったら全然関係ないところが崩れたりして、その欠陥をどうにかすべくBEMやらScoped CSSやらStyled Componentsやら解決策が乱立してどうにもならなくなりました。 とりあえずStyled Componentsとかの乱数スタイルシートはユーザスタイルシート適用が困難なのでさっさと滅びろ。 さて先日リリースされたGoogle Chrome 118でCSSが@scopeに対応しました。 なんと、素のCSSで適用範囲を制限できるようになります。 <div class="out"> <span>ここはfooの外</span> <div class="foo"> <span>ここはfooの中、barの外</span> <div class="bar"> <sp
CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。 Limit the reach of your selectors with the CSS @scope at-rule by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 CSSのセレクタを記述するきめ細やかな技術 CSSの@scopeとは :scope疑似クラスとは @scope
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
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
覚えれば一生もの！ ウェブエンジニアのための正規表現活用入門 - ICS MEDIA
正規表現は文字列の検索や置換を行うための強力で便利なツールです。基本をマスターすれば開発から日常の事務作業までさまざまな場面でラクをできる魔法の道具ですが、見た目がちょっと分かりづらいので、避けている方もいるのではないでしょうか？ 筆者の個人的観測ですが、とりわけフロントエンドのエンジニアには正規表現に苦手意識を感じている方が多いようです。 この記事では正規表現の基本と、正規表現がどこで使えてどれだけ便利になるのかを紹介します。 正規表現の基本：正規表現ってそもそも何？ 正規表現（regular expression）は、ごく簡単にいえば「さまざまな文字列のバリエーションをひとつの文字列で表現したもの」です。たとえば、郵便番号の7桁の数字には（実際に使われていないものも含めれば）一千万通りのバリエーションがありますが、正規表現を使えば次のようにひとつの文字列で表現できます。 ▼「7桁の数字
CSSの疑似クラスと疑似要素、:と::の違い
CSSで疑似クラス、または疑似要素を使用する時に、:と::のどっちだっけ？ と迷ったことはありませんか？ :beforeと::beforeのどっちだっけ？ :notと::notのどっち？ :と::のどっちが疑似クラスだっけ？ ※CSS3では::beforeですが、CSS2では:beforeでした。 たまに迷ってしまうことがある人に、CSSの疑似クラスと疑似要素、:と::の違いについて紹介します。 What's the difference between : and :: in CSS? by Salma Alam-Naylor(@whitep4nth3r) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの「疑似」とはどういう意味か 疑似クラスとは 疑似要素とは はじめに 「CSS :と::の違い」をGoogl
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと
imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
CSSの:has()疑似クラスの便利な使い方を徹底解説
先日の記事で:has()疑似クラスがSafariでサポートされ、こんなことができるというのを紹介しましたが、さらに:has()疑似クラスを掘り下げ、Webサイトやアプリでの便利な使い方を紹介します。 :has()疑似クラスは、指定した要素がある場合にのみスタイルを適用できるCSSの新機能で、これからのWeb制作に活躍するかなり便利な機能です。こういう機能を待ち望んでいた人も多いと思います。 たとえば、カードに画像がある場合、ナビゲーションに子メニューがある場合、ラッパーがある場合など、複雑なCSSが必要だったものやJavaScriptが必要だったものが簡単でシンプルなCSSで実装できます。 CSS Parent Selector by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます
