[ASCII.jp] jQueryによるフォームのデザインの基礎
[ASCII.jp] jQueryによるフォームのデザインの基礎 ASCII.jpの連載「Web制作の現場で使えるjQuery UIデザイン入門」で第８回 jQueryによるフォームのデザインの基礎（前編）と第９回 jQueryによるフォームのデザインの基礎（後編）が公開されました。 フォームでのjQueryの機能や様々なＴＩＰＳを紹介しております。 なるべく実用的なサンプルを利用して、紹介しておりますので是非参考にしてください。 関連エントリー [ASCII.jp] jQueryのイベントをチュートリアルで学ぶ [ASCII.jp]サンプルで学ぶjQuery：(X)HTML/CSSを操作する [ASCII.jp]初めてのjQuery：セレクターAPIを一挙解説 [ASCII.jp] jQueryのダウンロードとインストールのチュートリアル ASCII.jpで連載開始しました「Web制作の
![[ASCII.jp] jQueryによるフォームのデザインの基礎](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)
[ASCII.jp]サンプルで学ぶjQuery：(X)HTML/CSSを操作する
[ASCII.jp]サンプルで学ぶjQuery：(X)HTML/CSSを操作する ASCII.jpの連載「Web制作の現場で使えるjQuery UIデザイン入門」で第5回サンプルで学ぶjQuery：(X)HTML/CSSを操作するが公開されました。 jQueryを利用して(X)HTMLやCSS操作する方法について解説しております。 JavaScriptは基本的に(X)HTMLやCSSを操作するプログラミング言語ですので、ここを押さえておけば今後発展する様々なUI作成がすんなりと理解できるかと思います。 数が多いですが、パターンが決まっておりますので何が出来るかを理解しておくだけでもよいかなと思います。 関連エントリー [ASCII.jp]初めてのjQuery：セレクターAPIを一挙解説 [ASCII.jp] jQueryのダウンロードとインストールのチュートリアル ASCII.jpで連載開
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
Webサイトに地図が載せられる『Yahoo!地図情報API』[to-R]
Webサイトに地図が載せられる『Yahoo!地図情報API』 Yahoo!地図情報APIはWebサイトに簡単に地図を乗せることが出来る、Google MapのYahoo!版のサービスです。 地図はJavaScript版とFlash版があり好きなほうを選択できます。 設置方法 Yahoo!地図情報APIはアプリケーションIDですので、まず最初にアプリケーションIDを取得してください。 head要素などでjavascriptを取得する際に、アプリケーションIDをURLに含む形で記述します。 <script type="text/javascript" src="http://api.map.yahoo.co.jp/MapsService/js/V1/?appid=アプリケーションID"></script> script要素で地図情報を設定します。 <script type="text/java
複数のjsライブラリを利用する際にonloadを書き換える方法[to-R]
複数のjsライブラリを利用する際にonloadを書き換える方法 複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。 原因は様々なのですが、一番多いのがJavaScriptライブラリのonload記法に依存する問題です。 onload記法とはJavaScriptを実行するタイミングをonloadイベント（ブラウザがすべてを読み込んでから実行）に設定する際の書き方です。 DreamWeaverを利用している方は、以下のようなソースをよく見るかもしれません。 <body onload="MM_preloadImages('hogehoge')"> これはonloadイベントにMM_preloadImagesという関数を設定しているという意味です。 他にもソースコード中の window.onload = functio
ユーザーがページのどこをクリックしたか解析するツール[to-R]
ユーザーがページのどこをクリックしたか解析するツール ユーザーがどのようにサイトを巡回しているかはアクセス解析なのでわかりますが、ページのどこをクリックしたかも知りたくないでしょうか？ 今回は、ページのどこがクリックされたかを解析するツールを紹介します。 Crazy EggはwebページにJavaScriptのコードを一行追加するだけでwebページのどこがクリックされているかを解析できるおもしろいツールです。 ちなみにto-Rを解析した所、このような結果になりました。 最初のエントリーの『続きを読む』にクリックが集中してますね。 CSSのカテゴリーページも結構人気っぽいです。 お約束として『パーマリンク』を用意しているのですが全くクリックされていませんので必要なさそうですね。 などアクセス解析やデザインを見ているだけではなかなか見えないwebサイトの性質が見えてきます。 セットアップ まず
![ユーザーがページのどこをクリックしたか解析するツール[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0330939009a892e86a58d7eebfca00c0ecd1fe43/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimg%2F20070820_01.jpg)
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
CSSで実現するスマートなロールオーバー
CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。 長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。 サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。 まずサンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
