BJKit(BeautifulJapaneseKit)htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。 BJKit(BeautifulJapaneseKit)でビューティフルな見出しを生成 htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。日本語にも対応しているので、様々な場面で利用することができます。 動的に表示するので、画像を作成する必要がない 新聞記事風、楷書風、POP調など、書体を自由にアレンジ出来る htmlの構造を崩さず、SEOやユーザービリティを犠牲にしない など、ページ作成の効率アップと同時に、表現力も向上させる手法です。 適用例 従来は、当ページの見出し(h1タグ)は下記のように表示されます。 従来の見出しの例 BJKi
以前、個人的に作っていたサイトで、なんかメニューの見せ方を工夫できないかなと思って、「prototype.js」 と 「effects.js」 を利用してやって... 以前、個人的に作っていたサイトで、なんかメニューの見せ方を工夫できないかなと思って、「prototype.js」 と 「effects.js」 を利用してやってみたのが今回紹介するメニューのサンプル。 マウスオン / オフすると、隠れているサブメニューが滑らかに閉じたり開いたりします。クリックで開いたり、折りたたまれたりするメニューはよくありますが、それに無駄なエフェクトを施した版といったところ。 実際に動作しているサンプルはこちら。マウスオン / オフで滑らかに開閉しちゃいます。 さて、今回の材料は、 JavaScript ファイル 3種 本メニューの HTML ソース 本メニュー用 CSS の追加 JavaScript
Webプログラミングは,プロはもちろんアマチュアのプログラマの間でも,もはや欠かせない開発ジャンルの一つです。しかし,書籍や雑誌の解説記事のほとんどが,データベースがどうとか,サーバーサイドがどうとか,どうしてもディープな方向に進んでしまう傾向にあります。もちろん,それはそれで大切なことなんですが,いったい何割の人が,その技術を“自分の”ホームページに使っているでしょう。 最近話題の「リッチ・コンテンツ」にしても同様です。例えばFlash。たしかにActionScriptというスクリプト言語を使えば,動く,鳴る,つながると,いいこと尽くめです。でも,いかんせん「Macromedia Flash MX 2004を買ってきてね」とあっては,皆がみな使えるわけではありません。 Part1でも解説があったようにblog(ブログ)の認知度が上がり,利用率も増えて,プロバイダからの提供体制も整ってきて
Transparent custom corners and borders, version 2 | 456 Berea Street It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. CSSとJavaScriptで影付きの角丸ボックス要素を作る。 次のような2重線と影がついたボックスのサンプルが公開されています。 HTMLは次のようにシンプルな形に出来るようです。 <div class="cbb"> <h1>Transparent custom corners and borders, v
Accessible JavaScript Newsticker 複数のニュースを、一個ずつ順番に表示させるギミック。サンプルはこちら。 何が”Accessible”かというと、Javascriptがオフの時でもニュースが一覧でHTMLソースに存在する、つまり、検索エンジンから認識される、ということだろう。JavascriptやCSSを使ってdegradableな階層メニューを作るような話題とこのあたりは同じ。 逆に、ページに表示されるけれど検索では引っかからない、ような表示内容にしたければ、ニューステキストをJavascript側で処理して表示させるようなものを作ればよい。 [追記] 百式の田口さんがほぼ同時に別のJavascriptティッカーを紹介されていた。Javascriptでお手軽ティッカーを実現 この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散してい
jQuery 開発者向けのメモです. ずっと以前に,jQuery に関する日本語の情報がまだ少ない頃に作ったページですが, その後 jQuery を再び利用する機会があったので,最新バージョン向けに記述を更新しました. 住宅ローンシミュレーションです. jQueryを利用したフォームの動的な追加や,flotプラグインによるグラフ描画などを行っています. 本ページの記載に間違い等見つけた方はブログのエントリまで連絡いただけるとうれしいです. 最終更新:2009/1/10 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです. 独自のXPATH/CSSセレクタを利用することで,多くのDOM操作を非常に簡単に書くことが出来ます. JavaScriptのDOM操作や,XMLHTTPRequest,XMLの操作などを覚えなくとも, Ajaxを利用したイ
ページのデザインを利用者好みにカスタマイズできるように、javascript を使い、CSSを切り替えることでデザイン変更できるサイトがありますが、 JavaScriptオフでも同様のことを実装したい場合のサンプル。 JavaScriptを使わずに、PHP+クッキーを使ってページのCSSを切り替えてみましょう。 PHPの知識がなくても、次のサンプルを使えば簡単に誰でもCSSを切り替えることが出来ます。 次のサンプルは、main.css , blue.css , red.css , pink.css というCSSを切り替えたい場合のサンプルです。 (1) まずは、レイアウトを保存するクッキー設定用のPHPスクリプト( index.phpとして保存 ) <?php $valids = array( "main", "blue", "red", "pink" ); $layout = (isse
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
A New Way of Tracking Users' Browsing Habits - techfoolery Jeremiah Grossman came up with a really clever way of using Javascript to find what pages you've visited recently. CSS&JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析する方法。 自分のサイトに来ている人は他のこんなサイトも見ている、なんてことを管理者側で知ることができるんですね。 早速デモを見ていきましょう。 まずは、サイト訪問済みとするため、www.yahoo.com を見ておきましょう。 そして、サンプルページ を見てみてください。www.yahoo.com が表示されるはずです。 (他にもサンプルページ上で定義されたリストの中
Sidebar Lorem ipsum dolor sit amet consectetuer adipiscing elit Donec risus Lorem ipsum dolor sit amet consectetuer adipiscing elit Donec risus Lorem ipsum dolor sit amet consectetuer adipiscing elit Donec risus Background One of the arguments for using frames has always been that they allow you to keep parts of the layout on-screen at all times. This can be emulated with CSS, as described here. T
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く