これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます

2024/01/11 90 users details ウィジェット 連動 かなり 個別

<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動... 続きを読む

CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン | Webクリエイターボックス

2018/11/14 207 users details CSS Webクリエイターボックス 補足説明

2018年11月14日 CSS, HTML5 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部... 続きを読む

Nintendo Laboコンテスト受賞作品発表。太陽光を使ったアコーディオンなど9作品 - Engadget 日本版

2018/07/16 182 users 太陽光 Engadget 日本版 9作品

米Nintendoが開催していた、Nintendo Laboを使った創作コンテスト「Nintendo Labo Creators Contest」の受賞作品を発表しました。 Nitendo Laboは、SwitchのToy-Conに搭載されているセンサーやスイッチ類を使い、段ボールを組み合わせてピアノや釣り、ラジコンなど様々な遊びを行えるもの。また、Toy-Conガレージを使用... 続きを読む

どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス

2018/05/18 250 users モーダル コリス パララックスエフェクト スライダー アイコン

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに... 続きを読む

モバイルサイトのサブナビゲーション – U-Site

2017/11/16 61 users U-Site モバイルサイト 下位カテゴリー 実装方法 うち

モバイルサイトのサブナビゲーションの主な実装方法としては、アコーディオンやシーケンシャルメニュー、セクションメニュー、カテゴリーランディングページが挙げられる。このうちのどれがそのサイトに最適なのかは、IAにある下位カテゴリーの数やサイトでのユーザーの移動パターンによって決定される。 Mobile Subnavigation by Raluca Budiu on July 16, 2017 情報ア... 続きを読む

「トランプのスピーチを二度と前のように見られなくなる」、喋りながらアコーディオンを演奏するトランプのムービーがYouTubeで公開中 - GIGAZINE

2017/01/17 129 users GIGAZINE YouTube スピーチ 二度 両手

2017年01月17日 20時00分00秒 「トランプのスピーチを二度と前のように見られなくなる」、喋りながらアコーディオンを演奏するトランプのムービーがYouTubeで公開中 ドナルド・トランプ氏がスピーチで両手を動かす様子にアコーディオンの映像と音を合成させ、トランプ氏のスピーチに合わせて軽快な音楽が奏でられるムービーがYouTubeで公開中です。「トランプ氏のスピーチを二度と前のように見られ... 続きを読む

Wordpressのメニューとサイドバーをスマホ用に横からスライドイン表示させるカスタマイズ方法

2015/03/19 60 users WordPress グローバルナビ モーダル 本文 サイドバー

WordPressテーマのスマホ表示は、結構頭を悩ませるところです。 中でも特に、グローバルナビメニューや、サイドバーのスマホでの扱いには悩むところです。 僕はこれまで、グローバルナビの場合は、非表示にしておいて、アコーディオン表示させるか、モーダル表示させるかしていました。 サイドバーの扱いはもっとぞんざいで、回り込みを解除して、本文の下に表示させるということぐらいしか、できていませんでした。 ... 続きを読む

グリッドからナビゲーション、スライダー、フォームなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワーク -Responsive Framework | コリス

2014/12/12 52 users コリス フレームワーク スライダー グリッド コンポーネント

ページのグリッドをはじめ、ナビゲーション、スライダー、タブ、アコーディオン、フォーム、ショッピングカートなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワークを紹介します。 Free Responsi...記事の続きを読む 続きを読む

デスクトップの複雑なコンテンツに対するものとして、アコーディオンが常に答えになるとは限らない – U-Site

2014/07/09 73 users 見出し アコーディオンメニュー 垂直方向 ユーザー リスト

アコーディオンメニューとは見出しを垂直方向に並べたリストで、見出しをクリックすることでそれに関連したコンテンツを出したり、見えなくしたりできるもののことである。これはコンテンツをユーザーに徐々に見せる方法の1つで、広げたり、あとで見るために隠したままにすることでコンテンツをコントロールできるので、読むものと無視するものをユーザー自身で決められる。ユーザーがコントロールできるようにする、というのは、... 続きを読む

最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills | コリス

2014/04/16 387 users Refills コリス ブッダ モーダル ヘッダ

ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。 Refills Refills -GitHub デモでは、さまざまなコンポーネントの動作が確認できます。 ナビゲーション 下に半分見えてるのは、打ち出しコンテンツ 各デモの「Show C... 続きを読む

レスポンシブWebデザインやスマートフォンサイトに最適なメニューを実装できるプラグインやチュートリアル 25 | NxWorld

2014/02/13 180 users NxWorld ウインドウサイズ セレクタ チュートリアル

いずれもメニューを実装する際に便利なプラグインやチュートリアルで、もちろんPCサイトでも問題なく使えますが、レスポンシブWebデザインやスマートフォンサイトといったサイトを制作する際には特に便利なものです。サイドからスライドしてくるものやウィンドウサイズが狭まるとセレクタやアコーディオンに変化するものなど、見せ方も様々なタイプがあります。ずらっと並んではいますが、大まかに同じような動きをするものは... 続きを読む

鳥肌注意…1台のアコーディオンでヴィヴァルディ四季「夏」を演奏 （動画）:らばQ

2013/07/15 58 users ヴィヴァルディ ベートーベン モーツアルト 鳥肌注意 演奏

