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

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

[aike]

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

[agektmr]

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

[forestk]

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

[misarine3]

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

[ma3tk]

実装後によくチェックするのがまとまっててありがたい🙏

[mayumayu_nimolove]

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

[field_combat]

今どきのアクセシビリティ

[naglfar]

基本のキ。とても大事で素晴らしい。

[diveintounlimit]

よく書けている

[securecat]

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

[gyampy]

これをスタンダードにれすればいいわけですね！

[tamanecoplus]

デザイナーに読んでもらいたいんだけど何故かエンジニアにしわ寄せが来る奴

[klim0824]

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

[takeag]

Framework使えば大体回避できないか

[spark7]

小さいタイトルとキャプションまでgifでビビるわ。

[tofu-kun]

“cursor:pointer”がボタンには付いてないのには理由があるが、実際のところどちらがユーザに優しいかは僕はわかっていない。ホバー時に適切な反応があれば問題ないのか？過剰なシグニファイヤなのか？

[flirt774]

大事なことしか書かれてなくて頷くのみの内容。ここに無いのだと opacity の乱用を避ける。リンクボタンに利用すると文字のコントラスト比が足らず読み取りにくくなる

[aceraceae]

意外と知らない内容もあった。

[seiremi21]

。

[Helfard]

あとで読まない。

[GiveMeChocolate]

はい

[shirotorabyakko]

@media (any-hover: hover) {}

[kenzy_n]

UI・UXは大切だ！

[kns_1234]

"divタグをボタンにするのは避けよう" "placeholderをラベル代わりにしない" など