邪魔な「Cookieを許可してください」などのポップアップを自動入力で表示されないようにしてくれるブラウザ拡張機能「Consent-O-Matic」
ブラウザでウェブサイトを開いた際に、「Cookieを許可してください」というポップアップが表示されたり、許可するCookieの種類を強制的に選択させられたりした経験がある人は多いはず。こうした表示はEU一般データ保護規則(GDPR)などの規則順守に必要なものですが、ウェブサイトを訪れるたびに表示されるこれらのポップアップはユーザー体験を明らかに損なう邪魔なものです。Google ChromeやMozilla Firefox、Safari向けの拡張機能「Consent-O-Matic」では、これらを自動入力して表示されなくしてくれるとのことなので、実際に使用してみました。 GitHub - cavi-au/Consent-O-Matic: Browser extension that automatically fills out cookie popups based on your pr
CSSの最新テクニック！ シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装
この実装は、完全に想定外の発想でした！ スマホでよく見かけるドロワー、オフキャンバスのメニューをポップアップで実装するCSSの最新テクニックを紹介します。 オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScriptはなし、HTMLとCSSだけで簡単に実装できます。 Pop-up API Off Canvas Menu w/ :has() ⚡️ 実際の動作は、下記ページでご覧ください。 ※Pop-Up APIと:has()を使用しているため、ChromeでFlagを有効にする必要があります（後述）。 Pop-up API Off Canvas Menu w/ :has() ⚡️ まずは、HTMLを見てましょう。 ハンバーガーはbutton要素で、オフキャンバスはpopup属性で実装します。pop
Cookie使用の同意を求める邪魔なポップアップをクリックしてサクサク削除できるChrome拡張機能「ekill」レビュー
サイト閲覧者のCookie使用の同意を得るために表示されるポップアップは、EUのGDPRへの対策のためますます積極的に行われるようになっています。ユーザーからすればページに突如として現れるCookie利用のポップアップは邪魔な存在ですが、ポップアップ表示を直接クリックするだけでサクッと削除できるChrome拡張機能「ekill」が開発されています。 GitHub - rhardih/ekill: Chrome extension to nuke annoying elements in a web page https://github.com/rhardih/ekill ekill - Chrome Web Store https://chrome.google.com/webstore/detail/ekill/lcgdpfaiipaelnpepigdafiogebaeedg ◆拡張機
ダブルクリックするだけで英単語の和訳をポップアップ表示できるGoogle公式拡張機能「Google Dictionary」 - GIGAZINE
英語のウェブページを読んでいるときにわからない英単語があると、コピーしてから別タブを開いて辞書サイトなどで日本語の意味を調べる、という行動が必要です。知らない英単語が多すぎると、英語のページと辞書サイトを何度も往復せざるを得ないわけですが、単語をダブルクリックするだけでページ上にGoogle翻訳から和訳をポップアップ表示できる無料のChrome拡張機能が「Google Dictionary」です。 Google Dictionary (by Google) - Chrome ウェブストア https://chrome.google.com/webstore/detail/google-dictionary-by-goog/mgijmajocgfcbeboacabfgobmjgjcoja Google DictionaryをChromeにインストールするため、「CHROMEに追加」をクリック
AngularJSでマテリアルデザイン風のページ遷移アニメーションを作ろう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 6月から役職が変わりフロントエンドリーダーからCTOになりました、先生です。 もうAngular1.4にアップデートしましたか？ Angular1.4になりマテリアルデザインを意識したアニメーション関連の変更や実装がおこなわれました。その分Breaking Changesもあるのでアップデートには注意する必要があります。 今日はそんなAngularJS 1.4を使って、マテリアルデザイン風にページ遷移するアニメーションを作ってみたいと思います。 今回のデモ デモは下記リンクになります。 各メンバーをクリックするとスムーズにアニメーションして詳細ページに遷移します。まずは触ってみてください。 http://frontainer.com/ligblog-sample/angular-morphing-animation/#/ 必要なもの AngularJS1.4 – https:
10 Must have Lightbox Libraries For Mobile Responsiveness
In this day and age, responsive websites are in demand which gives rise to another dimension of web development called mobile development where developers are specifically focusing on creating mobile responsive websites. There are plenty of resources used for this purpose and one of them is Lightbox libraries. Lightbox is the popular way to overlay images on the web and many web developers are usi
無料で英単語にカーソルを合わせるだけで意味がわかるChrome拡張機能「iKnow! ポップアップ辞書」
「Google 翻訳」「Weblio辞書」「スペースアルク」など、無料で英語の意味を調べられる辞書サービスはいくつも存在しますが、辞書サービスをいちいち開かなくても、マウスカーソルを英単語に合わせるだけで品詞・単語の意味・発声データが瞬く間にポップアップして表示できる無料のChrome拡張機能が「iKnow! ポップアップ辞書」です。 iKnow! ポップアップ辞書 - iKnow! http://iknow.jp/popup_dictionary_extension/ ブラウジング中に知らない単語が出てきたら、マウスオーバーするだけでその単語の意味をポップアップ表示してくれる辞書が「iKnow! ポップアップ辞書」。 「学ぶ」を目的にすると長続きしないかもしれませんが、ネットサーフィン中に見つけた単語をポップアップでどんどん覚えていけるという仕組みです。 というわけで、「iKnow!」の
chrome拡張のポップアップ画面でalert()やconsole.log()を出力する方法
chrome拡張のポップアップ画面でalert()やconsole.log()を出力する方法を紹介します。 １．問題点 「Google Chrome拡張の作り方（その4：オプション画面と保存データのバックグラウンド・ポップアップとの連携）」で作成したポップアップ画面のデバグをするために、次のようにalert()やconsole.log()をpopup.htmlに埋め込んでみましたが、alert()も表示されず、console.log()も出力されません。 var showOption = function() { var str = localStorage.getItem("test"); var obj = JSON.parse(str); console.log(obj['tab']) $('#maxtab').text(obj['tab']); }; $(function(){ s
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
[JS]不可視のDOMをコントロールしてUIを拡張するスクリプト -Shadow UI
tooltip ツールチップ Shadow UIの使い方 Step 1: 外部ファイル まずは、ベースとしてhead内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="/shadow-ui/assets/js/jquery.js"></script> <script src="/shadow-ui/js/shadow.js"></script> スタイルシートはベースとなるファイルとそれぞれ用のファイルが用意されています。 <link rel="stylesheet" href="/shadow-ui/assets/css/main.css"> <link rel="stylesheet" href="/shadow-ui/css/ui.css"> <link rel="stylesheet" href="/shadow-ui/css/ui-dr
popline - An HTML5 Rich-Text-Editor Toolbar
Popline is a non-intrusive WYSIWYG editor. It shows up only after selecting a piece of text on the page. Inspired by popclip. It provides commonly used editing features out-of-the-box. Easy to extend, Easy to customize. Two modes supported, Edit mode and View mode. Two popup ways supported, Fixed and Relative. Compatible with Chrome, Safari, Firefox, Opera 15.0+, IE 8+ The default theme popline us
[CSS]アニメーションも気持ちいい！フォーカスがはずれてもキープされるパネルを表示するスタイルシート
ボタンをタップ・クリックすると、素敵なアニメーションでソーシャルメディアのボタンを配置したパネルが表示され、フォーカスがはずれてもそのままパネルがキープされるスタイルシートのデモを紹介します。 デモページ HTML HTMLはシンプルで、リストで各ソーシャルメディアのボタン、チェックボックスでパネルの開閉をコントロールします。 <div id="content"> <input type="checkbox" class="checkbox" id="share" checked> <label for="share" class="label entypo-export"></label> <div class="social"> <ul> <li class="entypo-twitter"></li> <li class="entypo-facebook"></li> <li cla
YouTube人気急上昇
【2020年長野】「バァーン!!」突然畑に鳴り響いた轟音…倒れる二人…原因は畑への落雷? 直接落ちなくても危険な「長野落雷事故」【ゆっくり解説】
無線LANに見知らぬPCが接続してきたらポップアップ通知や接続切断ができる「Who Is On My Wifi」
利用している無線LANを不正に使われないように、接続してきたPCを検知してポップアップ・音声・メールで通知し、接続の切断ができるソフトウェアが「Who Is On My Wifi」です。Windows上で起動可能となっています。ダウンロード・インストール・操作方法については以下から。 Who Is On My WiFi | Wiress Network Security Software http://www.whoisonmywifi.com/ 今回は試用版を使うので、上記サイトの「Download FREE TRIAL」をクリック。 ダウンロードしたインストーラーを起動。 「Next」をクリック 上にチェックを入れて「Next」をクリック 「Next」をクリック 「Next」をクリック 「Next」をクリック 「Install」をクリック 「Finish」をクリック 操作画面が表示され
モーダルウィンドウを表示する際に遠近感を付けるスクリプト・Avgrund
モーダルウィンドウを表示する際に 遠近感を加えて分かりやすくする、 というコンセプトの元、作られた スクリプト・Avgrundのご紹介です。 思いつきませんでしたが、結構いい ですね、これ。 遠近感のあるモーダルウィンドウを実装する非依存型のスクリプトです。これはいいエフェクト。説明するより見たほうが早そうですね。 Sample以下動作サンプル。ボタンを押せばモーダルウィンドウが表示されます。 確認出来ましたでしょうか。 コード<script type="text/javascript" src="avgrund.js"></script>avgrund.jsを読み込む。あとはマークアップです。 <button onclick="avgrund.activate();">クリック！</button>avgrund.activate()をclickさせればイベントが発火します。 <aside
Messi, simple jQuery message plugin
- A simple message plugin for jQuery - by @marcosesperon About Messi is a jQuery plugin to show clean, elegant messages in a simple way. With Messi you will avoid to use default JavaScript alert notifications or new windows to provide extended information to the user. Display text, html content, images and ajax requests with 5KB code. Check in GitHub: https://github.com/marcosesperon/Messi Usagesh
[CSS]モーダルウインドウをCSS3アニメーションを使ってエレガントに表示するチュートリアル
モーダルウインドウを表示する際、CSS3アニメーションでズームイン・アウトさせるチュートリアルを紹介します。 デモページ：ズームアウト 実装 HTML div要素でモーダルウインドウを作成し、ページ全体を覆うオーバーレイのdiv要素で内包します。 <div class="overlay-container"> <div class="window-container zoomin"> <h3>Hello I'm zoom in modal window</h3> I'm coming using scale transform, using transform: scale() <br> From <strong>scale(1.2)</strong> to scale(1) with transition property make me looks like <strong>come
50 Visually Appealing CSS Tutorials & Techniques
If you are looking for in-depth articles on the inner workings of flexbox, or a comprehensive explanation for using CSS regions, then this is definitely not the post for you. Instead, we have squarely put our focus on those CSS tutorials that not only make the smaller details of the web visually appealing but are also really useful. You know what we mean… fantastic text effects, innovative button
レスポンシブなPhotoギャラリーを作成できるCSS3＆jQueryな「Glisse.js」:phpspot開発日誌
Glisse.js - a simple, responsive and fully customizable jQuery photo viewer レスポンシブなPhotoギャラリーを作成できるCSS3＆jQueryな「Glisse.js」 デザイン性に嫌味がなく色々な場所で使えそうです。画像を送った際のアニメーションが選べるのもいい感じです ギャラリーページ 拡大 レスポンシブ レスポンシブが発明されなかったらどんな感じになってるんだろうっていう気がしますが、頭の良い人がいるもんですね。 そういう発明をしてみたいものです 関連エントリ 秀逸なレスポンシブWEBデザイン50のサンプル レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 レスポンシブなjQueryスライダー実装プラグイン８個
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...