HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経験したことがある人も多いのではないでしょうか？ 不要なスクロール領域ができていた スクロールバーの切り替わりで画面がガタつく これらの問題を防ぐためには、対処法のほかにどんな環境で発生するのかを知っておく必要があります。本記事では、スクロールバーの簡単な説明と、2つのよくある問題と対処法について紹介します。 スクロールバーの簡単な説明と、制作時のポイント よくある問題を紹介する前に、スクロールバーの簡単な説明と、macOSで制作する時の注意点について触れておきたいと思
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説
CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク
これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
幅変更でスタイル消失!?「メディアクエリ設定」の落とし穴 | 東京上野のWeb制作会社LIG
こんにちは。フロントエンドエンジニアのつっちーです。 WebページにおけるPCとモバイルの表示変更は、最近ではレスポンシブデザインによって実現することが多いかと思います。かくいう私もレスポンシブデザインでの実装がほとんどなのですが、そんな中で「たまにだけ、スタイルが全く適用されない状態になる」という奇妙な現象に遭遇したことがあります。 苦闘の末に無事原因を突き止め、解決することができたので、記事にして記録しておこうと思います。 あるウインドウ幅でだけ消失するスタイル 一見問題のないレスポンシブなページ まずは、その「たまにだけ、スタイルが全く適用されない」ページを見てみましょう。 このページです。 See the Pen mediaquery by ligdsktschy (@lig-dsktschy) on CodePen. ウインドウ幅によって、背景色が赤と青で切り替わるように実装され
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処方法を紹介します。 １．問題点 テーブルのヘッダ部分がページの上部にさしかかると「position: sticky」で表示が固定されるサンプルを作りました。 <style> table { border-collapse: collapse; width: 600px; } thead { position: sticky; top: 0px; background: grey; } th, td { border: solid 1px #00 0000; } </style> <body> <p>1</p> <table> <thead> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> </tr> </thead> <tbody> <tr> <t
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
iPhoneで「ズームオン」が表示される問題の対処
iPhoneで「ズームオン」が表示される問題の対処を紹介します。 １．問題点 iOSをアップグレードしてから、ズーム操作をしていないにもかかわらず「ズームオン」という表示がされるようになりました。 この「ズームオン」が表示されないようにしたいのですが方法が分かりません。 ２．ズームオンとは ちなみにズームオンとは、3本指で2回タップし、2回目のタップのあと指を画面から離さずに画面の上方向にスワイプするとズームします（設定が有効になっている場合）。 逆方向に動かすとズームオフになります。 指を離したあとでも、3本指で画面を移動させることができます。 その他にも操作方法がいくつかあります。 ３．対処方法 突然表示される原因は不明ですが、次の操作で「ズームオン」は表示されなくなると思います。 「設定」→「一般」をタップ。 「アクセシビリティ」をタップ。 「ズーム機能」をタップ。 「ズーム機能」を
Excelで短くなったスクロールバーを元に戻す方法
Excelで短くなったスクロールバーを元に戻す方法を紹介します。 １．問題点 Excelで作成しているときに操作を誤って、かなり離れたセルに値を設定することがあると思います。 下記の例ではB3529セルに間違って設定してしまってます。 このセルの値を削除して元の位置に戻っても、スクロールバーが短いままになってしまい、非常に使いにくいです。 ということで、Excelで短くなったスクロールバーを元に戻す方法を紹介します。 ２．短くなったスクロールバーを元に戻す 短くなったスクロールバーを元に戻すには、「ホーム」タブの一番右側にある「検索と選択」をクリックして、「条件を選択してジャンプ」をクリック。 選択オプション画面が開くので、「最後のセル」を選択してOKをクリック。 値が入っている（または入っていた）一番遠いセルにジャンプします。 その行から遡って不要な行までをすべて選択して右クリックで「削
[JS] スマホでclickイベントより早くユーザーのタップ動作に反応する - YoheiM .NET
こんにちは、@yoheiMuneです。 最近スマホでのWebアプリを開発することが多いのですが、タップへの反応速度を上げるこんな方法はどうかなぁと考えたので、ブログに書きたいと思います。 スマホでタップにより速く反応したい スマホ用Webアプリの開発で、ユーザーがタップした際にJSを起動したい（例えばダイアログを表示したいなど）という要件があるとします。 その場合に、タップ対象の要素のonclickにイベントをバインドして処理をすることが多いかと思います。 こんな感じ。 var btn = document.getElementById('someBtn'); btn.addEventListener('click', function() { // タップされた際の処理 }); でもこれだと確かに反応するのですが、ユーザーがタップしてからイベントが発火するまでに時間が空いてしまい、遅いの
![[JS] スマホでclickイベントより早くユーザーのタップ動作に反応する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/cccc0e0910f5e6c670ca8c44cd50ffd6640ce4ae/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F216.jpg)
Windowsの外部ディスプレイが認識されなくなったときの対処
Windowsの外部ディスプレイが認識されなくなったときの対処方法を紹介します。 １．事象 ノートPCに外部ディスプレイを接続した状態（かつ外部ディスプレイだけで表示している状態）で作業しているとき、突然外部ディスプレイの表示が消え、ノートPCのディスプレイに表示が切り替わり、外部ディスプレイが反応しなくなりました。 ２．調査 ディスプレイの設定確認は次の手順で行います。 デスクトップを右クリックして「個人設定」を選択。 「画面の設定」をクリック。 （クリックで拡大） 正常な状態であれば下記のように「1」と「2」のディスプレイが表示されます。「1」はノートPC、「2」は外部ディスプレイです。 が、今回の事象が発生したときは「1」しか表示されなくなりました（キャプチャし忘れました）。 なお「画面の設定」画面のプルダウンメニューではモニタを変更できそうなので、変更しようとすると、 現在選択され
Android Virtual DeviceでFailed to allocate memory:8 エラーが出たので対処 | TeraDas（テラダス）
Android Virtual DeviceでFailed to allocate memory:8 エラーが出たので対処 Android SDK 21.0 + Android Virtual Deviceで、仮想デバイス起動時に以下のエラーが出たので対処。 Starting emulator for AVD 'GalaxyNexus' Failed to allocate memory: 8 This application has requested the Runtime to terminate it in an unusual way. Please contact the application's support team for more information. 対策は以下3つのどれかで可能 １．AVDのプロファイルを書き換えるC:\Users\<ユーザ名>\.andro
» スマホでスクロールを禁止させる方法 | negic
軽めのjQuery Advent Calendar 2012の24日目の記事です！ PCサイトでスクロールを禁止させるには、bodyにoverflow: hidden;をかければスクロールができなくなるが、スマホサイトでは、一部Android端末では効くが、iOSではスクロールができてしまいます。 スマホでスクロールを止めるには、jQueryを使うと便利です。 スマホの独自イベントである、touchmoveイベントを切ればスクロールを止めることができます。 方法は下記のとおりです。 $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); あるタイミングでスクロールさせたくなったら、off()すればいい。 $(window).off('.noScroll'); イベント名に、.noScrollとあるが、
『$(window).height()』
<script> var MSIE =/*@cc_on!@*/false; if(MSIE){ H =document.documentElement.clientHeight; }else{ var H=innerHeight; } </script> スピード判定もしてみた http://jsperf.com/innerheight-vs-window-height/2 jQueryはごみのように遅いです＼(^o^)／ IE判定は９と１０がどう判定されるのか 謎なのでよくわかりませんー IEは６、７は当たり前ですが無視してます ↓以下過去の文↓ 最近はこまごましたネタばかり jQueryでウィンドウの高さなりをとろうとすると $(window).height() ですむけれど これなんでjQuery通すんだ？ いっぱつでとれそうだ！ と思っていろいろ調べてみたら クロスブラウザ処理が超
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Matt Smith on Twitter: "🔥 TIL a #CSS trick to handle that annoying mobile viewport bug with `100vh` in WebKit (iOS Safari)! #WebDev #ProTip https://t.co/lefD0Klqzd"
q-Az
ツクメモ - ウェブやアプリをツクるヒトのメモ
http://blog.ceed.jp/?p=298