これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
エクセル（Excel）で2つのプルダウンリストを連動しよう♩+INDIRECT関数 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
2つのプルダウンリストを連動させる 動的に選択肢を出すなんて、難しい数式が必要なんじゃない？と思うかもしれませんが、そんなことないんです！ 以前紹介した「名前」という機能を使って、簡単に2つのプルダウンリストを連動させてみましょうー。 1. 表を作成する たとえば、こういう感じの表を作成するとします。 この表のなかで、「ユニット（職種）」と「担当者」の2か所をプルダウンで選びたい！ 選んだユニットと連動して、担当者の選択肢が変わるようにしたい！とします。 2. リストの元データに「名前」を付ける まず、選択肢の元となるリストを作ります。 例の場合ですと別シートで作成していますが、同じシート内でも大丈夫です^^ タイトルを付けて表形式にすることで、編集をする場合や他の人が見る場合にわかりやすくなります。 ここで活躍するのが前回説明した「名前」の機能です。 プルダウンリストは、「名前」を使って
:checked擬似クラスでチェックボックスに連動して要素を表示させる方法
CSSの:checked擬似クラスを使って、チェックボックスに連動して要素を表示させる方法を紹介します。 １．はじめに 次のようなチェックボックスがあるとします。 そして、チェックボックスのチェックに連動してテキストフィールドを表示（または非表示）させるものとします。 このような制御を行いたい場合、次のようなjQueryを書けば実現できます（よりエレガントな書き方はあると思いますが）。 <script> $(function(){ $('input[type=checkbox]').click(function() { if ($(this).prop('checked')) { $('.bar').show(); } else { $('.bar').hide(); } }); }); </script> <div class="foo"> <input id="foo" type="c
SlideShare等にあるスライドを動画とシンクロさせるJavaScriptライブラリ・Presentz
自分では多分使わないと思います けど、技術が凄いなーと感じたの でご紹介。よくあるスライドを、 YoutubeやVimeoなどの動画にシン クロさせる、というライブラリ だそうです。 自分で動作テストしたわけじゃないので紹介だけ。スライドと、そのスライドを紹介する動画をシンクロさせ、動画を再生すると同時にスライドを自動で進行させる、というライブラリ。うまく説明できませんのでデモを見たほうが早いです。 Webサービスになっていますが、ソースも公開されています。node.jsを使ってるみたいですね。 動画を再生すると、その動画中で紹介してる箇所をスライドも表示、動画が進むとスライドも次ページに移動してくれる、というもの。 将来、学校の授業もこんな感じになるんだろうか・・以下で動作デモを確認出来ます。ライブラリのライセンスはGPLとの事。使い方は確認してないので割愛します。 Presentz
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」:phpspot開発日誌
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 2011年03月10日- Popcorn.js | The HTML5 Video Framework HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容にあわせてTwitterのタイムラインを流したりと、将来的に色々なところでこういった見せ方が見られるのでは？というもので一見の価値はあります。 独自のブラウザベースのオーサリングツールによって、映像と連動要素の組み立ても簡単。 TwitterやFlickr、Google地図に既に対応していますが、プラグインベースなので今後も拡張していくみたい。 映像の位置を地図で別ブロックに表示する例 ビデオ
jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン
jQueryでサイドメニューの折りたたみを実現するListfolderプラグインを紹介します。同じようなプラグインはすでに存在すると思いますが、勉強がてら作ってみました。 １．機能 このプラグインを利用すれば、サイドメニュータイトルをクリックすることで、リストの折りたたみが簡単にできるようになります。 折りたたみ機能だけであればjQueryを数行書けば実現できますが、このプラグインのウリは折りたたみ状態をクッキーに保持することです。クッキーに保持するので、リロードや他のページに移動しても折りたたみ状態が初期状態に戻ることはありません。 動作は以下の配布ページで確認できます。配布ページのサイドメニュータイトルをクリックすれば折りたたみを行えます。 jQuery listfolder plugin 以下、インストールと利用方法を説明します。 ２．プラグインのダウンロード・インストール List
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「いいね！」するとコンテンツを見る事が出来るファンゲート対応のFacebookページをWordPressで作る手順
Account Suspended