はてなブックマーク

PSDやCSSで作られた高品質なUIパーツを集めたサイト「UICloud」のご紹介です。 DesignmooやdeviantARTでダウンロードできるUIパーツのPSDなどを集めたサイトです。 現在、22,000以上のパーツ、1,000近いUIセットが検索でヒットするとのことです。 個別ページの画像下にダウンロードボタン、オリジナルページへのリンクがあります。 画像右のエリアにはライセンス情報、レーティング、ダウンロード・閲覧数、タグ、ファイル情報が表示されます。 PSDのパーツ素材だけでなく、キーワードに「CSS」等を含めると、HTML、CSSソースがダウンロード可能なものも見つかります。 画像下の「Live Preview」ボタンからプレビューが可能です。 このセットではCSS、HTML、JS、PSDがダウンロード可能です。 自身で作ったUIパーツ、UIセットをこちらのページから登録す

角丸オブジェクトを作成しやすくするPhotoshopプラグイン「Corner Editor」 2013年2月12日 Tag：webサイト制作 Text by 上瀧 ツイート Photoshopで作成、修正がしづらい角丸オブジェクトですが、その悩みを解決してくれるプラグイン「Corner Editor」のご紹介です。 ※今回はPhotoshop CS6にて動作確認を行いました。 JSX形式のファイルをインストールをします。 サイトからスクリプトをダウンロードし、Photoshop > Presets > Scripts フォルダに置きます。 Photoshopを起動し、メニューの「ファイル」>「スクリプト」内に「Corner Editor」が表示されていればインストール完了です。 長方形ツールにてオブジェクト作成後、メニューから先ほどの「Corner Editor」を選択すると、パネルが表示

ゲーム感覚でプログラミングを学ぶことができるWebサービス「CODEPREP」 2013年1月21日 Tag：学習ツール Text by 上瀧 ツイート 初心者の方でも気軽にプログラミングを学ぶことができるWebサービス「CODEPREP」のご紹介です。 このサイトでは用意された学習コンテンツをクリアしていくことでプログラミングが学べます。 会員登録後、実際にチャレンジしてみました。 ブラウザ上でコードの編集、プレビューがすぐにできます。 わからない場合はヒントも参照できます。 コンテンツをクリアするごとにバッジがもらえるようになっています。 現在6つの学習コンテンツが用意されています。 使用言語はJavaScriptが多いようです。 現在はベータ版ですが、今後のコンテンツや機能の追加も楽しみです。 プログラミングを気軽に学んでみたい方はぜひアクセスしてみてください。 Webサイト：COD

お好みのスタイルのアイコンを作成できるWebサービス「Iconbench」 2012年12月10日 Tag：webサイト制作 Text by 上瀧 ツイート 使用する場面に応じたアイコンを簡単に作成、ダウンロードできるサイト「Iconbench」のご紹介です。 作成からダウンロードまで3ステップで、 スタイリング → アイコン選択 → ダウンロード の手順で行なっていきます。 まずはスタイリングです。 サイトのトップページから始めることができます。 「General」でアイコンの色、サイズなどを決定したら、その下のドロップシャドウやグラデーションなどの項目で、アイコンをお好みの見た目に仕上げます。 サイトロゴの下の「Try」と書かれている右の5つのアイコンを選択すると、それをベースに編集できる状態になるので、とりあえず試してみたい方はそちらがおすすめです。 次にアイコン選択です。 全700

まとめて「いいね！」できる「どうでもいいね！」サービス 2012年9月1日 Tag：Facebook関連 Text by 伊藤 ツイート 少々皮肉の効いたGoogle Chrome機能拡張の紹介です。 この「どうでもいいね！」は、ボタンを押すと自分のタイムラインすべてに自動で「いいね！」がつくという、投げやり感全開というか、言葉通りどうでもいい感じに「いいね！」してくれるサービスです。実際には普通の「いいね！」がつけられるので、「いいね！」された側は、「どうでもいいね！」されたことは分からないかと思います。 アイコンもどうでもいい感満載で「いいね！」 ※一度に大量に「いいね！」すると警告を受ける場合があるそうです。またご利用は自己責任でおねがいします。 Webサイト：IDPW PORTO

自分のDropboxフォルダへのアップロードリンクを作成してくれるWebサービス「dbinbox」 2012年9月1日 Tag：共有 Text by 上瀧 ツイート 自分のDropboxアカウントへのファイルアップロードの受信箱（URL）を作成してくれるサービス「dbinbox」のご紹介です。 現在Dropboxでは、自分のアカウントで管理するファイルのリンクを共有することは可能ですが、他の人からファイルを直接アップロードしてもらえる機能はありません。 「dbinbox」は、直接ファイルを自分のDropboxに入れて欲しいときに役立ちます。 簡単に使い方を説明します。 サイトにアクセスし、ユーザー名を入力します。 アプリ連携後、アップロード用のURLが作られます。 ファイルをアップロードしてほしい人に、このURLを共有します。 また、自分のDropboxフォルダの中にApps/dbinbo

