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

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

はじめに 今回は、2022年までに公開されている、オススメCSS in JSを紹介します。 Styled ComponentsやEmotionといったメジャーなものから FelaやAstroturfといったマイナーなものまでまとめました。 CSS in JSを導入する時の参考や他のCSS in JSを勉強したいときなどの参考になれば嬉しいです。 CSS in JS とは？ CSS in JSとは、外部ファイルでスタイルを定義するのではなく、 JavaScriptを用いて CSSを記述するために設計されたライブラリのことです。 CSS in JSを利用することで、コンポーネント内にCSSを定義することができ、 外部のCSSファイルに依存することなく、コンポーネント単体で独立させることができます。 例えば、外部ファイルでスタイルを定義すると、CSSの変更がどこに影響しているか分かりづらいことが

【CSS】CSSだけで画像を任意の場所をトリミングできる「object-view-box」が便利すぎた。HTMLCSSDesignimageフロントエンド はじめに みなさんは、CSSで画像をトリミングする時どんな方法を使いますか？ object-fitを使ったり、 background-sizeとbackground-positionを使ったりという方法は有名かなと思います。 これらの方法は、余計なdivが生じたり、 トリミングする場所が選べなかったりと不自由な部分もあります。 この記事では、画像を任意の場所をトリミングできる「object-view-box」について紹介したいと思います。 今までのやり方 今までに、画像をトリミングするには、object-fit を使ってやる方法が紹介されていることが多いです。 しかし、object-fit は、WidthやHeightのサイズに合わせて