透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos

2008/08/13 424 users div Box HTMLタグ カラス 数行

ガラスのように透明感のあるデザインをコンテンツに適用してくれるのがglassbox.js。JavaScriptコードで、GrassBoxデザインを適用したい<div>などを指定すると、必要なHTMLタグとスタイル指定が行われる。数行のJavaScriptコードを書くだけで、デザインが適用されるのは非常に分かりやすい。 オプションパラメータの指定で簡単に、Boxを可変サイズに設定もできる。Boxをド... 続きを読む

CSSレイアウト情報をレイヤー表示するブックマーク （XRAY） - youmos

2007/07/30 153 users XRAY CSS レイヤー レイアウト ソフトウェア

CSSのレイアウトなど気になる部分をサッと確認したいときに便利なのが、XRAY。普段利用しているブラウザでも利用でき、利用する準備も非常に簡単。ソフトウェアなどのインストールは必要ない。 利用するには、レイアウト情報を確認したいサイトで、事前にブックマークしておいたXRAYを呼び出すだけで利用できる。対象の部分をクリックすると、サイズや位置の情報をレイヤー表示してくれる。 XRAYをブックマークに... 続きを読む

CSSデザインで綺麗なボタンを作成する （How to make sexy buttons with CSS） - youmos

2007/07/25 263 users ユーザービリティ CSSデザイン CSS CSS記述 HTML

コンテンツにボタンを用意する際、フォームのボタン以外にもさまざまな場面で利用する。例えば、ダウンロードリンクをボタンデザインに変更するだけで、ユーザービリティが改善される。綺麗なボタンをCSSとイメージ画像でデザインする方法がoscaralexander.comで解説されている。 簡単なHTMLとCSS記述で実装できる、またデザインは背景用のイメージを用意するだけなので、デザイン変更は簡単に可能。... 続きを読む

2D感覚で3D処理するActionScriptクラスライブラリ （FIVe3D） - youmos

2007/07/24 144 users クラスライブラリ 敷居 Flash 奥行き 近い感覚

Flashで3Dと言うと敷居が高いように感じるが、2Dグラフィックに近い感覚で奥行きのあるアニメーション出力が簡単に出来るようにしてくれるのが、FIVe3D。各種ActionScriptのクラスライブラリで構成されている。 ActionScript2.0、ActionScript3.0に対応しているので、FlashPlayer6.0以降としてパブリッシュ設定にしておけば問題なく利用できる。実際の動... 続きを読む

CSSデザインできるスクロールバー表示JavaScript （fleXcroll） - youmos

2007/07/20 167 users スクロールバー CSS スクロールバーデザイン OS環境 通常

通常のスクロールバーデザインはブラウザやOS環境に依存するため、コンテンツデザインに合わない場合があります。コンテンツ内に表示するスクロールバーをCSSでデザインできるようにしてくれるのが、fleXcroll。 ダウンロードサンプルに含まれるデザインスクロールバーは2種類となっている。あまり良いデザインではないので、自身で作成するのが良いだろう。デザイン用のイメージ素材とスタイルシートを作成すれば... 続きを読む

PHPで画像処理が簡単になるクラスライブラリ （Asido） - youmos

2007/07/18 171 users ウォーターマーク ImageMagick クラスライブラリ

PHPで画像処理をする際に簡単にいろいろな処理を実行できるようにしてくれるのが、Asido。PHP4 / PHP5に対応している。GD2、ImageMagickなど画像処理ライブラリなどと共に利用する。Webコンテンツの画像加工でも比較的利用頻度の高い、リサイズ、ウォーターマーク、画像形式変換などにも対応する。 PHPで画像処理を実際に作成したことがあれば、Asidoを利用すると簡単に同じ処理が実... 続きを読む

折りたたみできるコンテンツ表示JavaScript （Accordion.js） - youmos

2007/07/17 217 users prototype.js 動作 コンテンツ 機能 非表示

コンテンツが長くなる場合に、部分的に折りたたむ（非表示）ことで、すっきりと表示させることができる。簡単にアコーデオン機能を実装できるのが、Accordion.js。prototype.js、scriptaculous.jsが動作には必要になる。 徐々にコンテンツなどで見かけるようになってきたアコーディオン表示だが、prototype.jsで利用できればぐっと身近な機能になる。アニメーションエフェク... 続きを読む

デザインスクロールをブロック要素に適用するJavaScript （jsScrolling） - youmos

2007/07/12 109 users スクロールバー ブロック要素 サンプル ソースコード ブラウザ

ブロック要素など、コンテンツ上で長い文章やソースコードなど表示したい場合便利なのが、jsScrolling。ブラウザのスクロールデザインとは異なるオリジナルのスクロールバーを表示させることが出来る。 サイトのデザインに統一感を出したい場合に、コンテンツに配置したイメージをスクロールバーとして利用することも出来る。機能ごとにJavaScriptファイルが分かれているがサンプルを参考に作成すれば比較的... 続きを読む

