ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen

Edgeが神ブラウザになる可能性がでてきた #MicrosoftBuild2024.05.22 07:0062,313 三浦一紀 音声で聞けるの、ありがたいね。 Microsoft（マイクロソフト）は、開催中の開発者向けカンファレンス｢Microsoft Build 2024｣で、同社開発のウェブブラウザ｢Microsoft Edge｣に、多言語リアルタイム翻訳機能を追加すると発表しました。 どういう機能かというと、YouTubeやLinkedIn、ロイター、CNBC、ブルームバーグなどのサイトにある動画を指定した言語でリアルタイム翻訳してくれるというもの。音声にも字幕にも対応するようです。 短いですけど、デモ動画があるのでご覧ください。 Video: Microsoft Edge/YouTubeちょっとわかりにくいかもしれませんが、LinkdInの英語の動画をスペイン語にリアルタイム翻訳