フォームをより良くするHTML・CSS 17選 - ICS MEDIA

テクノロジーカテゴリーの変更を依頼記事元:

ics.media

340users がブックマークコメント

リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした... ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。サンプルを別ウインドウで開くコードを確認する 1. divタグをボタンにするのは避けよう見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用

aike タイトル見て、ぼくのかんがえたさいきょうのボタンか、と思ったら割と普遍的なことが現代的にまとまってて良かった。

2022/12/10 リンク

agektmr 外国に行くと日本のお店にある気配りの幅広さに気付かされる。この記事はウェブサイトにそういうアイディアを盛り込むヒントになるなと思いました。

forestk よく思うのだけど、なぜブラウザはデフォルトでボタンに cursor: pointer; しないのかをよく考えたい。 Windows も Mac も OS 上のボタンは cursor: pointer; じゃないのよね。

misarine3 些細なことかもしれんけどこういう細かい使い心地の違いでユーザーが離脱するんよね。ディレクターさん頼む。そして後から修正するのは工数かかるので、最初から意見を聞いてほしいなと思うコーダーです。

mayumayu_nimolove わかんなかったら検索するけど軒並みもう古いページしか出てこないから普及しないんだよな。一年以内のが出るようにしないと。

pmint ちょっとは考えてもらわないと。.sr-onlyは「position: absolute; opacity: 0; pointer-events: none;」のほうがいいんじゃないの。

2025/11/03 リンク

securecat 8で内容が空のbuttonが紹介されているが、そもそも中のアイコンをimgなりsvgなりで置いてそこに代替要素をもつのが自然なのに、中身を見えなくして置くみたいなテクニックぽい感じになってるのは何故？

2022/12/11 リンク

klim0824 button要素にcursor:pointerが付いてない理由は元々リンクの存在を示すものだから。https://developer.mozilla.org/ja/docs/Web/CSS/cursor インタラクティブな要素に付けるとなるとinputやselectは？みたいな話に