選択（Selection） と 範囲（Range）
この章ではドキュメントでの選択と、<input> などのフォームフィールドでの選択について説明します。 JavaScript を利用して選択状態を取得したり、全体あるいは一部分の選択/選択解除、ドキュメントから選択した部分を削除、タグへのラップなどを行うことができます。 末尾の “サマリ” セクションにレシピがあり、これで現時点で必要なことはカバーされているかもしれません。ただ、章全体を読むことでより多くのことを知ることができます。 基礎となる Range と Selection オブジェクトの把握は難しくはないので、必要なことをするためのレシピは必要ありません。 範囲(Range)選択の基本的な概念は 範囲(Range) で、基本的には “境界点”(範囲の開始と終了) のペアです。 Range オブジェクトはパラメータなしで作成できます: 次に、range.setStart(node,
[小ネタ] SQLの GROUP BY / ORDER BY には数字 (1, 2...) を指定しよう - Qiita
-------------------------------------------------------- -- users テーブルについて、部署・役職・作成日ごとに件数を集計する -- (MySQL用) -------------------------------------------------------- SELECT u.department_code `部署コード`, u.role_code `役職コード`, DATE_FORMAT(u.created_at, '%Y-%m-%d') `作成日`, COUNT(*) `人数` FROM users u GROUP BY u.department_code, u.role_code, DATE_FORMAT(u.created_at, '%Y-%m-%d') ORDER BY u.department_code ASC
![[小ネタ] SQLの GROUP BY / ORDER BY には数字 (1, 2...) を指定しよう - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/df7a32ffb8e562dfe0678d701a1eb4d8a4f7969b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JUIwJThGJUUzJTgzJThEJUUzJTgyJUJGJTVEJTIwU1FMJUUzJTgxJUFFJTIwR1JPVVAlMjBCWSUyMCUyRiUyME9SREVSJTIwQlklMjAlRTMlODElQUIlRTMlODElQUYlRTYlOTUlQjAlRTUlQUQlOTclMjAlMjgxJTJDJTIwMi4uLiUyOSUyMCVFMyU4MiU5MiVFNiU4QyU4NyVFNSVBRSU5QSVFMyU4MSU5NyVFMyU4MiU4OCVFMyU4MSU4NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ODUwOGYxZDE3YzZhN2I1YTk5NzU4NzkxNjhhNmRiMjc%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzc2Mta3NhaXRvdSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzhjNGQzYzhlM2QxYzU5YzFkNjE3M2I2NWNiMjMyNTM%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gU1NDIFImRA%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D9ffdf1c689130de3ed7e5b18c77600c2)
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
hoverを指定するならany-hoverメディア特性を使いなさい！俺流hover実装例も紹介します ｜ TAKLOG
タップデバイスでもhoverが動いているWebサイトが多すぎる！ hoverを指定するならany-hoverメディア特性を使いなさい前提として、タップデバイスでのhoverアクションは次のようなデメリットから無効化すべきです。 タップデバイスでhoverアクションを用いると、タップ後にhover状態が継続し、UIの予期しない振る舞いやユーザー体験の混乱を招く可能性があるデバイスによってはhoverが指定されている要素はダブルタップしないと反応しない可能性があるタップ操作orポインター操作の区別を行うための方法はいくつかありますが、現在ではhoverメディア特性が全モダンブラウザでサポートされているためこちらを利用しましょう。 /* 🙆♂ Recommended */ @media (any-hover: hover) { .button:hover { background-color
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
