A Richer Web: SVG And Canvas In Mozilla Robert O'Callahan Lizard Engineer Today's Web Graphics CSS: text, rectangular boxes, border effects, opacity Images: JPG, translucent PNGs, animated GIFs Flash Creatively scripted combinations of the above The Problem You can't do this with just HTML/CSS! Demo (And Flash isn't really what you want here)
サイトを作ったら、見た目の確認も重要ですがマークアップの文法チェックも重要です。別にW3C信者という訳ではありませんがSEOの面でもstrictなHTMLの方が良さそうなのでできる限り対応した方が良いです。 「Another HTML-lint」はHTMLの文法チェッカーとして有名です。 で、その文法チェックがweb上でできるのが「Another HTML-lint gateway」なのですが、このサービスに1クリックで飛べるブックマークレットを作ってみました。 Do Another HTML-lint 上記リンクをブックマークして下さい。 中身はこんな感じです。 javascript:(function(){window.open('http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?Method=URL&ViewSource=on&O
Script.aculo.us Select Box This javascript class allows you to add nice styled select boxes in a HTML page. JavaScript&CSSで独自デザインのselectボックスを作成。 チェックボックスとかラジオボタンの独自デザイン仕様にする方法はいろいろあったものの、selectボックスの独自デザイン仕様にする方法はそういえば無かったですね。 prototype.js ベースで script.aculo.us を使い、次のイメージのようなselectボックスを作るライブラリが公開されています。 選択項目の内容はAjaxで取得できるようです。 レスポンスが遅い点と挙動が通常のselect ボックスと違う点で操作に違和感がありますが、多少の修正で通常のselectボックスと同様に出来そうな
cyano: JavaScript アーカイブ 具体的には、従来のようにHTMLページ内にobjectタグやembedタグでFlashを表示するように記述した場合、そのFlashがクリックを受け付けたり、マウスの位置情報を取得したりするためには(インタラクティブに振る舞うには)、一旦Flash上でクリックなどをしてFlashコントロールをアクティブ化しなくてはならなくなりました。 最近、Flashにカーソルを合わせると変な枠があって、1回クリックしないと動作しないという現象がありました。 調べてみると、IEパッチ適用による影響だそうで、これはJavascriptによるタグ吐き出しを行うことで回避できる模様です。 その吐き出し用ライブラリを発見したので紹介。 次のように簡単に使えるようです。 var swf = new jp.catalase.SwfTagWriter('fma.swf',
Flashを使わないクールなスライドショーを実現できるライブラリ「Smooth SlideShow」 2006年10月13日- JonDesign's Smooth SlideShow - Showcase Mode Flashを使わないクールなスライドショーを実現できるライブラリ「Smooth SlideShow」。 フェードアウトもしてくれてスムーズに動くスライドショーが比較的簡単に実現できます。 設置方法はこちらに書いてあるとおり、JSとCSSを読み込んで、スライドショー表示領域用のDIVを定義して、表示するアイテムの初期化をJavascriptコーディングするだけです。書いてある通りやれば比較的簡単に作れると思います。 Firefox, IE, Opera で動作可能。 ZIP形式でライブラリをダウンロード
WindowsXPやOfficeXP風のメニュー、シンプルなメニュー、ミニタブ型、横に展開するタイプなど、いろいろな幅広い応用が可能です。 例とコードのダウンロードは以下から。 ダウンロードや設置方法は以下のページから。 aplus :: ADxMenu http://www.aplus.co.yu/adxmenu/intro/ 実際の例は以下にあります。 http://www.aplus.co.yu/adxmenu/examples/ 例その1:WinXP style http://www.aplus.co.yu/adxmenu/examples/winxp/ 例その2:Simple style http://www.aplus.co.yu/adxmenu/examples/simple/ 例その3:Minitabs http://www.aplus.co.yu/adxmenu/exam
FireFox の拡張機能 FireBug を更新したらすごいことになっていたので共有します。 まずこれを見てください http://Sample.ECMAScript.jp/20060331.html ぱっと見の機能 HTML のソースを見ながら、属性値を直接編集できる。 影響のある CSS を即時に表示 レイアウト情報を即時に表示 インスペクト中の要素に浮上したイベントをキャプチャ インスペクト中の要素の JavaScript オブジェクトを表示 Ajax レスポンスのヘッダも確認できるようになった。 FireBug のインストール https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=1843
Nifty Corners This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. Javascriptで指定のHTML要素を動的に角丸デザインにする方法。 NiftyCornerを使えば、単一のDIV要素を角丸デザインにすることが可能です。 例えば、次のような単一DIV要素も簡単に角丸にできます。 <div id="nifty"><p>test</p></div> <script type="text/javascript"> Rounded("div#nifty","#377CB1","#9
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く