scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する

2024/06/01 8 users scroll プロパティ auto 画面 ボックス

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・... 続きを読む

Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能

2024/05/16 5 users CSS 要チェック WEB制作者 アンカー 機能

Chrome 125で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！ New in Chrome 125 Chrome 12... 続きを読む

重要情報はスクロールしないと見えないが、スクロールバーがない　EC事業者に業務停止命令

2023/06/29 185 users サプリメント 業務停止命令 ECサイト 東京都目黒区 業務停止

消費者庁が通信販売事業者LITに業務停止を命じた。同社のECサイトではスクロールしなければ見えない位置に重要情報を小さく記載していたが、ページにはスクロールバーを表示していなかった。 消費者庁は6月28日、ヘアケア商品やサプリメントを販売する通信販売事業者LIT（東京都目黒区）に業務停止を命じたと発表した。... 続きを読む

これは簡単で楽！ スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app

2023/03/09 13 users CSS デフォルト 要素 ツール ブラウザ

スクロールバーは、長いコンテンツのWebサイトに不可欠な要素です。ブラウザにはスクロールバーのデフォルトのスタイルがありますが、サイトのデザインに最適とは限りません。スクロールバーのデザインを変更するのは、CSSで簡単にできます。 スクロールバーのデザインを変更するCSSを確認しながら生成できるオンライン... 続きを読む

HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA

2023/02/14 113 users 挙動 CSS ICS MEDIA HTML制作 見た目

HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経... 続きを読む

CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon

2022/12/09 63 users パディング CSS 有無 ボーダー 前面

この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても... 続きを読む

CSSでスクロールバーをカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント | コリス

2021/07/29 32 users コリス CSS デフォルト 実装 スクロールコンテンツ

スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時... 続きを読む

フルーツサンドを食べると笑う :: デイリーポータルZ

2021/01/01 9 users フルーツサンド デイリーポータルZ デイリー やくさん 銀座

べつやくさんありがとうございました！ いきなりテンション高く始まりましたが、これがあと4人あります。右のスクロールバーを見てください。すっごく短くなってますよね。 続いては銀座のフルーツサンド、地元の西村さんです。西村さんはデイリーの飲み会でよく「……うまい…」と言ってるのを聞いてたので頼みました！ 「... 続きを読む

端末上の Vim 向けにテキストベースのスクロールバーを作った話

2020/12/03 9 users vim github.com しくみ ウィンドウ プラグイン

こんにちは、obcat です? タイトルの通り、端末上の Vim 向けにテキストベースのスクロールバーを表示するプラグインを作りました。この記事では、このプラグインの機能やしくみをご紹介したいと思います。 ? vim-sclow https://github.com/obcat/vim-sclow vim-sclow はウィンドウの右端にスクロールバーを表示するプ... 続きを読む

いつからスクロールバーはこんなに触りにくくなったのか

2020/06/15 29 users 常時 デザイン 状態

スクロールした状態じゃないとスクロールバーが表示されず、 スクロールバーをつかもうとするとすぐ消えてしまう。 昔は常時表示されていたはずなのに、いつの間にこんな退化したのか。 これも「シンプルなのは何にも優る」というデザイン(笑)の力？ 続きを読む

消えゆくスクロールバー｜3inowayosuke｜note

2020/03/15 560 users 状況

最近スクロールバーを見かけなくなった気がします。ざっと調べてみると、スクロールバーはすでに消え始めており、今のスタンダードはスクロールインジケーターになってる様です。そうかと思えば、そのスクロールインジケーターすら消え始めている状況です。 ▼１．消えゆくスクロールインジケーター1.1　フェイスブックiO... 続きを読む

実は少しずつ変化していた！スクロールバーのデザインの変化（1981年〜2015年） : カラパイア

2019/12/10 8 users カラパイア パソコン Microsoft Windows

普段何気なくマウスでズルズルしているパソコンのスクロールバーだが、年を追うごとに少しずつ変化しているようだ。 1981年のXerox Starから2015年のMicrosoft Windows 10まで34年間のスクロールバーの変化を見ることができるサイトがあるので見ていくことにしよう。 続きを読む 続きを読む

VS Codeのミニマップの表示／非表示を切り替えるには：Visual Studio Code TIPS - ＠IT

2018/11/02 20 users VS Code ミニマップ 非表示 表示 デフォルト

ミニマップは便利だが煩わしいこともある。そんなときにはeditor.minimap.enabled項目を設定することで表示／非表示を切り替えられる。 連載「Visual Studio Code TIPS」 Visual Studio Code（以下、VS Code）には「ミニマップ」と呼ばれる機能がある。これはデフォルトでスクロールバーの隣に表示される、ドキュメント... 続きを読む