スターレーティングをCSSでデザインする （CSS Star Rating System） - youmos

2007/07/11 102 users パーツデザイン system CSS インターフェース マウス

スターレーティングのUIをCSSで実装する方法を紹介しているのが、 CSS The Star Matrix Pre-loaded。サンプルではスタイルシートと星マークのGIFイメージを利用して、マウスに反応するインターフェースまでの実装を行っている。 実際に利用する場合は別途PHPなどのプログラムなどで評価の投票プログラムなど作成する必要はある。CSSを利用したパーツデザインのサンプルとして参考に... 続きを読む

ロードインジゲータ表示を簡単に実装するJavaScript （protoload.js） - youmos

2007/07/11 107 users プログレスバー インジケータ Ajax HTMLヘッダ 処理

Ajaxなど非同期処理やタイマーイベントを利用して、コンテンツ上で処理を行う際にロードインジケータやプログレスバーなどのアニメーション表示がわかりやすい。インジケータの表示処理を簡単に実装出来るようにしてくれるのがprotoload.js。 インジケータの表示開始と終了をJavaScriptで呼び出せばよいので非常に簡単に利用できる。利用するにはHTMLヘッダなどでprotoload.jsを呼び出... 続きを読む

IEでアルファチャンネルPNGを表示する （iepngfix.htc） - youmos

2007/07/09 243 users img エレメント アルファチャンネル 導入 タグ

InternetExplorer7からアルファチャンネルを含むPNG表示が出来るようになりましたが、IE6.x以前は対応していません。簡単に表示できるようにしてくれるのが、iepngfix.htc。<img>タグ、またはエレメントの背景画像にxxx.png画像が指定されているものに対して、AlphaImageLoaderを適用してくれます。 導入は簡単に行うことが出来ます。注意したいのはhtcファ... 続きを読む

CSS記述をスマートにするPHP （CSS Server-side Pre-processor） - youmos

2007/07/02 109 users htaccess レイアウト PHP CSS記述 サーバ環境

スタイルシート中心のデザイン、レイアウトでコンテンツを作成しているとCSS記述が複雑になる。運用中に修正を繰り返しているうちに、スタイルシートが複雑になり思わぬトラブルになりかねない。スタイルシートを少しでもわかりやすく記述しておくことで、こうした問題から開放してくれるのがCSS Server-side Pre-processor。 利用するにはPHPとhtaccessが利用できるサーバ環境が必要... 続きを読む

シンプルなデザインのTooltip JavaScript （glt.js） - youmos

2007/06/29 87 users HTMLヘッダ 記述 違和感 デザイン ツールチップ

ツールチップをさりげなく表示したい場合に便利なのが、シンプルなデザインのGood-Looking Tooltips（GLT）。動作も軽く、コンテンツに導入して、さりげなく表示されるので違和感が少ない。凝ったデザインよりもシンプルなのを好む方は気に入ると思う。 実際に導入するにはglt.jsをHTMLヘッダで読み込む記述と、スタイルシートの準備が必要になる。ツールチップの内容を指定するには、表示した... 続きを読む

Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos

2007/06/27 379 users opacity Apple ペー 半透明 透過PNG

Apple.comのようにパンくずも少し手を加えるだけで、使いやすいものになります、Appleのパンくずの区切りには半透明の透過PNGが使われている為、InternetExplorerへの対応はAlphaImageLoaderをCSSで指定しています。 半透明のアルファチャンネルを持つPNGイメージを使う方法と、CSSでopacityを指定する方法のどちらでも同じようにデザインできます。IEはペー... 続きを読む

77 165種類のWeb2.0アイコンデータ （Liquidicity） - youmos

2007/06/27 192 users プログレス イラストレータ Liquidicity 殆ど 素材

77種類のボタンイメージ、165種類のWebアイコンがあればコンテンツのデザイン時に殆どのパーツが揃う。デザインセンスが良く、重宝する素材を公開しているのが、Liquidicity。SVG形式、イラストレータ形式、JPEG形式の3種類が用意されているのでイラストレータを持っていないユーザーはJPEG形式を利用できる。 165種類のアイコン素材には、アイコン以外にも、同じデザインのボタン、プログレス... 続きを読む

ステップメニューをCSSでデザインするサンプル （CSS Step Menu） - youmos

2007/06/26 199 users ユーザビリティ CSS 修正 複数 コンテンツ

入力フォームなど複数のページにまたがって、入力などをしてもらう際にどのような作業を行うと終了するのかわかりやすく表示することで、ユーザビリティを向上できる。ステップメニューをCSSでデザインする際の参考になるのが、CSS Step Menu。 サンプルとして公開されているので、コンテンツにあわせて修正をする必要はある。デザインを変更したい場合は幾つかの画像を作成する必要があるので、どちらかといえば... 続きを読む

