[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)
CSS selectors - mobile
Here are almost all CSS2 and 3 selectors, and the CSS3 UI selectors (mostly structural pseudo-classes). This is the mobile table. See also the desktop table. Last major update on 1 October 2013. I'm writing a CSS book. Basics Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox 6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS A
配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう！｜Webpark
自分が作ったウェブサイトを見て、「センスないな」とへこむことはありませんか？ 私はよくあります。色使い、レイアウト、写真、文章などなど、どれをとってもセンスないなとへこんでいました。 けど、センスがないのではなく、単に基礎を勉強していないだけということに最近気づきました。センスはもっと高い次元の話でした。 ということで、センスを言い訳にしてしまいがちな分野の基礎を学べるすばらしい記事を集めました。この記事自体単なるまとめ記事ですが、できるだけ厳選し、読んでほしい順に並べました。皆さん、あきらめずに一緒に勉強しましょう。 配色 アクセントになる色を使うのが苦手で、同色系の色ばかり使ってしまうのですが、これらを読めば恐れずに使えそう。 色彩センスのいらない配色講座 ベースカラー、メインカラー、アクセントカラーに分類してどのような色を選ぶべきか分かりやすく解説してくれています。具体例もあって分か
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
デザイナーに丸投げしちゃいがちなUIというもの - ぼくはまちちゃん！(Hatena)
こんにちはこんにちは！！ 今日はちょっとUIについて思うことのお話をしたいと思います。 ぼくは以前、ゲーム業界にいたんだけど、そこでは、 いわゆるグラフィックデザインを専門にしている人に 「この画面のUIおねがいね」と丸投げする光景をよく見ました。 だけど、見た目が綺麗なデザインを仕上げるのと 使い勝手を考慮したユーザーインターフェイスを設計するのとでは、 考え方も、必要なスキルもまるで違うものだと思う。 情報や機能を、どのようにユーザーに提供するか。 これは画面上の配置や見た目だけの話だけじゃなくって、 情報の階層化や、いつどのタイミングで見せるかといったことまで考えなきゃならない。 たとえばゲームなら、初めからボタンだらけの画面にするのではなくて、 ゲームの進み具合、ユーザーの習熟度に応じて段階的に機能を見せるとかね。 細かい話なら、ボタンを押した時に反応するのか、 離した時に反応する
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
Yahoo! JAPANのトップページデザイン15年史
ニュースや天気やメールなど、なんだかんだでヤフーをチェックしない日はありません。この習慣ははや10年以上続いてます。ちょっと昔のヤフーのデザインに興味が湧いたので、インターネット・アーカイブで年代別にスクリーンショットを撮ってみました。 1997年 Yahoo! Japanは1996年の4月1日にオープン。しかし最初のアーカイブは1997年からです。見た目は今の携帯サイトみたいですね。それもそのはず、当時はモデムによる通信しかなかったので通信容量との戦いでした。 Yahoo! JAPAN 1997/04/14 1998年 バナー広告がリンク切れしているのはご愛嬌。テーブルによる段組がスタート。CSSの概念は登場していましたがブラウザが対応しておらず、しばらくテーブルレイアウトが主流となります。 タグ(html,css)辞典: CSSの歴史 Yahoo! JAPAN 1998/12/05 1
可能性を広げる10のスタイルシート | コリス
ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。 「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。 HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> スマートフォンでは表示するページの大きさをビューポートの幅に（主に）縮小してフィットさせるため
iView Slider
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
意外と説明できない･･･なぜリンクの色が優先されるのか調べてみた
こんにちは湿気でつやつやてかてかの井畑です。 今回はCSSのリンクの色についてふと疑問に思うことがあったので、調べて記事にしてみました。 調べてみると、何て事はなかったのですが(爆)目から鱗というかなるほどーと思うことだったので、皆さんの脳みそのしわの一つにでもなれば幸いです。 それではどうぞー！ aのリンク色はなぜ親要素から継承されないの？ 僕が疑問を持った点を説明します。まずはコチラをご覧ください
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
ユニクロが話題のPinterestを始めたけど狙いすぎてイタイ - IRORIO（イロリオ）
楽天が先月17日出資したと発表して日本でも話題になった写真を収集・共有できるSNSのPinterest（ピンタレスト）。2010年3月のサービス開始以来わずか2年で1300万人のユーザーを獲得し、米国で第3位のSNSに成長している。 フェイスブックの“次のマーケティングツール”として、有名企業から注目を集めつつあり、アパレルのバーバリーや雑誌のTIMEなどがブランドページを開設し、フォロワーを数多く集めている。 日本を代表するアパレル大手ユニクロが26日、ついにピンタレストでブランドページを開始した。しかし投稿（ピン）している画像がどうも変だ。縦8228ピクセルの超縦長の画像を次々に公開している。原寸比50％でもこの通り。 「クリエイティブ！」と称えたいところだが、画像を見るためにマウスを持つ指がつりそうで、何か間違ってるような気がしてならない。
角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！
角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！ html5-css3-orange-logos / Nelson Felix Giga どうも！おつぱ（ @OZPA ）です！ 今回は、角丸やドロップシャドウ、グラデーションに2D/3Dアニメーションなど、CSS3に対応したスタイルを簡単に作成、さらにコードを生成してくれる「CSS3 ジェネレーター」を厳選して8つご紹介！ ｳｵｱｱｱｱｱｱｱｱ さて、CSS3対応ブラウザも増え、角丸、ドロップシャドウ、グラデーションにWebフォント、はたまた2D/3Dのトランスフォーム（回転／拡大縮小／移動）やアニメーションなどなど…リッチなUIがコードのみで表現できるようになりました。 関連：[CSS]GoodDesign賞にノミネートされて落選するこ
YouTube人気急上昇
【2018年群馬】「庭の木？切るの手伝うよ」→丸ノコで足を切断し大量出血 彼はなぜノコギリではなく「丸ノコ」を？ 気軽に買える工具の危険 【ゆっくり解説】
これは要チェック！豊かなユーザエクスペリエンスを与えるナビゲーション集
ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。 ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点をSmashing Magazineから紹介します。
[CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout
IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ：Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa
PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ） - Kaleidoscope
PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--viewportの指定--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--/viewportの指定--> <!--メディアクエリでPC用・
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Iconfinder | Download free icons
Fontello - icon fonts generator
さまざまなテーマでさくっとダミー画像が作れる『lorempixum』 | 100SHIKI
