いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
Flash,JavaScript,CSS,PHPでグラフ作成のためのライブラリ色々:phpspot開発日誌
16 librairies et scripts pour g・・er des graphiques sur Internet | Simple Entrepreneur Flash,JavaScript,CSS,PHPでグラフ作成のためのライブラリ色々。 Flash amCharts Maani JavaScript EJSChart PlotKit AjaxMGraph CSS Css For Bar Graphs Vertical Bar Graphs with Css and Php Bargraph Dynamic Pie Chart with Css Css Vertical Bar Graphs Displaying percentages グラフ画像生成ライブラリ JFreeChart Artichow JpGraph Chart Director Graphviz Ima
自動で画像のスライドショーが可能なLightBox風ライブラリ「splash.image.js」:phpspot開発日誌
自動で画像のスライドショーが可能なLightBox風ライブラリ「splash.image.js」 2007年06月07日- Du cde chez Xuan - Ressources / Javascript / Splash (image plein ・ran et diaporama) 自動で画像のスライドショーが可能なLightBox風ライブラリ「splash.image.js」 画像をクリックするとそのウィンドウ内で画像を表示できるLightBoxで、スライドショーが可能なライブラリが公開されました。 右下にある、「次へ」「前へ」ボタンによって画像が送れるだけでなく、まんなかの「再生」ボタンで自動再生が可能です。 実装もLightBox同様に、必要なライブラリとCSSを読み込んだ後、アンカータグの rel 属性にグループ設定を書くだけです。 <!-- 必要ライブラリの読み込み --
WEB制作者とブロガーの『遊び心をくすぐる』26のブックマークまとめ*ホームページを作る人のネタ帳
今回まとめた内容をあらかじめ言っておきます。 CSS JavaScript イメージギャラリー Generator Ajax です。 とりわけJavaScriptやCSSは色々なブログでも使える為、ブロガーも頑張れば導入可能なプログラム等をなるべく多めにまとめました。 これは『個人的な感想』のテーマで、私個人が遊び心をくすぐられたものをまとめています。 あくまで私がくすぐられたもので、他の人がくすぐられるかどうかまでは保障できませんので、上記キーワードに興味の無い方は特にあらかじめご了承ください。 送信ボタンなどをちょっとセクシーにするCSS 送信ボタンなどをちょっとクールにかわいらしくする為の知識。 JavaScriptがいらないイメージマップの切り出しサンプル 画像にマップを埋め込んで華麗に表示する為の知識。 口で言うより、デモを見たほうが早い。 チェックボックスとラジオボタンをオシャ
IE版のFirebug IE Developer Toolbar[to-R]
IE版のFirebug IE Developer Toolbar みなさんはInternet Explorer Developer Toolbarというのを知っているでしょうか？ マイクロソフトが現在ベータ版として提供しているツールで、簡単に説明すればIE版のFirebugです。 IEで使えるFireBugとして聞くとFireBug Liteを思い浮かべがちですがFireBug Liteのようにソースにjavascriptを埋め込むことなく実行することが可能です。 ちなみにFirebugとはjavascritpやCSSのデバッグなどを行えるFirefoxのアドオン(拡張機能)になります。 すごく便利ですので、使ったことがない方はFirebugの方からお使いください。 話は戻りますが、Internet Explorer Developer Toolbarのインストール方法について解説したいと
![IE版のFirebug IE Developer Toolbar[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」:phpspot開発日誌
様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」 2007年03月29日- Control.Modal : Unobtrusive CSS Modal Windows and Lightboxes for Prototype Control.Modal is a light weight, unobtrusive JavaScript library for creating modal windows and lightboxes using HTML that is already on the page, images, AJAX calls or iframes. 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」。 LightBox は、同じウィンドウ内で背景
JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」:phpspot開発日誌
JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」 2007年03月27日- ruzee.com - Steffen Rusitschka ShadedBorder - JavaScript Round Corners with Drop Shadow Rouding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed. JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」。 同様のライブラリに Nifty Corners がありますが、これを更に進化させ、使いやすく、高速に、かつよ
入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル:phpspot開発日誌
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」:phpspot開発日誌
Parallax Background with Javascript and CSS ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」。 一見なんの変哲もないサイトのように見えて、スクロールしてみると2枚の背景画像が違う速度でスクロールし、面白い効果が見られます。 スクロールバーをつまんでゆっくりページをスクロールしてみてください。 雲の画像が、その後ろの布風の背景画像よりも高速に動いてみえると思います。 JavaScriptの window.onscroll イベントによってそれぞれの背景画像のスクロール位置を調節しているようです。 凄く面白いなぁ、と思ったのですが、この方法を応用することで、新たに面白い効果を作ることができるかもしれませんね。 訪問者への驚きの要素として実装してみると面白いでしょう。 サポートブ
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
Ajaxで吹き出し方式のテキストヒント作成ライブラリ:phpspot開発日誌
Ajax tooltip This is an Ajax tooltip script. When you roll your mouse over the "info" links in the table, ajax will show tooltip content from external files. Ajaxで吹き出し方式のテキストヒント作成ライブラリ。 使い方は、必要なCSSとJavaScriptをインクルードして次のようにアンカーのonmouseover/onmouseout に書くだけでよいみたいです。 <a href="#" onmouseover="ajax_showTooltip('読み込むページのURL',this);return false" onmouseout="ajax_hideTooltip()"> マウスオーバーすると「読み込むページのURL」で指定
我的春秋: JavaScript ソースが HTML から消える日
［2006-06-10 付記］このエントリーは、2006-01-05 時点のもので情報が古くなってます。現時点で把握している最新情報を「続 JavaScript ソースが HTML から消える日」にアップしましたので、あわせてご参照ください。 Behaviour.js ― JavaScript ソースを (X)HTML から完全分離できるライブラリ 昨日、職場の同僚の人がたまたま見つけた JavaScript ライブラリを教えていただたんですけど、これがもうびっくり！なんと、このライブラリがあれば、イベントハンドラーも含めて JavaScript ソースが (X)HTML の body 内から、ほぼ完全に分離できてしまいます！ しかも、HTML 内で JavaScript 関数を適用する場所は、なんと JavaScript ソース内に CSS セレクタを書き込むことで指定！あまり日本では取
Ajaxでタブインタフェースを実現するためのライブラリ:phpspot開発日誌
havocStudios: Ajax tabs CSS Tabs seem to be all the rage with the kids these days. I love the idea of them. It seems that the most popular method of creating tabs using CSS is the Sliding Doors method. They seem to look the coolest and are very easy to implement. However, they're so... static. Ajax Tabsを使えば次のようなCSSベースでデザインされたタブインタフェースの部品が簡単に作れます。 Ajaxを使ってタブが更新されるため、各タブ内のページ(HTML)は独立したファイルにすることが可能で
満足せる豚。眠たげなポチ。:2005年の技術的なトレンドに乗り遅れないための5つのテーマ
年の暮れだからこそ、今年の技術的なトレンドへ乗り遅れないように復習をしたいもの。 Web2.0が脚光を浴びた2005年。とりあえずこの5つの分野から苦手分野をきっちり潰していきたいと思います。（多分にぼくの偏見と苦手分野の重視が影響している点はご了承ください。） Ajax Ruby on Rails HTML/CSS Javascript 正規表現 ということで、おすすめの書籍やサイトを総括。 Ajax 2005年はこれしかないでしょう。猫も杓子もAjaxと連呼した年でした。 Ajax: Web アプリケーション開発の新しいアプローチ http://antipop.gs/docs/translations/ajax.html これがなくちゃ始まらないですから。 Ajaxの本質、「非同期メッセージ型ウェブ・アプリケーション」のススメ http://satoshi.blogs.com/life
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEでアルファチャンネルPNGを表示する （iepngfix.htc） - youmos
CSSでセクシーなボタン作成:phpspot開発日誌
Lightbox Plus
Shift: Zoho Writer に待ちに待った機能が・・・