ウインドウの横に隠れるサイドナビゲーションJavaScript （side-bar.js） - youmos

2007/06/20 179 users ウィンドウ CSS タブ ナビゲーション 動作

コンテンツにナビゲーションを設置する際、コンテンツの端にタブ状のナビゲーションを表示できるようにしてくれるのが、side-bar.js。タブをクリックするとスライドしながら、メニューが表示される。 利用するにはmootools.js又は、scriptaculous.jsが必要になる。ダウンロードファイルには動作に必要なJavaScriptファイルとデザイン用の画像イメージなども含まれている。CSS... 続きを読む

CSSでフッタ位置をレイアウトする （CSS Sticky Footer） - youmos

2007/06/18 407 users fixed ブッダ CSS position スクロール

CSSテクニックで非常にシンプルだが、是非実践したいのがフッタ位置の調整。フッタの表示位置をCSSのみで調整して、画面の下に表示してくれるようにするテクニック。 画面下に固定表示（position:fixed）ではなく、コンテンツ量が多いときは、スクロールした一番下に表示する。逆にコンテンツ量が少なく、スクロールが発生しない場合でも、きちんと画面の下にフッタが表示される。わかってしまえば、簡単に実... 続きを読む

JavaScriptでJSやCSSを動的インポートする （import.js） - youmos

2007/06/14 122 users チュートリアル HTMLヘッダ JSファイル CSSファイル

JavaScriptで他のJSファイルやCSSファイルをインポートするのに便利なのがimport.js。WebInventif.frで紹介されているチュートリアルだが、実際に利用できるJavaScriptコードも取得でき、サンプル用のコードを削除すれば、そのまま利用できる。 本来であればHTMLヘッダで呼出せば良いが、特定の条件やページのみで実行したい場合などに利用できる。また、スタイルシートのイ... 続きを読む

Flashでリキッドレイアウトを実装する （Liquid Flash Layout） - youmos

2007/06/14 190 users リキッドレイアウト Object Flash ウインドウ幅

Flashコンテンツを作成する際、ウインドウ幅などにあわせて表示領域を広げるように作成する方法がtutorio.comで解説されている。単純にFlashの<object>タグのみ100％など指定すると、Flashそのものが拡大表示されてしまう。 リキッドレイアウトに対応するにはActionScript中で別途処理を記述する必要がある。onResizeイベントが呼ばれる度に、ムービークリップの位置を... 続きを読む

簡単にブラウザ別CSSを導入するJavaScript （CSS Browser Selector） - youmos

2007/04/12 190 users お手上げ 万能 レイアウト JavaScriptライブラリ

特定のブラウザで表示したときにレイアウトが崩れたりする場合がある。CSS-Hack手法で回避する方法もあるが、万能ではない。また、OS＋ブラウザの組み合わせでスタイル指定を変えたい場合などはお手上げになる。 OS、ブラウザ別のスタイル指定を簡単にできるようにしてくれるJavaScriptライブラリがcss_browser_selector.js。非常にシンプルなJavaScriptだが、必要な事を... 続きを読む

エクスプローラ風Treeを表示するJavaScript （dTree） - youmos

2007/04/06 128 users JavaScrip TREE JavaScript 出力 影響

Windowsを使っていると良く目にするTree表示。デレクトリ、フォルダ階層など表示に利用されることが多い。ブログなどではカテゴリ表示などで利用されているのを目にする。そんなTreeをJavaScriptで簡単に作成できるのがdTree。 Tree階層構造を表示する際にはJavaScriptコードのみで、HTMLタグの出力は必要が無くなる。HTMLコードに影響を受けなくなる為、JavaScrip... 続きを読む

角まるコーナーと半透明シャドウを表示するJavaScript （ShadedBorder） - youmos

2007/03/29 94 users アンチエイリアス div JavaScript コーナー 通常

角まるコーナーを作成する場合、通常あらかじめ用意した画像を利用してコーナー部分を作成するが、ShadedBorderのJavaScriptライブラリを利用すれば、画像を用意することなくアンチエイリアス（anti-aliasing）コーナーを作成することが簡単にできる。 アンチエイリアス（anti-aliasing）部分は透明度の異なる<div をJavaScriptで生成することで実現している。ま... 続きを読む

軽快に動作するWYSIWYGエディタJavaScript （openWYSIWYG） - youmos

2007/03/06 168 users JavaScriptライブラリ 速度 動作 ストレス 機会

ブログの編集画面なども利用する機会の多い、ブラウザ上で動作するWYSIWYGエディタたが、利用する環境によっては動作が遅かったり、編集ツールが使いにくかったりと色々と不満が多かった。openWYSIWYG の登場で、これらのストレスから開放される。 JavaScriptライブラリとして動作する openWYSIWYG を利用して、驚くのが読込みまでにかかる速度。ストレスなくエディタエリアを構築し、... 続きを読む