タグ スクロールバー
人気順 5 users 10 users 50 users 500 users 1000 users重要情報はスクロールしないと見えないが、スクロールバーがない EC事業者に業務停止命令
消費者庁が通信販売事業者LITに業務停止を命じた。同社のECサイトではスクロールしなければ見えない位置に重要情報を小さく記載していたが、ページにはスクロールバーを表示していなかった。 消費者庁は6月28日、ヘアケア商品やサプリメントを販売する通信販売事業者LIT(東京都目黒区)に業務停止を命じたと発表した。... 続きを読む
HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経... 続きを読む
消えゆくスクロールバー|3inowayosuke|note
最近スクロールバーを見かけなくなった気がします。ざっと調べてみると、スクロールバーはすでに消え始めており、今のスタンダードはスクロールインジケーターになってる様です。そうかと思えば、そのスクロールインジケーターすら消え始めている状況です。 ▼1.消えゆくスクロールインジケーター1.1 フェイスブックiO... 続きを読む
[CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス
ビューポートを使った単位(vw, vhなど)は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか? サイトのナビゲーションやページコントロールはどうでしょうか? それらは計算に含まれますか? スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表... 続きを読む
[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む(スクロール非対応) Step 2: ページ全体を角丸で囲む(スクロール対応) Step 3: ページ全体を角丸で囲む(スクロールバーを変更) Step 1: ページ全体を角丸で囲... 続きを読む
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar | コリス
大きいコンテンツをクリップして配置する際に添えるスクロールバーを実装する3KBと超軽量のjQueryのプラグインを紹介します。 Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけ... 続きを読む
[JS]テキストでも画像でもリストでもテーブルでも、長いコンテンツにスクロールバーを加えるスクリプト -Scrolite | コリス
デモページ:p要素 Scroliteの使い方 外部ファイル スクリプトとスクロールバー用のスタイルシートを外部ファイルとして記述します。 <script src="lib/jquery.min.js" type="text/javascript"></script> <script src="lib/jquery.scrolite.min.js" type="text/javascript"></... 続きを読む
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと. net
題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 Tiny Scrollbar こんな感じでデザインを変えられます。せっ... 続きを読む
[JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll | コリス
live demo: IFrame iframeを使ったデモです。 div要素と同様にスクロールバーのカスタマイズ、コンテンツのズームが可能です。 NiceScrollの特徴 既存のコードの修正無しで、簡単に設置ができます。 ページのスペースを必要としないスクロールバーを設置できます。 スクロールバーのデザインを変更できます。 すべてのブラウザでマウス・キーボードでスクロールができます。 スクロー... 続きを読む
流行のjQueryでスクロールするサイトを集めてみました | Webロケッツマガジン
jQueryでコンテンツをスクロールさせる海外サイトを最近見るのですが、あれはかっこいいですね。そこで、今回の記事では、jQueryでコンテンツをスクロールさせているサイトをいくつか紹介しつつ、このタイプのサイトに特有の問題についても触れてみたいと思います。 はじめに コンテンツをスクロールバーではなく、JavaScriptでスクロールさせる場合、ブラウザのスクロールバーが出ないため、「ブラウザか... 続きを読む
Facebookページの作成 第1回『iframe対応ページ追加』 / Facebook基礎 | HTML5でサイトをつくろう
Facebookページ制作 今回から3回に分けて、当ブログのFacebookページを制作した手順をご紹介したいと思います。 第1回目は『iframe』に対応したページの制作方法を紹介します。 第2回目はFacebookページからスクロールバーを非表示にする方法を紹介します。 第3回目は『Static HTML Iframe Tab 』アプリを紹介します。 尚、今回の『iframe』に対応したページ... 続きを読む
商用利用も無料、洗練されたデザインのウェブ用UIエレメントのPSD素材 -Design Kindle | コリス
ボタン、スライダー、スクロールバー、フォームの各エレメントなど、ウェブデザインに使用するUIエレメントのPSD素材をDesign Kindleから紹介します。 Sleek UI Elements Blaubarry UI [...] 続きを読む
ウェブ用の各エレメントが揃った、かわいらしいデザインのPSD素材 -Soft UI Kit | コリス
検索ボックス、ボタン、アラートパネル、プルダウン、スクロールバーなど、ウェブデザインで使用するさまざまなエレメントをかわいらしいデザインでまとめたモックアップ用のPSD素材を紹介します。 Soft UI Kit: Fre [...] 続きを読む
独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまった... 続きを読む
[JS]イージングにも対応した、コンテンツをスクロールさせるスクリプト -Custom Content Scroller | コリス
限られたスペースに設置するのに最適、コンテンツにスクロールバーを設置するjQueryのプラグインを紹介します。 スクロールバーのデザインはCSSで簡単にカスタマイズできます。 jquery custom content [...] 続きを読む
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 仮にJavaScript がオフでも素のテーブルが表示され、問題にはなり... 続きを読む
ウェブデザインのタブーをあえて破ってみるための10のTips | コリス
ウェブデザインにいつもと違うアイデアを入れてみるための10のTipsをWeb Designer Depotから紹介します。 10 Web Design Rules That You Can Break 下記、各ポイントをピックアップしてお届けします。 はじめに 1. 水平方向のスクロールバーを表示しない 2. フォントの書体は必要最小限の数だけ使用する 3. やたらと多くのカラーを使用しない 4.... 続きを読む
どうしてブラウザで長文が読めないのか - コトリコ
日本語, コンピュータ今日の日記は長いです。 スクロールバーの問題どうしてブラウザで、長文が読めないのでしょうか。今回はスクロールという機能に限定して、考えてみましょう。 スクロールの問題スクロールには様々な問題点があります。その中で、長文が読めない理由と関連が深いのは、下記の三点です。 スクロールバーから得られる情報が少ない スクロールさせる方法が何種類もある 同じ操作で返ってくる反応が異なる次... 続きを読む
[CSS]背景画像をページの最下部に固定表示させるスタイルシート | コリス
Fixed Footer Backgrounds with CSS demo, demo 2 デモではスクロールバーの有無の2パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。 仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「fixed bottom」にします。 コンテンツを内包するdiv(headwrap)を設置し、ページ... 続きを読む
CSSデザインできるスクロールバー表示JavaScript (fleXcroll) - youmos
通常のスクロールバーデザインはブラウザやOS環境に依存するため、コンテンツデザインに合わない場合があります。コンテンツ内に表示するスクロールバーをCSSでデザインできるようにしてくれるのが、fleXcroll。 ダウンロードサンプルに含まれるデザインスクロールバーは2種類となっている。あまり良いデザインではないので、自身で作成するのが良いだろう。デザイン用のイメージ素材とスタイルシートを作成すれば... 続きを読む
デザインスクロールをブロック要素に適用するJavaScript (jsScrolling) - youmos
ブロック要素など、コンテンツ上で長い文章やソースコードなど表示したい場合便利なのが、jsScrolling。ブラウザのスクロールデザインとは異なるオリジナルのスクロールバーを表示させることが出来る。 サイトのデザインに統一感を出したい場合に、コンテンツに配置したイメージをスクロールバーとして利用することも出来る。機能ごとにJavaScriptファイルが分かれているがサンプルを参考に作成すれば比較的... 続きを読む
GeckoのReflowをアニメーションにする - 最速チュパカブラ研究会
MDCの記事用にGeckoのReflow(レイアウトを組み立てる処理)の過程をアニメーションGIF↑にしましたが、これが思ったより良い画になったので、トゥイーニングをつけてムービーを作ってみました。まず、みんなの好きなGoogle。あんまり面白くないです 続いてWikipedia。スクロールバーが出て表示域が狭まったために、サイズを再調整している様子が見えます。 最後に、Mozilla.orgのト... 続きを読む
Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消|CSS HappyLife
中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。 あのズレ、気になる人っていますよね? すぐ分かるように簡単なサンプルを用意しました。 http://css-happylife.com/template/11/ あ、当たり前だけど、Firefoxで見て下さいね。 コレを解消する為に以下のスタイルを適用させればズレがなくなります。... 続きを読む
fladdict.net blog: 「本当に素晴らしいデザイン」とは、PICASAの変なスクロールバーみたいなものを言う
お気に入り巡回先の、羨望は無知の「なぜ「デザイン」という行為、「デザイナー」という職業は誤解されるのか」や、分裂勘違い君劇場の「エンジニアの方が優れたユーザインタフェースデザインができる理由」、F's Garageの「エンジニアがダメなUIデザインをする原因」 のあたりのデザイン論が、あんまりデザインと縁のない人にデザインをわかりやすく説明してて面白い。面白いのだけどちょっと抽象的なんで、具体例の... 続きを読む