サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
リンクとボタンのビジュアルが似たものもしくは同じものになる理由のひとつに「押せる」[1]という共通点があるからだと思っている。 ビジュアルを似たもの・同じものにするかどうかは状況により判断されるので、そこに画一的な優劣は存在しない。しかしリンクとボタンは明確に異なる機能や振る舞いをもっている。その振る舞いやそれに対するユーザーのメンタルモデルから結果ビジュアルが同じになるのならいいのだが、ただ単純に「押せる」ことだけを基準にデザインされてしまうのは具合が悪い。このエントリーでは、リンクとボタンをデザインするにあたって「押せる」だけではなく、他にも判断材料となるものがあることを共有したいと思う。 前提と定義 今回の話はウェブブラウザで動作するUIを前提に考える。途中で言及するが、リンクがURLに関係していることと、URLをユーザーが意図的に変更できることが大きく関係するので、ネイティブアプリ
この記事はVueアドベントカレンダー2021の7日目の記事です。 SPAでボタンのコンポーネントをリンクとして扱いたいときに気をつけたいことを書きます。Vueに限った話ではないのですが、僕がVueで開発をする機会が多いのでサンプルコードではVueを使用しています。 他のフレームワークを使っている方は、適宜置き換えて考えていただければ幸いです。 ボタンのコンポーネントでリンクさせたい時ありますよね？Vue Routerを使用していれば router.push('/foo') のように関数を実行して遷移させることができるので、コンポーネントの内部が aタグ でも buttonタグ でもリンクとして動作させることが可能です。 どちらでもできるけど aタグ を使おうぜというのが本記事の言いたいことです！ サンプル 早速ですが、サンプルを使って紹介していきます。 見た目の同じボタンが2つ並んでい
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
クリックできるものがあって，<a>にするか<button>にするか，という話をしていて，いろんな観点があるなと思ったのでメモ． 単なる画面遷移なら<a> 単にformを送信したいときは，<input type="submit">や<button> <button>はdisabled属性を使って無効状態にできるので，押せない場合もあるなら便利 リンクを<a>にしておくと，PCではホバーするとリンク先が見えるので，ユーザーにとっては何が起きるか予想できて便利 そう考えるとformは押してみるまでどこに飛ぶか分からないので怖い気がする リンクを<a>にしておくと，:visitedを使って訪問済のリンクの色を変えることができて便利 モーダルウィンドウを出すとき，ウェルカムメッセージを開くボタンを<a href="#welcome">として，/#welcomeのときにウェルカムメッセージを出す，とし
a.btn{ display: inline-block; /* インラインブロック化 */ padding: 1em 2em; /* 余白設定 */line-height: 1; /* 行の高さ */ color: #fff; background-color: #2196f3;text-decoration: none; } a.btn:hover{ background-color: #42a5f5; } point paddingの値を上下1em、左右2emくらいにすると、フラットデザインっぽくなる。ここまで広げなくてもいいけど、狭いとダサくなるので、それなりに余裕ある数値にするといい感じ。 角丸に demo ボタンリンク a.btn{ display: inline-block; padding: 1em 2em;line-height: 1; color: #fff; b
家の照明などを操作しようと思うと、やはりモバイルアプリよりも簡単な物理ボタンが欲しくなることは多いと思います。 流行に身を任せて、市販のIoTボタンを買ったり、ArduinoやESP8266などで電子工作したりしてもいいですが、USBでつながる普通の無線マウスで実用的には十分なことがあったので紹介します。 ほかのIoTボタンと比べてこんなメリットがあります。 安い (737円とか) どこでも手に入る 設定が不要 乾電池で動作して長持ち ホイールが使える マウスで電球スイッチ 今回は、家全体の電球を操作するボタンをつくるのを例に説明します。電球にはPhilips Hueを使って、HTTPAPI経由で電球を制御します。このようなものを使います。 USB接続のワイヤレスマウス Raspberry Pi (常時稼働のマシンならなんでもOK) 制御するもの (今回はHue) マウスをクリックすると
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
