overscroll-behaviorがお手軽！ モーダルUI等のスクロール連鎖を防ぐ待望のCSS - ICS MEDIA
3つ値の具体的な動作は、次のサンプルで確認できます。overscroll-behaviorプロパティがcontainまたはnoneだった場合、背面のコンテンツにスクロールが伝達しないことを確認できます。 加えてcontainは、オーバースクロールの動作を維持します。このサンプルでは、コンテンツを超えて上下にバウンスする効果を確認できます。（次のGIF画像の2番目） 効果が有効かどうかは、OSやブラウザによって異なりますが、モバイルのPull-to-Refreshが有効なブラウザから確認できると思います。 サンプルを別ウインドウで開く コードを確認する（HTML、CSS） どのような使い方ができるのか、作例をいくつか用意しましたのでご紹介します。実装の参考にしてみてください。 画面固定で表示するUIの作例 画面固定で表示されるダイアログとハンバーガーメニューをdialog要素で実装し、ove
CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方
ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。 最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。 Meet the top layer: a solution to z-index:10000 by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSの最上位レイヤー（top layer）とは デベロッパーツールで最
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
setPointerCapture()でdocumentでonmousemoveしなくて済む（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 15日目） | Ginpen.com
ちなみにそれぞれ gotpointercapture と lostpointercapture イベントが発火します。 何が嬉しいか mousemove イベントを使って自前でドラッグを作ってみると直面すると思うんですが、このイベントって対象要素上でマウスカーソルを動かしたときにだけ反応しますね。 経験ない人からすると何当たり前のこと言ってんだって感じだと思うんですけど、こんなときに困るんです。 マウスカーソルを素早く操作して対象要素の外へ出てしまう デザインの都合上、重なり手前に表示される要素がある デモで右端を掴んで右側へドラッグしてみてください。たぶん止まります。カーソルを戻して、ゆっくり、はみ出ないよう少しずつ動かすとドラッグできます。 対処としては対象要素じゃなくて document の方で mousemove を見張るって感じでしょうか。直感的ではありませんし、開放処理の漏れと
touch-actionでスクロールやズームを止める（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 12日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目 今日は CSS の touch-action プロパティです。指操作の制御をします。 touch-action – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/gOGLrgG デモはタッチ対応端末でご覧ください。主にスマホ。 基本的な使い方 だいたいこんな値です。 auto – 通常 none – 反応しない pan-y – 縦方向スクロールのみ pinch-zoom – ズームのみ manipulation – スクロールとズームのみ（ダブルタップでの拡大を無効化） 他に下方向のみの pan-down とかいくつかあるので MDN をご覧ください。 Pointer Events 関係の仕様です。IE でも動きます。 使いどころ
CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
Smooth Scrollbar - スムーズなスクロールの制御
Webページは大抵縦長になっています。そしてマウスなどのスクロールを使って下の情報を表示します。つまりスクロールという機能はブラウジングの基本とさえ言えるでしょう。 そんなスクロールを標準のまま使うのではなく、もっと細かく制御できるのがSmooth Scrollbarです。 Smooth Scrollbarの使い方 様々なパラメータを使ってスクロールバーの動きを制御できます。 DOMの中でスクロールを埋め込む際にも制御できます。 Smooth Scrollbarの動きは実際にスクロールをしてみないと分かりづらいので、デモサイトでぜひトライしてみてください。もの凄く動きを軽くすることもできれば、粘度が高い感じにすることもできます。慣性を強くして、ゆっくりと進み続けるというのも面白いです。プラグインによる拡張もできるようです。 Smooth ScrollbarはJavaScript製のオープン
smartscroll - スクロールをジャックしてぴったり合わせた表示を実現 MOONGIFT
スクロールというのはユーザが好きな場所まで自分で指定できるのが基本です。しかしサイトの種類によってはスクロールさえも制御したいと思うことがあります。一つのページの中で複数の情報を分けて表示したい時などがそうです。 そこで今回はスクロールを制御できるsmartscrollを紹介します。 smartscrollの使い方 実行例です。ぴしっと上辺で止まるのが分かります。 高さを合わせてウィンドウ全体を一色にすることも簡単です。 smartscrollではスクロールに合わせてハッシュタグを自動的に変化させたり、そのハッシュタグを使ってアクセスした時に表示を再現することもできます。シングルページアプリケーションで使うと効果的なライブラリです。 smartscrollはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 d4nyll.github.io
IEの自動更新をブロックする方法
IEの自動更新をブロックする方法を紹介します。 １．はじめに 新しいIEが正式リリースされると、Windowsの自動更新（Windows Update）の対象となります。 が、利用している社内システムなどの都合で、新しいIEを自動更新したくないケースもあります。 ということで、IEの自動更新をブロックする方法を紹介します。 ２．IEの自動更新をブロックする 自動更新をブロックするには、マイクロソフトから無償で提供されている「自動配布の無効化ツールキット」を利用します。 Internet Explorer 11 自動配布の無効化ツールキット Internet Explorer 10 自動配布の無効化ツールキット Internet Explorer 9 自動配布の無効化ツールキット この無効化ツールキットをインストールしておくことで、Windows Updateの自動配布対象外となります。
ウェブマスター ツールを利用してリソースのブロックを解除しましょう
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Windowsのバッチ起動でコマンドプロンプトを自動的に閉じない方法
Windowsのバッチ起動でコマンドプロンプトを自動的に閉じない方法を紹介します。 １．問題点 Windowsで作成したバッチファイル（.bat）をダブルクリックで起動するとコマンドプロンプトが開きますが、処理が終了すると自動的に閉じられます。 ただバッチの内容にエラーなどがある場合、エラー内容がコマンドプロンプトに表示されるのですが、すぐに画面が閉じてしまうためエラーを確認することができません。 ということで、コマンドプロンプトを自動的に閉じない方法を紹介します。 ２．コマンドプロンプトを自動的に閉じないようにする コマンドプロンプトを自動的に閉じないようにするには、バッチの最後にpauseコマンドを追加します。 pause pauseは、バッチの処理を一時停止し、「続行するには何かキーを押してください . . .」のメッセージを表示してユーザーからのキー入力を待つためのコマンドです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
excelでcsvファイルを開くと文字が変換されてしまう