File2.ws どんなファイルもWEBページ化してしまえる「File2.ws」 対応フォーマットは以下のように、まさになんでもＯＫな感じになっています。 File2.wsのすごいところは、画像ならプレビューでき、音楽なら聴ける、動画なら見れる、という感じで本当にWEBページ化してしまうところ。 ダウンロードも早く、制限なし、サインアップも必要なし、ソフトインストールも必要なし、というものになっていて、ちょっと危険な香りもしつつ公開されています。 ウェブにさっと公開したいファイルがあったらここを使ってみるのもよいかもしれませんね。

Boks - A Visual Grid Editor サイトのレイアウトがサクサク作れるAIRアプリ「Boks」。 Boksを使えば、グリッド内をドラッグ＆ドロップして直感的にレイアウトを作っていけます 作ったレイアウトは「Export」で簡単にHTML+CSSに出来ます。 HTMLとCSS複数が吐き出されます 基本設定として、グリッドの設定なんかも調整できて、自由度はあります サイトのレイアウトがめんどくさいという方はこういうものでサクっと済ませちゃうというのもありですね。 関連エントリ CSSレイアウトのチート集「CSS Layout Cheats」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 フリーで使えるCSSレイアウトのテンプレート配布サ

Sliding Boxes and Captions with jQuery | Build Internet! マウスオーバー時にクールに画像を切り替えるjQueryサンプル。 マウスオーバーで滑らかにキャプションが現れたり、画面を切り替えたりできるサンプルのデモとダウンロードが出来ます。 デモページ CSSをでレイヤーを重ね合わせて、上の要素をアニメーションさせてるだけのようですが、なかなかこれがクールですね。 $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'220px'},{queue:fals

8 methods to bring your front end coding to rockstar levels | StylizedWeb.com よいCSS開発を行うための８のＴＩＰＳとして、当たり前かなと思うことから、なるほどというものがあったので以下にご紹介。 ・IDやクラス名にはより意味のあるものをつけよう たとえば、boxとかwrapperとかcontainerとかは一般的ですね。 一般的なものをつけておけばそれが何なのかすぐに分かるし、協業の際にも便利。 全体のラッパー以外にも、headerとか、content とか footer とか固定で使っておくと一貫性が出ていい感じですね。 まあ当たり前の人には当たり前なテクニックかも。 ・閉じコメントをつけて構造を分かりやすく <div id="header" class="section"> <div id="header-

学習にも使えそうな、PHPとLightBoxを使ったシンプル画像ギャラリープログラム 2009年03月23日- Create a Simple Picture Gallery using PHP 学習にも使えそうな、PHPとLightBoxを使ったシンプル画像ギャラリープログラムが公開されていました。 PHPファイルが1個と、非常にシンプルなものなので、PHPをはじめたばかりという方にもカスタマイズは容易かもしれません。 画像さえフォルダにおいておけば、サムネイルは作ってくれるというものになってます。 クリックで拡大されるLightBox機能が入ってます。 凝ったギャラリースクリプトはカスタマイズも大変だけど、こういうシンプルなものをカスタマイズしていって自分好みのギャラリーを作るのもよさそうですね。 画像を扱うので、PHPにはGD拡張が必要なので、XAMPPやGD拡張が備わったサーバで動

WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、

Create a unique Gallery by using z-index and jQuery | This Blog Use jQuery 訪問者驚きの手めくり風、画像ギャラリーを作成できるサンプル。 以下がデモで、実際に試してみましょう。驚きの効果が得られるはずです。 HTML定義部分。分かりやすいコードも魅力です。 <!-- relevant for the tutorial - start --> <div class="grid_6 prefix_1 suffix_1" id="gallery"> <div id="pictures"> <!--画像の定義部分--> <img src="images/picture1.png" alt="" /> <img src="images/picture2.png" alt="" /> <img src="images/pictu

Image Rollover Borders That Do Not Change Layout 画像ロールオーバー時にボーダーを表示してもレイアウトを崩さないCSSトリック。 ロールオーバー時に、border指定すると、次のように、普通は崩れてしまいますが、それを崩さない方法。 ↓↓崩れてないサンプル↓↓ 画像の中にボーダーが引かれ、レイアウトに影響がない例 overflowとmarginを使ったテクニックでこれが可能みたいです。 地味だけど、知っておかないと詰まってしまいそうな必須のテクニックかもしれませんね。 関連エントリ 便利なＣＳＳテクニック３０選 CSSとdivを使った画像先読みテクニック ページ全体に枠線をつけるCSSテクニック サイズの大きい画像を背景にする際のCSSテクニック

クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」 2009年03月18日- Visifire クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」。 以下にある画像のような、ちょっと他ではなかなか無いグラフを提供してくれます。フリーで使えます。 画像編集ソフトを使えば綺麗なグラフはかけるかもしれないのですが、相当大変です。 が、このライブラリを使ってxmlでデータを書いておけばグラフ描画できます。 データ作成ツールもあるので、xmlも面倒っていう場合にも使えます→ Chart Designer もっとギャラリーを見る ネックはSilverLightなのですが、一旦描画したものをキャプチャして画像に変換してから使ってもよいぐらいクオリティが高いですね。 今後、SilverLightが一般的になっていくことも考えられ、覚えてお

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!'); });

qTip - The jQuery tooltip plugin - Documentation - (Current beta: 1.0.0-beta1) スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」。 またまた便利そうなツールチップが出てきました。 $('p').qtip({  .... }); のように呼び出すだけで、簡単にツールチップが埋め込めます。 ツールチップの表示タイミングも、show, hide オプションで指定するだけで簡単に変更可能です。 $('p#test').qtip({ content: 'hi! i am tooltip', show: 'mouseover', hide: 'mouseout' }); 吹き出しの位置も、qtip メソッドのオプションとして指定してあげれば簡単に設定可能。 カラーリングも自由自在。 何より、

これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ１つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ

jQuery UI Tabs with Next/Previous 色々な使い方が考えられそうな「次へ」「前へ」ボタン付タブＵＩ実装ライブラリ。 ありがちな、タブＵＩにちょっと機能を付け加えて便利にしたものです。 「次へ」「前へ」ボタンがついたことで、画像を貼り付けてもよさそうですし、スライドみたいな使い方もできそう。 トップページなんかの、限られたスペースの中に沢山の情報を埋め込むのもよいかもしれません。 デモページ jQueryベースなので使い勝手も良さそうですね。 関連エントリ 多数のタブをグループ化して管理できる「TooManyTabs」 超クールなタブインタフェースをjQueryで作成するチュートリアル フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」 タブ式のスライドウィジェットを簡単作成できるjS「jFlow」

テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 2009年03月10日- jQuery plugin: ‘autoResize’ - James Padolsey テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 改行を入れると、textareaが自動でズイズイとアニメーションで伸張します。 「textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ 」というのがありましたがアニメーションできる＆jQueryプラグイン＆オプション指定可能という点があります。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 設置サンプル 設置のサンプルです。 設置のサンプルです。 設置のサンプルです。 以下のようなオプションが指定出来ます。 ・onResize でコールバック関数を指定 ・animate

Easy Display Switch with CSS and jQuery クールに表示を切り替えられるCSSとjQueryサンプルが公開。 デモページ でそのかっこよさが確認できます。 かっこよくてつい切り替えてしまう、そんなスイッチになってますね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 グラフ描画用のjQueryプラグイン集 15分で理解するjQueryのスライド「jQuery in 15 minutes」

Image Name Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. Image Name Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfo

View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can

ColorBox - customizable lightbox plugin for jQuery クールにデザインされた多機能LightBox「ColorBox」 もう成熟してきたこの分野ですが、ColorBoxはなかなか多機能かつクールなようなのでご紹介。 単一の写真表示 写真をグループ化してページ送り機能 AjaxでHTML取得 インラインＨＴＭＬも可能 ビデオ埋め込み IFRAMEで外部ページの埋め込み 機能も勿論多機能でいいのですが、デザインが色々と選べるところがいいです。 以下、３つのテーマが基本テーマ以外に用意されているみたいです。 シンプル調 Apple風(?) シンプル調2 カスタマイズして簡単にデザイン変更もできそうです。 jQueryプラグインで、MITライセンスとのこと。 関連エントリ カスタマイズできる多機能LightBox「Lightview」 表示法が新しく

GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」 2009年03月03日- BeautyTips Demo Page GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」が公開されました。 Google Map 風がなかなか面白いです。Google Mapじゃないけどページ内にGooglemap風の吹き出しを表示できます。 次のような角丸＆枠付＆半透明という高度なツールチップを作ることも可能です。 以下のようなFacebookスタイルも実現できます。 エレメントの上下左右に表示することが出来るみたい。 関連エントリ JavaScriptを使わずCSSのみでシンプルなツールチップ実装 ツールチップを作るのならこれかもという多機能jQueryプラグイン「Simpletip」 カスタマイズ

FireScope Firebug内でHTML/CSSについて調べられるアドオン「FireScope」。 Firebugを利用していると、ふとCSSを調べたくなるときなんかがあったりしますが、FireScopeをインストールすればその場でリファレンスが引けるようです。 属性のルックアップ MAPタグの使い方表示 JavaScriptも引けたらいいかもしれませんね。 【ハウツー】FirebugにHTML/CSSリファレンスをアドオン! - FireScope (1) あのプロパティの使い方なんだっけ? これからはFireScopeで一発! | エンタープライズ | マイコミジャーナル 関連エントリ HTMLヘルプ形式のJavaScriptリファレンス「jsref.chm」 ソースを見ながらリアルタイムで牽けるXHTML＆CSSリファレンス「HTML Playground」