タグ

ブックマーク / qiita.com/degudegu2510 (3)

  • 【HTML】ボタン要素にdisabled属性をつけるのをやめませんか? - Qiita

    はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか? この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード(Tabキー等)で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術(スクリーンリーダ等)で操作しているユーザーにとって、「送信ボタンどこだろう?」と思ってしまったり、「なんで送信ボタンが出てこないんだろう?」と思ってしまい、操作を完了させることができなくなります。 aria-disabl

    【HTML】ボタン要素にdisabled属性をつけるのをやめませんか? - Qiita
  • 【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい - Qiita

    はじめに みなさんは、HTMLのpopover属性をご存じでしょうか? 実は、先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 そこで今回は、popover属性を使って、JavaScriptを使わずに、モーダルを作ったので、紹介したいと思います。 HTMLのpopover属性とは popover属性は、モーダルのような表示されている画面より上の階層に要素を表示させたい時に、JavaScript等で実装することなく、実装できるようになる属性です。 使い方 1. popoverで表示させたい要素にpopoverを指定する popoverで表示させたい要素にpopover属性を指定することで、ポップオーバー要素として示すことができます。

    【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい - Qiita
  • 【CSS】borderを使って、三角形作るのはやめませんか? - Qiita

    はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか? borderを使って作っていませんか? この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、来のプロパティとは違う使い方でうつくしくないですよね! この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と

    【CSS】borderを使って、三角形作るのはやめませんか? - Qiita
  • 1