最初からヘッダーに固定するタイプではなく、スクロールしていく途中で、ヘッダーが固定される方法の紹介です。ANTEPRIMAやIWCなど、多くのWebサイトで使われています。 <script src="jquery.js"></script> <script> $(function(){ hTop = $('#header').offset().top; }); $(window).scroll(function () { if($(window).scrollTop() > hTop - 0) { $('#header').css('position', 'fixed'); $('#header').css('top', '0px'); }else{ $('#header').css('position', 'static'); } }); </script> #header に固定したい

書体の比較や、秀英体を書いて採点できる「秀英体の見本帳」 2012年8月24日 Tag：フォント Text by 伊藤 ツイート 大日本印刷のオリジナル書体「秀英体」の見本帳をご紹介。見本帳は、PC向けとスマートフォン向けコンテンツが用意されています。 秀英体とは、明治時代から現代まで使用されている大日本印刷のオリジナル書体の名称です。「秀英明朝」「秀英初号明朝」などは、デザイナーにはおなじみのモリサワパスポートに収録されており、2012年秋に「秀英角ゴシック金」「秀英角ゴシック銀」「秀英丸ゴシック」がリリースされる予定です。 さて、その秀英体見本帳ですが、主なコンテンツとして、書体見本帳と秀英体比較があります。 書体見本帳のPC向けコンテンツでは、自分で文字を入力して、各秀英体でのプレビューが行えます。縦書きに切り替えたり、拡大機能や印刷機能までついています。スマートフォン向けでは、ドロ

Photoshopで作成したオブジェクトをCSS3で出力してくれるプラグイン「CSS3Ps」のご紹介です。 PhotoshopのバージョンはCS3～CS6まで対応しています。 このレビューではCS6を使用しています。 サイトにアクセスし、右上のボタンからCSS3Psをダウンロードします。 ファイルを開くと、Adobe Extension Managerが起動し、インストールが完了となります。 次にPhotoshopを起動し、メニューバーの「ウィンドウ」>「エクステンション」>「CSS3Ps」を選択すると、パネルが表示されます。 オブジェクトを作成して、CSS3を出力したいレイヤーを選択状態にします。 その状態でCSS3Psのパネルをクリックします。 （複数のレイヤーを選択すれば、それぞれのオブジェクトのCSS3が吐き出されます。） すると、ブラウザが立ち上がり、自動的に割り当てられたURL

以前は気づかなかったので、最新バージョンでのバグなのでしょうか。Chromeでjpgを見ると、画像が荒れてしまうことがあります。全ての画像という訳ではありませんが、一部の画像で、また色によっても画質の劣化具合が異なる模様。※確認バージョンはMacのChrome 19.0.1084.53 。 以下はサンプル画像で、上がFirefoxでプレビュー、下が問題のChromeです。 下の画像の文字周りが荒れているのが確認できます。 これはPhotoshopでjpg書き出しを最高画質（画質：100）にすると発生します。原因は分からないのですが、jpgに書き出す時の画質を80にすれば画像が荒れることはありませんでした。厳密には画質が81以上で荒れるようです。 今後、Chromeのバージョンアップに期待するしかありませんが、どうしても回避したい場合は、画質を80にしておけば良さそうですね。 ※確認はMac

ページスクロールで最下部まで行くと次の何件を読み込むAjax処理（オートロード） 2012年5月28日 Tag：JavaScript Text by 伊藤 ツイート twitterやfacebookのタイムラインにも実装されている、ページスクロールで最下部まで行くと次の何件を読み込む方法の紹介です。jQueryを使います。 <script src="jquery.js"></script> <script> var s = 0; $(window).scroll(function() { var total = $(document).height(); var position = $(window).scrollTop() + $(window).height(); if(position >= total - 100){ s = Number(s+10); $("次の何件を表示させた

webサイトで使われている色を自動抽出する「Web Site Color Picker」 2010年11月10日 Tag：解析ツール Text by 伊藤 ツイート Web Site Color Pickerは、解析したいwebサイトのURLを入力するだけで、そのwebサイトで使われているメインカラーが分かるサービスです。色選びで迷った時、他のwebサイトがどういう色使いをしているかなど簡単に調べられます。 分析結果画面では、webサイトのキャプチャ、使用頻度の高い20色が表示され、色については、使用バランスをグラフ化してくれます。キャプチャは下図のようにドットでも表現され、マスをクリックする事で、その色を抽出することができ、更にtwitter IDでログインすると、抽出したカラーパレットを保存することもできます。 Web Site Color Pickerは、URLを入力するだけ、という

892通りのグリッドパターンが見れるwebサイト「The 892 unique ways to partition a 3×4 grid」2013年12月13日 グレッドレイアウトを作成時に役立つ「The 892 unique ways to...