iPhoneアプリのツールバー部分に使えそうなアイコン色々:phpspot開発日誌
知人のアプリ作者の人に、アイコンを探すのに苦労したという話を聞いたので、iPhoneアプリのツールバー部分に使えそうなアイコンを色々まとめてみました。 全部足すと545種もありますので、ツールバーアイコンには困らないかもしれません。 iPhoneアプリケーション作者の方や、今後作ろうと思っている場合に参考にどうぞ。 30 Free Vector Icons | Dezinerfolio 綺麗にまとまったデザインで種類も次のような３０種類がまとまってます Glyphish – Great icons for great iPhone applications 130種類の商用利用可能な汎用アイコンセット。 Free iphone toolbar icons こちらも、商用利用可能な160種類の汎用アイコンセット app-bits : iPhone Toolbar Icon Set : iPh
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
2009年に発見した秀作アイコンのまとめ:phpspot開発日誌
今年も沢山のアイコンセットを発見しましたが、2009年に発見した秀作アイコンをまとめてみました。 WEBアプリ汎用、ソーシャルアイコン、Eコマース用アイコン、その他に分類してます。 WEBアプリ汎用 Led Icon Set - Psdtuts+ MinIcons by ~kyo-tux on deviantART 32px mania Vaga Onebit free icon set いい感じのアイコンセット Project Icon Set | Dezinerfolio WooFunction: 178 Amazing Web Design Icons?|?WooThemes WP WooThemes Ultimate Icon Set ? First Release?|?WooThemes 綺麗で汎用に使えそうなアイコンセット集「Function Icons」 Icon Set b
超カッコいいApple風スライドショーギャラリー作成チュートリアル:phpspot開発日誌
超カッコいいApple風スライドショーギャラリー作成チュートリアルが公開されています。 次のようなカッコいいスライドショーが作れます。 デモページ コーポレートサイトのページのヘッダーなんかに入れ込むといい感じになるかもしれませんね。 以下のエントリを参照してください。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery ? Tutorialzine 関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryでAjaxを使った滑らかアニメーション画像スライドショー スライドショーが可能なイメージギャラリー作成ライブラリまとめ 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」
CSSやJSファイルを軽量＆圧縮して転送できる「csszip.php」:phpspot開発日誌
Easy CSS Compression with PHP and mod_rewrite - Roger Stringer CSSやJSファイルを軽量＆圧縮して転送できる「csszip.php」というファイルが公開されています。 「csszip.php?file=ファイル名」のようにリンクすると、不要な改行やタブなどを取り除いた上でgzip圧縮し、Expiresヘッダを発行して転送できます。 さらに、mod_rewrite を使って、拡張子が css や js のものは自動で csszip.php に転送するというので自動で圧縮転送が出来る例も公開されています。 注意点として、拡張子が js, css のものはすべて file=*** で指定できてしまうので、この部分は見直した方がよさそう。 理想的には、スタティックなファイルを mod_expires, mod_deflate などでハ
スタイリッシュなWEBフォームの実装例いろいろ:phpspot開発日誌
25 Stylish Examples of Web Forms スタイリッシュなWEBフォームの実装例がいろいろと紹介されており、一部ご紹介。 フォームというと簡単なデザインで済ましてしまう場合が多いと思いますが、こうしたところにもこだわっていると力の入れ加減が伝わってきますね。 デザイン自体もなかなか難しいと思いますが、参考にして綺麗なフォームが作れそう。 Alexandru Cohaniuc 壁に貼ったみたいなインタフェースでオシャレ Tea Round App 角丸で立体的なフォームがナイス Grooveshark 子ダイアログ風のポップアップフォーム Substrakt Matt Pixelight Creative 全部見る デザインを学んだ上で、ユーザビリティについても考え、あくまで利用者視点にたった使いやすいフォームを作りたいものですね 関連エントリ CSSでデザインされた
Google製サイト高速化Firefoxアドオン「Page Speed」を試してみました:phpspot開発日誌
Page Speed Home Google製サイト高速化Firefoxアドオン「Page Speed」というのがリリースされたようで試してみました。 同様のFirefoxアドオンである、Yahoo!製のYSlowがあったりますが、後から出ただけあってYSlowにない便利機能なんかもあるみたいなので併用してもいいかも。 インストールすると、「Page Speed」、「Page Speed Activity」がタブに追加されました。 Analyze ボタンでページの検証が始まります。 検証結果画面。アイコン付きでYSlowより見やすいかも。 ここに表示される警告を直していけばページの高速化が簡単にできますね。 見出しをクリックすると解説ページに移動できます。 ブラウザベースのキャッシュをもうちょっと使うように、ということでメッセージが表示されました。 ブラウザキャッシュに対応するには、apa
jQueryを使ったFlashばりにクールなギャラリー「GalleryView」:phpspot開発日誌
jQuery GalleryView - by Jack Anderson jQueryを使ったFlashばりにクールなギャラリー「GalleryView」が公開されています。 初期化に以下の数行を書けばＯＫみたい。 $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100 }); 動かしているHTMLのなかなか分かりやすいです。 関連エントリ 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」 色々な画像の見せ方を演出できる画像ギャラリー集
ブラウザから離れてアイドルになった時のイベントを簡単取得できるjQueryプラグイン「jQuery idleTimer plugin」:phpspot開発日誌
ブラウザから離れてアイドルになった時のイベントを簡単取得できるjQueryプラグイン「jQuery idleTimer plugin」 2009年06月08日- Paul Irish jQuery idleTimer plugin ブラウザから離れてアイドルになった時のイベントを簡単取得できるjQueryプラグイン「jQuery idleTimer plugin」。 idleTimer pluginを使えば、ブラウザ内で、しばらく操作しなかったり、別のウィンドウに移動して、最初使っていたブラウザをしばらく操作しない場合に、”アイドル状態”としてイベントを発生させることが出来ます。 逆に、アイドル状態からの復帰もイベントで取得できます。 // タイマーをミリ秒単位で初期化(10000だと10秒) $.idleTimer(10000); $(document).bind("idle.idleT
デザインのインスピレーションを受けるために便利なサイト集:phpspot開発日誌
50 Best Sites To Get Design Inspiration|Dzine Blog デザインのインスピレーションを受けるために便利なサイト集が紹介されていましたので一部ご紹介。 暇なときにでも見ていれば、感性を上げられそうなサイトばかりです。 Design Flavr 多数あるデザインサイトを、フリーワード、カテゴリ、色、タグなどから自在に検索することが出来ます Flashなサイト、CSSなサイトといった感じでカテゴリわけ 色による検索機能。作っているサイトに似た色を選択し、ちょっと物足りないかもという構築中のサイトに付け加える何かのインスピレーションを見つけられるのかも Muse サムネイルでデザインサイトを順に紹介 Cool Showcase 絵の検索サイト。カテゴリ、タグ、フリーワード検索が可能 Digital Abstracts 比較的大きなサムネイルとともにクー
jQueryとCSSで驚きのページめくり効果を作るサンプル:phpspot開発日誌
Simple Page Peel Effect with jQuery & CSS jQueryとCSSで驚きのページめくり効果を作るサンプル。 利用者に対して驚きを与えるだけでなく、スペースも有効に使える便利なサンプルが公開されていました。 綺麗なアニメーションをするも、Flashは使っておらず、jQueryとCSSで表現されているところが凄くてそのテクニックにも注目。 以下のようなＵＩがあります。 右上のめくったところにカーソルを合わせるとペローンとページがめくられ、少ないスペースだったのに情報が表示されます。 該当のコードですが、以下のように、jQueryのanimateによって実現されています。 $("#pageflip").hover(function() { //On hover... $("#pageflip img , .msg_block").stop() .animat
韓国のすごいデザインサイト集:phpspot開発日誌
Top 35 Inspirational Korean Websites | The Design Inspiration 韓国のすごいデザインサイト集が紹介されていました。 欧米のデザインとはまた違ったデザインのされ方で、面白いものも多いみたいです。 ページ全体をFlashで作っており、さわっていると楽しい効果が得られたりする アクセスすると、大きな動画が現れますが、あまり違和感がなくうまく作られている サイトの全体的なデザイン、質感がいいですね ダイナミックなアニメーションで迎えてくれるサイト 最初のインパクトとしては大きいかもしれません 角丸、影などをうまく使ってさっぱり綺麗にされたデザイン 画面を大きく使って、斜線をベースに構築されたFlashベースのサイト HTMLで構築したようで実はFlashなサイト。細かなところがアニメーションして芸が細かい 全部見る 以前、韓国のサイトはデ
シンプルだけど汎用に使えそうなフリーのアイコンセット「15 Free Origami Icons」:phpspot開発日誌
15 Free Origami Icons シンプルだけど汎用に使えそうなフリーのアイコンセット「15 Free Origami Icons」 次のような、シンプルなアイコンセットが公開されています。 メール、保存、検索といった部分ではWEBアプリで使えるかもしれませんね。 関連エントリ 物凄く綺麗なアイコンセットが色々 WEB開発に活用できる、２００９年初お目見えアイコンセット集 綺麗なアイコン作成のチュートリアル集
イラスト調のかわいいアイコンセット「Coquette Part 4 Icon Set」:phpspot開発日誌
DryIcons.com | Free Icons | Coquette Part 4 Icon Set イラスト調のかわいいアイコンセット「Coquette Part 4 Icon Set」 次のような、かわいいアイコンセットが非商用であればフリーで使えます。 16x16px, 32x32px, 48x48px, 64x64px,128x128px のサイズがあってPNGフォーマットでも入手できるみたい。 サイトのアクセントとして使えば可愛らしいサイトにできそうですね。 関連エントリ 物凄く綺麗なアイコンセットが色々 綺麗なアイコン作成のチュートリアル集 WEB開発に活用できる、２００９年初お目見えアイコンセット集 ベクター形式の汎用の矢印アイコンセット
プログラミングに使えるトップフォント１０:phpspot開発日誌
Hivelogic - Top 10 Programming Fonts プログラミングに使えるトップフォント１０ということで、読みやすそうなフォントが色々と紹介されていましたのでいくつかご紹介。 日本語は対応していないのですが、サンプルコードの紹介なんかで使うとカッコいいのかも。 Profont - 9Pt にしても以下のような可読性でなかなかカッコいい プログラミング以外にもサイトデザインでも使えそうです Proggy - これもなかなか読みやすいフォントですね Consolas - コードにした時にすごく読みやすいフォント すべて見る プログラミングのコードを読むというのは結構大変な時もありますが、そういう時は可読性の高いフォントで読むのがいいのかも。 追記）以下の方法で、欧文フォントを日本語に対応させる方法が紹介されているみたいです。 欧文フォントを日本語に対応させる [Tips
コンテンツを滑らかにスライドさせるjQueryプラグイン:phpspot開発日誌
jQuery plugin - Easy Image or Content Slider | Css Globe This is my first jQuery plugin. I wrote several jQuery scripts but never made a real plugin just because I was I afraid of it's complexity. コンテンツを滑らかにスライドさせるjQueryプラグイン。 各種デモが以下で閲覧できます。 Default non-styled image slider Non-styled vertical image slider Non-styled vertical content slider マークアップが次のようにシンプルに記述できる点も導入の敷居が低くていいかんじです。 <div id="slider
わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」:phpspot開発日誌
idTabs わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 以下のようなHTMLを簡単にタブ化できるみたいです <ul class="idTabs"> <li><a href="#aaa">Tab 1</a></li> <li><a href="#bbb">Tab 2</a></li> </ul> <div id="aaa">This is tab 1</div> <div id="bbb">This is tab 2</div> UL要素の中にリストを定義してあるのがタブ部分で、<div>部分が該当ページ部分です。 1ページ内に全部のデータを収めることも出来るところもいいですね。 関連エントリ タブ機能付きパーソナライズドホームページ『Netvibes』 多数のタブをグループ化して管理できる「TooManyTabs」
入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」:phpspot開発日誌
ToggleVal :: jQuery Plugins by Aaron Kuzemchak 入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」。 入力ボックスにデフォルトでヒント値を入れておいてクリックすると消えるあの分かりやすいインタフェース。 実際に実装するとなると、ちょっと面倒ですが、ToggleValを使えば、メソッドを1回呼び出すだけで簡単に実装できます ↓↓↓↓クリックで消える↓↓↓↓ jQueryプラグインなので、以下のように使いやすくなっています。 $("input[name='name']").toggleVal( { option } ); 実装したくなった時、ちょっと面倒でまた今度、とならないようにこれを覚えておけばよさそう。
jQueryを上手に使ったサイトのお手本を色々探して参考にできる「jQuery Style」:phpspot開発日誌
jQuery Style - A gallery showcasing awesome sites built with jQuery jQueryを上手に使ったサイトのお手本を色々探して参考にできる「jQuery Style」。 jQueryでいろいろ出来るのはわかった、でもサイトに実際に上手く使うにはどうしたらいいの？どうやったらよくなるだろう？と思うことがあると思います。 そんな時、jQuery STYLEで色々と見て参考に出来そうな部分があったら真似していって改善していく、ということが出来そう。 単純にサイトのサムネイルを取って掲載しているということではなくて、どういう部分でjQueryを使っているかについても一目で分かるようになっています。 ↑のサイトの場合、ツールチップなどいろいろとjQueryを活用していることが分かるアイコンが明示されています。 こうしたまとめサイトの作り方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでリアルタイムにCSSを書き換えるサンプル:phpspot開発日誌