ユーザー操作の一括無効化で役立つ！ 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の一工夫加えたスゴ技テクニックを紹介します。 美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに... 続きを読む

[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の使い方 ... 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

カルーセルの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のホーム画面っぽいページお... 続きを読む

自動送りカルーセルとアコーディオンは、ユーザーをいらつかせ、可視性を下げる – 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は異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 ... 続きを読む

拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarousel - かちびと.net

2012/06/13 93 users アコーディオン jQuery ブワッ 備忘録 net

クリックで画像を拡大する際に アコーディオンのように広がる カルーセルを実装するjQueryの プラグイン・Accarousel。機能 はシンプルですが、動きが好み だったので備忘録。 カルーセルを実装するjQueryプラグインです。 Accarousel 見た目は普通のカルーセルですが、画像をクリックすると以下のように拡大されます。 なんと言うか、横にブワッと広がる感じ。ブワッと。 頭悪いから上... 続きを読む

[JS]アコーディオンとカルーセルが合体したスライダーのスクリプト -Accarousel | コリス

2012/06/12 63 users コリス アコーディオン スライダー stylesheet 実装

Accarouselの使い方 実装は簡単で、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 ※スタイルシートはLESS版も用意されています。 <link rel="stylesheet" type="text/css" href="accarousel.css"/> <script type="text/java... 続きを読む

スマフォのフリックにも対応しているカルーセルを実装できるJSライブラリ・inflickity - かちびと.net

2012/04/08 63 users フリック JSライブラリ ソフトウェア スマフォ 貴方

スマフォのフリックにも対応しているカルーセルを実装できるJSライブラリ・inflickityのご紹介。永久にフリックできる、みたいな感じのカルーセルを実装します。 かちびと.netとは 貴方のネットビジネスを支えたい。かちびと.netはそんな思いを持ったサイトです。Web制作に役立つ素材やソフトウェア、Webサービス、マーケティングに役立つ情報などを配信しています。宜しければメモ代わりにご利用下さ... 続きを読む

簡単なjQueryコードで動く、レスポンシブWebデザイン対応のカルーセルを実装する為の雛形っぽいやつを作成してみる - かちびと. net

2012/02/15 51 users jQuery jQueryコード 雛形 net プラグイン

レスポンシブWebデザインに対応できる コンテンツスライダーのようなものの 雛形のようなものが欲しかったので、 自分で作成しました。テンプレなので 他の配布スクリプトのように親切な 設計じゃないですけど・・ レスポンシブWebデザイン対応のjQueryで動くカルーセルを作るための雛形っぽいのを作ってみました。全然大したもんじゃないんですがｗ 最初から小さい画面での表示も考慮しているのでプラグインで... 続きを読む

高機能なカルーセルを実装するjQueryプラグイン５０まとめ:phpspot開発日誌

2012/02/02 88 users tripwire magazine クセ 需要 参考 特徴

50 Best jQuery Carousel Roundup - tripwire magazine 高機能なカルーセルを実装するjQueryプラグイン５０個がまとまっています。 最近色々なところでカルーセルがチラホラ見られるようになって、需要がそれなりにあるんだなと思っていますが、ライブラリそれぞれに特徴やクセがあるため、自分の使いやすいものを使いたいですね。 そういった際に参考にできるまとめ... 続きを読む

[JS]HTMLコンテンツにも対応、カルーセルで表示するスライダーのスクリプト -jShowOff | コリス

2011/02/08 100 users div要素 コリス テキスト スライダー 親要素

一つ以上の子要素と、それらを内包する親要素をスライダーとして使用します。 下記は、テキストや画像を配置したdiv要素を子要素として、それらを内包するdiv要素を配置しています。This is a slide! 続きを読む