Create A Tabbed Interface Using jQuery - NETTUTS 超クールなタブインタフェースをjQueryで作成するチュートリアル。 タブを押すと、タブ内のコンテンツがクールにアニメーションするUIを作成します。 デモを見る ページ内の右カラムに置くとカッコよくなりそうですね。 アニメーションが程よいので、酔うこともなさそう。 関連エントリ 画面遷移なしのクールなフォーム作成サンプル jQueryとPHPでダイナミックな投票スクリプトを作成
Hidden Pixels - CSS Frameworks CSSフレームワークがまとまっていたので紹介。 CSSフレームワークを使えば、ブラウザ間のCSSの差異吸収や、ブロックレイアウトが簡単になって便利、ですが沢山ありますね。 Elements CSS Frameworks YUI Grids CSS YAML CSS Framework Blueprint CSS Schema Web Design Framework CleverCSS Tripoli CSS Framework ESWAT Web Project Framework Boilerplate CSS Framework WYMstyle CSS Framework That Standards Guy CSS Framework 960 Grid System Emastic CSS Framework これだけ
Top 10 Javascript slideshows, carousels and sliders JavaScript製の画像スライダー・ギャラリーいろいろ。 JavaScriptで画像を使ってアニメーションさせたり、リスト管理したりするライブラリが多数紹介されています。 SpaceGallery Noobslide Accessible News Slider SmoothGallery jQuery Multimedia Portfolio JCarousel Glider Carousel Carousel slideshow Carousel.us 過去の画像ギャラリー関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryベースのLightBoxクローン「prettyPhoto」 UIがクールでサクサク使えるMacウェブギャラリー風画像ギャ
Hidden Pixels - Ultimate CSS Menus デザイン性に優れたCSSメニュー集。 これは、と思うようなかっこいいCSSメニューが特集されていました。 Professional drop-down Professional dropline Space Drop Down Menu Flyout hybrid menu Professional drop-down - shadow menu Brooke Case Drop Down Tech Radar mouseover tabs つい押したくなるようなメニューですね。 参考にクールなメニューを作ってみましょう。 関連エントリ クールなナビゲーションメニューを作成するCSS&HTMLサンプル アニメーションするドロップダウンメニュー作成JS「Sliding JavaScript Dropdown Menu」 J
Top 28 Free Font Directory Resource Sites | Speckyboy - Wordpress and Design フリーフォントを探すのに便利なサイトのまとめ Urban Fonts dafont.com The Font Pool Fonts 500 Type Now SimplytheBest Free Fonts Font Diner Search Free Fonts - over 13,000 free fonts availabl Creativespirits Truetype fonts by Curtis Clark Wanted Fonts Acid Fonts Who Fonted? Abstract Fonts Font Garden 全部見る 非常に沢山あって、今度は探すのが大変そうです。 中から、クールだなと思うフォントの
Magic Zoom : JavaScript image zoom tool Magic Zoom・is a JavaScript zoom tool. It's the best way to display images in incredible detail.画像をクールにズームできるJavaScript「Magic Zoom」 マウスオーバーで次のように、オーバーした部分をズームできます。 デモを見る メジャーブラウザはほぼ対応している模様。 $49と、シェアウェアなのが残念ですが、それなりのクオリティでもあると思うので、こうした機能を手軽に実装したい人は買ってみるのもよいかも。
Fading JavaScript Tooltips 2kb - Web Development Blog This animated JavaScript tooltip script is very easy to use and lightweight at only 2kb. アニメーションする2KBの軽量ツールチップJS。 カーソルを合わせるとフェードアニメーションしながら浮き上がるツールチップの紹介。 デモページはこちら ソースコードがなかなか綺麗かつシンプルで、ウィジェット作成の参考にできるかも。 var tooltip=function(){ var id = 'tt'; var top = 3; ... } 関連エントリ 色んな種類のクールなツールチップを実装しよう「Prototip 2」 JavaScriptを使わずCSSのみでシンプルなツールチップ実装
Prototip 2 - Create beautiful tooltips with ease Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. 色んな種類のクールなツールチップを実装しよう「Prototip 2」 Prototip 2 を使えば次のようなクールなツールチップが実装できます。 カーソルをもっていくことでプレビューできます。 使い方は、必要なJS/CSSを読み込んだ後、次のように初期化するのでOKみたいで簡単 new Tip(element, 'content', { title: 'This tooltip has a title', style: 'protoblue', stem: 'topLef
JavaScriptのコードはクライアントサイドで動作し、誰にでもコードが読めてしまいます。 あまり自分の書いたコードは読まれたくないもので、せめてコードを読みにくく、ということで難読化のツールが多数公開されてます。 最近のJavaScriptブーム以前よりそういったツールは当然ながら存在するようで、ちょっとまとめてみました。 GUI/コマンドラインツール ObfuscateJS - JAVAで書かれたGUI画面で難読化。改行/タブ除去の他変数名変更 Dojo compressor - JAVAで動作するコマンドラインツール。スペース等除去。サイト上で変換前、変換後のサンプルが見れます JavascriptZIP - JAVAで書かれたJavascriptコード圧縮ツール JSC (JavaScript Compressor) - EXE形式でコマンドラインで使える圧縮ツール オンラインで
IE8ベータ版が先週されました。IE8に関する色々をまとめてみました。 Internet Explorer 8 Beta: Home Page - マイクロソフト公式-ベータ版配布サイト 色々読むのが面倒という人向けに簡単な修正内容が以下 CSSの業界標準完全対応(CSS2.1完全対応) レイアウトエンジンの改良によるパフォーマンス向上 JavaScript速度向上 HTML5の実装(Ajaxでのバックボタンが有効に) MS独自のマイクロフォーマット「WebSlices」の実装 Activities機能の実装 視覚的環境でHTML、CSS、スクリプトを手早くデバッグできるツール ちゃんと読みたいという方は以下が参考になります。 ニュースサイトなど 【速報】Microsoftが「Internet Explorer 8」のベータ版を一般公開:ITpro IE8の変更内容概要 IE8、Silv
SEOに便利なFirefoxエクステンション色々 SEO用のエクステンションもいろいろあるようですね。 SeoQuake :: Firefox Add-ons SEOに便利なFirefoxエクステンション「SeoQuake」。 インストールすると、Googleのページランク、リンク数、関連リンク、Yahooのリンク数、関連リンク数などの情報が得られます。 SEO for Firefox Googleの検索結果にページランクなどのSEO情報を表示。 その他便利な機能いろいろ RankQuest SEO Toolbar 30以上のSEOツールに簡単アクセス Live PageRank ページランクをステータスバーに表示 Alexa Sparky Alexa情報をステータスバーに表示 SEOHAND ページランク、バックリンクなどを元にグラフを作成 実に様々な拡張がありますね。IEもこんな感じに
Pure CSS Animated Progress Bar | Css Globe Here's a simple demonstration of how you can create animated progress bar using pure css. JSレスでピュアCSSの超カッコいいプログレスバーのサンプル →デモを見る - ズイズイアニメーションしていきます。 何とこれ、JavaScriptを使っていません。 CSSとHTMLオンリーです。 仕組みは、GIFアニメーションで100%までプログレスする画像を作成しておき、進捗部分までを画像で塗りつぶすというもののようです。 CSSだけじゃ無理だと思うようなところもCSSのみでやっちゃうのは感動してしまいますね。 関連エントリ JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート
7 Incredibly Useful Tools for Evaluating a Web Design | Six Revisions An effective web design is one in which your users are able to find information quickly and in a logical fashion. WEBデザインの評価に便利なツールが紹介されていました。 ヒートマップによってサイトのクリック位置なんかを解析できるものが色々。 ClickHeat - クリック結果のヒートマップ集計、表示用オープンソースツール よくクリックされる位置を表す、次のようなヒートマップ解析をPHP&MySQLで設置可能みたい。なんと日本語化もされている。 オープンソースなので、自由にカスタマイズしたり、ASP側の制限なんかもなくてよさそうですね。
Seifi.org Blog Archive FireBug Tips and Tricks There is so much power packed into this little FireFox plug-in. FireBugで使える役立つ関数テクニック色々。 FireBugをインストールしていても、多くの機能を使っていない方が多いのではないでしょうか? 次のような、便利な関数がFireBugには用意されています。 console.log 関数の sprintf 風使い方(次のように、sprintf 風に使えます) var x = "fubar"; var y = 543; console.log("value of x is %s and value of y is %d", x, y); console.info 関数 で情報アイコン付きでメッセージ表示 console.in
URLを短くできるTinyURLのAPIをPHPから簡単に使える「PEAR::Services_TinyURL」 2007年10月15日- PEAR :: Package :: Services_TinyURL PHP interface to TinyURL's API URLを短くできるTinyURLのAPIをPHPから簡単に使える「PEAR::Services_TinyURL」。 URLを短くするサービスとしては最も有名であるTinyURLですが、このAPIをPHPから簡単に呼び出せます。 APIを呼び出すと具体的には、URLを短くしたり、TinyURL化されたURLのとび先を調べることも出来ます。 具体的な使い方は以下。 <?php require_once 'Services/TinyURL.php'; // URLをtinyurl化する $tiny = new Services
Javascript で HTMLエスケープを行うPHP関数、htmlspecialchars を実装 2007年11月12日- Javascript htmlspecialchars Javascript で HTMLエスケープを行うPHP関数、htmlspecialchars を実装するコード。 JavaScript でも HTML エスケープをしたい場合が結構あったりします。 PHPに慣れている方は htmlspecialchars 関数があったら使いやすいかもですね。 function htmlspecialchars(ch) { ch = ch.replace(/&/g,"&") ; ch = ch.replace(/"/g,""") ; ch = ch.replace(/'/g,"'") ; ch = ch.replace(/</g,"<")
iPhone style icon psd kit ・Jotlet Developer Blog I was creating an iPhone widget icon for the Jotlet app (primarily for fun) and I noticed a few things and thought I’d share them with you, and create a psd kit for anyone wanting to do the same thing.iPhone風アイコン作成用PhotoShopテンプレート。 PhotoShopファイルのPSDファイルをダウンロードでき、レイヤーを編集することで次のようなiPhone風アイコンが作れるようです。 ↓PhotoShopでオープンしてみて、レイヤーが別れている様子。 他にも、PNG形式 ですが「iP
WebCodr.com Blog Archive 15 Javascript Snippets You Can’t Live Without Please Note: We have moved to our new home WebCodr.com - please update your links and bookmarks! 押さえておきたい15のJavaScriptスニペット。 画像読み込み&フェーディング 動的テーブル カレンダー選択ウィジェット タブバー ドラッグできるWindow ズームできるイメージサムネイル LightBox2 ドラッグ&ドロップなショッピングカート ドラッグ&ドロップなソート可能リスト JavaScriptのロギング&デバッギング フォントリサイズの検出 地図上にポインタとテキストを置く フォトアルバム&スライドショー スライドダウン&アップアニメーシ
cyano: JavaScript アーカイブ 具体的には、従来のようにHTMLページ内にobjectタグやembedタグでFlashを表示するように記述した場合、そのFlashがクリックを受け付けたり、マウスの位置情報を取得したりするためには(インタラクティブに振る舞うには)、一旦Flash上でクリックなどをしてFlashコントロールをアクティブ化しなくてはならなくなりました。 最近、Flashにカーソルを合わせると変な枠があって、1回クリックしないと動作しないという現象がありました。 調べてみると、IEパッチ適用による影響だそうで、これはJavascriptによるタグ吐き出しを行うことで回避できる模様です。 その吐き出し用ライブラリを発見したので紹介。 次のように簡単に使えるようです。 var swf = new jp.catalase.SwfTagWriter('fma.swf',
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く