jQueryで実現するリッチな表現のメニュー「10 Fresh jQuery Tutorials to Enhance Navigation Menus」
軽量のjavascriptライブラリとして幅広く利用されているjQuery。その機能は多岐にわたり様々なプラグインやパッケージが後悔されていますが、今日紹介するのはjQueryの中でもナビゲーションに絞って紹介しているエントリー「10 Fresh jQuery Tutorials to Enhance Navigation Menus」です。 Horizontal Scroll Menu with jQuery Tutorial 詳しくは以下 ■Spritemenu フェードインやアコーディオンなどのマウスオーバーアクションが付けられるメニュー ■Sexy Drop Down Menu w/ jQuery & CSS FLASHメニューのようなスムーズなアニメーションを見せるドロップダウンメニュー ■A Simple and Beautiful jQuery Accordion Tutor
イラストレーターのチュートリアル22選「22 Very Useful Adobe Illustrator Tutorials」
TOP > Design , vector > イラストレーターのチュートリアル22選「22 Very Useful Adobe Illustrator Tutorials」 デザイン業界には必須のアプリケーション。イラストレーター多くのクリエイターが利用しているかと思います。今日紹介するのはそんなイラストレーターのチュートリアルを集めたエントリー「22 Very Useful Adobe Illustrator Tutorials」です。 Design with Swirls and Flourishes WEBのワイヤーフレームから、グラフィックテクニックまで幅広いチュートリアルが記載されています。今日はその中からいくつか気になったチュートリアルをピックアップして紹介したいと思います。 詳しくは以下 ■Illustrator full spectrum spirograph 色
最新のjQueryプラグインとチュートリアル25選「25 Fresh and New jQuery Plugins and Tutorials」
TOP > WebDesign > 最新のjQueryプラグインとチュートリアル25選「25 Fresh and New jQuery Plugins and Tutorials」 軽量でなおかつ様々な動作が可能な人気のプラグイン「jQuery」。世界中で利用されており、そのテクニックも豊富ですが、今日紹介するのは比較的新しいチュートリアルやテクニックを集めたエントリー「25 Fresh and New jQuery Plugins and Tutorials」です。 Create Featured Content Slider ツールチップからスライダー式のギャラリー、サウンドプレイヤーなどなどjQueryで実現できる様々なテクニックが紹介されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■vTip シンプルで使い勝手が良
クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」
TOP > WebDesign > クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」 IE、Firefox、safariなどを始めとして様々なブラウザがリリースされていて、制作者サイドにはブラウザ間の差異を極力少なくすると言うのは使命の一つだと思いますが、構成によってはなかなか難しく手こずったりする場合があります。今日紹介する「15+ techniques and tools for cross browser CSS coding」はクロスブラウザの為のCSSテクニックを集めたエントリーです。 CSSをリセットする方法からIE用のCSSを読み込ます方法等々、様々なCSSのテクニックが紹介されていますが、今日はその中からいくつか気になったモノをピックアップして紹介したいと思います。
ECサイト制作者のためのデザインリソース「ecommr」
ASPやオープンソースなどでECサイトを構築する敷居も相当下がってきて、世間的にもインターネットでの販売が当たり前になってきた部分があり、ECサイトを運営しているという方は以外と多いのではないでしょうか？ 今日紹介するのはECサイトのデザインのリソースをあつめたWEBサイト「ecommr」です。ECサイトのなかでもサイト全体ではなく、インターフェイス毎にデザインが収録されています。 詳しくは以下 デザインはカテゴリー別に登録されており、大きなところエレメント単位、サイト単位にわけられて登録されていて、さらにそこから細かくエレメント単位だと、カートに入れる、サーバーエラー、ナビゲーションなどなど様々な部位別にデザインを参照する事が可能です。 ECはインターフェイスの良し、悪しが直接売り上げに影響を及ぼす可能性があるだけに、デザインや作りには十分気をつけたいところ、日本と海外ではデザインやユー
音楽プレイヤーからスライドショーまでjQueryチュートリアル10「Top10 Simplest jQuery Tutorial」
TOP > WebDesign > 音楽プレイヤーからスライドショーまでjQueryチュートリアル10「Top10 Simplest jQuery Tutorial」 様々な仕掛けや、仕組みを簡単に実装できるjQuery。WEB上では良く見かけますが、今日紹介するのはそんなjQueryを使ったテクニックをあつめたエントリー「Top10 Simplest jQuery Tutorial」を紹介したいと思います。 FancyBox 様々なjQueryを使ったチュートリアルが公開されていますが、今日はその中からいくつか気になったチュートリアルをピックアップして紹介したいと思います。 詳しくは以下 ■Jcrop グラフィックアプリケーションのようなスコープ。選択した範囲に様々な処理が加えられます。 ■AJAX Upload Ajaxも利用した、一般的なアップローダ。主要なブラウザで動作可能
jQueryで実現するフルスクリーンスライドショー「supersized」
全画面の写真のスライドショーは迫力があり、写真や作品の魅力を十分に伝えてくれます。皆さんは全画面の写真スライドをWEB上で制作するときどういった物をつかっていますでしょうか？今日紹介するのはJQueryで実現するフルスクリーンスライドショー「supersized」です。 実装もものすごく簡単で、ソースファイルを丸ごとダウンロードできますので、収録されているphpを改変していけば簡単にカスタマイズもできるようになっています。 詳しくは以下 オプションとしてある程度スライドショー制御に必要なパラメーターが割り当てられていて、簡単にエフェクトやスピード等を制御できるようになっています。またデザインはCSSで制御されているみたいなので、ある程度自分の思った通りのデザインに変更する事ができます。 公式サイトは英語ですが、普段からWEBを制作している人や触れている人は問題なく理解できるかと思います。フ
jQuery、CSSなどなどWEB開発に役立つチュートリアル集「30+ Eye-Opening Web Development Screencasts」
jQuery、CSSなどなどWEB開発に役立つチュートリアル集「30+ Eye-Opening Web Development Screencasts」 WEBの技術は日々進歩していて、様々な技術、技法が世の中には溢れていますが、今回紹介するのはjQueryやCSS、PHP、ASP、Ruby on Railsなどなど項目毎に、WEB開発に役に立つチュートリアルを30以上まとめたエントリー「30+ Eye-Opening Web Development Screencasts」です。 どれも実用的で、役に立ちそうなものが多いのですが、今回は紹介されている中から特に気になったチュートリアルをピックアップして紹介したいと思います。 詳しくは以下 ■Coda Slider Effect jQueryを使ったスライダーです。カーソルです、メニューからでもカーソルでも自由に動かせます。 ■ Desig
フリーのテンプレート配布サイトをまとめた「40 Free Web Template Resources」
WEBサイトを制作するとき、一から制作するのはとても面倒で、少しでもベースがあれば随分と作業は短縮される事が多いです。今日紹介する「40 Free Web Template Resources」と言うエントリーは海外のフリーテンプレートを配布しているサイトをまとめたエントリーです。 全部で40ものサイトが紹介されていますが、今日はその中から気になるテンプレート配布サイトをピックアップして紹介したいと思います。 詳しくは以下 ■Free Web Templates FLASHを交えたテンプレートが多いです。デザインはゴテゴテした感じのものからスッキリしたものまで幅広い感じです。 ■Open Design Community HTMLとCSSで組まれたテンプレートがおよそ1100収録されています。 ■CSS Layouts: A collection of 168 Grid and CSS L
クールな無料CSSテンプレート集「CSS 4 Free」
サイトを立ち上げるときに非常に役に立ってくれるのがテンプレート。ベースがあるのとないのでは手間は大幅に違ってきます。今日紹介するのはクールなCSSテンプレートが無料でダウンロードできる「Css 4 Free」です。 良くあるデザインといえばそうなのですが、テンプレートのサムネイルとユーザーのレーティングが表示されていますので、テンプレートを選ぶ側には非常に優しいインターフェイスとなっています。またテンプレートはタグ付けされており、タグから探すことも可能です。 詳しくは以下 ↑現在一番評価の高いテンプレート ダウンロードはフロッピーのマークからもしくはテンプレート個別ページの「Download Now」からダウンロードすることが可能です。 配布されているテンプレートはGPLまたはCreative Commonsライセンスのもとで配布されていて無料で利用することが可能です。またテンプレートは投
【FreeFont】ボタン糸を通した様なフリーフォント「ABC BUTTON」
ボタンと言ってもスイッチ的な物のボタンではなく、衣服などの付けるボタンにスポットを当てたWEBサイトが今回紹介する「ABC BUTTON」です。下記のサイトのスクリーンショットからもわかるかと思いますが、ボタンに特化したコンテンツを配信しています。 ここまでボタンに特化したサイトはめずらしんじゃないでしょうか？コンテンツとして、ボタンの穴に糸を通したようなボタンにちなんだフリーフォントが公開されているみたいなので下記に紹介します。 詳しくは以下 ↑配布されているフォントのサンプル表示 フォントはzipで圧縮されて配布されていて、オープンタイプで公開されています。サイトのトップ画面にあるようなボタンの穴の縫いつけを表現しているみたいです。手書きの様な柔らかいタッチが魅力的ですね。ダウンロードは「ABC Button: Font」のページの「ABC_Button.zip」というテキストリンクか
オープンソースベクターデータが無料でダウンロードできる「Open Source Vectors」
今までベクターデータを扱うサイトは多々紹介してきましたが、今回紹介する「Open Source Vectors」はユーザー投稿式のベクターデータのダウンロードサイトです。 数々のベクターデータが投稿されていてどれも無料でダウンロードすることができます。登録されている数はまだ公開されたばかりなのかそこまで数は多くありませんが、まとまっていてインターフェイスもシンプルで好感が持てます。 詳しくは以下 現在投稿されているベクターデータは基本的にはクリップアートみたいなベクターデータが多かったです。参考までにベクターデータのスクリーンショットを下記に載せておきます。 オープンソースとなっていますが、全てのベクターデータは「Creative Commons Attribution 3.0 Unported」で定められた条件を元に使用することができます。登録式で投稿もできるみたいです。今後ユーザーが増
詳細な設定ができる鏡面画像ジェネレーター「Wet Floor Maker」
WEB2.0的なデザインとして普及した鏡面画像処理。photoshopを初めとした画像編集ソフトを使わなくても、あらゆるところで簡単に実現できるサービスが存在しますが、今日紹介する「Wet Floor Maker」はそんなサービスの中でもかなり細かい所まで設定できる鏡面画像ジェネレーターです。 320×240と生成できる画像サイズが制限されている物の、カメラの高さやアングル、鏡面の透明度など細かい指定が可能です。 詳しくは以下 実際制作してみた鏡面画像 使い方は至って簡単で、各パラメータをセットして、「Generate Image」のボタンを押すだけでPNG形式で生成されます。 Advanced Settingsがcoming soon!になっていたりSelect A Sizeで選択はできない物の高解像度のラジオボックスが準備されていたりと拡張予定はあるみたいです。簡単に少し凝った鏡面画像
デザイン素材専用サーチエンジン「Design Resources Search Engine」
デザインをする時、非常に便利なのが写真やシェイプなどの素材。うまく生かせば多大にかかる手間を軽減させながらも、よりクオリティの高い物が作れたりしますが、求めている物は見つからない場合が多いです。そんな時に便利なサイトが今回紹介するデザイン素材専用サーチエンジン「Design Resources Search Engine」です。 このサイトは海外でも有数の素材サイト「Deviantart」や「Bittbox」「Vecteezey」などから指定したキーワードでまとめて検索できるという物です。 詳しくは以下 トップページに「Give it a try, type “flower” in the search box」と書かれていましたので早速「flower」で検索してみました。 検索してみると花に関する素材がおいてあるページが引っかかってきました。検索結果には、検索で引っかかってきている素材が
コメント部分のデザイン集「30 Must See Comment Designs」
前回ブログの日付表示という部分的なデザインを取り上げたデザイン集を「日付表示のデザイン集と素材集「Gallery Of Date Stamps And Calendars」」と言う記事で紹介しましたが、今回はコメント欄のデザインをひたすら紹介するエントリー「30 Must See Comment Designs for Web Designers」を紹介したいと思います。 全部で30のコメント欄のデザインが公開されていますが、今日はその中でも気になるデザインをピックアップして昇華ししたいと思います。 詳しく以下 ■ alwaysBETA コメントに連番が付き、投稿時刻など情報もはっきりわかってとてもわかりやすいコメント欄です。 ■Blog Design Blog ユーザー名に吹き出しが着くことで、喋っている感じがします。ちょっとしたところですが遊び心が見えて良い感じです。 ■Chris S
CSSのカーソル指定が一目でわかる「CSS Cursors」
普段は矢印のカーソル。CSSである程度コントロールできるのは皆さんご存じかと思いますが、普段そこまで使わないので、突然聞かれてもパッと出でこない人も多いんじゃないでしょうか？「CSS Cursors 」では下記のようなCSSで指定できるカーソルの一覧表が公開されています。 画像は一覧表の一部です。 全てのカーソルがInternet Explorer 4、Netscape 6以上のいずれかでサポートされています。またTESTのリンクにマウスカーソルをあわせるとブラウザでどう見えるのかを実際に表示してくれます。対応ブラウザまで表示してくれているのが嬉しいですね。 詳しくは以下 Mac + firefoxで試してみましたが、一部表示できない物もありましたが、ほとんどのカーソルが表示できました。劇的に印象を変えたり、影響を与えたりする物ではありませんが、少し遊びを加えたいときは良い手法だと思います
カスタマイズに最適なシンプルなフリーXHTML/CSSテンプレート集「Mantis-a templates」
TOP > WebDesign > カスタマイズに最適なシンプルなフリーXHTML/CSSテンプレート集「Mantis-a templates」 クールなデザインにブログをカスタマイズしたいそう思っていても、なかなか0から作り上げるのは難しく手間がかかる物です。そこで今日紹介するのはカスタマイズに便利そうなシンプルなXHTML/CSSテンプレートを配布する「Mantis-a templates」です。 シンプルで機能性があるデザインテンプレートを数多く配布しています。デザインもレイアウトも癖がなく洗練されていますので、カスタマイズのベースにするにはもってこいのテンプレート集だと思います。配布されているテンプレートの中からいくつかピックアップして下記に記しておきます。 詳しくは以下 Templates-Wide Preview Delicious 2 Preview Blog (CP
photoshopチュートリアルを100個集めた「100 wonderful photo effects Photoshop tutorials」
TOP > Design , Photoshop > photoshopチュートリアルを100個集めた「100 wonderful photo effects Photoshop tutorials」 前回「テクスチャからイラストレーションまでPhotoShopチュートリアル100選」という記事でphotoshopによるチュートリアルを100個紹介しているサイトを紹介しましたが、今回紹介する「100 wonderful photo effects Photoshop tutori」も同じように100のphotoshopチュートリアルを集めたエントリーです。 紹介されている100のチュートリアルの一部です。 集められている物はスケッチ風にする、虹を作るといったありふれた物から、HDRをphotoshopで実現する方法やレントゲン写真の作り方など少し変わった物まで紹介されています。 詳
サイトのギャラリーに最適なスマートなギャラリーライブラリ「Galleria」
WEBで画像を表示するようなギャラリーはよく見かけるし、作品紹介や、写真紹介など様々な用途で使われる場合が多いです。Flashなどを使ってギャラリーページを作っても良いのですが、もっと手軽にかっこいいギャラリーを作りたいそんな時におすすめなのが、今回紹介するJavaScriptベースのライブラリ「Galleria」です。 「Galleria」はJQueryを使ったライブラリで、シンプルながらも画像表示にフェードをかけたり画像の表示もスマートで、導入も比較的簡単にできるようになっています。 詳しくは以下 公開されているDemoは初めの画像のように、メイン画像下にサムネイルをまとめた「Galleria Demo 1」ともう一つはメイン画像の左側にサムネイルを配置した「Galleria Demo 2」の2種類。どちらもCSSでレイアウトは制御されているので、比較的カスタマイズしやすくなっています
半透明・角丸のツールチップを表示するJavaScript 「CoolTips」
リンク先の説明文をマウスカーソルの近くに一時的に表示するツールチップ。WEBでは主にJavaScript で実現されていますが、今回紹介する「CoolTips」はシンプルで半透明・角丸のツールチップを表示するためのJavaScriptです。 導入にはprototype.js、scriptaculous.jsを使っていて、必要なライブラリは全て「CoolTips — Neat tooltips under the mouse」からダウンロードできるzipファイルに含まれています。 詳しくは以下 設置したサンプル例 導入方法はそこまで難しくなく、まず以下のようにJavascriptとCSSをサイトに読み込みこませます。下記のコードを使う場合は現状「アップロード先」となっているところをアップロード先のパスに書き換えてください。 // JavaScriptの指定 <script type="tex
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
