ブラウザで開きすぎたタブやウインドウをリスト化して簡単に切り替え可能なブラウザ拡張機能「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
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
Vue.jsで再利用可能なタブのUIコンポーネントを実装する方法を解説
タブは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。 スタイルを簡単にカスタマイズできる再利用可能なタブコンポーネントをVue.jsで実装する方法を紹介します。 How to Build a Tab Component In Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の概要 AppTabs.vueコンポーネントの作成 コードの解説 コンポーネントの使用方法 終わりに はじめに タブはUIでよく使用されるコンポーネントの1つで、Bootstrapのような人気のあるCSSフレームワークやTailwindUIのようなUIコンポ
PC内に装備しておきたいChrome拡張機能をご紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ みおです。 今回は、私が普段からとてもお世話になっている「toby」というChrome拡張機能をご紹介します。 Chrome拡張機能 「toby」とは 「toby」は開いたタブを一元管理してくれるChrome拡張機能です。Better than bookmarks （ブックマークより優秀）というコンセプトで2016年にあらゆるGoogle Chrome拡張機能の中で高評価を取得しています。 「toby」では、よく使用するタブをあらかじめ登録しておくとカテゴリーごとに管理してくれ、サイトやスプレッドシート、ドキュメントなど、必要なタブを必要なときにワンクリックですべて開くことができます。 こんなお悩みを持っている方におすすめ！ よく開くサイトがあるけどGoogleから毎回検索かけている…… PCの再起動後、消えてしまったタブを1から一つひとつ開いていて面倒…… ブックマークの一
コーディングに役立つ！Visual Studio Codeのちょっとかゆいところに手が届くような便利な機能とテクニック
あまり知られていないけれど、コーディングの作業が捗るVS Codeの機能とテクニックを紹介します。 今開いているファイルを残しながら新しいファイルを開けるようにしたり、コード内のコメントのカラーだけを自分好みに変更する方法など、ちょっとかゆいところに手が届くような便利なテクニックです。 5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension") by Mohmed Ishak 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ファイルを常に新しいタブで開くようにする 2. コメントのカラーを変更する 3. コードを大きく表示する 4. カ
Chromeでタブをたくさん開きがちな人に届け！作業効率を上げまくる拡張機能4選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 広報室のたびちん（@takiyoro）です〜。 今回はこれがないと暮らしていけない！ とまでなったChrome拡張機能を４つ厳選してお伝えします。 ▼以前ご紹介した、タスク管理に便利な拡張機能＋アプリの使い方はこちら 開けているタブをリスト化！ 「GetTabInfo」 ダウンロードURL あらゆるオフィスワーカーに知ってほしい！ タブで出したページのURLやタイトルなどの情報がリストになって出てきます。表示方法はテンプレート化が可能です。URLだけのリスト、タイトルとURLで間にタブを入れる、タイトルを＜＞などで囲むなど、柔軟に設定できます。 こういう感じで、同じウインドウ内で開いている複数タブをリスト化できます。 「ちょっとこの業界のURL調べてリスト化しといて」なんて命が下ったときに何度か救われた拡張機能です。複数タブを開けておき、これでリストにするだけなので、個人的な
JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components
<!-- Carousel --> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio"
Chromeで「新規タブ」を開くのが楽しくなる！おすすめ拡張機能17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ Webディレクターのきくりんです！ みなさん、「Google Chrome Extension」はご存知でしょうか？ 「Extension = 拡張」、要するに、Google Chromeの拡張機能のことです。 Google Chrome Extensionを使うと、ブラウザに様々な機能を追加したり、デザインを自分好みにカスタマイズしたりすることができます。いろいろできる拡張機能ですが、今回は「新規タブ」に注目！ 「新規タブはデフォルトのままでも困らないじゃない？」と思っているそこのあなた！ 新規タブをカスタマイズすると、とても良いことがあるんです。 それは、新しいタブを開くのが楽しくなること！ 1日に何回も開く新規タブ、どうせ開くのなら少しでも楽しめたほうがいいですよね？ あと、ほかの人とちょっと違うというのは、それだけでもうなんだかカッコイイ気がします。 というわけで、今
リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
Cookie AutoDelete - プライバシー保護に。タブを閉じたらCookie削除 MOONGIFT
プライバシーを重視する人にとってWebブラウジングは注意すべき点が多いことでしょう。個人のデータは大手のベンダーに吸い上げられており、広告などに使われています。不必要に収集した情報が漏洩することも少なくありません。 そこで使ってみたいのがCookie AutoDeleteです。タブを閉じる際にCookieを自動的に削除してくれる機能拡張です。 Cookie AutoDeleteの使い方 Cookie AutoDeleteはGoogle ChromeまたはFirefoxに対応しています。 インストール後は放置しておくだけです。ホワイトリストに入れておくことでCookieを削除させないこともできます。 設定です。 Webのトラッキングと言えばほぼCookieくらいでしょう。そのためCookieを削除しておくことでソーシャルボタンなどによるトラッキングを防げるようになります。そのサイトに都度ログ
新規タブを開いた時の表示をカスタマイズできるChrome拡張いろいろ
2019年8月14日 便利ツール Chromeのデフォルトだと、新規タブを開くとよくアクセスするWebサイトが表示されますね。以前はSpeed Dial 2を使っていましたが、無駄にそれらのWebサイトをチェックしてしまったりと作業効率が下がっていたので、「シンプルなToDoリストが表示したい！」と思いあれこれ調べてみました。ついでに面白そうな拡張もあったので記事にしましたよ。みなさんのお気に入りが見つかりますように！ ↑私が10年以上利用している会計ソフト！ 機能的なのとか New Tab Redirect New Tab Redirectは新規タブを開いた時に、任意のWebサイトを表示してくれます。デフォルトだとホームボタンをクリックした時のWebサイトは指定できるのですが、タブを開く時は決められないんですよね。いつもチェックしたいWebサイトがある時はこの拡張が便利です。 Speed
ラジオボタンでタブ実装
Result 今更感満載かもですが、いわゆるCSSオンリーのタブです。 :checkedと間接セレクタを使っています。 cssdiv{display: none;}/*非表示にしておく*/ input[value='1']:checked ~ #one{ display: block;}/*該当するradioボタンにチェックが入ったら表示に切り替え*/ input[value='2']:checked ~ #two{ display: block;} input[value='3']:checked ~ #three{ display: block;} input[value='4']:checked ~ #four{ display: block;}html<input type="radio" name="switch" value="1" checked="checked"> <in
ブラウザの新規タブに時計を表示して見た目もカスタマイズできるChrome・Firefox用拡張機能「CaretTab」
ウェブブラウザで新しくタブを開いたとき、過去に閲覧したサイトが表示されたり検索画面が表示されたりしますが、人に見られるのを気にして空白画面にしてしまうと、殺風景な画面になってしまい、機能性もなく不便に感じてしまうことは間違いなし。そんな時にChrome・Firefox用の拡張機能である「CaretTab」を使うと、新しく開いたタブに時計を表示することが可能です。 CaretTab, a simple New Tab replacement for Google Chrome | BlueCaret http://bluecaret.com/project/carettab ◆Chromeに「CaretTab」をインストール Google ChromeでChromeウェブストアの「CaretTab」にアクセスし、「CHROMEに追加」をクリック。 「『CaretTab - New Tab C
用途バラバラな複数のタブを一括管理できるFirefoxアドオン「Firefox Multi-Account Containers」レビュー
ネット上で「プライベート用」「仕事用」「ショッピング用」など、状況に応じてアカウントを使い分けている人は多いはず。しかし、Googleのようにいろいろなアカウントの紐付けが強いと、こっそりとプライベート用に開いているつもりだったのに、間違えて仕事用アカウントでログインしたまま趣味のサイトを開いてしまうという悲劇も起き得ます。ブラウジング中に複数タブやアカウントを使用する時の手間を省くため、Firefoxのアドオン「Firefox Multi-Account Containers」がTanvi Vyas氏によって開発されたので、実際にインストールして使ってみました。 Firefox Multi-Account Containers :: Add-ons for Firefox https://addons.mozilla.org/en-US/firefox/addon/multi-accou
open_newtab - 指定したディレクトリを新しいタブで開く
macOSで便利なコマンドにopenがあります。ディレクトリを指定すれば、そこをFinderで開いてくれる機能です。ターミナルで移動しながら、そこをGUI側で開きたいという時に役立ちます。しかし問題は常に新しいウィンドウで開くことです。 何度も使っているとウィンドウが多数開いて煩わしくなります。そこで使ってみたいのがopen_newtabです。 open_newtabの使い方 open_newtabを使ってコマンドを叩くと既存のFinderウィンドウで新しいタブとして開くようになります。 たったこれだけの機能ですが意外と便利です。デフォルトのopenと置き換えても良いかと思うほどです。open_newtabだとコマンド名が長いので、もっと短く素早く呼び出せるようにすると便利でしょう。 open_newtabはmacOS用のソフトウェア（ソースコードは公開されていますがライセンスは明記されて
Tabbie - Google Chromeのタブをグルーピングして管理
タブブラウザが主流になって、一つのウィンドウで多くのタブを開くのが当たり前になっています。そうした中では作業を切り替えようと思っても開いていたタブが多すぎて目的のタブがどこにいったか分からなくなってしまいます。 そこで使ってみたいのがTabbieです。タブをグループで管理できるGoogle Chrome機能拡張です。 Tabbieの使い方 タブを幾つか開いた状態で名前をつけて保存します。 そうすると名前が表示されます。後はこれのopenをクリックすればタブが再現されます。 Tabbieはそのウィンドウだけ（他のウィンドウは無視されます）保存してくれます。なので仮想デスクトップのように開発用、ニュースチェック用、プロジェクト毎にタブを分けて管理しても良さそうです。 TabbieはGoogle Chrome用のオープンソース・ソフトウェア（MIT License）です。 Tabbie - Ch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSUI - Interactive components in Pure CSS
Freezetab: a tool for saving content from the web.
今使用しているナビゲーションやタブやボタンにHTMLを汚さずにさまざまなアニメーションを適用できる -All Animation
