[JS]画像やテキストをフォーカスした際に不透明度をコントロールするスクリプト -Opacity Focus
画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトをdavid walsh blogから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500
8 Layout Solutions To Improve Your Designs — Smashing Magazine
The organization of content is probably one of the most important and influential aspects of any good web design. Organizing information into a well-built layout is the basis of a website, and should always come before styling concerns. Without a good layout, the website doesn’t seem to flow correctly, and nothing connects the way it should. In this article, we’ll discuss 8 useful layout solutions
Webデザインを向上させる8つのレイアウト | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Webデザインにおいて、コンテンツをどのようにまとめ、どのレイアウトで表現するかは大事な課題だ。すでによく使われているレイアウトと、それが何の目的で使われているのかは明かになっている。そうした人気のあるレイアウトとその目的を知ることは、Webページをデザインする際の資料として活用できる。 Matt Cronin氏がSmashing Magazineにおいて8 Layout Solutions To Improve Your Designsのタイトルのもと、使いやすい8つのレイアウトとテクニックについてまとめている。Webデザイナは一度チェックしておきたい内容だ。紹介されているレイアウトは次のとおり。 ス
JavaScriptライブラリで作るリッチUI（まとめ）
Webサイトを使いやすく、楽しくするリッチなユーザーインターフェイス（UI）。手軽に使えるオープンソースのJavaScript／Ajaxライブラリが充実してきたおかげで、従来はFlashでしかできなかったようなUIが、HTML/CSS＋JavaScriptだけで作れるようになった。 ここに、ASCII.jpで紹介したJavaScriptライブラリの使い方、実際の採用サイトの情報をまとめてみた。ぜひ自分のWebサイトのUI制作の参考にしてみよう。 ※このページは随時更新します Last update：2008年12月18日 JavaScript／Ajaxライブラリ紹介記事
FlashではなくjQueryで！インパクトのあるUIを作ろう (1/5)
もう間もなく投開票を迎える米国の大統領選挙。候補者である共和党のジョン・マケイン氏、民主党のバラック・オバマ氏の両者のWebサイトを見ると、インターネットを重要な選挙ツールとして位置づけていることが伺えます。ネットを使った選挙活動が制限されている日本とは事情が異なるせいもあるでしょうが、両者ともに公式サイトの充実ぶりがすごいのです。ブログや動画の活用は当たり前。グッズのネットショップや、サポーター向けのコミュニティ機能など、ちょっとしたポータルサイトのような凝った作りです。 そんな気合の入ったWebサイトだけに、デザインの面でも参考になる面が多々あります。今回は特に、Ajaxを活用したユーザーインターフェイスを持つ、オバマ候補の公式サイトをお手本とさせていただきましょう。 今回のお手本サイト： 『Barack Obama and Joe Biden』 11月4日に開催される米国大統領選挙に
YUIでも作れるようになった！Amazon風インターフェイス
Amazon.co.jpのレコメンド表示のようなスライド回転式パネル（カルーセルUI）を自分のサイトにも取り入れたい――。そんな希望をかなえる手軽な方法を、本誌連載記事「29分でできる！ あのサイトの“技”を盗め」第4回で紹介した。記事ではjQueryをベースに古籏一浩氏が作成したJavaScriptライブラリを使用しているが、10月1日にリリースされた「YUI」（Yahoo! User Interface Library）の新版「YUI 2.6.0」でもほぼ同様のUIが作れるようになった。 YUIは、米ヤフーが提供するUI周りに特化したJavaScriptライブラリで、カレンダーやツリービューなど、WebアプリケーションのUIに使えるさまざまなコントロール（ウィジェット）が用意されている。利用しやすいBSDライセンスを採用していることもあり、国内外で商用／非商用サイトを問わず幅広く使われ
JavaScriptでとっても滑らか！画像切替のシンプルな技 (2/5)
画像の上にマウスを重ねると別の画像に切り替わる、一般的にロールオーバーと呼ばれる処理は、Web制作ソフトでも標準で作成できるほど当たり前のものです。当然、ロールオーバー機能を持つJavaScriptライブラリも相当数存在します。 ところが、単純な画像の切り替えではなく、「フェードイン／フェードアウトさせる」「アニメーションさせながら画像を切り替える」といったものになると、選択肢は急に少なくなります。 今回は、「rollover2.js」というライブラリを使います。rollover2.jsの特徴は、何と言っても手軽なことに尽きます。スクリプトを一切書くことなく、自動的にロールオーバーとフェード処理をしてくれるのです。 ではさっそく、rollover2.jsをダウンロードして使用するための準備に取りかかりましょう。まずは以下のページから、roolover2.jsをダウンロードします。 http
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
Apple風のインターフェイスを実装するチュートリアル集