PhotoShopでレイアウトを作成する際にガイド機能はとっても便利ですよね。

そんな便利なガイド機能をFirefoxのアドオンとして使える「foxGuide」をご紹介。

Webサイトに水平、垂直に線を引いてデザイン構造を思い通りに作れるようになりましょう！

以下、主な機能になります。

一度ガイドを設定すると、ブラウザ再起動後も保存されている

ウェブページ上でガイドを設定すると、そのガイドは自動的に保存され、次回訪問時にも表示できるようになっています。

タブを閉じたり、ブラウザを再起動しても使えるのは嬉しいですね。
もちろん削除する事もできます。

十分な長さ

10000ピクセルの画面サイズまで使用できるそうです！すごい！

たくさんのオプション

サイトのコンテンツが隠れてしまわないように、定規の透明度を変更することができるようになっています。 また、ガイドの色も変更可能です。

ダウンロードは下のリンクからどうぞ！

開発者であれば一度は使った事があるであろうvimをGmailクライアントできる！「Vmail」をご紹介します。

普段からvim使いの方におすすめです！

各ブラウザのスタイルシートを初期化するために使われるリセットCSSを比較できるWebサービス「{ CSS:resetr }」をご紹介。

YUI、Vanilla Resetなど人気のリセットCSSをプルダウンで選択し、使用したいHTML構造を選択するだけで簡単に比較できるようになっています。

使ってみた様子

サイトでは見出しやリスト構造、テーブルなどの比較ができるようになっています。
今回はフォーム要素で比較してみました。

■ Yahoo! Reset 2の場合

■ HTML5 Dr. Resetの場合

■ Vanilla Resetの場合

それぞれに特徴がありますね。
各ブラウザのスタイルの違いを見るのに覚えておいても良いかもしれません。

HTML5のaudio要素を使ってMP3を再生できるようにする「Haiku」というスクリプトを紹介します。
WordPressのプラグインとして使用できるので、簡単に設置可能になっています。

使い方

ショートカットも用意されており、本文何にパラメータを指定すれば表示されるようになります。

 [haiku url="http://path/to/file.mp3" title="title"]

ほぼ全ての主要ブラウザで動作

スクリプト自体はHTML5のaudioタグを使用して実装されているようですね。
HTML5未対応ブラウザの場合にはFlashで再生するようになっていました。

iPhone、 Android用などのモバイルブラウザやIE6でも再生可能になっています。

デザインはCSSでカスタマイズ

HTML5で作られているので、CSSでデザインを簡単に変更する事もできるようになっています。
（Flashは変更できませんが）

ダウンロードは以下のリンクからどうぞ！

マウスカーソルにくっついて来るナビゲーションをjQueryで作った「CURSOR FOLLOWING MENU」をご紹介。

よくFlashなんかではありそうですね。
クリックする事でドロップダウンメニューが開くようになっています。

設置方法

jqueryとプラグインを読み込みます。

<link href="malihu.cfm.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

あとは指定のdivタグでメニューの構造を定義するだけになります。

MENU

↑ Home
About me
+ Work

Recent
Web
Print

邪魔にならないような控えめなアニメーションになるように作られているようです。

ページトップに戻るボタンなんかに良さそうですね。

jQueryでタイピングゲームを作る「Typing Game with jquery」というエントリーのご紹介。

たくさんの高品質なPSD素材

「IconSweets2」は400個以上の高品質なPSDアイコンがダウンロードできるアイコン集になっています。

Photoshopのカスタムシェイプを使っていますので、カスタマイズも簡単に行えるようになっています。

iPhoneやAndroidアプリなどで使えるように最適なサイズに調整されているようです。
もちろん、通常のWebサイトでも使えるようになっています。

400個以上が64×64pxと32×32pxで、292個のアイコンが16×16pxでダウンロードできるようになっていました。

個人および商用利用も可能なようですね。

興味のある方は下のリンクからサイトを見てみてください。

WebデザインやWeb開発に使えるオープンソースプログラムを紹介するblogfreakzというブログにてjQueryで使えるサジェストプラグインとチュートリアルが紹介されていました。

「10 Awesome jQuery Autocomplete Plugins & Tutorials」というエントリーから抜粋してご紹介。

PHP製ジョブボード

「JobAppr」はオープンソースのPHP製アプリケーションです。

求人情報の作成、公開が管理者画面から出来るようになっています。

CSS3でライトボックス風のエフェクトを表示しようとした際に使えるライブラリをまとめた「10 CSS3 Lightbox Alternatives」というエントリーから、いくつか抜粋してご紹介します。