便利なjQueryスニペット１０:phpspot開発日誌
10 Useful jQuery Snippets - Web Development Blog 便利なjQueryスニペット１０が紹介されています。 ・IE６でのアクセスの場合に警告 ・input type="text" のものにデフォルトテキストを実装するコード ・コンテンツのクリックで表示・非表示をアニメーション表示 ・印刷ダイアログを開く ・テーブルのtdにhover機能を付与するコード ・テーブルの奇数行にclassを付与する ・ページに指定divがあるかチェック ・全てのチェックボックスをON/OFFするコード 便利に使えそうなものが多いですね。 関連エントリ 押さえておきたい15のJavaScriptスニペット コードスニペット共有サイト:Snipplr
PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」:phpspot開発日誌
EasyUp - Simple File Uploads - Nick Brown Web Dude PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」が公開されています。 PHPでアップロードというとそのままで簡単なのですが、後で見たときにコードがよりわかりやすくなる方法です。 次のようなコードで、ファイルを指定ディレクトリにアップロードできます。 if(isset($_POST['mySubmit'])){ include 'easyUp.php'; $up = new fileDir('/myUploads/'); $up->upload($_FILES['myFile']); } 更に削除する場合もdeleteメソッドを呼ぶだけで直感的でわかりやすい $up = new fileDir('/myUploads/'); $up->delete('pic.jpg'
ロゴデザインやタイポグラフィの見本や資料まとめ集:phpspot開発日誌
最近発見した、ロゴデザインやタイポグラフィの見本や資料まとめを色々と集めました。 ロゴデザイン 16 Logo Design Processes Of Top Logo Designers | Pixelactic １６種類ロゴデザインの作成プロセスまとめ 45 Creative Logo Designs For Inspiration | Pro Blog Design ロゴデザインいろいろ４５＋ 20 Very Clever Logo Designs | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver 様々なクリエイティブなロゴまとめ Super Creative Design Logos. クリエイティブなロゴデザイン集の紹介エントリ 110 Fresh
「Google Analytics API 」をPHPから便利に使えるクラスライブラリ:phpspot開発日誌
Google Analytics API class for PHP | Ask About PHP 「Google Analytics API 」をPHPから便利に使えるクラスライブラリ。 「Google Analytics APIをPHPから利用できるクラスライブラリ」で、先日、似たようなライブラリを紹介しましたが、単純にログインとXMLの取得だけ、というものでした。 今回は、次のように使える非常に便利そうなクラスライブラリをご紹介。 <?php // クラス読み込み include "googleanalytics.class.php"; // インスタンス生成 (引数1: メールアドレス, 引数2: パスワード) $ga = new GoogleAnalytics('{email}','{password}'); // 'ga:123456' みたいなフォーマットのProfileI
jQueryやPHPを使った便利な仕組みのチュートリアル集:phpspot開発日誌
9lessons: jQuery and Ajax best 9lessons. jQueryやPHPを使った便利な仕組みのチュートリアル集。 9lessonsというサイトがあって色々便利な仕組みのチュートリアルが公開されています。 Twitter Like More Button with jQuery and Ajax. 「もっと読む」をajaxで実現するサンプル Exactly Twitter like Follow and Remove buttons with jQuery and Ajax Twitter風のフォロー、削除ボタンを実現するサンプル Delete a Record with animation fade-out effect using jQuery and Ajax. 行を削除してフェードアウトアニメーションをさせるサンプル jQuery Username Av
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」:phpspot開発日誌
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」 2009年04月20日- Firediff - In Case of Stairs Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」。 これは欲しかった！という機能がついにリリースされました。 インストールにはFirebug1.4が必要で、Firebug1.4a17以降が推奨されています。 Firebug1.4のダウンロードはこちらから可能です。 まず、インストールすると、次のように、FirebugにChangesタブが表示されます。 で、実際どうやって使えるか？見てみましょう。 (1) DOMインスペクタをいじった結果をDIFF たとえば、DOMインスペクタの中で、要素を編集してみます。 2009年4月16日を2009年にしてみました。 す
シンプルデザインだけど見やすい黒ベースのWEBレイアウト集:phpspot開発日誌
20 Examples Of Dark & Minimalist Website Designs With Great Typography?|?Spyre Studios シンプルデザインだけど見やすい黒ベースのWEBレイアウト集。 次のような、シンプルなのに、ちゃんとデザインされた感が出ているサイトが色々と紹介されていました。 The 99 Percent Conference 黒とdeepピンクを使ったクールなレイアウト。この色合い、合いますね。 Stefan Velthuys シンプルだけど作るのが大変そうでなかなかこったレイアウトのサイト Tic Toc シンプルな中に動きが取り入れられており、なかなかのクールさが出ています Tweet CC Couch Creative 全部見る ブログなんかの場合は、毎日見るようなサイトだと、飽きない、主張しすぎないなんていうデザインが求めら
立体的で綺麗なつい押したくなる汎用ボタンアイコンセット:phpspot開発日誌
I like buttons 3a by ~MazeNL77 on deviantART 立体的で綺麗なつい押したくなる汎用ボタンアイコンセット 次のような、いろいろな用途で使えそうなボタンアイコンが公開されています。 訪問者に押してほしいところに添えておくと、クリック率が増えるかもしれませんね。 関連エントリ ベクター形式の汎用の矢印アイコンセット 40種類の種類色々ベクター形式フリーアイコンセット 光輝く綺麗な地球儀アイコンを作成するPhotoshopチュートリアル
木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット:phpspot開発日誌
600 Nature Brushes for Photoshop 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセットが紹介されていました。 写真に映して、切り取ってオリジナル素材作成なんてことも出来ますが、こうしたものを利用すればお手軽に自然が表現できてしまいますね。 木に関するブラシ Complete Tree Brush Pack リアルな樹木を一発描画できますね Trees Brushes 色々な形の、ロゴ横なんかにつかえそうな綺麗なブラシ 葉っぱに関するブラシ Leaves Brushes 色々な形の葉っぱ型ブラシ Leaves Brushes リアルな形をした葉の形のブラシ 雲に関するブラシ Cloud Brushes リアルな雲が描画できます Beautiful Clouds 山に関するブラシ Mountain Brushes Vector Mountains 雪
登録フォームにプログレスバーを表示するJavaScriptチュートリアル:phpspot開発日誌
Create a Progress Bar With Javascript - Nettuts 登録フォームにプログレスバーを表示するJavaScriptチュートリアルが公開されています。 1ページに表示する入力項目は出来るだけ少なくして、最初の抵抗感をなくすという手法がありますが、ページ移動した後に、あとどれだけなのかが分かるとより登録率を高められそう。 次のように、フォームの上部にJavaScriptを使って進捗状況を表示するチュートリアルとソースコードのDLが可能です。 デモページ 画面遷移もJavaScriptで軽快に動作します。 登録フォームの参考にするとよいかもしれませんね。 関連エントリ jQueryとPHPでダイナミックな投票スクリプトを作成 jQueryを使ったブラウザ上で動作するLeopardデスクトップの構築
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル:phpspot開発日誌
WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル 2009年04月15日- PHP Tutorials Examples Embedding PHP In CSS WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル。 CSSファイルをPHPとして実行して共通の値を変数にして使うというチュートリアルが公開されています。 PHPは知ってるという方には当たり前すぎるかもしれないですが、WEBデザイナーの方が最初に入門するにはよいかも。 ステップ1 AddType application/x-httpd-php .css .htaccess等に、AddTypeを追記して、.cssファイルがphpとしてサーバ側で処理されるように指定 ステップ2 <link rel="stylesheet" href="style.php" media="
すごく良い感じの英文フォントいろいろ:phpspot開発日誌
35 Free Fonts to Enhance Your Designs | Fonts | instantShift すごく良い感じの英文フォントいろいろが紹介されていたので一部ご紹介。 フォントに関しては、いくら紹介してもしきれないほどのフォントが存在し、日々生まれていますね。 Sketch Rockwell このスケッチ感、すばらしいですね。手書き風のかわいいデザインに使えそう Quicksand すっきりしていて綺麗なフォント。汎用に使えそうです。 Sansation こちらもスッキリして読みやすい綺麗なフォント。 Evolution True Type どこかで見たようなちょっと個性の強いフォント。 全部見る ますます、私のディスクを圧迫しそうです。 関連エントリ フリーフォント大量配布/紹介サイトいろいろ 萌え系フォントのまとめ 美しいフリーフォント45セット 女性の書いたよ
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
綺麗なアイコン作成のチュートリアル集:phpspot開発日誌
45 Best Icon Design Tutorials?|?Dzine Blog 綺麗なアイコン作成のチュートリアル集が公開されておりました。 どれも技巧的な技術が使われており、アイコン以外の画像編集にも役立つかもしれません。 Transparent battery Icon iPhoneのバッテリーアイコン。輝いている部分の表現が秀逸です。 綺麗に輝かせるのは簡単なようで難しい Adobe CS3 Icon AdobeのCS製品風のアイコン作成チュートリアル。 パロディで、自分のサイトのロゴにしてしまっても面白いかも。 Aperture Style Camera リアルだけどイラスト調のカメラレンズの作成。細部まで表現されていますね 難しいグラデーション表現も解説 3D Vector Calender Icon 綺麗なカレンダーのアイコン作成チュートリアル。めくった感じがうまい。 立
いい感じの手作り感が出せる紙のテクスチャ素材色々:phpspot開発日誌
80 Free High Res Paper Textures | The Roxor | Design blog for resources and inspiration いい感じの手作り感が出せる紙のテクスチャ素材が色々と紹介されていました。 個人的に、手作り感がいいなぁ、と思ってしまう紙のテクスチャ。紙といっても色々な種類があって、それぞれに個性があります。 Wrinkled Paper 学習ノートにちょっとシワをいれた感じのテクスチャなど 当ブログのデザインに合成してみたところ、なんとも手作り感漂うデザインが出来てしまいました。 Photoshopの乗算によって合成してみた図。かかった時間1分。いつか実際にやってみたい。 Burnt Paper Textures ちょっとこげた感じの和風テクスチャなど 1パターンじゃなく、さまざまな焦がしパターンがあってナイスです。 こういう画像
JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ:phpspot開発日誌
GX - Full-Featured Javascript Animations Framework JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ。 jQueryと組み合わせて使うアニメーションライブラリです。 jQueryやscript.aculo.usにもアニメーション機能は備わっているけど、ここまでではないというアニメーションに特化したアドオンです。 勿論、jQuery単体でも、組み合わせて実現できるのかもしれませんがアニメーションに特化している分簡単に出来ます。 以下でその凄さが分かるはず $('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
汎用に使えそうなオシャレな欧文フォント「NEUTRAL」:phpspot開発日誌
一風変わったブロガー＆デザイナー向けアイコンセット:phpspot開発日誌
Webデザイナーのためのリンク集