[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス

2018/08/08 255 users コリス ビューポート CSS ナビゲーション 要素

ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表... 続きを読む

スクロールバーのデザインや動きを変更したい時に便利なスクリプト 8 | NxWorld

2015/12/03 16 users NxWorld CSS スクロールバーデザイン スクリプト

スクリプトといってもほぼjQueryプラグインになりますが、ブラウザやOSによってデザインが異なるスクロールバーデザインを統一させたい時などに便利なスクリプトのまとめです。Chromeや古いIEなどのようにブラウザによってはCSSだけでスクロールバーのデザインを変更できたりはしますが、記述がバラバラだったりしますし、ひと通りのブラウザでとなるとやはりこういったもので対応するのが無難だと思います。ま... 続きを読む

【セキュリティ ニュース】「Wireshark 2.0」がリリース - パケット分析機能を強化（1ページ目 / 全1ページ）：Security NEXT

2015/11/10 27 users Security NEXT リリース 強化 全1ページ ソート

リバーベッドテクノロジーは、オープンソースのパケット解析ツールの新版「Wireshark 2.0」をリリースした。 新版では、あたらしいアプリケーションフレームワークの採用。パケットレベルの分析機能を強化した。日本語を含む7カ国語に対応している。 列表示やソートなどの機能を高速化したほか、ファイルタリングに対応したエキスパートアイテムや対話フィルタオプション、スクロールバーの自動制御機能を追加。ま... 続きを読む

[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu | コリス

2015/05/29 77 users コリス stylesheet スクリプト 縦長ページ head

デフォルトのスクロールバーも表示 ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head>... 続きを読む

スクロールバー - Weblog - Hail2u.net

2014/07/31 9 users Weblog hail2u.net Windows 仕様通り

昔はOSネイティブを尊重したスクロールバーにしろ派だった。今は描画領域がらみで色々考えたくないので、オーバーレイで独自描画されちゃえばいいのに派になってる。WindowsだとInternet Explorer 11以降(10以降かも)の自動非表示スクロールバー的なのが妥当な落とし所なのかな。かっこいいと思ってはいないんだけど。 ウェブ制作者としては、もちろんこの辺りの扱いが仕様通りに実装されてれば... 続きを読む

子ページから親ページ（別ドメイン）の iFrame の大きさを操作する | バシャログ。

2014/07/10 58 users iframe Tips バシャログ 想定 台風

近いうちに大型の台風が来ると聞いてソワソワしている kimoto です。ここ数年で最強とか言われると身構えちゃいますよね…。 さて、今回は tips です。 別ドメインのページを iFrame 内に表示した際に、想定よりページの縦幅が大きくて、iFrame にスクロールバーが出てしまう…。 最初の表示時に大きさ合わせたけど、iFrame 内でページ遷移すると中のページの大きさが変わっちゃうので下に... 続きを読む

［パソコン自由自在］覚えておきたい！日本語入力のコツ - ［活用1］変換候補の一覧を活用して快適に入力す...：ITpro

2013/12/16 6 users ITpro 器械 手がかり 変換候補 候補

「器械」や「機械」など日本語には使い分けが難しい同音異義語がたくさんあります。使い分けに悩んだときは、言葉の意味を変換候補の一覧に表示させると手がかりになります。IME 2010では、最大九つの変換候補が表示され、それ以上候補がある場合はスクロールバーが表示されます。 続きを読む

Mozilla Re-Mix: スクロールバーの代わりにページのイメージマップを表示して該当箇所へ簡単にジャンプできるFirefoxアドオン「Scrollmap」

2013/12/16 8 users マウスホイール Firefoxアドオン Firefox 位置

Firefoxで長いページを表示すると、UI右側にスクロールバーが表示されます。 マウスホイールを回転させたり、このスクロールバーをマウスでドラッグすることで、ページの上下位置へ移動することができるようになるわけですが、はじめて訪問するページではどこにどんなコンテンツがあるかわからないため、ただ適当にスクロールしてもあまり意味がありません。 このように、コンテンツの位置を把握していないページでは、... 続きを読む

Firefox が新ロゴを採用、23ベータはSocial API や OS X 対応強化 - Engadget Japanese

2013/06/28 60 users Firefox Engadget Japanese バウ

Firefox が新ロゴを採用、23ベータはSocial API や OS X 対応強化 By Ittousai posted 2013年06月28日 19時10分 0 Firefox 22 正式版のリリースにともない、Mozilla が Firefox 23 ベータの提供を開始しました。 主な更新点は、Mac OS X 10.7 Lion 以降の消えるスクロールバーや、端までいくと跳ね返る「バウ... 続きを読む

Unicodeの全文字セットと便利ツールが揃った -Unicode character table | コリス

2013/06/10 61 users コリス unicode 無限スクロール 記号 便利ツール

Unicodeの全文字セットを見やすくまとめたUnicode character tableを紹介します。 見たことのない文字や記号を眺めているだけで、ちょっと楽しいです。 Unicode character table 上記キャプチャだと2スクロール分のスクロールバーしか表示されていませんが、テーブルは無限スクロールとなっており、スクロールするとどんどん表示されます。 続きを読む

[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス

2013/04/09 101 users コリス CSS Step ボーダー テクニック

ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲... 続きを読む

[Mac] 操作性重視ならスクロールバーは常時表示

2013/02/18 16 users フォルダ Mac 見た目 ファイル 常時表示

必要な時だけ現れるスクロールバーは見た目 ○ でも操作性は × OS X 10.7 Lion 以降ではスクロールバーの初期設定は以下のようになっていると思います。 普通ならこの設定で十分使えるのですが、個人的には以下の理由からスクロールバーを常に表示する設定に変更しました。 大した事ではありません。ちょっと待てばスクロールバーが消えるのは承知しています。 ただ、ファイル（フォルダ）をクリックするた... 続きを読む