ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
spellcheckでスペルチェック無効化（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 19日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 19 日目 今日は spellcheck です。スペルチェックするしないの制御をします。 spellcheck – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/eYGRzVo 基本的な使い方 HTML に spellcheck="true" みたいに書きます。グローバル属性といってあらゆる HTML 要素で利用可能です。 <div spellcheck="true">Check!</div> <div spellcheck>Also check!</div> <div spellcheck="false">No check!</div> 値は文字列で "true" 、 "false" あるいは空 "" を取ります。空
touch-actionでスクロールやズームを止める（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 12日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目 今日は CSS の touch-action プロパティです。指操作の制御をします。 touch-action – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/gOGLrgG デモはタッチ対応端末でご覧ください。主にスマホ。 基本的な使い方 だいたいこんな値です。 auto – 通常 none – 反応しない pan-y – 縦方向スクロールのみ pinch-zoom – ズームのみ manipulation – スクロールとズームのみ（ダブルタップでの拡大を無効化） 他に下方向のみの pan-down とかいくつかあるので MDN をご覧ください。 Pointer Events 関係の仕様です。IE でも動きます。 使いどころ
HTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法 - ICS MEDIA
Vue.jsは昨今よく使われるモダンなJavaScriptフレームワークの1つです。Node.jsで環境構築し、サイト全体をVue.jsベースで開発することもあります。しかし、フロントエンド開発に慣れていない方やデザイナーにはNode.jsでの環境は少し参入障壁が高いです。 実は、Vue.jsは<script>タグから読み込こめばNode.jsを用いずとも使えます。この方法ならばLP（ランディング・ページ）やWordPressサイトといったHTMLベースのサイトでもVue.jsを活用できるでしょう。本記事ではそのようなちょい足しVue.jsの活用例を、最新のVue Composition APIとESモジュールを使って紹介します。 Vue.jsをちょい足す HTMLに下記のようなコードを足すことで、Vue.jsを<div id="app">の要素内に導入できます。 <div id="app
ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS - ICS MEDIA
画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。 本記事では事例とあわせて最近のレスポンシブ手法を紹介します。 この記事で紹介すること ダークモード対応 モーションの無効化設定 iOSのフォントサイズ変更 ダークモード対応 OSには外観モードの設定項目があります。Windows 10やmacOS、iOS、Androidのいずれもライトモードとダークモードの切り替え機能が提供されています。ライトモード・ダー
Bypass Paywalls Clean for Chrome - ペイウォールを乗り越えるChrome機能拡張
多くのニュースサイトではペイウォールと呼ばれる仕組みを導入しています。毎月、決まった記事数は読めるものの、一定数以上読もうとすると支払いを迫る仕組みです。サーバ側で制御している場合もありますが、多くはWebブラウザだけで簡易的に行っています。 そんな簡易的な制御を破るのがBypass Paywalls Clean for Chromeです。この機能拡張をインストールしていると、ペイウォールに阻まれなくなります。 Bypass Paywalls Clean for Chromeの使い方 インストールしました。多くのWebサイトに対応しています。 後は普段通りWebブラウジングします。 Bypass Paywalls Clean for Chromeの仕組みとしてはCookieを毎回削除することで、購読回数をリセットしているようです。また、月額購読を迫るダイアログを非表示にもしています。もちろ
ウェブ制作に便利な各ブラウザの開発ツール「キャッシュ無効化」機能
コードを書いて、ブラウザでチェックして… 画像を書き出して、ブラウザでチェックして…という作業をしていて、ブラウザのキャッシュが残っていて困ったことってありませんか？ そんな時に便利なのが開発ツールのキャッシュ無効化機能です。Firefox、Chrome、Safari、Microsoft Edgeのそれぞれの開発ツールに搭載されている機能です。ちょっとしたことなんですけど、知っているのとそうでないのとでは作業効率がだいぶ変わってくるんですよね。 以下、各ブラウザの開発ツールで設定を変える方法です。 Firefoxの開発ツールのキャッシュ無効化 Firefoxの開発ツールで「ネットワーク」タブを開くと「キャッシュを無効化」というオプションがあります。ここにチェックを入れるとツールボックスが開いている時はキャッシュが無効化されます。 開発ツールの設定からオプションを変更する 開発ツールの設定画
UXデザイナーから学ぶ、無効状態のボタンをグレーアウトにしない理由
一時的に操作ができない無効状態のボタンを表示する場合、どのようにデザインすると、ユーザーの混乱を少なくすることができるか、UXの観点から解説した記事を紹介します。 無効状態のボタンをグレーアウトにしてしまうと、他のボタンにグレーを使用できなくなったり、操作できない不具合かもとユーザーは思うかもしれません。 Why You Shouldn’t Gray Out Disabled Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 無効状態のボタンをグレーアウトにしない理由 無効状態のボタンをグレーアウトにしない理由 ページ上でアクティブになっていないボタンがある場合、あなたはどのように実装していますか？ ボタンを本来の場所から一度削除した後に表示すると、ユーザーは突然現れたボタンに驚くかも
iPhone や iPad の電話番号の自動リンクを無効化する方法 - by Takumi Hirashima
iPhone や iPad の電話番号の自動リンクを無効化する方法を紹介します。 例えば、自動リンクになることで起こる表示崩れを防ぐのに便利な方法です。 電話番号の自動リンクを無効化する方法 電話発信用のリンクを追加する方法 パソコンだけ電話発信用リンクを無効にする方法 電話番号の自動リンクを無効化する方法 iPhone や iPad の電話番号の自動リンクを無効化するには、meta 要素の name="format-detection" を使用します。 例えば、iPhone や iPad で電話番号の自動リンクを無効化する場合は、name="format-detection" で content="telephone=no" を追加します。 <meta name="format-detection" content="telephone=no"> 電話発信用のリンクを追加する方法 任意の
モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック
ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール
adhosts - 広告サービスのドメインを無効化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アドブロック機能拡張などを使って広告を非表示にするのが流行っていますが、最近ではアドブロックを検知してメッセージを出すWebサイトも増えています。いたちごっこではあるのですが、非常に煩わしい戦いです。 そこで使ってみたいのがadhostsです。アドブロック戦争に終止符を打つかも知れません。 adhostsの使い方 adhostsコマンドを実行すると、多くのドメインを 127.0.0.1 にするhostsファイル用の設定が作成されます。これをそのまま hosts ファイルに適用すれば、殆どの広告サービスが何も表示できなくなります。 取り込まれるドメインは随時更新されており、Google系のドメインだけでも何十種類も登録されます。数万のドメインが登録されるので更新が面倒ですが、adho
gibo - プロジェクト用の.gitignoreを生成 MOONGIFT
Gitでソースコードを管理する際、必ず必要になるのが.gitignoreでしょう。これがないと余計なビルドファイルやログファイル、OSの隠しファイルなどが入り込んでしまいます。かといって、.gitignoreの設定をプロジェクトごとに個別に設定するのは面倒なものです。 そこで使ってみたいのがgiboです。プログラミング言語に合わせた.gitignoreを生成してくれます。 giboの使い方 giboはdumpコマンドを使って出力します。言語や環境は複数指定できます。 $ gibo dump Swift Xcode ### https://raw.github.com/github/gitignore//Swift.gitignore # Xcode # # gitignore contributors: remember to update Global/Xcode.gitignore,
PDFのパスワードを無効化する方法
PDFのパスワードを無効化する方法を紹介します。 １．はじめに PDFの楽譜を購入することがよくあるのですが、開くたびにパスワードを入力する必要があり、ちょっと面倒です。 ということで、PDFのパスワードを無効化する方法を紹介します。 なお、パスワードがわからないPDFのパスワードを無効化するものではありません。 また、無効化することで法律に抵触する場合は使用しないでください（手順の途中でその確認があります）。 ２．PDFのパスワードを無効化する ここでは「smallpdf」というサービスを利用します。 smallpdf smallpdfのページにアクセスして「ここにファイルをドロップ」にパスワードを解除したいPDFファイルをドラッグ＆ドロップ、またはファイル選択します。 「他人のファイルをロック解除することは、法律に抵触する可能性がございます。プライバシーポリシーをよく読んでからご利用く
WordPressでフィード配信するときにショートコードを無効にする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エリカです。 WordPressでフィードを配信していると、ショートコードを無効にしたいときってありませんか？ まずショートコードを取り除く方法としては、下記の方法があります。 Function: strip_shortcodes 文字列からショートコードタグを取り除く Function: remove_shortcode 指定してショートコードを無効にする Function: remove_all_shortcodes 全てのショートコードを無効にする では、通常はショートコードを有効にしておいて、フィードのときだけショートコードを無効にしたい場合は、どこで上記の方法を利用すればよいのでしょうか。 今回は、ショートコードおよびフィードの処理について調べました。 ショートコードが展開されるタイミングはいつか？ require( ABSPATH . WPINC . '/short
Excelでアドインを無効化する方法
Excelでアドインを無効化する方法を紹介します。 １．はじめに Excelでアドインをインストールしてみたのですが、不要になったので無効にしたいと思います。 が、無効にする方法が分かりません。 Excelのアドインは簡単にインストールできてお手軽なのですが、無効にする手順が意外に紹介されていないようなのでこの記事にまとめてみました。 ここではExcel 2010を使って説明します。 ２．アドインを無効化する アドインを無効化するには、ファイルの「オプション」をクリック。 Excelのオプション画面が開くので「アドイン」をクリック。 アドイン設定が表示されるので、下の方にあるプルダウンメニューを「Excelアドイン」にして「管理」をクリック。 インストールしているアドインの一覧が表示されます。有効なアドインはチェックボックスがチェックされた状態になっています。 無効にしたいアドインのチェッ
広告やSNSボタン、追跡コードを無効化してページ表示を最大27％高速化する「Disconnect」
個人情報の漏洩につながるような2000種類以上のデータトラッキング用のコードをブロックし、ついでに一部広告やSNSボタンもウェブページ上から非表示にしてしまうことでページの表示を最大27％も高速化してしまうブラウザの拡張機能が「Disconnect」です。開発者は元Googleのエンジニアで、オンライン上での個人情報をユーザー側でしっかりとコントロールできるようにするために開発したツールとのことなので、どんなふうに動作するのか実際に使ってみました。 Disconnect | Online Privacy & Security https://disconnect.me/ ◆PC向けの拡張機能を使ってみた 「Disconnect」はGoogle Chrome・Firefox・Safari・Opera向けに拡張機能をリリースしており、以下のページにアクセスして「Get Disconnect」を
javascript:void(0)のまとめ
a要素にonclick属性を使いたいけれどもページ遷移したくないときに利用する（というか昔利用していた）「javascript:void(0)」について、今更ですが調べてみました。 認識誤りがあればどこかでつぶやいてください。 １．「javascript:」とは 本題の前に、まず「javascript:」について調べてみました。 「javascript:」はURIスキームのひとつで、「javascript:擬似プロトコル」と呼ばれているようです。 「javascript:擬似プロトコル（javascript: pseudo protocol）」という単語は、最初に日本語のページで使われているのをみつけましたが、調べてみたところ、W3Cのページでも使われているのを見つけました（下）。 Graceful degradation versus progressive enhancement プロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS でクリックイベントを無効にする方法 - by Takumi Hirashima
利用中のChromeエクステンションに危険性があるかどうかをチェックし、その場でON/OFF出来るChromeエクステンション・「Extension Police」
行き着く先はあんこ