必要のないときはコードを隠してエントリをすっきりさせるjavascript活用術 | SiMPLE*SiMPLE
必要のないときはコードを隠してエントリをすっきりさせるjavascript活用術 May 7, 2007 8:08 AM written by 8maki DevthoughtのブログでCSSやJavascriptの記事が書かれていました。けれども肝心のコードが見当たりません。 "Click here to see HTML code"という気になる部分にマウスオーバーすると･･･。 アイコンがちょこっと動いて、そこに何かがあることを知らせてくれます。実はこの部分をクリックして初めてコードが登場します。 コードが長いと文章が見にくくなってしまいますが、こうやって要らないときは隠しておけばエントリー全体がすっきりして内容をざっと把握できますね。 JavascriptやCSSの記事でコードは重要なポイントとなりますが、普段は隠す、でも見たいときにはアニメーションで強調、という新しい切り口です。
あらゆるページにもっと高機能な拡大鏡を追加できる『TJPzoom.js』 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
昨日ご紹介した「あらゆるページに拡大鏡を追加できる『Loupe.js』」の高機能版ともいうべきスクリプトをご紹介。 TJPzoomを使えば画像に拡大鏡をつけられる上、マウスドラッグでさらに拡大したり、高解像度の写真を別に用意しておいて拡大時にそっちを表示できたりします。 以下に簡単に使い方をご紹介。まずは基本パターン。 最初にスクリプトを導入。 <script type="text/javascript" src="tjpzoom.js"></script> 次に画像のコードを以下のように変更。divタグをつけるのと、widthタグをつけるのを忘れずに。 <div> <img src="test.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this);"> </div> なお、このほかにいくつかの画像ファイルを
Error 404 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
印象に残るメニューのデザインまとめ March 8, 2007 10:02 PM written by Gen Taguchi 良いメニューは印象に残りますよね。 ということで今日はメニュー系のデザインをまとまた人の記事をご紹介。 » 8 web menus you just can't miss 全部で8つありますね。個人的に気に入ったものをピックアップ。 ↑ シンプルかつスタイリッシュ。 ↑ ちょっとB-BOY風（謎）。 ↑ ウルトラシンプル。悪くないですね・・・。 ↑ Mac OS風。 ↑ diggっぽい？ 以上のデザインはこのサイトでダウンロードもできますよ（.rar形式なんでちょっとマニアックですが・・）。よろしければどうぞ。 » 8 web menus you just can't miss Info: ナビゲーション | 固定リンク | コメント (0) | トラックバッ
CSSとPHPできれいなグラフを描く方法 | SIMPLE*SIMPLE
terrill.caにてCSSとPHPできれいなグラフを描く方法が紹介されていました。 » terrill.ca | Vertical Bar Graphs using CSS and PHP 棒グラフや立体グラフなどがCSSのスタイルで描けます。PHPはデータの抽出と縮尺の設定だけなので、必要でない方は紹介されているCSSだけ使っても良いかも。 ↓なグラフや、 ↓なグラフが描けます。 なお、HTMLのほうの記述は以下のような感じです。わかりやすいですね。変更も簡単かと。 <ul class="barGraph"> <li class="p1" style="height: 57px; left: 0px;">57</li> <li class="p2" style="height: 27px; left: 0px;">27</li> <li class="p3" style="heigh
ローディングをコンテンツ化してしまった『Picnik』 | SiMPLE*SiMPLE
ローディングをコンテンツ化してしまった『Picnik』 February 6, 2007 11:20 AM written by watanabe pop*popでも紹介したPicnikですが、角度を変えればsimple*simple的小ネタになります。 Picnikでは最初にコンテンツをロードするのですが、そのローディング画面がなかなか素敵です。「ロード中・・・」のテキストがなんだか癒し系なのですｗ。 ↑ 「凧をとばしています」 ↑ 「花を咲かせています」 ↑ 「草を育てています」 などなど、いろんな微笑ましいネタが用意されています。ローディングのときも飽きさせないような工夫。たまっていくゲージを題材として、隠れた腕の見せどころにできそうですね。 » Picnik Info: FLASH | 固定リンク | コメント (0) | トラックバック (0) | ↑
こっそり一言メッセージ | SiMPLE*SiMPLE
こっそり一言メッセージ January 25, 2007 9:06 AM written by 8maki たつをさんのブログ、たつをのChangeLogにはコメントフォームがありません。 代わりに一言メッセージというのが付いています。 一言メッセージはたつをさんだけに送られるようです。メールよりも簡単で、コメントよりもパーソナル。 ちょっとした工夫ですが、読者との接点を大切にするたつをさんなりの工夫がうかがえました。 » たつをのChangeLog Info: 特殊効果 | 固定リンク | コメント (0) | トラックバック (1) | ↑ この記事のトラックバックURL （トラックバックは承認後に公開されます） [を] こっそり一言メッセージ 一言メッセージ機能[2005-01-30-3]が、simple x simple で紹介されていまし ... たつをのＣｈａｎｇｅＬｏｇ
いらないときは隠すインターフェース | SiMPLE*SiMPLE
いらないときは隠すインターフェース January 11, 2007 8:00 AM written by watanabe シンプルさを追求するには、削れるものをそぎ落としていく作業と同時に、きちんと意味が伝わるような工夫が必要なのかなと思います。 そういう意味で、シンプルなスペルチェッカーspellifyは参考にできそうです。 ↑ 画面には、フォームしかありませんが・・・ ↑ フォームをクリックすると使い方の説明がすーっとあらわれ、フォームの外をクリックするとすーっと消えます。 あまり使い慣れていない画面ではどうかと思いますが、検索窓のようにある程度何をするかわかっているところで、こうした「隠れ説明」が必要なときだけ出てくるというのも悪くないですね（少なくともちょっとした驚きがありました）。 場所にもよるかと思いますが、「必要なときには表示して、いらないときには隠しておく」というインタ
ToDoをタグクラウドで表現する『Zirr.us』 | S i M P L E * S i M P L E
今までいろいろなToDoリストを見てきましたが、Zirr.usのインターフェースはちょっと斬新。ToDoをタグクラウドで表現しています。なるほど、という組み合わせですね。 » Zirr.us ↑ 優先度によってサイズが変わり、タグによって色分けされるという寸法。 ↑ 名前や日付、優先順位でタグクラウドのソートもできます。 タグクラウドの表現はどうあるべきか？というエントリーを最近書きましたが、タグクラウドの応用についても考えられそうですね。 ToDoを大きさで分類すると言う意味では百式管理人考案のバブルマップにも似ていますね。 » バブルマップのすすめ ～ ストレスすっきり解消型ToDo管理手法 ～ 登録も無料ですし、操作もAjaxで快適なので気になる人はちょっと試してみては・・・（ただ、日本語が通らないのですが・・・）。 » Zirr.us
いつでもコメントしてもらえるインターフェース | SiMPLE*SiMPLE
いつでもコメントしてもらえるインターフェース December 25, 2006 9:00 AM written by watanabe 以前、このブログでいつでもブックマークしてもらえるインターフェースというエントリーを書きましたが、今回はそのコメントフォーム版です。 画面をスクロールしても、コメントフォームが常に右に表示されるようになっています。ちなみにFirefoxでは動きましたが、IEではだめでした。 言葉でいってもわかりにくいので動画でどうぞ。 エントリーを読み返しながらコメントできるのは、便利ですよね。ショッピングカートがついてくるようなECサイトも、すでにあるんでしょうか。調べてみたいと思います。 Info: ナビゲーション | 固定リンク | コメント (0) | トラックバック (0) | ↑
イメージマップをAjaxで生成『HTML-Image map Creator』 | SiMPLE*SiMPLE
イメージマップをAjaxで生成『HTML-Image map Creator』 December 23, 2006 12:40 AM written by Gen Taguchi これ、ちょっと便利。画像の特定部分がクリッカブルになっている「イメージマップ」を簡単に作れます。ツールがちょっと手元にないなぁ、なんてときに便利。 ↑ 作業はこんな感じで。画像のURLを指定し、画像上でダブルクリックして線引きを開始。そのあとクリックして領域指定、ダブルクリックで終了。 ↑ 作業結果はリアルタイムでコードに反映されていきます。<img>タグの中身や、リンク先は手作業で変更。 最近「イメージマップ」がはやっているかどうかが微妙ですが（なんかユーザビリティ/アクセシビリティ的に問題ありそう）、知っておいて損はないですな。よろしければどうぞ。 » HTML-Image map Creator WYSIW
『ウェブ2.0 HOW-TO デザインガイド』がよくまとまっています | S i M P L E * S i M P L E
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。 » Web 2.0 how-to design guide 15の項目でまとめられていますね。 Simplicity（とにかくシンプルに！） Central layout（真ん中に寄せるレイアウトで） Fewer columns（段組は少なめに） Separate top section（トップ部分は分けて目立たせよう！） Solid areas of screen real-estate（レイアウトにはメリハリをつけて） Simple nav（ナビゲーションはシンプルに！） Bold logos（ロゴは大きめに！） Bigger text（フォントも大きめに） Bold
勝手ながら『Web 2.1のデザインパターン』を考えてみた | S i M P L E * S i M P L E
さてデザイナーでもなんでもないのでかなり個人的な主張ですが、「Web 2.0っぽいデザイン」の次を考えてみました。 名づけて『Web 2.1のデザインパターン』ｗ。 個人的には「角丸の次って何よ？」と常々思っていたので、最近新しく出てきたサイトに共通するいくつかの特徴をまとめてみました。 かな～り主観なので「そうかぁ？」と思われる方もいらっしゃるとは思いますが・・・間違いを恐れずにメモ書き程度にエントリーです。 では早速。僕が感じている「次っぽいデザイン」の特徴は4つ。 【1】 極太ストライプ（Bold Stripe） ストライプはWeb 2.0っぽいデザインでも流行っていますが、それをもちょっと太くしたやつを最近よく見ます。 ↑ タイトルと背景が太いストライプに。 ↑ 細いストライプはWeb 2.0っぽかったですが、最近はちょっと太めが流行りかな。 【2】 極太枠線（Bold Borde
自社紹介ページにも人気コンテンツを | SiMPLE*SiMPLE
自社紹介ページにも人気コンテンツを December 19, 2006 2:18 AM written by Gen Taguchi さてただいま開発合宿中だが、あまり進捗がないと報告会では「便利ツールのご紹介」でお茶を濁すことにしているｗ。 ブログでもそうだが、ちょっとしたツールの紹介はいつでも人気である。「ツールのご紹介」は良質なコンテンツの代表格でもあるのだ（と個人的に思う）。 そう考えるとmoo.comの会社紹介はなかなか素敵だ。 » moo | we love to print （aboutページ） このサイトでは自社紹介にて「我々はこんなツールを使っています！」を開示している。一般的にあまりおもしろくない自社紹介ページを「ツール紹介」というコンテンツにしてしまった点が秀逸である。 ちょっとしたことだけど、小さな会社ならこういう自社紹介もありですね。 Info: その他 | 固定
【無料ミニアイコン集】 サンタからのちょっと早い贈り物『Mini Icon 2』 | S i M P L E * S i M P L E
かわいらしいミニサイズのアイコンを配布しているBrand Spanking Newのサイトで一足早いクリスマスプレゼントが配布されていました。 113の超ミニアイコンです。サイズは10×10。かわいらしいすね。 これらを使ってなんかのアプリ作っちゃおうかな。携帯アプリとかいいかも。 ダウンロードは下記のサイトからどうぞ。 » HoHoHo! （mini Icon 2） また、Mini Icon 2とうたうからには他にもあります。よろしければどうぞ。どれもいい感じっす。 » Doc Type Icon » Mini Icon Pack 1
退会後のアカウントはどうなる？のまとめ | S i M P L E * S i M P L E
退会後のアカウントはどうなる？のまとめ December 7, 2006 4:07 AM written by Ryuhei So これだけネットの利用が日常的になると、よく使うサービスのアカウント名が自分を表す別名として機能してきます。 ただ、このアカウント名が退会後にどうなるか気になったことはありませんか？ 自分（と他の人）が慣れ親しんできたこのアカウント名を他の人が使うことができるのでしょうか？それとも永久にそのアカウントは使われないのでしょうか？ そこで今回はGmail、Hotmail、Yahoo!、Skypeの4つのメールサービスおよびメッセンジャーサービス、さらにBlogger、はてなダイアリー、Typepadの3つのブログサービスについて、自分の別名として機能していたアカウント名の退会後の取り扱いをまとめてみました。 ■ メールおよびメッセンジャーサービス 各サービスのヘルプ
CSSだけで文字にドロップシャドウをつける方法（あまり良くない方法） | SIMPLE*SIMPLE
Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。 » Good-Looking, Sharp Offset, CSS Text Styling 実例はこちら。 ↑ 適用前。 ↑ 適用後。かっくいい。 やり方はいわれてみれば簡単で、1pxずらして影をつけただけ（というか影を先に書くのか）。 実際のコードは以下のような感じですね。スタイルシートには次のように記述します。 h1 { color: #000; position: relative; } h1 span { color: #fff; display: block; position: absolute; top: -1px; left: -1px; } 実際のHTMLの方はこんな感じ。 <h1><span>Lorem Ipsum</span>Lorem Ips
あるウェブサイトができるまでのアニメーション | SiMPLE*SiMPLE
あるウェブサイトができるまでのアニメーション November 25, 2006 2:18 PM written by Gen Taguchi これ、自分で以前どこかで紹介したらしいのですが（多分mixi日記）、こっちでも紹介しておきましょう。 あるウェブサイトができるまでをアニメーションにしてあります（下の画像をクリックするとアニメーションにとびます）。 ↑ そうそうこんな感じ・・・。 テキストからはじまって、CSSを定義して、画像をいれて、というぐあいに見ることができて素敵です。 » designline-openair.gif 以前百式で紹介したTimeSnapperを使えば簡単に自分でもできそうですね。 » レコード＆レビュー （TimeSnapper.com） | 100SHIKI.COM Info: その他 | 固定リンク | コメント (1) | トラックバック (1)
Web 2.0のデザインパターン | S i M P L E * S i M P L E
Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです（「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・）。 さて、ではポイントをば。 ■ グレーの次はグリーンだ！ 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命！ Rounded Cornersは新しい標準す。 ■ 「無料！」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は？素材集す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンテンツを評価する新指標、『Batting Average』とは？ | S i M P L E * S i M P L E
動画共有サイトに見る口コミのメカニズムまとめ | S i M P L E * S i M P L E
