[B! UI] kuwaのブックマーク

ポップアップ形式のselectの代替になる入力要素を実装できる「PopSelect」:phpspot開発日誌

PopSelect | A jQuery plugin to replace select with popover ポップアップ形式のselectの代替になる入力要素を実装できる「PopSelect」 inputにフォーカスするとするとポップアップして要素をクリックでアイテムを選べます。関連エントリ複数選択が出来るBootstrapなサイトで使えそうなselectボックス実装「jQuery select-multiple」 selectタグの機能を大幅に向上させる「selectivity」 selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」 selectを大きいボタンの複数カラム形式にできる「Multi-Column-Select」

kuwa 2015/07/31

リンク

cow2design.com

This domain may be for sale!

kuwa 2015/04/27

リンク

[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js

ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step 2: HTML ナビゲーション（#menu）とコンテンツ（#panel）を実装します。 idは変更可能です。 <nav id="menu"> ナビゲーション </nav> <main id="panel"> コンテンツ </main> Step 3: JavaScript オプションを定義し、スクリプトを実行します。 <script> var slideout = new Slideout({ '

kuwa 2015/03/10

リンク

年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15 - NxWorld

年表・沿革・コメント一覧といったコンテンツで用いられているタイムラインデザインを作成する際に便利なプラグインやチュートリアルのまとめです。レスポンシブ対応したものやCSSだけで実装したものなど全15種類で、見た目もよく見かける縦型︵垂直︶タイプだけでなく横型︵水平︶で見せるタイプもあります。 jQuery Timelinr 縦型・横型の両タイプが用意されているjQueryプラグインで、スライダーのような見栄えでタイムラインを実装できます。スライドのオート機能や各アニメーション速度の設定、﹁prev﹂﹁next﹂のナビ機能などの設定もいろいろと用意されています。 Dynamic Timeline レスポンシブ対応もされているjQueryプラグインで、こちらも縦型・横型の両タイプが用意されており、ビューサイズ指定で通常は横型のものをスマートフォンでは縦型に見せるなども可能です。他にもコン

kuwa 2015/02/17

リンク

selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」:phpspot開発日誌

selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」 2015年02月03日- jQuery easySelect selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」。 selectタグにmultiple属性を追加すると複数選択が可能ですが、これを複数選択形式をUIを変えて入力補完のような形にするプラグインです。 selectのmultipleはCtrlキーを押しながらクリックするなどというUIとなるため、あまり採用はされませんが、ケースによってはこういう入力のUIも使いやすい場合がありそうです関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flex

kuwa 2015/02/04

リンク

Text Input Effects | Set 1

Text Input Effects Simple ideas for enhancing text input interactions Haruki First Name Last Name Em ail Hoshi Name Street Town Inspired by Andrej Radisic's Jawbreaker input field Kuro Username Website Invitation Code Jiro Cat's Name Dog's Name Hamster's Name Minoru First Name Middle Name Last Name Yoko Street City Region Hideo Username Em ail Password Kyo What's your em ail? Akira First Name Last Na

kuwa 2015/01/12

リンク

CSSだけでお手軽なフリック&ドラッグスライダーを作る | バシャログ。

今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe

kuwa 2014/12/23

リンク

横からニュルっとスルっとあいつがでてくる。jQueryドロワーメニュープラグイン【jSlideMenu】を使ってみた｜わざログ｜うずまきブログ｜名古屋のホームページ制作／印刷物デザイン株式会社うずまきデザイン

ずいぶんと前に日本列島に寒気がやって参りましたね。最近はこたつの中で横になりながらジャンプ片手にみかん片手に、ついでにテレビ見ながらごろごろしてることを思い浮かべながら布団に入るのがついつい日課になってるエンジニアの松本です。長めの自己紹介はさておき、本日は今ノリにノッているあのイケてるドロワーメニューを使ってみたいと思います。 google.com スマホ版巷で噂のドロワーメニュー。FacebookアプリやGoogleサイト︵*右画像︶など、だれもが利用しているアプリやWebサービスで導入されています。横からニュルっとスルっとでてくるあのメニューこそ、ドロワーメニュー張本人です。あのニュルニュル感が気持ちいいから、ついつい何回も何十回も何百回も角っちょのメニューアイコンを押しちゃうんですよね。ああ気持ちいい。今回ドロワーメニューを導入する際に使用したのはjQueryプラグイン︻jS

kuwa 2014/11/27

リンク

alertの代替手段を提供するSweetAlert

Spring BootによるAPIバックエンド構築実践ガイド第2版何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

kuwa 2014/10/30

リンク

アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス

2020年11月14日 jQuery, アクセシビリティ多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに

kuwa 2014/09/05

リンク

UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ

WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーションユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所

kuwa 2014/07/17

リンク

スマホ初心者の母にスマートフォンサイトのUIについて色々聞いてみました | AOGIRI.net（アオギリネット）

おそらく自分の母親世代である方も対象になるであろうスマホサイトを制作するために、母に色々と意見を聞いてみました。母は、スマートフォンで私のインストールしたアプリでレシピ見たり、天気予報を見たり、ニュースを見たりするぐらいで、積極的にネットで検索はしないけど、必要に迫られると見るというぐらい。そこでいくつか驚いたこと、なるほどと思ったことがあったのでご紹介します。右上の三本線はメニューとは認識しないどころか、﹁メニュー﹂という文言すら何を指しているのか分からない最近、スマートフォンサイトではヘッダの右上に﹁三本線＋メニュー﹂のボタンが配置されることが多くなっています。三本線だけ、というサイトもありますが、万人がターゲットのようなサイトは、﹁メニュー﹂﹁MENU﹂の記載が大体あります。しかし、私の﹁このメニューっていうボタンを押したらメニューが表示されるって分かる？﹂という質問に返っ

kuwa 2014/05/17

“右上の三本線はメニューとは認識しないどころか、「メニュー」という文言すら何を指しているのか分からない”

ui

リンク

コンテンツで改善する UI デザインの極意

デザインは小さなテキストから始まります。コンテンツを膨大に抱える大規模なサイトでも、ユーザーにコンテンツ作成を委ねる小さなアプリケーションでも小さなテキストが行動の変化に繋がる場合があります。コンテンツがある状態でデザインするのと、何もないままスタートするのでは大きな差が生まれます。 UI デザインの話になると、ビジュアルやインタラクションが話題の中心になりがちですが、コンテンツも UI です。なぜコンテンツが UI デザインにおいて重要なのかを解説すると共に、今セッションでは小さなテキストの工夫からはじまるデザインについて、幾つかのケーススタディーをみながら傾向と対策を紹介します。

kuwa 2014/01/30

リンク

分かりやすく、使いやすいデザインを生み出す工夫　先生：池田拓司

ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/344/room ーーーーーーーーーーーーーーーーーーーーーーーRead less

kuwa 2014/01/13

ui
web

リンク

GoodUI

Learn From What Leading Companies A/B Test Receive the latest discovered UI patterns and leaked experiments from companies such as Amazon, Netflix, Airbnb, Etsy, Google, and Booking.com, etc. We're obsessed with learning about what works and what fails.

kuwa 2013/12/24

日本語訳→http://blog.mah-lab.com/2013/12/22/good-ui-ideas-34/

リンク

今日のヨレヨレ　島国大和のド畜生

・2023年03月 (1) ・2023年02月 (1) ・2023年01月 (2) ・2022年12月 (1) ・2022年11月 (3) ・2022年10月 (1) ・2022年09月 (1) ・2022年08月 (1) ・2022年07月 (1) ・2022年05月 (2) ・2022年04月 (1) ・2022年03月 (1) ・2022年02月 (1) ・2022年01月 (1) ・2021年10月 (1) ・2021年08月 (1) ・2021年07月 (2) ・2021年05月 (1) ・2021年04月 (1) ・2021年03月 (1) ・2021年02月 (1) ・2021年01月 (1) ・2020年12月 (1) ・2020年11月 (1) ・2020年10月 (1) ・2020年09月 (1) ・2020年08月 (2) ・2020年06月 (2) ・2020年04

kuwa 2013/11/12

激しくそう思う。なんで流行ってるのか全然理解できない。→“「ボタンがボタンかどうかわからない」というのはインターフェイスデザインとして致命的ではないか。”

ui

リンク

マウスオーバーエフェクト　Creative Link Effects

If you enjoyed these effects you might also like: Creative Button Styles Simple Icon Hover Effects

kuwa 2013/10/07

ui

リンク

takram laboratory » 自己帰属感・体験のインタフェースデザイン

takram academy レポート：講師渡邊恵太先生アプリケーションのユーザインタフェースの設計において、サクサク感といった一種の気持ちよさの設計が求められるようになってきています。では、その気持ちよさとは、いったいどこからやってくるのでしょうか？明治大学の渡邊恵太先生による本講演では、自己帰属感というキーワードから「人があることを体験すること」とはどういったことなのか、デモを通して明快にご説明いただき、それに基づいたインタフェース・デザインの指針を解説していただきました。講師明治大学先端メディアサイエンス学科渡邊恵太先生講演タイトル「自己帰属感、体験のインタフェースデザイン」　 takramでは、幅広い人々との対話を通して共に成長する組織であり続けるために、“takram academy”という寺子屋的な取り組みをはじめました。社内講師によるパイロット講義を通

kuwa 2013/09/19

ui
design

リンク

ネストされたリストにも対応のドラッグ&ドロップによる要素の入れ替えを可能にするjQueryプラグイン・Nestable

入れ子のリストにも対応した、ドラッグ&ドロップによるソート可能なjQueryプラグインのご紹介。jQuery UIを使うほどでも無いような時はこういうのあると嬉しいですね。ネスとされたリストのソートをドラッグ&ドロップで可能にするjQueryプラグインです。非圧縮で13KBほど。うまくキャプチャ撮れなかったですけど、iPhoneでも動きました。ネスとされたリストでもドラッグ&ドロップでソート可能です。勿論、孫要素から子要素に移動させる事も出来ます。 WordPressのカスタムメニューを触ったことがある方ならピンと来るかもしれないですね。WPではjquery-ui-draggableを使用していますが、こちらはjQueryUI無しで動きます。親要素や子要素はその下層要素を格納できます。コード<script src="http://ajax.googleapis.com/a

kuwa 2013/09/06

リンク

【pickadate.js】シンプルだけど高機能な日付カレンダー編 | DevelopersIO

pickadate.jsというライブラリーの中で、高機能な日付カレンダーを紹介してもらったので試してみました。アジェンダソースのダウンロード実装してみる。日本語表記にするいろいろなオプションまとめソースのダウンロードまずはこちらのサイトからソースをダウンロードしてきます。ファイルを展開するといろいろファイルはありますが実際に使うファイルは[lib]フォルダ内にあります。 [lib]フォルダ内は以下のファイルになります、今回は日付カレンダー用のjs、cssを使用してみます。実装してみるそれでは実際に表示してみようと思います。今回のデモで使用したファイルになります。 css default.css default.date.css javascript jquery picker.date.js legacy.js app.js←こちらが実際に実行するファイルです。 ind

kuwa 2013/08/02

リンク

はてなブックマーク

タグ

関連タグで絞り込む (36)

UIに関するkuwaのブックマーク (92)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス