jQueryでタブメニューを実装（テキストメニュー版）
jQueryでタブメニューを実装（テキストメニュー版） jQuery2010年8月11日 よく見かけるタブメニューによるコンテンツ切り替えのテクニックをご紹介します。jQueryで実装すればパフォーマンスもよく、使いどころを間違えなければユーザーに対しストレスなくわかりやすいコンテンツを提供することができます。プラグインを使用したサンプルもよく見かけますが、実はこのくらいの機能はjQuery単体で容易に実装できます。 実装サンプルおよびコード例を下記に記しましたので、どうぞご自由にお使いください。 jQueryはこちらからダウンロード 実際のサンプル HTML <div class="tab-box"> <ul class="nav clearFix"> <li><a href="#tab-01">メニュー1</a></li> <li><a href="#tab-02">メニュー2</a>
jQueryでタブメニューを実装（画像メニュー版）
jQueryでタブメニューを実装（画像メニュー版） jQuery2010年8月12日 こちらの記事で、メニュー部分をテキストにて実装するjQueryのスクリプトを紹介させて頂きました。 私も業務でタブメニューを実装する場合はjQueryを使用することが多いのですが、テキストではなくなにかと画像で実装するパターンのほうが多かったりします。実はその場合のスクリプトはまったく違ったものになるので、こちらの記事ではメニューを画像で実装した場合のスクリプトをご紹介します。 jQueryはこちらからダウンロード 実際のサンプル HTML <div id="tab-box"> <ul id="nav" class="clearFix"> <li><a href="#tab-01"><img src="img/nav-01.gif" alt="" width="80" height="30"/></a><
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
Unit Interactive :: Labs :: Unit PNG Fix
This domain may be for sale!
非デザイナーも知っておきたいデザインにある葛藤とホンネ
去年から恒例イベントになっているWebSig 1日学校。古い学校の校舎を使って正に学校で学んでいるような気分で参加できるこのイベント。今年は「デザイン視点のコミュニケーション術」というタイトルで講師をさせていただきました。主催者からの依頼が非常に難易度が高く、扱うトピックからスライドの完成まで悩みながら作りましたが、そのプロセスで見えたところもたくさんあり、イベントも含めて学びと出会いがたくさんありました。 なぜ『作る』以外について語ったのか デザイナーの仕事はレイアウト、UI、ルック&フィールなどを作る人。コンセプトや潜在的にあるものを視覚化出来る人と捉える方が多いと思います。作り出すことがデザイナーの能力ではありますが、語られる部分が「作る」という部分に集約してしまいがちです。しかし、実際のところ「作る」部分というのはデザイナーの能力のほんの一部でしかなく、それ以外が重要だったりします
色彩センスのいらない配色講座
3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）
webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること
miyahan.com | 液晶ディスプレイとカラーマネージメント P.2
液晶ディスプレイとカラーマネージメント 編 このページは、Apple MacBook Pro に関するトピックをまとめた「myLife with MacBook Pro」で、 大変反響を呼んだ WUXGA ワイド液晶ディスプレイに関するトピックを独立させたものです。 ◆ ページが正常に表示されていない可能性があります ◆ もしこのメッセージが表示されている場合、ページの表示に必要なファイルが読み込まれていないか、あなたがレガシーウェブブラウザを使用している可能性があります。 このウェブサイトは比較的新しいテクノロジーで制作されているため、Netscape 4、Internet Explorer 6 などの旧世代Webブラウザでは閲覧に支障を来すおそれがあります。 またこのようなブラウザは、セキュリティが不十分な可能性があります。当サイトでは、Firefox、Opera、Safari 等の安
CSS Nite LP, Disk 14 フォローアップ | gaspanik weblog
先週末の土曜日、「CSS Nite LP, Disk 14 / Photoshopper meets Fireworks」が開催されました。イベントにご来場下さった皆様、そして関係者の皆様、大変お疲れ様でした。 まずは、この場を借りてお礼を。ありがとうございました（深々）。 さて、当日はFireworks特集となるイベントでしたが、ボクの担当は他の登壇者の皆さんの内容とはちょっと毛色が異なるカラーマネジメントの話でした。「FireworksのTipsやテクニックなどを知りたい方が多いんじゃなかろうか、今回の内容に関して大丈夫かな？」と思っていたのですが、予想以上に良い反応をいただいておりホッと胸をなで下ろした次第です。 とはいえ、プレゼン自体はボロボロだったので、その反省や参加いただいたお礼をこめて当日伝えきれなかったことをこちらのエントリーにまとめてみました。 ＃前もって書いておきますが
モバイルWeb制作のためのリソース（不完全版） | gaspanik weblog
スマートフォンなどのモバイル向けのWebサイトを作るときに考えておきたいこと、制作に役立つツールなど、その辺りの情報が記載されたWebサイトを仕事でちょっとまとめることがあったので公開します。要は俺ブックマークまとめです。 常日頃溜め込んだものを身近な人たちだけに教えるのはもったいないと思いましてね。さすがに何年も前のは入れてませんし、各種公式資料みたいなものも入れていませんが、昨日今日出た新しい情報までを順不同で入れています。興味のある方はリンク先でお勉強してください（全部英語ですけどね 笑）。 ※「Responsive Web Design」とか「Adaptive Web Design」とかの情報はほとんど入れていません（抜いてますｗ）。ほぼほぼスマートフォン向けのWeb制作に特化したリンク集です。 Mobile Web Resources, BrowsersMobile Web Pr
1分で分かるFacebookタイムラインの使い方
Facebookのタイムラインの表示がなんだか分かりにくいという方へ。実際にあれこれ操作してみて、気がついた範囲で紹介します。 １．真ん中の上下に伸びている線は？ 真ん中の上下に伸びている線（赤枠部分）は「時間軸」です。一番下が生まれたとき、一番上が現在です。 また任意の位置で線をクリックすれば、クリックした時間軸に遡って記録を記すことができます。これで過去の記録をFacebookにどしどし投稿できます。 もちろん日付も指定可能です。 ２．左右のボックスは？ 2カラムレイアウトのような感じでレイアウトされている箱はFacebook上のアクション（アクティビティ）で、時間軸からのふきだしという形で左右に分けて表示されています。 ボックスにマウスをのせると右上にアイコンが表示されます。 左が投稿を目立たせたい場合にクリック。右はタイムラインの表示や投稿の削除を行うときに使います。以前のプロフィ
便利な人には便利なChromeの拡張機能 33＋1コ | gaspanik weblog
皆さんの普段使いのWebブラウザはなんですか？ ここ最近のボクはといえば、GoogleさんのChromeをメインブラウザとして使っています。Chromeも公開されているアプリや拡張機能を追加して、自分なりのブラウジング環境を作れます。そのまま使うか、拡張機能でカスタマイズするかはあなた次第です。 そんなわけで、今日は数多ある拡張機能の中からボクが選んだ入れておくと便利かもしれない拡張機能を33＋1コ集めてみました。前半は多くの人を対象に日常のブラウジング体験を快適にするもの、後半はWebサイトの開発系でちょっと役立つものといった感じでジャンル分けしてお届けします。ま、あくまでもボクが普段使ってるものベースですが…、キャプチャ中の★やユーザー数も参考に。 いくら拡張機能が便利だって言っても、入れすぎたらそれは重くなるだけですからね。適当に取捨選択して入れるなり、使う時だけオンにするなりしまし
FacebookページのGUI PSD（日本語版） | バンクーバーのうぇぶ屋
Facebookページを作る時、FacebookページGUIのPSDがあると便利ですよね。提案時、運営方針を決める時、デザイン案を出す時、本当に色んな場面で使う機会はあるかと思います。 でも、基本的にFacebookとかのGUIって英語版しか無いんですよね。 つい先日、英語と日本語のFacebookページ両方を作るプロジェクトに参加させてもらった時に、日本語のGUIテンプレを探してみたのですが無かったのでとりあえず作ってみました。 ウォール画面 タブ画面下地 Donload PSD File ついでに作った感じなので、ライセンスについてはフリーです。お役に立てればプロジェクトで使ってもらうなり、モック作成時に使ってもらうなり、ご自由にどうぞ。一応この記事へのリンク以外で再配布や転売などはお控えください。 そして、一つだけ愚痴を言えば、これ作ってるときにFacebookリニューアルの話をテレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しくなったFacebookの使い方を整理する
Fireworksで書き出したPDFを等倍でくっきり表示する方法 | Webデザインのタネ