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
プログラマーの書いたソースコードの続きを自動で記述する「GitHub Copilot」はエンジニアを駆逐してしまうのか？
GitHubがリリースした、プログラマーの記述したソースコードの続きを自動で補完してくれる機能が「GitHub Copilot」です。このGitHub Copilotを使えばAIがソースコードを完成させてくれるため、この種のAIが増えれば「エンジニアの仕事はなくなってしまうのでは」という危機感を覚えた人も少なくないはず。そこで、エンジニアのHrithwik Bharadwaj氏がGithub Copilotの利点と欠点を挙げています。 Limitations and The Good Things about Github Copilot https://blog.hrithwik.me/the-good-and-the-limitations-of-github-copilot 「GitHub Copilot」はMicrosoftが開発するソースコードエディター「Visual Studi
かなり便利！VS CodeでCSSを書きながらFlexboxのチートシートを利用できる -CSS Flexbox Cheatsheet
Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 justify-contentやalign-itemsはどう使うんだっけ？ justify-contentの値は？ など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。 CSSを書きながらFlexboxのチートシートをVS Codeに表示中 CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。 参考: CSS Flexbox の基礎知識と使い方を詳しく解説 機能拡張のダウンロードは、下記ページから。
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
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
CSSスニペット：CSSでinputに入力したらlabelのスタイルが変更されるようにする | かちびと.net
Result :placeholder-shown疑似クラスを使ってlabelのスタイルを入力の有無でスイッチします css.input-label { color: blue; } .input :not(*):placeholder-shown, .input-label {/*入力されたとき*/ color: green; } .input-control:placeholder-shown ~ .input-label {/*入力されてないとき*/ color: red; }html<div class="input"> <input class="input-control" id="input" placeholder="hogehoge" /> <label class="input-label" for="input">入力すると色が変わります</label> </div>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
