コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニックフォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。
VS Code 1.78の新機能が便利！ 画像の相対パスが簡単に入力できるようになったぞ
VS Codeで画像のパスを入力するとき、今まではフォルダツリーで画像を右クリックして「パスのコピー」「相対パスのコピー」でパスを取得していたと思います。 先日アップデートされたVS Code 1.78で、画像ファイルをshiftキーを押しながらドロップするだけで、相対パス・完全パスが入力できるようになりました。 これはドロップセレクタと呼ばれるもので、VS Codeではshiftキーを押しながらドロップすることでファイルやコンテンツをエディタに挿入することができます。今までは画像のドロップで画像ファイルを開く、shiftドロップでファイル名でした。 VS Code 1.78のアップデートでこの挿入する方法を変更できるUIが追加されました。shiftキーを押しながらドロップすると、相対パス・完全パスを切り替えて挿入することができます。
邪魔な「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
datalistでコンボボックス（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 18日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 18 日目 今日は <datalist> です。コンボボックスを作れます。 <datalist> – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/wvrdEeZ 基本的な使い方 <select> のように複数の <option> を子に持ちます。画面には描画されません。連携したい <input> の方からは ID を list 属性で指定します。 <input list="my-list" /> <datalist id="my-list"> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value
知っておくと便利で役に立つHTMLの属性のまとめ
あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。 Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。 7 useful HTML attributes you may not know by Mariana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに multiple属性 accept属性 contenteditable属性 spellcheck属性 translate属性 poster属性 download属性 終わりに はじめに HTMLは、Web制作の要です。しかし、多くのプロ
Fig
Dear Fig users, Effective September 1, 2024 we will be ending access to Fig. We encourage users to migrate to Amazon CodeWhisperer for command line. It’s free on the Individual tier and is designed to be faster and more reliable than Fig. To make this transition as easy as possible, users can upgrade to CodeWhisperer for command line directly from the Fig dashboard. To learn more about the changes
📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.
フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々です。しかし、数字を使っているからといってむやみに <input type="number"> 要素を使うと問題が起きます。 数字であって数値でないWHATWG の仕様には次のように書かれています。 The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=num
![📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.](https://cdn-ak-scissors.b.st-hatena.com/image/square/fabaee500541121aedd5673e2ef24a6ad3fc46aa/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F20987625%2Frectangle_large_type_2_6362b402374299fdb8316dd17855d5fb.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
HTMLを書いたり、修正する時に役立つVS Codeの機能拡張のまとめ
VS Codeには便利な機能拡張がたくさんありますが、その中から特にHTMLを書いたり、修正する時に役立つ機能拡張を紹介します。 VS Code Extensions for HTML by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張を紹介します。すべてを気に入るとは思いませんが、自分が抱えていない問題を解決したり、必要以上の機能を備えているかもしれません。それでも構いません。ここで紹介するのは、私が実際に使用し、気に入っている機能拡張です。 VS Codeの機能拡張を紹介する前に、Emmetから始めたいと思います。これは機能拡張ではありませんが、VS
VS Code でEmmet使ったらHTML書くの速くなった～‼
背景 個人的に一番使いやすいなと思っているエディタが VScode です。 標準で使えるEmmetというとても素敵な機能があるのですが 先日まで知らなかったので、ワタシのような方に向けてお知らせしようと思いました。 Emmetって？ Emmetは、HTMLとCSSのワークフローを大幅に改善できるWeb開発者のツールキットと公式にあります。 要はHTMLとCSSを書く際の手数を大幅に減らしてくれる便利なツールなのです！ 本当、今までHTML書いていた時間が。。。モッタイナ 知らなかった自分を悔いてしまう そんな素敵なツールです。 まずは見てみましょう 手順は htmlファイルを用意し、VSCodeで開きます。 !（ビックリマーク)を入力して Tab 押します。 これだけでHTMLのひな形を↓入力してくれます。便利すぎですよね。 <!DOCTYPE html> <html lang="en">
簡単な設定で使える軽量でモダンなキーバインドライブラリ・「tinykeys」
tinykeysは簡単な設定で使える軽量でモダンなキーバインドJavaScriptライブラリです。 以前にもwhenipressというライブラリをご紹介しましたがtinykeysの方が若干使いやすい印象でした。 上にサンプルを用意しましたが、反応が無い場合はCodepen内にフォーカスしてからお試しください。 使い方も非常にシンプルです。 <script src="https://cdn.jsdelivr.net/npm/tinykeys/dist/tinykeys.umd.js"></script>tinykeysを読み込みます。 tinykeys(window, { "Shift+D": () => { alert("ShiftとDが押されました！"); }, "y e s": () => { alert("YES！はいそうです！"); } });キーの設定とキーが押されたときの内容を
【WordPress】カスタムタクソノミーを親なしのチェックボックスで追加する | バシャログ。
こんにちはfujiharaです。自宅のwifi環境に中継機を導入したら ネットワーク環境が劇的に変化してマジすげぇと感動しています。 今回はカスタムタクソノミーを追加したときに、管理画面で親なし・チェックボックスにする 方法をご紹介します。 方法 カスタムタクソノミーを通常追加するときには以下のコードで 実現すると思います。(詳細オプションは省いて、無名関数で実装しています) add_action( 'init', function () { register_taxonomy( 'bashalog', 'post', [ 'label' => 'バシャログ', ] ); } ); 上記で追加されると以下のようになります。テキストフィールドで追加していく方法 まずはこれをチェックボックスにします。meta_box_cb に post_categories_meta_boxを指定 add_a
Gutenberg（グーテンベルグ）エディターでブロックの項目を非表示にするよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近七味より一味派なのがわかり、七味の黒い丸いやつが丸々入ってると歯が痛くなって毎回イラっとするアラサーのハルです。 今回はWordPressのGutenberg（グーテンベルグ）のエディターでデフォルトブロックの表示を制御する方法をまとめたいと思います。 グーテンベルグはデフォルトでたくさんのブロックが用意されている グーテンベルグエディターは、初期状態でたくさんのブロックが用意されています。 この記事を書いた時点（2020年1月）だと、 一般ブロック フォーマット レイアウト要素 ウィジェット 埋め込み の分類があり、それぞれに多くのブロックが用意されています。 プロジェクトによってはすべてを表示する必要はなく、ブロックの項目が邪魔になる場合もあります。 今回は、ホワイトリストで管理して、使うものだけ表示する方法が簡単だったので紹介したいと思います。 ホワイトリストで指定するソースコー
入力したパスワードの文字の長さに応じて背景画像が鮮明になっていく
Result パスワードの長さに応じて背景画像が鮮明になっていく、というUI ぶっちゃけ現在の主流である、テキストと色で強度を明示するのが現状は最適解に思えますが1つの方法として、パスワードの強度に合わせて何かしらコンテンツを変化させる明示方法は悪くないように思えます レイアウトやUI次第ではスマホでは明示テキストを見逃す可能性もありますというか実際どこかで体験した記憶がるので分かりやすく施工するに越したことは無いですよね JSはバニラで書かれてます javascriptconst password = document.getElementById('password'); const background = document.getElementById('background'); password.addEventListener('input', (e) => { const
BlackHole - オーディオの入出力を繋ぎ混む仮想オーディオデバイス MOONGIFT
コンピュータから出力される音声を取り込みたいと思うことがよくありますが、実は標準の機能にはありません。これは出力と入力を連結させる必要があり、そのためのソフトウェアが幾つかあります。 今回紹介するBlackHoleもそんなソフトウェアの一つです。設定が簡単で使いやすそうです。 BlackHoleの使い方 利用する際には音声の出力先としてBlackHoleを指定します。 後は音声を使う側のソフトウェアで、入力ソースをBlackHoleとするだけです。macOS用のソフトウェアとしてはSoundflowerが知られていますが、BlackHoleはより手軽そうな印象を受けました。 BlackHoleはC製のオープンソース・ソフトウェア（GPL v3）です。 ExistentialAudio/BlackHole: BlackHole is a modern macOS virtual audio
Credit Card Form - Vue製のクレジットカード入力コンポーネント
Web上でものを買う場合、クレジットカード番号を入力する機会は多いかと思います。決済情報を入力する際にはなるべく手間取らないようにしないと、せっかくの決済機会を逃してしまうことになります。 そこで使ってみたいのがCredit Card Formです。アニメーションや表示を工夫してスムーズにクレジットカード情報の入力ができるようになります。 Credit Card Formの使い方 入力しているところです。入力に沿って描かれているカードの情報ができあがっていきます。 どこに何の情報が書かれているのかもビジュアル的に確認できるので入力での手間取りが減りそうです。上の画像ではVisaの情報ですが、Masterやアメリカンエクスプレスなどのカード情報を入力するとマークも変わります。Credit Card FormはVue向けのコンポーネントとなっています。 Credit Card FormはJav
Everything You Ever Wanted to Know About inputmode | CSS-Tricks
Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings. But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consid
CSSとSVGでチェックボックスを装飾しよう！
2022年4月27日 CSS, SVG CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグインを使って実装してきました。今回はチェックマークにSVGを使い、なるべくシンプルな書き方でチェックボックスを装飾してみようと思います。 チェックボックスを装飾する手順 1. HTMLマークアップ まずはHTMLを書いていきます。label タグでチェックボックスを囲うと、for 属性や id 属性の指定をしなくても label タグ内のテキストがクリック範囲となるので便利です。テキストは span タグで囲みました。この span 部分にCSSでチェックボックスを表示させる指定をしていきます。 HTML <form> <label> <input type="checkbox"> <span
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneの文字入力スピードが「5倍以上」になる14のテクニック（All About） - Yahoo!ニュース
)
Text Caret Position - テキスト入力時のキャレットの位置情報を取得 MOONGIFT
Chart It