鳥肌注意…1台のアコーディオンでヴィヴァルディ四季「夏」を演奏 （動画） 日本で一番売れたクラシック音楽はベートーベンでもモーツァルトでもなく、ヴィヴァルディの「四季」で、6種の録音バージョン違いの合計で280万枚、3番目のものはクラシック音楽唯一のミリオンセールを記録しています（イ・ムジチ合奏団演奏）。 その中でもアップテンポで激しい「夏」第3楽章を、なんとアコーディオン1台で再現している超絶演... 続きを読む

jQuery：よく使用される機能をまとめて実装できるプラグイン | NxWorld

2013/05/30 406 users 備忘録 jQuery NxWorld 散乱 jQuery関連

引き続きjQuery関連の備忘録。スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるプラグインのまとめです。予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりも... 続きを読む

[JS]コンテンツをデスクトップ時はタブに、タブレット・スマフォ時はアコーディオンにするスクリプト | コリス

2013/05/26 71 users コリス jQuery GitHub スクリプト タブ

シンプルなHTMLで、デスクトップ時は水平・垂直のタブに、タブレット・スマフォ時はアコーディオンに自動変更（指定も可）するレスポンシブ対応のjQueryのプラグインを紹介します。 Easy Responsive Tabs to Accordion Easy Responsive Tabs to Accordion -GitHub 特徴 デモ 使い方 特徴 レスポンシブ対応のタブをシンプルなHTML... 続きを読む

[JS]最近リリースしたjQueryのプラグインのまとめ -2013年1・2月 | コリス

2013/02/17 304 users jQuery コリス フォーマット タブ スライドショー

紹介済みから未紹介のものまで、最近リリースしたjQueryのプラグインをまとめました。 去年までは33+1選としてましたが、今年から新たなフォーマットで。 jQuery Migrate jQuery1.9で削除された機能を補完し、過去のプラグインでも動作するようにします。 jKit スライドショー・ライトボックス・タブ・アコーディオンなど多種多様なUI関係を実装できます。 ayaSlider 多彩... 続きを読む

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

2013/02/04 109 users カルーセル U-Site Siemens ユーザー タスク

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

タブやアコーディオン、パララックスなどを実装出来るjQueryベースのUIツールキット・jKit - かちびと.net

2013/01/05 147 users パララックス バリデーション 御挨拶 喪中 jQueryベース

jQueryベースのUIツールキット・jKit のご紹介です。タブやアコーディオン などの良く使われるものから、簡易的 なパララックスやバリデーション、ズ ーマーなどなど多機能なUIキットとな っています。 2013年になりました。喪中により新年の御挨拶を控えさせて戴きます。皆様に取って本年が充実した年でありますようお祈りいたします。 さて、今日はUIキットのご紹介。jQueryベースとなっていま... 続きを読む

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

2012/12/10 87 users コリス checked Bootstrap カルーセル CSS

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

» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder

2012/12/03 464 users ユーザーインタフェース ユーザビリティ 独断 アンチパターン

モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました... 続きを読む

質感がたまらないiOSのデザインアイコン - #RyoAnnaBlog

2012/08/18 401 users Braun デザインアイコン Dribbble iOS 質感

Tweet ボクシンググローブ 世界のデザイナーが集まるDribbbleで、質感がたまらないiOSアイコンを見つけた。どれも作り込みが素晴らしい。 ウイスキー Nikon 一眼レフカメラ レコードプレイヤー 日記 ミリタリーヘルメット 海水パンツ アクアリウムボトル アコーディオン コカコーラ キャップ プレイステーション マニラ封筒 BRAUN 時計 Amazon Kindle ホイール ヴィト... 続きを読む

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

2012/06/13 93 users カルーセル jQuery ブワッ 備忘録 net

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

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

2012/06/12 63 users コリス カルーセル スライダー stylesheet CSS

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

CSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニュー - かちびと.net

2012/04/10 89 users ブレークポイント ドロップダウン net グロー CSS

JSを使わず、CSSのみでドロップダウン メニューとアコーディオンメニューを 特定のブレークポイントで切り替える レスポンシブWebデザイン対応のグロー バルメニューのサンプルです。これは なかなか良いのでは。 JS不要で、ドロップダウン⇔アコーディオンをスマフォ閲覧時などに切り替えるグローバルメニューのサンプル。 Responsive CSS3 Drop-Down to Accordion 大き... 続きを読む

[CSS]この発想はなかった！inputとlabelを使って実装する美しいデザインのアコーディオン | コリス

2012/02/21 251 users コリス CSS 発想 美しいデザイン

パネルが開いた+ホバー時 パネルが開いている時のアローは上向きに変わります。 デモでは上記のチェックボックス版だけでなく、ラジオボタン版などもあります。 デモページ：チェックボックス版 デモページ：ラジオボタン版 デモページ：チェックボックス版・デフォルトオープン 実装 HTML 一つのアイテムに含まれるのは、チェックボックス、ラベル、コンテンツの3つです。それらをdiv要素で内包します。 <se... 続きを読む

スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」:phpspot開発日誌

2011/12/16 79 users スライダー phpspot開発日誌

スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」 2011年12月16日- Slidorion, A jQuery Plugin | jQuery Image Slider and jQuery Accordion | Random Demo スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」... 続きを読む