dotdotdotは、はみ出したテキストを「…」に変えてくれるjQueryプラグインです。 日本語の2バイトでの確認は必要かもですが、簡単に実装できるようです。 dotdotdot
dotdotdotは、はみ出したテキストを「…」に変えてくれるjQueryプラグインです。 日本語の2バイトでの確認は必要かもですが、簡単に実装できるようです。 dotdotdot
「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。 上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを作ることができます。 isotope アニメーションでオブジェクトの位置が変更されます ResponsiveSlides.js シンプルなクロスフェードタイプのスライドショー The Heads-Up Grid オーバーレイでグリッドラインを表示 jQuery Masonry fluidなレイアウトが実現できる scrolldeck 矢印キーでページ移動、動きのあるプレゼンテーションを可能にする Elastislide ウィンドウサイズの変更に対応した、レスポンシブなカルーセルギャラリー AUTOMATIC IMAGE
フッターをブラウザの下部に常に表示させたい。 そんなときにおすすめなのが、『CSS Sticky Footer』。ブラウザの下部にフッターを固定表示するCSSだ。 クロスブラウザで、IEやFxはもちろん、Opera、Safari、Google Chrome、Chaminoなどにも対応している。 ブラウザ対応状況は以下から。 » Here is the Full List HTML、CSSもとてもシンプルなので、ぜひ見てみてほしい。 ブラウザの下部にフッターを固定表示するCSS、チェックして使ってみてはいかがだろうか。 » CSS Sticky Footer Oisixの野菜を炒めて食べました。だいぶ減ってきたな。じゃがいもとたまねぎがうめぇ。
spyrestudiosというサイトで、かなり魅力的なjQueryチュートリアル&プラグインが紹介されています。 ざっといくつかご紹介。 » Creating a Keyboard with CSS and jQuery CSSとjQueryでPCのキーボードを実装 » Animate Curtains Opening with jQuery カーテンが開くアニメーションをjQueryで実装。↑のキャプチャはこちら » Sexy Drop Down Menu w/ jQuery & CSS するするっと消えていくクールなドロップダウンメニュー » Learning jQuery: Fading Menu – Replacing Content フェードイン&アウトして切り替わる超クールなメニュー » How to Load In and Animate Content with jQuer
クールにツールチップを表示させたい。 そんなときにおすすめなのが、『Create a jQuery Popup Bubble』。jQueryを使ったフェードインするポップアップバブルだ。 このエントリーでは、↑のようにマウスオーバーでフェードイン&アウトするチールチップの実装方法が紹介されている。 デモは以下から。 » View Demo jQueryを使ったフェードインするポップアップバブル、チェックして参考にしてみてはいかがだろうか。 » Create a jQuery Popup Bubble 恵比寿でカフェ中っと。天気がよくて気持ちいいですねーー。 テンションが上がったのでアニメGIFにしてみましたm(_ _)m
jQueryでクールなナビゲーションを作りたい。 そんなときにおすすめなのが、『8 Sites with Excellent jQuery Navigation』。素晴らしいjQueryナビゲーション8選だ。 以下にいくつかご紹介。 ↑のキャプチャはMacHeist Loot。 Carrot Creative WP Coder Grooveshark Widgets その他のリストは以下から。 » 8 Sites with Excellent jQuery Navigation 素晴らしいjQueryナビゲーション、チェックしてぜひ参考にしてみてはいかがだろうか。 恵比寿でカフェ中っと。お客さんはまだ少ないね。俺はエンジンかかってきたぞぉお。 それにしても天気のいい週末は気持ちいい。 うお、一造くんがMacBook ProのHDを500GBにしてる!すげえ。Airは、無理か。。いいなぁ。
世界のそれぞれの国で最もトラフィックのあるSNSは何だろう。 そんなときに参考になるのが、『Map of Social Networks Popularity Around The World』。世界のSNSのトラフィック数比較マップだ。 このデータは、それぞれの国のトラフィック(Alexa.comの2008年9月17日時点)をもとに、最も高い数値のSNSを示している。メンバー数やPVなどが指標ではない。 グレーの国はデータが算出不可能であった。また、いくつかの国でSNSサービスを特定することができなかった。 とのことだ。 ロシア全土を覆っているv kontakteや、中国のxiaoneiが気になりますね。 v kontakteはロシア版mixi、xiaoneiは2005年12月に設立されたキャンパスSNSコミュニティのようです。全世界にまたがるFacebookはやっぱりすごいですね。 世
ロゴをデザインしたい。 そんなときにおすすめなのが、『45 Rules for Creating a Great Logo Design』。素晴らしいロゴをデザインするための45の法則だ。 以下にご紹介。 3つ以上の色を使わない。 絶対に必要というわけでないものはすべて除外する。 文字はあなたの祖母でも簡単に読めなければならない。 ロゴとはっきり認識できなければならない。 ロゴにユニークな形やレイアウトを取り入れる。 あなたの親や配偶者がデザインについて思うことを徹底的に無視する。 3人以上の人にロゴが魅力的に見えるかを確認する。 有名なロゴの要素を使ってオリジナルだと主張しない。 どんな場合でもイラスト集を使わない。 ロゴは白黒でもかっこよく見えるべき。 逆さにしても認識できること。 リサイズしても認識できること。 ロゴがアイコンやシンボル、テキストを含む場合、それぞれ良さが引き立つよう
BATA版のサービスだが、勢いでご紹介。 『SocialGO』は、自分のソーシャルネットワークが作れるサービスだ。 サブドメインが与えられ、例えば↓のようなサイトを作ることができる。 » Sticky and Sweet Magazine » Mountview School 周りの友人に呼びかけて、共同で作ってみると面白いのではないだろうか。 現在はBETA版となっていて、ユーザー登録には「invite code」が必要だ。コードは↓からリクエストできる。 » Register interest コードが送られてくればレビューしたい。 自分のソーシャルネットワークが作れるサービス、ぜひチェックしてみてはいかがだろうか。 ちょっとサイトを制作中〜っと。なかなかいいかも。周りから少しずつ使ってもらおうかな。
さて、ちょっといろいろ調べていて、RSSティッカーを実装しました!! Evernoteで使われているティッカーですね。実装したくなり調べていたんですが、MITライセンスのJavascriptだということがわかり、使わせてもらいました。 RSSがふわっふわっとフェードイン・アウトしながらローテーションします。RSSティッカーの中でも最高にかっこいいのでは。 それでは実装方法をご紹介。 ■HTML <div id="ticker"><!–空のままにしておく。ここにRSSが書き出される。–></div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="rsswidget.js"></script> <script type="text/javascript">
コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。 以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッドレイアウトなど、たくさんのCSSレイアウトを配布 » Code Sucks 90のフリーCSSレイアウト » Layout Gala 40のCSSレイアウト » CSS Creator 幅や背景色などを指定してXHTMLソースが生成できる » Whiteboard フリーのワードプレステーマフレームワーク » Yet Another Multi-Column Layout モダンで拡張性のあるレイ
かなり簡単な話題ですが。。メモ的にエントリー。 ブログパーツを作りたいとき、Flashなどで動的に作ったものをユーザに貼付けてもらうとすると、以下のようなソースを提供すればいいですね。 <script language=”JavaScript” type=”text/javascript” src=”test.js” ></script> そして「test.js」の中身は以下のようになります。 document.writeln(‘<object classid=”clsid:…” “(省略)” /></object>’); objectタグはFlashのソースですね。つまり、「document.writeln(”);」の中にFlashのobjectタグを入れればいいですね。 そしてHTMLで「test.js」を呼び出すと、document.writelnでHTMLの中にソースが書かれると。
テクスチャやパターンが綺麗なサイトをデザインの参考にしたい。 そんなあなたにおすすめなのが、『Textures and Patterns Design Showcase』。テクスチャ&パターンデザインサイト集だ。 以下にいくつかご紹介。 » BgPatterns パターンを探したり作ったりして共有できるサイト » The Paisley Farmhouse 背景画像として使えるレトロなパターン。↑のキャプチャはこのサイト » Renegade Latino ダークなトーンの背景画像 » Uniquexports オンラインショップ用のパターン » Falko Seidel 古いセーターや内装の壁に見られるようなタイルデザイン » Soyrosa 背景画像として使えるストライプ その他のリストは以下から。 » Textures and Patterns Design Showcase テクス
ダイエットのために習慣から変えたい。 そんなあなたにおすすめなのが、『14 Habits That Make You Fat』。あなたを太らせる14の習慣だ。 以下にご紹介。 1.TVを見る 最近の研究で、1日にTVを2時間ほど見る人は30分ほどしか見ない人に比べて太っている傾向がある、ということがわかった。 2.食べるのが速い 速く食べる人はお腹いっぱいになっていることに気づかないで食べ過ぎてしまう 3.間食をする 食べながら別の作業をしてしまう 4.ファーストフードをよく食べる 高カロリーのファーストフードを食べてしまう 5.感情をコントロールするために食べてしまう ストレスのために食べ過ぎたりしてしまう 6.忙しくて運動する暇がない 7.太っている友人がいる 太っている友人がいる人は37%から57%の割合で太っている 8.睡眠不足 Bristol大学の研究によると、1時間の睡眠を削る
今日食べたものを記録していきたい。 そんなあなたにおすすめなのが、『Tweet what you eat !』。何を食べたかを記録していくサービスだ。 『Tweet what you eat !』は、以下のようにして始めることができる。 Twitter上で「follow twye」と打って投稿。 d twye 食べ物の名前:カロリー と投稿。 これで何を食べたか、そのカロリーはいくらかを投稿できる。 カロリーも自動計算してくれたりすると便利だが、Twitterから「何を食べたか」を集めていくという発想は面白いのではないだろうか。 何を食べたかを記録していくサービス、チェックしてぜひ使ってみていただきたい。 Twitter系のネタが続きますが。。カロリー計算にはこちらをどうぞ! » Calorie Note さて運動してからまた仕事だな。
DiaryTechnology あのサイトのAjax、Javascriptを実装するための方法60選『60 More AJAX- and Javascript Solutions For Professional Coding』 あのかっこいいサイトのAjaxを取り入れたい。 そんなあなたにおすすめなのが、『60 More AJAX- and Javascript Solutions For Professional Coding』。あのサイトのAjax、Javascriptを実装するための方法60選だ。 ↑はCoda Popup Bubbles。 クールなポップアップメッセージが表示される。 » iCarousel carouselを作るためのオープンソース(フリー)Javascript » Product Slider スライダーで商品を選択できるインターフェース » Oversize
DiaryTechnology 美しいJavascript & Flashギャラリー33選『33 Most Beautiful Javascript and Flash Galleries』 写真をディスプレイできるギャラリーを作りたい。 そんなあなたにおすすめなのが、『33 Most Beautiful Javascript and Flash Galleries』。美しいJavascript & Flashギャラリー33選だ。 以下にいくつかご紹介。 » LightWindow lightbox風のクールなjavascript » Spry 画像がズームイン&アウトする素晴らしいインターフェース » Imago シンプルなAJaxイメージギャラリー » Flash Photo Stack 写真の束からめくるように写真を見られるFlashテンプレート » AutoViewer 水平ライン
Adobe Airで何かアプリケーションが作りたい。 そんなあなたにおすすめなのが、『10 Adobe Air Apps Worth A Look』。注目したいAdobe Airアプリ10選だ。 以下にご紹介。 » AOL Top 100 Videos AOLの音楽セクションからTOP100のビデオが見られる » Chorducopia ギターコードを勉強するためのツール » Color Browser いろいろなプロジェクトに使えるデザイナーのためのカラースキーム » Google Analytics デスクトップでGoogle Analyticsを見られる。ブラウザでみるより速い » Klok 時間管理ツール » MyStylez.com MySpaceをオフラインで更新してオンラインになったときに同期してくれる » NetBook オンラインでもProject Gutenberg L
DiaryTechnology 効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』 かっこいいインターフェースをCSSで実現したい。 そんなあなたにおすすめなのが、『Powerful CSS-Techniques For Effective Coding』。Smashing Magazineによる、効果的なコーディングのための強力CSSテクニック集だ。 以下にいくつかご紹介。 » Triadic Background Setting with CSS Silverbackのサイト。シンプルなCSSで3枚の背景画像を重ねて3D効果を出している。ドキュメントはないがソースコードを見るだけでとても刺激的 » Creative Use of PNG Transparency in Web Design We
Flashの腕を上げたい。 そんなあなたにおすすめなのが、『Adobe Flash Tutorials – Best of』。最高のFlashチュートリアル集だ。 以下にいくつかご紹介。 » Flash Tutorial Create Water Wave Effect Animation Using Masking Tween マスクを使って波を表現するアニメーション » Car Animation BMW3を使ってインパクトのあるアニメーションを作る方法 » Picture Animation ブラシツールとマスクを使ったテクニック » High-tech city animation 街から出る光を表現したアニメーション » Animate a Logo in Flash ロゴにシンプルなアニメーションをかける方法 flaファイルを配布してくれているサイトもあり、かなり使えるだろう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く