リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
新・えきねっとは誰のためのシステムなのか？｜長沢めい
結論から書くと、ちょっと思い当たらない。というおはなし。 そもそも「えきねっと」とはJR東日本の予約サイト。今週末にリニューアルを実施しました。 切符オタクの界隈では「あの切符が発行できない」「売ってはいけないはずの切符が検索結果に出てくる」などなど、いろいろな反応があったようですが、一般の方からすると「鉄道オタクがなんか騒いでいるなぁ」っていう感じかもしれません。私も個々論的なところはあまり興味がないから、そこについては書きません。 じゃあ、ここで何を書くかというと、UIの話をします。鉄道に限らず、いろいろなシステムにも言える話かな、と思ったので。 きっぷを買うまでの道のりが大変先述のプレスリリースには色々と変更点が書かれているんですが、1番目に書かれているのが「列車のお申し込みの操作方法が変わります」という点。 「えきねっと」トップページからダイレクトに、「乗車駅」「降車駅」や「日時」
プリンセスコネクト！Re:Dive 制作事例 ～UIを高速かつ高品質に作るためのプロトタイプ開発のススメ！～ - Speaker Deck
2018/08/24 CEDEC 2018
むずかしすぎる！五輪大会ボランティア応募フォーム(神田敏晶) - 個人 - Yahoo!ニュース
KNNポール神田です。 いよいよ、東京五輪の大会ボランティア募集が開始となった。 『ブラックボランティア』などとネットでいくら言われようとも、ボランティアする側が納得していれば、それはブラックなボランティアではないと思う。母国の五輪のボランティアで得られる経験は、人生のうち、何度もあるものではないからだ。 ボクが1963年の東京五輪の聖火リレーを見たのは神戸市の兵庫区だった。たった２歳であったが、あの雨の日の聖火リレーは、しっかりと脳裏に焼き付いている。だからこそ、ボランティアでも五輪に参加したいと考えている。 1963年10月神戸市兵庫区上沢通3丁目 出典:神田友治撮影11万人のボランティアが必要とされている大会ボランティアが８万人（組織委員会）、そして、都市ボランティアが３万人（東京都）の募集が昨日（2018/09/26）より開始となった。それぞれの申し込みページが公開された。 大会ボ
Life is beautiful: 日本語とオブジェクト指向
先日、日経BPの出版局の方と話をする機会があったのだが、私がマイクロソフトでウィンドウズ９５の開発に関わったことに触れた際、「ユーザーインターフェイスの設計において、日本人であることで何か役に立ったことはありますか？」と聞かれた。日本人であることがプラスになったとは思わないが、ふと思い出したことがある。当時、「日本語はオブジェクト指向な言語だな」と思ったことである。 その当時（９０年代初頭）、アップルの方が使い勝手に関しては一歩も二歩もマイクロソフトより進んでおり、そのためには、もともとゼロックスが提案しアップルが商品化した、「オブジェクト指向ユーザーインターフェイス」の考え方を、より推し進めるしかないという戦略で、ウィンドウズ９５のユーザーインターフェイス（当時は Object-Oriented Shell と呼ばれていた）の開発をしていた。 「オブジェクト指向ユーザーインターフェイス」
JavaScriptでフォーカスが当たっている要素を取得する方法 - 地平線に行く
Firefox & GoogleChrome 用の greasemonkey「Add Tab Index for Google」をバージョンアップしました。 Add Tab Index for Googleとは？ Googleの検索結果ページを3倍ぐらい使いやすくするためのgreasemonkeyです。 [1]検索結果の最初にフォーカスが当たる (Enterキーを叩くだけで検索結果の一番目が開ける！) [2]検索結果のタイトルにタブインデックスを追加する (Tabキーを押して検索結果を移動できる！) Ver1.3の変化点 画面下部のテキストボックスにフォーカスが当たらない不具合を修正 (Firefoxのみ)マウスでどこかをクリックしたときに、その近辺から自然な順序でタブの移動ができるようにした ダウンロードは こちら(Add Tab Index for Google) からどうぞ！ 今回か
aタグ以外にもフォーカスは当てられる - 地平線に行く
以前、Add Tab Index for Googleを作っていたときに、こんなバグがありました。 なんでこんなところにフォーカスが・・・。 不思議に思って調べてみたところ、フォーカスを当てられるのはaタグに限らないそうです。 もっと言うと、どのタグにもフォーカスは当てられるということを知りました。 タグにtabIndex属性を指定すればいいそうです。 参考サイト：キー操作可能なカスタム DHTML ウィジェット | MDN サンプル：ARIA Checkbox (http://www.mozilla.org/access/dhtml/checkbox) <span tabIndex="0" onclick="alert('フォーカスできる!');">このSPANをクリック</span> <div tabIndex="0" onclick="alert('DIVもOK!');">このDIV
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews