ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA

2023/04/06 119 users ICS MEDIA HTML ユーザーインタラクション 紹介

HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、... 続きを読む

最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ

2022/07/26 164 users CSS ドロワー Airbnb NIKE Tesla

Apple, Nike, Tesla, AirbnbなどのWebサイトやスマホアプリで使用されている、CSSの一工夫加えたスゴ技テクニックを紹介します。 美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに... 続きを読む

Webサイトの動き続ける画像や動画、カルーセルのデザインをよりよくする | DevelopersIO

2022/06/02 11 users ユーザー 効果 DevelopersIO 良いデザイン 方法

新しく公開されるWebサイトに、動きのあるものが増えてきました。このような目を引くデザインは、視覚的な効果はありそうですが、困るユーザーもおられるようです。より良いデザインにする方法を考えます。 動きのあるWebサイトとは ここで取り上げる「動きのあるWebサイト」には、たとえば次のようなものがあります。 W... 続きを読む

Adobe XDステート機能を使いこなそう！ - ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 - ICS MEDIA

2020/03/05 11 users ポパー インタラクション ICS MEDIA 従来 複数枚

Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によ... 続きを読む

HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ | コリス

2020/01/15 19 users コリス scroll-behavior CSS HTML 挙動

カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元... 続きを読む

[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js | コリス

2018/04/16 51 users コリス jQuery スライダー Glide.js CSS

jQueryなどのスクリプトやアニメーションのCSSに依存せずに、レスポンシブ対応の快適なスライダー・カルーセルを実装する軽量のスクリプトを紹介します。 スライダーは最後を表示した際に1枚目に巻き戻し、カルーセルは最後を表示した際に巻き戻さずにそのまま1枚目を表示します。 Glide.js Glide.js -GitHub Glide.jsの特徴 Glide.jsのデモ Glide.jsの使い方 ... 続きを読む

検索結果数が10件⇒5件、「次へ」⇒「もっと見る」のモバイル検索をGoogleがテスト中 | 海外SEO情報ブログ

2017/12/11 30 users Google モバイル検索 海外SEO情報ブログ テスト中

[レベル: 中級] 検索結果数が少ないうえに、ページネーションせずに「もっと見る」ボタンで結果を新たに追加表示するモバイル検索を Google はテストしている模様です。 少ない検索結果 & もっと見る 通常、検索結果は10件のオーガニック検索に加えて、強調スニペットや、トップニュースや動画のカルーセル、広告などのさまざまな要素が挿入されます。 合計で10件以上になる検索結果はまったく珍しくありま... 続きを読む

レスポンシブに対応しててCSSでデザインを柔軟に変更できるスライダー「Slider Pro」がなかなかいい – Rriver

2017/09/07 57 users Rriver レスポンシブ スライダー CSS プラグイン

ウェブ制作をしてるとスライダーやカルーセルってなにかと必要になるので、レスポンシブやタッチ操作などに対応していて、CSSで柔軟にデザインをカスタマイズできるスライダーのプラグインをいつも探しています。 過去に試したものでいくつかいいのはあるんですけど「帯に長し 襷に短し」的なところが必ずあって、すべての要望を満たしてくれるやつには出会えていませんでした。自分でゼロから作るのもあれですし。利用できる... 続きを読む

slickのカレントクラスを利用した実装サンプル | NxWorld

2017/08/17 23 users Slick NxWorld class CSS スライド

手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド（表示の仕方やオプションの指定によって付与の対象となる位置は変わります）に対して .slick-current というclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。 そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプル... 続きを読む

slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法 | NxWorld

2017/08/08 16 users Slick NxWorld jQueryプラグイン カウント

使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。 実装イメージはこのようになっており、 現在のスライド数 / スライド総数 という形でカウントを表示させます。（イメージは全10枚中5枚目を表示しているという... 続きを読む

Bootstrap 4のさまざまなコンポーネント・レイアウトの実装方法がすぐ分かる便利なチートシート | コリス

2017/06/26 95 users コリス Bootstrap グリッド コンポーネント フォーム

Bootstrap 4のグリッドの作り方、カード型コンポーネント、ナビゲーション、カルーセル、フォームなどの実装コードとどのように実装されるかが一枚のページにまとめられた、Bootstrap 4のチートシートを紹介します ...記事の続きを読む 続きを読む

目的にあったJavaScriptのライブラリを探す時にかなり便利、JavaScript専門の検索エンジン -searchlibs | コリス

2017/06/18 133 users コリス スライダー スクロールエフェクト ナビゲーション 目的

スライダーやカルーセル、ナビゲーション、アニメーションを伴ったスクロールエフェクトなど、目的にあったJavaScriptのライブラリを探す時に役立つJavaScript専門の検索エンジンを紹介します。 人気はあるのか、ア ...記事の続きを読む 続きを読む

カルーセル、使っていいよ | ネコメシCEOブログ

2017/06/14 27 users フツウ アクセスログ ネコメシCEOブログ 部門 啓蒙サイト

カルーセルって、使っていいの？（Should I Use A Carousel? 日本語訳） 何だろうな、この啓蒙サイトは。 そもそも、今どき新たに作成されるカルーセルが、クリックされたいがために作成されてると思ってるって時点でナンセンスだ。 PCよりスマホのほうが多いってアクセスログを見せても、今でもトップページの一番上にこれを載せてくれっていう声が、社内の複数の部門からあがってくるとかフツウな... 続きを読む

Google、リアルタイム配信のブログ記事を検索結果に表示するカルーセルを一般公開 | 海外SEO情報ブログ

2015/11/29 15 users 目印 赤色 LIVE 実況 ラベル

[レベル: 上級]ライブブログ (Live blogs) の記事更新をカルーセル形式で検索結果に表示する機能をGoogleは一般公開しました。 ライブブログとは、たとえばアカデミー賞の授賞式やスポーツの試合などをリアルタイムにブログ記事で実況中継する配信方法です。赤色の「Live」ラベルが目印こちらはGoogle DevelopersのGoogle+アカウントがライブブログのカルーセルを導入したこ... 続きを読む

簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル | NxWorld

2015/06/11 94 users NxWorld bxSlider スライダー 実装 プラグイン

スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載ってい... 続きを読む

[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll | コリス

2015/03/26 48 users コリス jQuery ＥＣ フリック スライダー

コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。 スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。 eco Scroll eco Scroll -GitHub eco Scrollのデモ eco Scrollの使い方 ec... 続きを読む

カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと | クリックテールブログ

2015/01/06 145 users ClickTale 視覚 クオリティ ヒートマップツール 使い

世界で10万社が導入しているヒートマップツール「クリックテール(clicktale)」についての機能情報や活用事例などを紹介します！ 大きくきれいな画像を横並びに使い、視覚に訴えるサイトデザインを実現できる「カルーセル」。見るからにカッコいいデザインなので、サイトのクオリティを上げるため「カルーセルパネル」を導入したサイトも数多くあるでしょう。 とは言え、この「カルーセルパネル」を使用するか否かと... 続きを読む

Appleがトップページで自動送りカルーセルをやめた理由 – Rriver

2014/09/23 712 users Appl Rriver ぼっち Apple 世間

世間のみなさんがiPhone 6の発売開始で盛り上がっているなか、Rriverでは、まだAppleウェブサイトで盛り上がっておりますw 先日のiPhone発表後にAppleウェブサイトが刷新されたのはご存知の通りですが、その際、Appleのトップページ では自動送りのカルーセルのみが使われていました。 こんな感じで。どーん！と。 画像の下にあるポッチでカルーセルであることがわかりますね。 Appl... 続きを読む

ローテーションバナーは"悪"なのか？ ローテーションバナーを使うべきでない3つの理由 | 海外SEO情報ブログ

2014/02/18 99 users ユーザーエクスペリエンス コンバージョン トピック 趣旨 対象

[対象: 初〜中級]SEOではなくユーザーエクスペリエンス/コンバージョンが今日の記事のトピックです。「ローテーションバナー」を使うべきでないという趣旨の記事をConversionXLブログが公開しました。ローテーションバナーは、スライド式に自動的に画像が切り替わるバナーで、バナースライダーやカルーセルなどと日本語で呼ばれることもあります。個人的にもローテーションバナーが僕は大嫌いなので（笑）、C... 続きを読む

iOS 7のユーザーエクスペリエンス評価 – U-Site

2013/12/02 122 users U-Site 原文 スクロール スワイプ iOS 7

iOS 7のユーザーエクスペリエンス評価 公開：2013年12月2日付（日本語版）、2013年10月12日付（原文）　著者：Raluca Budiu 原文（英語）：iOS 7 User-Experience Appraisal 要約： フラットデザインは行動のきっかけとなる要素を見えなくしている。また、周辺部付近でのスワイプは、カルーセルやスクロールに干渉する可能性がある。 iOS 7はApple... 続きを読む

タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」:phpspot開発日誌

2013/08/12 70 users カルーセル実装jQueryプラグイン タッチ 実装

タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 2013年08月12日- Owl Carousel タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」。 タブレット出荷数がPCを上回る等、今後も伸びるタブレットでも使えるタッチ可能かつレスポンシブなカルーセルが実装可能です。 Appleのホーム画面っぽいページお... 続きを読む

ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」:phpspot開発日誌

2013/02/12 41 users overview スライダー jQueryプラグイン 見せ方

ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 2013年02月12日- Overview - jQuery Rondell ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」。 次のように、カルーセルやスライダー等、様々な画像ギャラリーのUIを実現することができます。 多機能だけじゃなくて、カッコいい... 続きを読む

自動送りカルーセルとアコーディオンは、ユーザーをいらつかせ、可視性を下げる – U-Site

2013/02/04 109 users アコーディオン U-Site Siemens ユーザー タスク

先日、イギリスでユーザビリティ調査を実施したのだが、そこで、あるユーザーが「Siemensは洗濯機のキャンペーンをしているか」というタスクを行おうとしていた。 そのユーザーはさして苦労もせず、イギリスのSiemens Appliancesのこのホームページにはたどり着いた： どうだろう、そのユーザーは先ほどの課題に答えを出すことができただろうか。ホームページ上での最も大きなアイテムが、画面スペース... 続きを読む

[CSS]スクリプトに依存せずに、「:checked」でできるテクニックをBootstrapに組み込むプラグイン -Bootleg.css | コリス

2012/12/10 87 users コリス checked Bootstrap アコーディオン

タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。 Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学ぶのにも役立ちます。 Bootleg.css 仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック... 続きを読む

幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider - かちびと.net

2012/09/02 83 users 備忘録 スライダー 一度 net プラグイン

以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 ... 続きを読む