ブラウザで開きすぎたタブやウインドウをリスト化して簡単に切り替え可能なブラウザ拡張機能「Tabist」
ブラウザーで大量のウインドウやタブを開いた結果、ページの管理が困難になった経験がある人は多いはず。Google ChromeおよびMozilla Firefox向け拡張機能の「Tabist」では、ウインドウやタブをリスト化することで簡単に切り替えることが可能とのことなので、実際に使用してみました。 GitHub - fiveNinePlusR/tabist: Simple Tab Manager Extension for Chrome and Firefox. https://github.com/fiveNinePlusR/tabist Tabist - Chrome ウェブストア https://chrome.google.com/webstore/detail/tabist/hdjegjggiogfkaldbfphfdkpggjemaha Tabist – Get this Ext
CSSだけでスマホ等ではアコーディオンになるレスポンシブな疑似テーブル
Result PCではテーブル、スマホやタブレットではアコーディオンになるやつ。もう少し使いやすくできそうですが・・ テーブルに見えますが実際はtableタグは使われておらず、display:table;で実装されていますのでタイトルには疑似と付けています css#table { display: table; width: 100%; background: #fff; margin: 0; box-sizing: border-box; } .row { display: table-row; } .cell { display: table-cell; padding: 6px; border-bottom: 1px solid #e5e5e5; text-align: center; } input[type="radio"], input[type="checkbox"] { d
エクセル（Excel）で2つのプルダウンリストを連動しよう♩+INDIRECT関数 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
2つのプルダウンリストを連動させる 動的に選択肢を出すなんて、難しい数式が必要なんじゃない？と思うかもしれませんが、そんなことないんです！ 以前紹介した「名前」という機能を使って、簡単に2つのプルダウンリストを連動させてみましょうー。 1. 表を作成する たとえば、こういう感じの表を作成するとします。 この表のなかで、「ユニット（職種）」と「担当者」の2か所をプルダウンで選びたい！ 選んだユニットと連動して、担当者の選択肢が変わるようにしたい！とします。 2. リストの元データに「名前」を付ける まず、選択肢の元となるリストを作ります。 例の場合ですと別シートで作成していますが、同じシート内でも大丈夫です^^ タイトルを付けて表形式にすることで、編集をする場合や他の人が見る場合にわかりやすくなります。 ここで活躍するのが前回説明した「名前」の機能です。 プルダウンリストは、「名前」を使って
今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、サリーです。 最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。 「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。 今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。 【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時
Top 30 Fabulous jQuery Sliders for Free
If you are looking for ways to spice up your website design, then jQuery objects are definitely a must to include. These simple scripts not only improve the design of your site’s pages, but they also offer a more unique functionality. Sliders are some of the most versatile of these jQuery objects and here are some of them that will surely look great on your web site. Free jQuery Slider Let’s have
汎用性の高そうなjQueryイメージスライダー・Fotorama
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script>本体とプラグインとCSSを読み込みます。 <div class="fotorama"> <
Movable Type管理画面のカテゴリ一覧を折りたたむ「ListCategoryFolderプラグイン」
Movable Type管理画面のカテゴリ一覧を折りたためるようにする「ListCategoryFolderプラグイン」を公開します。 １．機能 Movable Typeのカテゴリ一覧画面は、jQueryを使ってカテゴリーの追加・削除やドラッグ＆ドロップによる並び替えができる仕組みになっており、非常に便利です。 ただ、カテゴリ数が数百以上になると、スクロールしたり並び替えを行うのが結構大変です。 このプラグインを利用すれば任意のカテゴリを折りたたむことができるようになり、作業効率がアップします。 折りたたんでいない状態 折りたたんだ状態 また、カテゴリの追加・削除やカテゴリの並び替えなどを行っても、折りたたみを常に行うことができます。 動作確認バージョンは以下です。 5.14 5.2.6 6.0b1 ２．価格 3300円/1インストールMT（税込み）。お試しはご自由にどうぞ。 ３．プラグイ
Chrome拡張機能の有効/無効の切り替えをワンクリックで行える拡張機能「Extensity」 : 二十歳街道まっしぐら
Extensityは拡張機能のON/OFFが手軽にできる拡張機能です。 拡張機能のメニューを表示させて、 有効/無効の切り替えをするのってけっこう手間ですよね。 一覧になっていますが、いろいろ情報があって、 スクロールめんどうだし、メニューを開くまでのステップもめんどくさい！ そんな方が重宝する拡張機能かと思います。 拡張機能メニューから他の拡張機能の有効/無効が行えますよ。 以下に使ってみた様子を載せておきます。 まず「Extensity」にアクセスしましょう。 Chromeに拡張機能をインストールしましょう。 このように拡張機能一覧が表示されます。 拡張機能の名前をクリックすると、その場でON/OFFができますよ。 頻繁に一部の拡張機能を有効/無効にする方にはとても便利だと思います。 ぜひご活用ください。
Jquery-flip
jQuery Flip Plugin jQuery/jQuery mobile plugin to give Flipboard app like effect. Flip effect uses css 3d transform. Flip effect currently works on WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11. It still works with other browsers but the "slide" effect will be selected forecely. Compatibility Current version is compatible with jQuery 1.6.4, 1.7.0, 1.7.1 and jQuer
[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 上：垂直くるっ、下：水平くるっ CSS Flip Boardsの実装 くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。 垂直にはtop、水平にはleftを指定します。 垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル：表</h2></div> <div class="flipped"><h2>パネル：裏</h2></div> </div> </div> 水平にくるっ <div class="fl
Unslider | Laptop Reviews & Buying Guides
Gaming Laptop 4 Best Mini-LED Laptops in 2023 Regardless of whether you’re gaming or just need an excellent display, our recommendation for the best Mini-LED laptops in 2023 that you can buy should help. Read More 2-in-1 Laptops 4 Best 2-In-1 Gaming Laptops 2-in-1 gaming laptops do exist. Certain 2-in-1 laptops have beefy specs that make them viable for modern gaming. Read More Buying Guides 5 Bes
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
DAD UNION – エンジニア同盟｜世のエンジニアを手助けするテック系サイト
JavaScript JavaScriptで簡単にBase64エンコード＆デコードの完全ガイド 2024-06-10 dad-union
[JS]フェードで表示・非表示するFAQコンテンツをシンプルなコードで実装するチュートリアル
jQueryを使って、FAQのAnswerをフェードで表示・非表示を切り替えるコンテンツをシンプルなコードで実装するチュートリアルを紹介します。 Questionクリック時 実装 Step 1: 外部ファイル 「jquery.js」を外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> Step 2: HTML 質問はh3要素、回答はp要素で実装し、div要素で内包します。 <div id="w"> <h2>User Accounts</h2> <div class="q"> <h3 class="qhead"><a href="#q01">よくある質問</a></h3> <div clas
幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider - かちびと.net
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード <script type='text/javascript' src='http://ajax.googleapis.c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Kimiya Kitaniの徒然なるブログ
The Hashslider is dead, long live the Hashslider
http://dan-silver.github.io/ElementTransitions.js/
Blog - Diamond Casino Online