CSSのみでdetails要素のアニメーションを実装する方法 – TAKLOG
約1年前、JavaScriptを使用したdetails要素のアニメーションの実装方法についての記事を投稿しました。しかし、その後の CSS の進化により <details> 要素の開閉アニメーションが CSS のみで実装可能になりました。 正確には、開く際のアニメーションは以前から CSS で実現できましたが、閉じる際のアニメーションは open 属性が即座に削除されるという仕様上、 JavaScript なしでは不可能でした。 この度、 details-content 疑似要素がサポートされたことにより、 CSS のみで閉じる際のアニメーションも実現できるようになりました。 ::details-content - CSS | MDN The ::details-content CSS pseudo-element represents the expandable/collapsible
これは朗報！ ついにCSSでif else文が使えるようになります、Chrome 137で新しく追加された7個のCSSの機能
Chrome 137で追加された、CSSの新しい機能7個を紹介します。 今回のアップデートで目玉は、if else文の条件付きでCSSの値を設定できるif()関数がついに使用できるようになりました。また、CSS GridやFleboxで見た目の順序とtabキーの順序が異なるのを制御できる新しいプロパティもサポートされるなど、Web制作者は要チェックです！ ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。 New in Chrome 137 Chrome 137 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに if else文の条件付きでCSSの値を設定できるif()関数 reading-flowとreading-order
このアイデアはすごい！ テーブルでセルの行を強調表示、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック
テーブルでセルをハイライトして目立たせるというのはよくあるテクニックですが、さらにそれ以外のセルはぼかしてより目立たせるCSSのテクニックを紹介します。 実装のポイントは、:focus-within疑似クラスと:not()否定疑似クラスです。 まずは、実際のデモをご覧ください。 上部でダーク・ライトモードにしたり、アクセントカラーを変更できます。 See the Pen Focus table rows with :not(:focus-within) by coliss (@coliss) on CodePen. HTMLは、普通のテーブルです。 <table role="grid"> <thead> <tr> <th></th> <th>Name</th> <th>Email</th> <th>Subscription</th> </tr> </thead> <tbody> <tr>
ブックマークしておくと便利！ CSSで実装されたローダー、簡単にカスタマイズもできる優れもの -Loadership
自分のデザインに合ったローダーを簡単に実装したい！ そんな要望に応えるオンラインで簡単にカスタマイズができるCSSで実装されたローダーを紹介します。 ローダーはHTMLとCSSをコピペするだけで簡単に実装でき、カスタマイズもオンラインでサイズ・カラー・アニメーションなどを変更できます。 Loadership Loadershipの特徴 Loadershipの使い方 Loadershipのローダー Loadershipの特徴 Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。 ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください
これならコピペで簡単！ HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball
コピペで簡単に使用できる、HTMLとCSS（複雑なものはSVG）で実装されたWebサイトやスマホアプリ用のローディングアニメーションを紹介します。 さまざまなローディングやスピナーが揃っていますが、画像は一切使用されていません。必要な時にさくっと実装できるので、スニペットに登録しておくと便利です。 下記は静止画ですが、もちろん全部アニメーションで動きます。 Loaders -UI Ball Loaders -GitHub ほかにもCSSで実装されたローディングをチェックしたい人は、下記もどうぞ。 CSSで実装されたローディング・スピナーのアニメーションのまとめ UI Ballのローディングはすべて1Kb未満の超軽量で、依存関係はゼロなので、HTMLとCSSをコピペするだけで簡単に使用できます。カラー・サイズ・アニメーションの速度などはCSSで簡単にカスタマイズできます。 MITライセンスで
高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」 - かちびと.net
lugeは高速かつシンプルで使いやすいJavaScriptアニメーションライブラリです。プラグインを追加して拡張する事も可能です。 読み込むだけでhtmlタグに自動でデバイスやブラウザのclassも付与されるので異なる環境での挙動の微調整等もしやすくなっています。 <link rel="stylesheet" href="luge.css"> <script src="luge.js"></script> 使い方も簡単です。上記のようにファイルを読み込んで指定されたカスタムデータ属性を付与する、といった流れで実装出来ます。ただし、CSSは組み込みのアニメーションが不要なら読み込む必要はないそうです。 サイトプリローダー、スクロールに応じたアニメーション表示、ページ遷移のエフェクトなど、よく見かけるアニメーションのあれこれを管理できるのでアニメーションに時間を取られたくない開発者の方にお勧め
絵文字の色をCSSで反転させて引き伸ばすと背景画像になる - hitode909の日記
絵文字の色を知っていなくても、とにかく引き延ばせば色を得られるのが良いと思う。 また、別の色を選んでくるんじゃなくて反転した色を使っているのも管理工数が少なくて良い。 😄😄 🔥🔥 👗👗 🤸🏼♂️🤸🏼♂️ 👁👁 🚵🏼♂️🚵🏼♂️ 🚴🏿♀️🚴🏿♀️ マークアップ的にはタグ1個では済んでないけど、これをただのspan1個とかにできればより良いと思う。 scaleで巨大化して、はみ出たところをトリミングするためにcontain: paintにしている。本来の用途と違う使い方なので真似しないでください。 <span class="composite"> <span class="bg">😄</span> <span class="front">😄</span> </span> span.composite { display: inline-b
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。 一致しないmedia
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
CSSの実装方法を少し改善するだけで、Webページの読み込み・表示を最適化するテクニックのまとめ
CSSの記述方法やレイアウトの構築方法で、ページの表示速度、読み込み時に発生するレイアウトのずれ、Webフォントの表示、CSSアニメーション、アクションを起こした時の反応の速度など、ウェブバイタルに大きな影響を与えます。 ウェブバイタル（Web Vitals）を最適化するためのCSSのテクニックを紹介します。 CSS for Web Vitals by Katie Hempenius, Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レイアウトのCSSを改善 画像のCSSを改善 画像によるレイアウトシフトのCSSを改善 WebフォントのCSSを改善 アニメーションのCSSを改善 クリティカルCSS 終わりに はじめに CSSの記述方法やレイアウトの構築方法で、コアウェブバイタル（Core
Element: classList プロパティ - Web API | MDN
ドキュメントオブジェクトモデル (DOM)ElementインスタンスプロパティariaActiveDescendantElementariaAtomicariaAutoCompleteariaBrailleLabelariaBrailleRoleDescriptionariaBusyariaCheckedariaColCountariaColIndexariaColIndexTextariaColSpanariaControlsElementsariaCurrentariaDescribedByElementsariaDescriptionariaDetailsElementsariaDisabledariaErrorMessageElementsariaExpandedariaFlowToElementsariaHasPopupariaHiddenariaInvalidariaKeySh
CSS Animation アニメーション完了後にアニメーションの最後の状態のままで止めたい - かもメモ
CSS animation でアニメーション完了後にアニメーションの最後の状態で止まってほしい時のメモ animation-fill-mode プロパティを forwards にする。 .box { animation: my-anime 5s ease -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } animationプロパティの値に続けて書いてもOKっぽい .box { -webkit-animation: box-anime 5s ease forwards; animation: box-anime 5s ease forwards; } サンプル See the Pen CSS ANIMATION TEST by KiKiKi (@chaika-design) on CodePen.
CSSで上下左右のフェードインアニメーションを実装する方法
今回はCSSを使用して上下左右いずれかに動くフェードインアニメーションの実装の仕方を説明していきます。 初心者の人でも使いやすく基本的に丸々コピペでOKな様にしますのでぜひ使ってみて下さい。 アニメーションの設定CSSでアニメーションを作るには「animation」プロパティを使って下記の様にスタイルシートにアニメーション設定の記述を行います。 .animation1 { // アニメーション設定 animation-name: animation1; //アニメーションの名前 animation-duration: 3s; //アニメーション時間 animation-timing-function: ease-out; //アニメーションさせるイージング animation-delay: 1s; //アニメーション開始させる時間 animation-iteration-count: 1;
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」 - かちびと.net
Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく見かける一般的なチャートやこれらのマルチデータ、パーセンテージや積み上げ式、3Dなど様々なビジュアライズも対応されています。 少しクセがある印象ですが、慣れれば問題なさそうでした。HTML形式のデータに対応する場合にあると作業がかなり楽になりそうですね。 動作サンプル及び簡単に使い方のご紹介です。基本的にはtableが使われ、classを付与する事でビジュアライズされます。 <table class="charts-css"> ... </table> 単なるtableをビジュアライズするにはCharts.cssを読み込んだうえで上記のようにcharts-cssというclassを付与しま
Tailwind CSSが私には合わなかった理由
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」:phpspot開発日誌
CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法
CSS GridとFlexboxの便利なツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Layout Generator
