CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
はじめに 社員の皆さんはこんな奴が最近エンジニアになって頑張ってるんだなと暖かい目で読んでいただければと思います。 社外の方やエンジニアを目指している方は少しでも学習の参考や、コネクター・ジャパンに興味を持っていただければと思います。 自己紹介 建築の営業→未経験から独学でプログラミング学習し5ヶ月でLaravelでポートフォリオを作成しました。そして現在は自社開発企業に入社し、WEBエンジニアとしてプロダクト開発に携わっています。 概要 あなたは普段どんなブラウザを利用していますか？ ほとんどの方がGoogleChromeで、fireFox、Vivaldiなど色々ブラウザがありますね。 私は最近世界で話題になっている新しいブラウザ「Arc」を使っており、Chromeから移行のしやすさや、利便性の良さからすっかり虜(ファン)になってしまいました笑 そんな「Arc」を3ヶ月使ってみての使用感
Edgeが神ブラウザになる可能性がでてきた #MicrosoftBuild2024.05.22 07:0060,278 三浦一紀 音声で聞けるの、ありがたいね。 Microsoft（マイクロソフト）は、開催中の開発者向けカンファレンス｢Microsoft Build 2024｣で、同社開発のウェブブラウザ｢Microsoft Edge｣に、多言語リアルタイム翻訳機能を追加すると発表しました。 どういう機能かというと、YouTubeやLinkedIn、ロイター、CNBC、ブルームバーグなどのサイトにある動画を指定した言語でリアルタイム翻訳してくれるというもの。音声にも字幕にも対応するようです。 短いですけど、デモ動画があるのでご覧ください。 Video: Microsoft Edge/YouTubeちょっとわかりにくいかもしれませんが、LinkdInの英語の動画をスペイン語にリアルタイム翻訳
JavaScriptの標準規格「ECMAScript」を見直す。これからの注目機能も紹介 2024年6月5日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な
ウェブブラウザ「Firefox 127」の正式版が公開されました。PCの起動時にFirefoxを自動起動する設定が可能になったり、重複タブをまとめて閉じる機能が追加されたりしています。 Firefox 127.0, See All New Features, Updates and Fixes https://www.mozilla.org/en-US/firefox/127.0/releasenotes/ ◆PC起動時にFirefoxを自動で起動する設定が可能に Windows版Firefoxにおいて、PCの起動時にFirefoxを自動で起動する設定が可能になりました。自動起動を有効にするには設定画面の「一般」タブにて「コンピューターの起動時にFirefoxを自動的に開く」にチェックを入れればOKです。 ◆DNSのプリフェッチをHTTPSでサポート Link要素で「rel="dns-pr
Appleは欧州連合(EU)のデジタル市場法(DMA)に従うため、2024年3月にリリースしたiOS 17.4で、EU圏のユーザーに限りWebkit以外のブラウザエンジンを許可しました。ところが、Appleはサードパーティ製ブラウザエンジンのテストを、EU内に物理的に存在するデバイスのみに限定していると海外メディアのThe Registerが報じました。 Apple limits third-party browser engine work to EU devices • The Register https://www.theregister.com/2024/05/17/apple_browser_eu/ Testing of iOS Browsers With Third-Party Engines Geofenced to EU - MacRumors https://www.m
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
世界で話題のブラウザ「Arc」が便利すぎたので魅力を解説する - Qiita
Edgeが神ブラウザになる可能性がでてきた #MicrosoftBuild
「Google Chrome」でWebページのコンテンツが一時的に表示されなくなる問題が発生中／原因は特定済み
JavaScriptの標準規格「ECMAScript」を見直す。これからの注目機能も紹介
「Microsoft Edge」のUIが劇的に高速化 ～内部プロジェクト「WebUI 2.0」の秘密／とくにSSDなし、メモリ8GB未満などのローエンドデバイスでは効果覿面
「Firefox 127」正式版リリース、重複しているタブをボタン一発でまとめて整理できるように
Appleがサードパーティ製ブラウザエンジンのテストを「EU内に物理的に存在するデバイス」に制限していると報じられる
Googleから内部文書が大量流出か、SEO等に影響する可能性 ー Chromeはクリックデータ収集目的で開発された？
