見出しにまつわるエトセトラ
記事の背景 HTML 要素の中でももっとも基本的かつ最重要と言える見出し要素。社内でもそのセマンティクスや適切な内容について議論されることが少なくないのですが、ふと振り返ってみるとつまみ食いのような Tips の積み重ねばかりで体系的な理解を怠っていたな…という反省があります。自分自身の理解やチームへの説明のため、改めてしっかり見出しについてまとめておきたいと考えて本記事を作成しました。 公開時点で書いていないこと スクリーンリーダーでの動作 スクリーンリーダーの使用時に見出しがどのように機能するのかについては後日追記する予定です。 見出し要素の HTML 仕様 まずは HTML の仕様を確認してみます。 4.3.6 h1、h2、h3、h4、h5、h6要素によれば、見出し要素を使用できるコンテキストは以下の2つとされています。 hgroup 要素の子として ヘディングコンテンツが期待される
数値入力で input[type="number"]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita
この記事は SmartHR Advent Calendar 2020 23 日目の記事です。 こんばんは！ @diescake です。 今年は、React で「そこそこの規模で、そこそこ機能のフォームアプリケーション」を設計・実装する機会がありました。 技術選定で formik + yup を選んだので、その選定理由と結果を共有しよう！ ……そんなふうに考えていた時期が私にもありました。 驚くほど筆が進まず、いつの間にやら当日どころか既に夜になってしまったので tips 的な話に逃げる運びとなりました。ご了承ください。 というわけで、数値入力フォームに何気なく input[type="number"] を利用したら、ユーザから問い合わせが増えてしまった話です！ input[type="number"] とは？ 今更説明するまでもないくらい基本的な要素ですが HTML において input
![数値入力で input[type="number"]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf420f9e25fc22ae0f8cf139f2e93aabeceb01d3/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU2JTk1JUIwJUU1JTgwJUE0JUU1JTg1JUE1JUU1JThBJTlCJUUzJTgxJUE3JTIwaW5wdXQlNUJ0eXBlJTNEJTIybnVtYmVyJTIyJTVEJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgyJTg5JUUzJTgwJTgxJUUzJTgzJUE2JUUzJTgzJUJDJUUzJTgyJUI2JUUzJTgxJThCJUUzJTgyJTg5JUU1JTk1JThGJUUzJTgxJTg0JUU1JTkwJTg4JUUzJTgyJThGJUUzJTgxJTlCJUUzJTgxJThDJUU1JUEyJTk3JUUzJTgxJTg4JUUzJTgxJUE2JUUzJTgxJTk3JUUzJTgxJUJFJUUzJTgxJUEzJUUzJTgxJTlGJUU4JUE5JUIxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz00MmRmNDNhYTNkODQ1MTk2Y2Q5Mjc4NGNiMmI1YzhkMw%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBkaWVzY2FrZSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGFhMWI0NTQ2ZjQ2MWU3YjMwNDdiNjk2MjQ0MzRhM2E%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-U21hcnRIUg%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3D56dbe34e15a483ce49f955c0efc9c4ed)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
