少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
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の英語の動画をスペイン語にリアルタイム翻訳
GoogleがAndroid端末でChrome OSを仮想的に動かすテストを実施中、AndroidでChromebookアプリが使用できるようになる可能性
Googleはスマートフォンやタブレット向けのOSとして「Android」を開発する一方で、PC向けには「Chrome OS」を開発しています。双方は相乗効果を狙って開発されていますが、Chrome OSはAndroidのランタイムが付属するため、Chrome OSを搭載したChromebookでAndroidアプリを使うことができる一方、Android端末ではChrome OS向けアプリを使うことはできません。しかし新たに、GoogleがAndroid端末でChrome OSを動かすテストを行っていることが明らかになりました。 Exclusive: Google is experimenting with running Chrome OS on Android https://www.androidauthority.com/chrome-os-running-on-pixel-344
JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React
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
JavaScriptの標準規格「ECMAScript」を見直す。これからの注目機能も紹介 2024年6月5日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な
ウェブブラウザ「Firefox 126」の正式版が公開されました。URLのコピー時に追跡パラメーターを削除することが可能になったり、Zstandard圧縮がサポートされたりするなど機能面がアップデートされたほか、検索機能改善のためのデータ収集を行うようになっています。 Firefox 126.0, See All New Features, Updates and Fixes https://www.mozilla.org/en-US/firefox/126.0/releasenotes/ ◆URLをコピーする際に追跡パラメーターを削除することが可能に URLを選択し、右クリックメニューの「サイト追跡を除いてコピー」をクリックすることでURLの追跡パラメーターを削除しつつコピーを行う事が可能になりました。 例えばFirefoxのリリースノートのページの場合、そのままコピーすると下記のURL
ウェブブラウザ「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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
世界で話題のブラウザ「Arc」が便利すぎたので魅力を解説する - Qiita
Edgeが神ブラウザになる可能性がでてきた #MicrosoftBuild
「Google Chrome」でWebページのコンテンツが一時的に表示されなくなる問題が発生中／原因は特定済み
zstd圧縮に対応した「Firefox 126」、追跡コードを除いてURLをコピーする機能も強化／セキュリティ関連の修正は16件
「Microsoft Edge」のUIが劇的に高速化 ～内部プロジェクト「WebUI 2.0」の秘密／とくにSSDなし、メモリ8GB未満などのローエンドデバイスでは効果覿面
2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
Appleがサードパーティ製ブラウザエンジンのテストを「EU内に物理的に存在するデバイス」に制限していると報じられる
JavaScriptの標準規格「ECMAScript」を見直す。これからの注目機能も紹介
「Firefox 126」正式版リリース、URLコピー時に追跡パラメーターを削除する機能が追加される
Googleから内部文書が大量流出か、SEO等に影響する可能性 ー Chromeはクリックデータ収集目的で開発された？
「Firefox 127」正式版リリース、重複しているタブをボタン一発でまとめて整理できるように