グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> </textarea>

jQuery Sequential List おしゃれなリスト実装サンプル。次のようなリストをjQueryを活用して簡単実装するサンプルです。 プレーンなリスト要素に、jQueryを使って、classを item1, item2のように自動付与していきます。 あらかじめ、 li.item1, li.item2 のようにして定義しておいたCSSを適用させて、実現されています。 JavaScript+CSSのテクニックとしては勿論使えるものですが、そもそものリストがカッコいいので再利用したいところですね。 丸いバッジ型もなかなかセンスがいいです。

GmailなどのWebメールや、その他Webツールのアカウントをご利用の方は、そのアカウントを複数取得して使い分けていることも多いと思います。 しかし、この複数アカウントでのWebサービスの利用というのは、それらを切り替えながら利用するのが面倒だという部分もありますね。 たとえば、Gmailアカウントを複数持っている場合、アカウントAでログインすると、以降はそのアカウントが記憶され、アカウントBでログインしたい場合は、一旦サービスからログアウトして、再度アカウントBでログインし直さなければならないということになります。 毎回ログアウトしていない場合は、それ以降アカウントBでログインされるようになってしまいまたAに戻さなくてはならないなど、ややこしいことになってしまうことがありますね。 そんなユーザーが、手軽にアカウントを切り替えることができるFirefoxアドオンが「CookieSwap」

スクリプトやフラッシュを使用しないで、スタイルシートだけで実装する折れ線グラフをcss globeから紹介します。

ロゴなどで使われているフォントが知りたい。 そんなときにおすすめなのが、『WhatTheFont!』。画像から何のフォントか調べてくれるサイトだ。 このサイトでは、画像をアップロードするか、URLを指定することで、フォントが何のフォントかを調べてくれる。 ↑はアップする画像の注意点だ。フォントは離れていた方がいい、ボトムラインは揃っていた方がいいなど。 早速アップしてみる。 KhodaaBloomのロゴを拝借。 「K」と「B」を認識してくれた。ほかのはつながっちゃってるからね。 判定結果。ドラッグして比較しながら似ているかどうかを確認できる。 残念ながらこのロゴの場合いい結果は見つからなかったが、そんな場合は以下を試してみるといい。 No good match? Consult an expert Submit your image to the WhatTheFont Forum to

2009年2月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 HTMLソースにコメントやタグを埋め込むだけだから、デザインは自由自在。XHTML＋CSSさえ、理解していれば簡単にサイト構築ができる。 前回の「XAMMPインストール編」に続き、SOY CMSレポート後編。今回はSOY CMSの特徴を理解すべく、チュートリアルをやってみました。 Webにシステムを利用する場合、ある程度のデザインの制約がおこる場合が多いが、SOY CMSは、特別なテンプレートをもたず、既存のHTMLに、システムで変更したい部分をコメントやタグで囲むだけなので、デザインは自由自在。 そして、更新の容易さはブログなみで、特別な管理者を必要としない。 となれば、システム担当者のいない、小さなWeb制作会社や、個人