はてなブックマークのだめなところ - ぼくはまちちゃん！
こんにちはこんにちは！！ はてなブックマークがリニューアルされてから、４ヶ月ほど経ちましたが みなさんはそろそろ慣れましたか！ ぼくはいまだに慣れてません…＞＜ 一覧性が悪いとかそういうのは、他ですでにさんざん言われてるので、ここではあえて触れずにおきます。 が、特に何に慣れないかっていうと、 ぼくはPCで見る時、「マウスのホイールクリックで新タブひらく」というやり方をよくつかうのですが… ふむふむ、読んでみようかな〜 よーし新タブで開いちゃうぞ〜 あっ！ これ、文字と文字のあいだ、行間に、けっこう大きな「すきま」があるんですね。 で、そこをクリックしてしまう。 はてなの皆さんは、MacBookとかタブレットばかり使っている リア充オシャレメガネスタバ野郎ばかりだからきっと気づかないのかもしれませんが、 ぼくみたいにふつうのVAIOとかマウスとか使ってる人がいることも忘れないでほしいです。
[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 datalist要素とは HTML5で新しく加わったdatalist要素は、list属性で紐付けられたinput要素にユーザーが入力する際に、datalist要素内に置かれたoption要素の値をその入力候補として表示させる為の要素です。 datalistタグ内に入力候補としたいワードをvalue属性に持つoptionタグを複数記述します。 <form method="get" action=""> <input type="text" list="tools"> <datalist id="tools"> <option value="手裏剣"> <option value="まきびし"> <option value="煙玉"> </datalist> <input type="s
![[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)](https://cdn-ak-scissors.b.st-hatena.com/image/square/778ae00a3dda92b39324406dab3406d3736f6df8/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F04%2Fhtml5-tag-datalist-01-150x150.png)
画像の上に文字を表示 Hover Captions (HCaptions.js)
Markup example This example uses all default settings. <a href="#myToggle" class="panel"> <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" /> </a> <div id="myToggle" class="cap-overlay hide"> <h5>Cupcakes</h5> <div class="content"> Name: cupcakes.png<br /> Photography: Ryun Shofner<br /> <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> <a href="jav
scrollnav.js
A small, dependency free JavaScript plugin for auto generating and tracking single page navigation (aka a Table of Contents) Get started View the demos Features Simple setup Pass your page’s content to scrollnav and it will generate the navigation and track scrolling automatically. Fully customizable All the styling is up to you, make scrollnav look and behave however works best for your project.
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」:phpspot開発日誌
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 2013年04月11日- kamens/jQuery-menu-aim GitHub 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 次のような新しいamazonのメニュー。amazonといえば品揃えや安さだけでなく、秀逸なUIによって売上を伸ばしてきたといってもよいと思いますが、新しく実装されたドロップダウンメニューLikeなものを実装できるプラグインです。 デザインは違いますが、動作は同じです。 なかなか汎用的に使えそうなデザインですね。 関連エントリ HTML5＆CSS3なフリーのドロップダウンメニュー２５ レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 シンプルだけどデ
言葉はグラフィックより大事なインターフェイス
2013年3月16日にAndroid Bazaar Conference 2013 Spring が開催されました。昨年に引き続き今年も登壇。前回はゲームをテーマにして話をしましたが、今回は「コンテンツで改善する UI デザインの極意」と題してコンテンツと UI をテーマに話をしました。 見た目が綺麗だから良い UI というわけではない UI のインスピレーションとして Dribblbe や Android Patterns のようなギャラリーサイトを見ている方は多いと思いますし、「素晴らしい UI のまとめ」と名付けた記事も、だいたいはこうしたギャラリーサイトを参照していることが多いです。 実装まで携わった経験がある方ならなんとなく分かると思いますが、Dribble で紹介されている UI アイデアの多くは現実味がない想像図が多く掲載されています。実装しようとするならばパフォーマンスや操
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
[UI]ボタンや画像のマウスホバー時のアクションはどうあるべきか
Twitterでの話題 マウスホバー時の表現について、Twitterで少し話題になりました。ちょっとツイートをとぅぎゃったりしてたわけではないので(誰かしてたらお願いｗ)全部を拾っているわけではないのですが、昨日のぽよしさん(@poyosi)のツイートと関連したものを紹介。 【質問】マウスホバーの時って明るくするのが一般的にとかあるんかいな？ — ぽよし (@poyosi) February 19, 2013 ホバー感については世界観で考えることがおおいけど「触れてる」「押せる」が明確になればいいんじゃないかと思ってたけど意見が色々… — ぽよし (@poyosi) February 19, 2013 @poyosi 何かで決められてるかはわからんけど、基本的にはやっぱポジティブな方向(明るくなる、大きくなる、前進する)に変化するのが自然やと思う。 — 酒井優 (@glatyou) Feb
![[UI]ボタンや画像のマウスホバー時のアクションはどうあるべきか](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c212cf3dc92239d6b10fee122a3a71ed5d5b1ea/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fui-hover-action-02-150x150.png)
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
数値だけでなく、日付や時刻にも対応したスライダー・jQRangeSlider - かちびと.net
D&Dで操作するスライダーを実装するjQuery依存のスクリプトです。数値のものが多いですが、こちらは日付や時刻などにも対応しています。使うシーンは多くは無いかもですけど、便利そうです。 日付にも対応のスライダーです。※ピッカーではありません
amazonのリニューアル後のカテゴリメニューが素晴らしい | トラねこblog
どうも、kuwaです。 amazonさんがリニューアルされました。パッと見でもかなりスッキリとした印象ですね。 今回はその見た目ではなくメニューの細かい制御についての話です。左の画像にある、カテゴリ選択メニューの細やかな制御が素晴らしくて感動しました。 一番上の「本・漫画・雑誌」から下方向にマウスカーソルを垂直に移動させると選択カテゴリが速やかに切り替わります。これは当たり前ですね。 問題は、ここからサブジャンルを選択する際です。例えば、「DVD・ミュージック・ゲーム」を選んだ後、右側に表示されるサブカテゴリから、「TVゲーム」を選ぼうとサブカテゴリを選ぶケースです。この場合「DVD・ミュージック・ゲーム」の上にあるマウスカーソルを「TVゲーム」まで持っていくために、右下に向かって斜めに移動さると思います。この時、マウスカーソルは「DVD・ミュージック・ゲーム」の下にある「家電・カメラ・A
ssig33.com - ネイティブアプリ並のウェブアプリを云々
なんか最近そういうの流行ってるようですね。僕も考えを書いてアクセス数を稼ぎます。 ページ遷移を過度に抑えようとするな 下手に AJAX 使いまくるぐらいならページ遷移したほうがマシであることが多いです。世の中にはページ遷移を抑えようとして酷いことになってる JS を沢山見ます。よく考えろ。 ローカルストレージを活用しない localStorage に画像とか放りこむの異常に重くなるのでオススメしません。認証持たないサービスで設定値保存するのに使うとかに留めた方がよいと思う。 非同期な API 絶賛してて気に食わない感じはしますがこの記事を一読することをお勧めします。 localStorage は小さなデータをいくつか入れる分には十分に高速です。大きなデータを入れると十分に低速です。 scroll イベントに対してリスナーを置かない scroll イベントの監視は実際最悪のアイディアです。こ
Modern Syntax
エスパー・バイオニクス社が開発した「Esper Hand」は24個のセンサーが配置され、それ経由で得られたデータから筋電図を作成し既存の腕の筋肉と連動して自然な腕の動きを生み出すそうです。 またAIも搭載されていて、個人（装着者）ごとの手の特定の使い方を分析し、よりスムーズな動きの実現に寄与するそうです。 ビデオを見ると手に装着するだけでうまいこと動いているように見えるのですが、これは繰り返し使っていることでデータが蓄積された結果なのかもしれません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
IDEA * IDEA
IDEA * IDEA
crocos.jp
絞込み項目（タグ）の折り畳みを実装しました。 | トラねこblog