Install Now The Sublime Text package manager that makes it exceedingly simple to find, install and keep packages up-to-date.
iPhoneのそれと比較して、よくかっこわるいと評価されてしまうAndroidですが、正しくは「標準UI同士で比べた際にイケてない」のが真実だと思っています。 今現実として、Androidアプリにイケてないものが多いのですが、そもそもデザインを考慮するプロセスが省略されてしまっていたり、時間(コスト)が無いとかそういうこともあったと思いますが、流石にこれだけメジャーなデバイスになってしまうとそれが許される時代は終わってしまいました。 ドットコム全盛期の様なGeocities+IBMホームページビルダーのデザインがはるか昔にキャハハされた様に、もうそろそろ標準UIで未カスタマイズのAndroidアプリもキャハハされる時代です。 そんな中、効率よくかっこいいUIを構築するために頭の片隅で把握しておくとちょっと幸せになれる、独断と偏見で捻りあげた10個のAndroidのUIルールを紹介します。
07 Dec 2012 ※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事です。 CSS PreprocessorとIAの親和性、という記事の影響を受けまして、こちらの記事で書かれていた、 CSS Preprocessor そのものを共通ドキュメントにしてしまうとか という点を拾わせていただき、スタイルガイドのツールを紹介しようとおもう。 スタイルガイドとはなにか スタイルガイドは簡単にいうと、モバイル時代におけるCSSの設計と実装から引用させてもらうと、ページ上の部品(コンポーネント)をあつめたリスト、ページのこと。デザインパターンと呼ばれることもあるかもしれない。 具体的な成果物としてどういったものを指すのかというのは実際のページをみてもらう方が早いとおもうので、一度下記のページも参照してほしい。 MailChimp Design P
ソーシャルブックマークの「はてなブックマーク」。ここで自分のサイトの記事がどれだけブックマークされているかわかるのですが、 それをブックマーク数が多い順で並べる方法をJSで試したので、ご紹介です。 既存のブログパーツ わざわざJSを使わなくても、ブログパーツを使えば 簡単に設置ができるのですが、デザインの柔軟性にはかけるのでJSで簡単にできないかなと思った次第です。以下がブログパーツを設置したサンプルです。 はてブ人気エントリーをパーツで設置 APIを呼び出す まずはその人気エントリーを取得するAPIのアドレスが以下になります。 http://b.hatena.ne.jp/entrylist/json?sort=count&url=[サイトのURL]&callback=hatebuCallback [サイトのURL]に自分のサイトのアドレスを。callbackの後ろはあとで書くJSのfun
CSS Programming Advent Calendar 2012 10日目です。 今回の自分の作ったデモは全てOperaでしか動作しませんので、 まだインストールしていない方は予め opera.com にてダウンロード、インストールを行なっておいてください。 今回作成したのがこちらです。 CSS RPG 操作方法はShift+矢印キーで移動。 エンターキーを押すことでアクションをおこすことができます。 Shift+エンターは動作しません。 注意 最後の方でいきなりフォーカスしている場所が黒くなってしまうバグがあります… 最後のエリアで矢印キーを連続で押すとワープしてしまいます… 矢印キーがCSSで動作する仕組みは過去にも作られていました 過去にはgrfxdsgnさんが作ったような下のような作品がありましたが、 CSS RPGはこの仕組みとは全く別の仕組みを利用しました。
@SOHOは2004年に簡単に外注パートナーを探すことができるプラットフォームとしてスタートしました。 発注者が極端に低い単価で発注し、取引に慣れていない作業者が不利益を被るという実態が多発してしまっていました。これを受け、2009年10月28日より、厚生労働省が提示する「最低時給」に基づいて単価設定を行って頂くことに致しました。 本来は最低時給は雇用契約の場合に適用される考え方であり、企業やフリーランス・個人事業主間の取引においては保証されるものではありません。... こんにちは、@SOHO創業者の平城寿です。 8月11日に、@SOHOは15年ぶりとなる全面的なサイトリニューアルを行いましたので、ご案内させて頂きます。 スマートフォンのレイアウトにも対応し、とても見やすくなっておりますので、使い勝手はかなり良くなっているものと考えています。 @SOHOは、インターネットの黎明期である 2
サイト管理 ログイン 投稿の RSS コメントの RSS WordPress.org 最近の投稿 SP 野望篇+革命篇 レビュー ダイソーでiPhone4で使えるUSB同期ケーブル・液晶保護フィルム・ケースが105円 スティーブ・ジョブズ 驚異のプレゼン 人々を惹きつける18の法則 書評・レビュー ドキュメントスキャナscansnap s1500と断裁機で夢の自炊生活 Appleインイヤーヘッドホンが2度目の故障と、修理までの流れ 投稿カテゴリ iPhone (11) 電子書籍自炊 (2) コンピュータ (37) データベース (6) プログラミング (19) スポーツ (44) サーフィン (32) ジョギング (10) ブログ (31) ゲーム (6) テレビドラマ (4) 映画 (10) レビュー (16) 栃木県ネタ (3) 資格 (5) 音楽 (45) abingdon b
禁煙してから3ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
You probably landed here looking for my ikonic icons. You can find a more versatile set (500 icons) at the same price here.
This entry was posted on November 29, 2012 at 7:13 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. 74 Responses to “Rounded Rectangle Radius Resizer” Corine Barbazanges Says: April 13, 2015 at 5:13 am | Reply Thanks so much for this great script!! SO useful :) Jack Says: April 27, 2
医学部の現役合格を目指す学生さんは、基本的に毎日必死になって勉強してる。 それもプライベートを削って何時間もだ。 それくらいしなきゃ合格が難しい。 しかし、どれくらい勉強したらいいか、分からない学生さんも多いよね。 ここでは高1〜高3の人を対象に、1日の必要な勉強時間と勉強のコツを説明するよ。 高校1年生は1日3時間以上の勉強が必要 現在高1の人は、最低でも1日平均3時間は勉強時間を確保しておこう!1日1~2時間じゃちょっと足りない。 3時間は勉強しないと、高校の範囲がなかなか終わらず、受験ギリギリまでかかる可能性がある。 だから3時間は最低ラインと捉えておこう。 勉強する内容はまず基礎からだ。 どの科目も基礎ができなきゃ次に進めないし、理解も怪しくなる。 高1のうちは基礎を固めることに専念しよう。 ちょうど高2の履修範囲が基礎を固める段階に入る。 だから高2の範囲を勉強をしていれば、自然
この記事は、特定のフォントを愛する人が、そのフォントの一体どこがいいのか、どうしてそのフォントでなくてはダメなのかを語る #LOVEFONT Advent Calendar 2012 の10日目の記事です。 AquaKanaとは AquaKana(Aqua かな、アクアかな などと表記されることもあります)は、OS X(Mac の OS)のメニューやタイトルバーなどの UI に使われているフォントの名前です。 隠しフォントになっているため、通常アプリケーションのフォント一覧には出てきません。ですので、Mac ユーザーでもこのフォントの存在を知らない方もいらっしゃると思います。 Mac のコンテンツ部分に標準で使われている「ヒラギノ角ゴ Pro」と、UI で使われている「AquaKana」で「ファイル ウインドウ ヘルプ」などを比較するとこんな感じです。 AquaKana は一見ゴシック体の
Photoshopで角丸矩形を作成する時、シェイプツールをよく使用すると思いますが、その角丸の矩形の四つの角丸を個別に数値で編集することができる機能拡張(スクリプト)を紹介します。 対応は、CS5, 6みたいです。CS6のWin, Macの日本語環境で動作しました。 Rounded Rectangle Radius Resizer Rounded Rectangle Radius Resizerのインストール Rounded Rectangle Radius Resizerの使い方 Rounded Rectangle Radius Resizerのインストール インストールは簡単です。 ダウンロードして解凍した「Rounded_Rectangle_Radius_Resizer.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/」内に移動します。 Photosho
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSS おれおれ Advent Calendar 2012 – 09日目 CSSのセレクターっていうと要素、クラス、IDでの選択が一般的で、あとは:hoverとかの疑似クラスがあるような感じですが、加えて「属性セレクター」ってのがありマウス。 属性セレクター? 要素の検索の条件に、その要素が持つ属性を指定するものです。優先順位はクラスセレクターと同じです。 IEは7から利用できます。 「属性」はわかりますか。HTMLの、タグの中に書くやつです。 このうちinputが要素名で、type="text", name="id", value="", maxlength="8", size="8"なんてのが属性です。また左側typeが属性名、右側textが属性値です。 属性セレクターの書き方 何パターンかあります。 属性が付いているもの [att] 属性を持っている事だけが条件です。値は何でも構いま
WEBCRE8の優さんの企画ではじまった#LOVEFONT。 自分の担当の日を一日勘違いしてました鈴木ですごめんなさい。 ホントは7日のうちに仕上げたかったんですが普通に日付越えてしまいました。 さっそくですがフォントの紹介をさせて頂きます。 今回はスタイリッシュな形が印象的な「Eurostile」を簡単にですが紹介したいと思います。 Eurostileとは EurostileはイタリアのAldo Novarese(アルド・ノバレーゼ)さんが1962年に作ったフォントです。 ゆるやかな角丸が特徴的で、特にExtendedは横に長くなっているタイプフェイスをしており、未来的な印象のサンセリフ体です。 EurostileはSF映画やゲームのデザインなど、デジタルっぽさを感じさせるデザインに合いそうですね。 よくEurostileのExtendedはBank Gothicと比べられ
サイトを制作する上で、便利な素材PSD。photoshopで扱えるファイルで、細かなカスタマイズも可能で、扱いやすいファイル形式は制作者としてはありがたい形式ですが、今日紹介するのは、2012年に公開されたフリーPSDを集めたエントリー「Best Free UI PSDs of 2012」を紹介したいと思います。 Mini glyphs (12 px) ベーシックなアイコン素材から、ローディング用のプログレスバーなど、制作に利用できそうな様々な素材がまとめられています。今回はその中から特に気になったPSD素材を紹介したいと思います。 詳しくは以下 Circular Progress Bar 立体的で円形のプログレスバー。ローディングを印象的に見せたい時におすすめです。 Free Footer Detailing フッターに利用するTOPに戻るボタンをリアルなリボンで表現したPSD Pric
iPhoneでかわいく写真を撮るために、わたしが気をつけていることを書いてみました。 わたしは、iphone標準のカメラアプリでまず撮影し いろんなフィルタアプリへ持っていくので、その流れで書いています。 写真って、本当は自由なもので、 どんなことをやってもいいんです。 基本を無視したトリッキーな写真は世の中にたくさんあります。 最初から勘がするどく、どんなカメラでも素敵な写真を撮ってしまうひともいます。 フィルムをいつもと違う現像液でわざと現像してみたり 自分でカメラを改造したり。 なんというか、型破りなことができるのがカメラと写真で それをもっとお手軽に撮れて、遊べるのがiphoneカメラだと思っています。 なので、これから書くことが「正しい」とか「これしかしちゃいけない」 ということはなく こういうのもあるんだなーくらいで読んでいただけると嬉しいです。 構図のこと instagram
先日、11にアップデートされましたiTunes。 その新機能なのかはわからないのですが、カメラが内蔵されているMacであればiTunes CardのコードをMacのフロントカメラで読み取れるようになっておりました! 購入しましたiTunes Card。スクラッチを指でめくれるようになったのはホントに嬉しいです:) MacのiTunesを立ち上げ… 「カメラを使う」をクリック。 するとフロントカメラが自動的に立ち上がりますのでカードをかざします。すると、勝手にコードを読み取り、残高が追加されるのです!!! コードはいちいち手打ちしなければいけないもの…そのドロ沼の思考を嘲笑う…っ…まさに…悪魔的所業…っ…!!圧倒的閃き…っ…!! スキャン時のスクリーンショットを撮ろうとしたのですが…駄目…っ…足りない…っ…っ…!スピードが…神懸かり的…っ…! そんなわけで、煩わしかったコード入力がメチャクチ
UXやユーザビリティという観点で、海外の記事を中心にサマリーと併せてご紹介していきます。第1弾の今回は、ユーザー登録時のパスワード入力画面についてです。 U-Site編集部 2012年12月10日 こんにちは。U-Site編集部です。 今まではニールセン博士と黒須教授の記事のみを配信して参りましたが、編集部でも、UXやユーザビリティという観点で記事を配信していくこととなりました。海外の記事を中心にサマリーと併せてご紹介していければと思っております。どうぞ、よろしくお願い致します。 さて、早速第1弾の投稿ということで、今回はユーザー登録時のパスワード入力画面に関する記事をご紹介します。 #パスワード入力画面についてはニールセン博士も2009年の段階で言及しております。その当時の記事はこちら。 ユーザー登録フォームにおける、よりよいパスワードの隠し方 ご紹介記事:Better Password
Focal Point: Intelligent Cropping of Responsive Images | Design Shack これは使える!画像をレスポンシブに切り取るサンプルコード。 ブラウザ幅を小さくした際に、画像も小さくしてしまう、のではなく、元の大きな画像の指定した部分を切り抜いて表示する仕組みが紹介されています。 divのclassにどこから表示するのか?を記述しておくだけで、超簡単に場所を指定できるところもいいです。 ニュース等の画像では、重要な部分以外にも背景などが含まれる場合がありますが、スマホなどでは重要なところを大きく表示したいという事があるかと思います。 そういう時に、これを使えば便利そうですね。 関連エントリ レスポンシブで超クールなカレンダーデモとjQueryプラグイン「Calendario」 レスポンシブなテーブル作りに役立つjQueryプラグイン
お前偉そうだなシリーズ第一弾 まぁ全部、全体のデザイン次第ですし、流行りモノ感もありますが。 ちょっとだけ変えると、グッとクオリティ上がりますよー的な小ネタです。そしてかなり個人的趣味です。 シャドウ ドロップシャドウなんかは手軽にクオリティ上げられていいですよね。 ただシャドウはつけすぎる(濃すぎる)と主張が強くて重くなりがち。 シャドウ自体はただの効果・装飾ですから、本体を引き締める程度にかけておけば良いと思います。 また、単なる上下・左右のシャドウではなく、球体・曲線でシャドウを上手く入れていくと面白いですよ。柔らかみもありますし。 グラデーション 立体感を出してチープな印象を防げるグラデ。 ただ、最近はベタ塗りでビビットに見せる装飾が流行ってきましたね。 思い切ってベタに変えるのも手。 もしくは、かなり差を狭くして「これグラデ?」と思わせるくらいのモノが良いかも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く