オシャレな名刺を一発作成できる５つの名刺用Photoshopテンプレート:phpspot開発日誌
5 Free Business Card PSD's for our Readers | DesignModo オシャレな名刺を一発作成できる５つの名刺用Photoshopテンプレート。 フリーの方や、会社とは別で人と会うとなると、名刺が必要だったりしますがそんな時に使える名刺用テンプレートです。 名刺用用紙についている名刺作成ソフトなんかでも作れますが、どうも出来がカッコ悪い、という方も覚えておくとよさそう。 う〜ん。どれもオシャレです。 全部もっていてもよさそうですね。 テンプレートということで、名刺のデザインが被ってしまうかもしれませんが、それはそれでいい話のネタになるのかも。 関連エントリ プリントして使えるクールな名刺作成Photoshopチュートリアル スーパークールな名刺デザイン３６ 裏表使えるクールな名刺のPhotoshopテンプレート５
[JS]省スペースに最適、コンテンツをローテーションで拡大表示するチュートリアル
複数のコンテンツをサムネイルで配置し、ローテーションで打ち出しエリアに拡大表示するフィチャーボックスを実装するチュートリアルを紹介します。 Rotating Feature Boxes デモページ [ad#ad-2] デモでは右側に配置されたサムネイルのコンテンツをクリックすると、打ち出しエリアにアニメーションでスライド移動して、全文が表示されます。 ※アニメーションはCSS3で実装されているためChrome, Safariのみで、非対応ブラウザはアニメーション無しです。 デモページ 2番をクリックして、2番が打ち出しエリアに。 [ad#ad-2] ローテーションするフィチャーボックスの実装 HTML 3つのコンテンツはdiv要素で実装されており、それぞれidとclassを付与し、全部をdiv要素で内包します。 <div id="rotator"> <div id="block-1" cl
ウェブ開発をテーマにデザインしたウェブ制作者のためのフリーのアイコンセット
Free Icon Set for Web Developers: Coded [ad#ad-2] ダウンロードできるアイコンのフォーマットはPNG、サイズは32x32, 48x48, 128x128, 256x256, 512x512、それぞれ25種類のデザインが揃っています。 アイコンのプレビュー アイコンの利用にあたっては個人でも商用でも無料で、ソフトウェア、オンラインサービス、テンプレート・テーマファイルの開発など自由に使ってください、とのことです。
Camara support in HTML5 and JavaScript
With the rapid advancement of web technologies, web developers now have access to a plethora of features once confined to native applications. One such feature is accessing the device's camera directly from the web browser using JavaScript. This capability opens up a world of possibilities for creating interactive and immersive web experiences. Whether you're building a video conferencing app, a p
各種Webサービスに対応した埋め込みを行う·jQuery Oembed MOONGIFT
jQuery OembedはJavaScript製のオープンソース・ソフトウェア。おそらくYoutubeからはじまったであろう、自分のサイトへのコンテンツ埋め込みの機能。今や写真やプレゼンテーション、動画など様々な外部コンテンツがサイトに埋め込めるようになった。しかしここで問題なのが埋め込むコンテンツの内容が分かりづらいことだ。 各種サービスの埋め込みHTMLを生成する 大抵Flashのタグで囲まれており一般的には難解だ。Embedなどと書かれているがよく分かりづらい。そこで使ってみたいのがjQuery Oembedだ。jQuery Oembedはリンクタグにclass="oembed"を指定すると実行されるjQueryプラグインだ。 例えばFlickrの写真のリンクをURLにしてoembedの指定をすると、写真がサイト内に表示されるようになる。イメージタグを書く必要はない。同様にvime
jQuery UIでiGoogleふうメニューを作ろう！ (1/3)
Ajaxを使った今どきのWebアプリケーションでは、グーグルの「iGoogle」のように、ドラッグ＆ドロップによる直観的な操作でページ内の要素を自由に並べ替えられるユーザーインターフェースをよく見かけます。最近ではWebアプリケーションだけでなく、ポータルサイトやメディアサイトのナビゲーションメニューにも採用されるケースが目立ってきました。 今回は、jQueryの「Sortable」を使って、ドラッグ＆ドロップで要素を並べ替えられるようにする方法を紹介しましょう。Sortableを使えば、ごく簡単な方法で既存のWebページにドラッグ＆ドロップUIを実装できます。 Sortableをダウンロードしよう 「Sortable」は、リスト（ul／li）などの個々の要素をドラッグ＆ドロップ操作でユーザーが並べ替えられるようにするライブラリです。以前紹介した（関連記事）jQueryのUIライブラリ集「
NicEdit - WYSIWYG Content Editor, Inline Rich Text Application
What is NicEdit? NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing. Take boring textareas like this one in your application A Full featured rich text editor in your application i
スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」:phpspot開発日誌
qTip - The jQuery tooltip plugin - Documentation - (Current beta: 1.0.0-beta1) スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」。 またまた便利そうなツールチップが出てきました。 $('p').qtip({ .... }); のように呼び出すだけで、簡単にツールチップが埋め込めます。 ツールチップの表示タイミングも、show, hide オプションで指定するだけで簡単に変更可能です。 $('p#test').qtip({ content: 'hi! i am tooltip', show: 'mouseover', hide: 'mouseout' }); 吹き出しの位置も、qtip メソッドのオプションとして指定してあげれば簡単に設定可能。 カラーリングも自由自在。 何より、
[JS]HTMLコンテンツにも対応、カルーセルで表示するスライダーのスクリプト -jShowOff
一つ以上の子要素と、それらを内包する親要素をスライダーとして使用します。 下記は、テキストや画像を配置したdiv要素を子要素として、それらを内包するdiv要素を配置しています。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div> </div> JavaScript 「jquery.js」と「jquery.jshowoff.min.js」を外部ファイルとし、下記のスクリプトを記述します。 セレクタ（#features）は、自分の環境にあわせて変更してください。 $(document).re
自分で簡単に効果音が作成できるソフトを探しています。…
自分で簡単に効果音が作成できるソフトを探しています。googleで「効果音」「作成」で検索して出てくるようなソフトなどは一通り試しましたが、自由に思い通りの音が作成できるようなものは探し出すことができませんでした。理想は基本の音がたくさん用意されていて、ピッチや音の高低、長さなどを指定することができたり、音の合成ができたりするのもです。エレクトーン(実機)でそのような機能があったと思います。最終的に吐き出す音声ファイルはWAVと考えていますが、その他の形式でもWAVに変換できそうであればかまいません。midiというは未体験なのですが、これを機会にとっつきやすい(直感的に操作できる)作成ソフトを紹介してくださってもかまいません。よろしくお願いします。
既存のフォームをユーザーに使いやすくする10のポイント
10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調する ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすく フォームのエラーメッセージは、「あなたが下に必要とさせるフィー
写真画像をかっこいいモノクロにするPhotoshopのテクニック集 | コリス
Photoshop, Photoshop Elementsを使用してカラーの写真画像をモノクロにするテクニックはさまざまなものがあります。その代表的なテクニックとそれぞれの利点・欠点を紹介します。 元にした画像：Chase the sun 下記は各ポイントを意訳したものです。 はじめに 1. 調整レイヤー：白黒 2. モード：グレースケール 3. 調整レイヤー：色相・彩度 4. モード：Labカラー 5. 調整レイヤー：グラデーションマップ 6. 調整レイヤー：チャンネルミキサー 7. Photoshop Elements：モノクロバリエーション 8. 調整レイヤー：色相・彩度x2 9. 調整レイヤー：白黒（カラースライダー） はじめに モノクロの写真は、ファッション雑誌をはじめ、Flickrのようなソーシャルウェブサイトでも非常に人気の高いジャンルです。デジタルが到来したことで、一つ重要
Facebookのファンページを企業の大きな武器に--多くのファンを獲得する5つの方法
Facebookのファンページは企業にとって、顧客層を拡大し、ビジネスを加速させるための素晴らしい手段となる。そこで本記事では、より多くのファンを獲得するための方法を紹介する。 Facebookのファンページは顧客、あるいは潜在的な顧客とのコミュニケーションを充実させるための素晴らしい手段と言える。ファンページを用いることで、自社のサービスを現在利用している人々や、利用することに興味を持ってもらえそうな人々とつながり続けることが可能になる。ファンページを通じたこういった広報活動は、会議室のテーブル越しの対話ではなく、ピクニックテーブルを囲んだ対話だと言ってもよいだろう。ファンページは製品の発表やプロモーション、優待割引、ワークショップ、ウェビナー（ウェブ上で行われるセミナー）などに使用することができる。つまり、大衆に知ってもらいたいと思うほとんどすべての情報は、ファンページから提供すること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
新着記事