昔は主にレイアウトを整える役割というイメージが強かったCSSですが、近年はアニメーションさせる事も出来るようになったり、表現の幅が広がってきていますよね。 表現の一つとしてよく使用するのが、透明度を指定する「opacity」がありますが、今回はbackground-imageで指定した背景画像に透明度を指定する方法を書いてみます。 使用するのは「background-image」「background-color」「background-blend-mode」 例えば以下のようなHTMLがあるとします。 これに対して、以下のように背景画像を指定するとします。 .image{ background-image: url("画像パス"); } まずopacityを指定した例を考えてみます。 .image{ background-image: url("画像パス"); opacity: 0.5;

蒸すか大差 @7vU6jrZRuX2ffkY もともとバルス専用垢でしたが、現在はクソツイート投稿用として運用中です 深夜はアニメ実況や時報でTLを汚しますのでフォローの際はご注意ください codepen.io/musukataisa/fu…

こんにちは。伊原 力也（@magi1125）と申します。業務アプリケーションのデザイナー、デザインチームのマネージャー、アクセシビリティ関連のコンサルタントなどをやっています。 ウェブアクセシビリティを普及啓発する活動を始めて10年が経ちました。おかげさまで興味を持ってくれる人はかなり増えたと感じています。しかし、人が増えると声は届きにくくなります。「アクセシビリティをどこから学び始めていいかわからない」という意見も目にするようになってきました。 また、私はこれまでにアクセシビリティに関する書籍を何冊か書いていますが、専門書ってちょっと高いので、興味があるぐらいの段階で本を買うのはちょっと……という気持ちもわかります。 ということで、これまで自分が発信したり関わったりしたコンテンツのうち、ウェブアクセシビリティの理解の助けになりそうものをベストアルバム的に一度まとめてみることにしました。

Recorder updates Replay extensions support The Recorder introduces support for custom replay options that you can embed into DevTools with an extension. Try out the example extension. Select the new custom replay option to open the custom replay UI. To customize the Recorder to your needs and integrate it with your tools, consider developing your own extension: explore the chrome.devtools.recorder

階層メニューやトーストUIが簡単に作れる新技術！　JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java

実際に動かして挙動を調べる 全イベントを仕込んだテストページを用意しました。 各ブラウザで実際に動かして発火条件を調べます。 https://zprodev.github.io/interaction-event-test/#default 使用ブラウザ Chrome 72.0.3626.28 beta Chrome for Android 71.0.3578.99 Firefox 64.0.2 Safari 12.0.2 iOS Safari 12.0 （Windows系は追って・・・） pointerdown Chrome Element上でマウスのボタンを押した時。 Chrome for Android Element上でタッチを開始した時。 Firefox Chromeと同じ。 Safari 非対応。 iOS Safari 非対応。 pointerup Chrome Element

近年の入力デバイスにはマウスやタッチのほかペンも存在します。JavaScript で入力を扱うために、マウスであれば MouseEvent、タッチであれば TouchEvent を使ってきました。しかしペンに特化したイベントがありません。 今やペンは当たり前の入力デバイスとなり、MouseEvent や TouchEvent だけでは対処しきれなくなりました。今回はそのような状況の中で誕生した新たな API である PointerEvent を紹介します。 MouseEvent と TouchEvent の問題点 スマートフォンがまだ存在しない時代、コンピューターの入力デバイスはマウスがほとんどを占めており、JavaScript の API としては MouseEvent が使えれば困ることはありませんでした。 スマートフォンが登場した当初は、指による操作も MouseEvent で何とか

効率化を考えるのが好きだけど、人にそれを押し付けると嫌がられることもわかっている、ユゲタです。 本日のIT謎掛け 「マウスイベント」とかけまして・・・ 「あだち充の数多い漫画」と、ときます。 そのココロは・・・ （登場人物が）ほぼタッチと同じです。 webサービスのスマートフォン対応 PCのwebブラウザで閲覧・操作するサービスを、スマートフォン対応させる時に、ほとんどの人が「レスポンシブデザイン」を考えるだけですが、 マウスイベント操作をタッチイベント操作に置き換えて、それに伴うユーザーインターフェイスの変更も必要になることは、実際に、デザイン構築が完了して、実際に触ってみてから気がつくことが多いです。 今回のブログは、自分の備忘録も含めて、PCサービスをスマホサービスに対応させるために気をつける点をまとめてみました。 マウスイベントとタッチイベントの違い マウスイベントの流れ onmo

巷で話題になっているこの話題、画像をスクレイピングやダウンロードされたくないということで騒がれています。その話に関しては色々な意見があると思ってますがここでは置いておくとして・・・ 技術的にやるとしたら実際どれくらい対策できるの？ということが気になったので、自分の知識で出来る限り対策したものを作ってみることにしました。 最初に 賢い方はわかると思いますが、タイトルは釣りです。 絶対に画像をダウンロード&スクレイピングさせないページは存在しません。ソフトウェアにおいて絶対と言う言葉はまず存在しないのです。ブラウザで表示している以上、仕組みさえわかれば技術的には可能です。 そのため、 「元画像のダウンロードとスクレイピングを非常に困難にしたWebページを本気で作ってみた」 が実際のタイトルかなとなります。 とはいえ、この仕組みであれば大多数の人は機械的にスクレイピングすることを諦めるレベルの作

要素の絶対座標値（位置）を取得するには、element.getBoundingClientRectメソッドを使用します。 取得可能な位置は、ウィンドウの表示領域の左上からの座標です。 構文 戻り値 ウィンドウの左上からの座標（x、y、top、left、right、bottom）と幅（width、height）が含まれた値をオブジェクトとして返します。 ただし、FirefoxはDOMRect、Chrome、Safari、IE9以上はClientRect、IE8以下はObjectとしてそれぞれ返します。 IE8以下については座標（top、left、right、bottom）のみを返します。 { bottom : 98.39999389648438, height : 44, left : 245, right : 945, top : 54.399993896484375, width : 7

ドラッグ&ドロップは素晴らしいインタフェースソリューションです。何かを掴み、ドラッグとドロップをすることは、コピーや移動(ファイルマネージャを参照)から注文(カートにドロップする)まで、多くのことをするための明白かつ簡単な方法です。 現在の HTML 標準では ドラッグイベントに関するセクション があります。 それらはシンプルなタスクを簡単に解決したり、“外部” ファイルのドラッグ＆ドロップをブラウザで扱うことができたりと、興味深いです。したがって、OSのファイルマネージャでファイルを取り、ブラウザウィンドウへドロップすることができます。その後、JavaScript はそのコンテンツへアクセスできます。 しかし、ネイティブのドラッグイベントにも制限があります。例えば、特定の領域でドラッグを制限することができます。また、ドラッグを “水平” または “垂直” のみにすることはできません。その

🌼 はじめに フロントエンドエンジニアなら誰でも一回はボタンコンポーネントを作ったこと、もしくは使ったことがあるのではないかと思います。私もUI実装のときよく触ってました。 最近 <input type="button" value="保存" /> のようなボタンコンポーネントを見かけて、「なんで buttonじゃないんだろう、てかなんでボタン作る要素が button と input の２つあるわけ？」という気持ちになりました。 気になったら調べるしかないので、今から調査結果を共有します。 1. input要素とbutton要素は似てる さっそくフォームの中にinput要素とbutton要素でボタンを作ってみました。 <form action=""> <label> 好きな食べ物は？ <input type="text" /> </label><br /> <div class="but

FREE VECTOR DOWNLOAD SIMPLE ICONではillustratorやphotoshopで使えるアイコン素材も用意しています。 illustrator Ai photoshop EPS AUTHOR COMMENT 羽根ペンのフリーアイコン。なんとなく賢そうに見える素材。執筆活動等のアイコンとして使いましょう。

HTMLのテキストエリア（textarea）内で、文字列を改行表示させる方法です。 最初に思いつくのは、改行コードや（\n、\ｒ、 \n\r）や改行タグ（<br>）を入れる方法ですが、そのままだとコードやタグがそのまま表示され、うまくいきません。 <textarea>吾輩は猫である。\n名前はまだにゃい。</textarea> <textarea>吾輩は猫である。<br>名前はまだにゃい。</textarea> 解決方法 解決方法は、textareaタグ内に、改行をそのまま入れてやるか「&#13;」を入れてやるとうまくいきます。 <textarea>吾輩は猫である。 名前はまだにゃい。</textarea> もしくは、 <textarea>吾輩は猫である。&#13;名前はまだにゃい。</textarea> 因みにPHPだとこんな感じ。 <?php $text = '吾輩は猫である。&#13

Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始 Web開発者の開発体験を改善することなどを目的としたW3CのWebDX Community Groupは、つねに新たな機能などが登場し変化し続けるWeb標準のうち、Web開発者が安心して使える機能群を示す新たなステータス「Baseline」を発表しました（Googleによる発表、MDNによる発表）。 現在、Web標準はリビングスタンダードとしてつねにアップデートが行われており、ChromeやFirefox、Safariなどの主要なWebブラウザは、Web標準で新たに策定される機能をそれぞれ実装し、最新版に反映させています。 そのため、それぞれのWebブラウザがWeb標準のどの機能をいつ頃実装し、最新版に反映させるのかは時期が異なりま

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。 連想配列とは各種のKEYに対応する値を持つ配列の様なものであると「連想配列の作成と初期化について」で説明しましたが、 JavaScriptには実際には連想配列は存在せず、オブジェクトのプロパティとして扱うことで連想配列的に扱えます。 以下の様な例があります。 連想配列的宣言 //連想配列の宣言(実際はオブジェクト) var arrVar = { item: "test1", value: 100, func: function() { // 関数の宣言 console.log("TEST"); } }; //配列内の値表示 console.log(arrVar["item"]); // test