タグ

ブックマーク / e0166.blog.fc2.com (20)

  • 高機能ファイルアップロードjQueryプラグイン|ドラッグ&ドロップ、プログレスバー、オーディオ、ビデオ、各種ファイルサポート対応

    高機能で美しい インターフェイスはやはり2015年度版という感じはしますが、UIはある程度設定で変更出来ます。インターフェイスデザインは5年たったらがらりと流行りが変わるので便利かもしれませんね。 ドラッグ&ドロップサポート もちろん普通にアップロードする事も可能ですが、それ以外にドロップアンドドロップにも対応しているという事です。 同時に複数のファイルをアップロード可能 幾つかのファイルを同時にアップすることが出来ます。先にアップロードするファイルを選び、一斉アップロードも出来ますし、一つ一つアップロードすることも可能です。 対応デスクトップブラウザ まさかのIE6から対応。 Google ChromeApple Safari 4.0+Mozilla Firefox 3.0+Opera 11.0+Microsoft Internet Explorer 6.0+ 対応モバイルブラウザ Ap

    高機能ファイルアップロードjQueryプラグイン|ドラッグ&ドロップ、プログレスバー、オーディオ、ビデオ、各種ファイルサポート対応
  • パッとWebデザインのカラーを抽出して可視化してくれるウェブサイトの「配色」解析ツール

    Web Colour Data URLを入力するだけ。ね、簡単でしょう? どの色をどれくらいの割合で使っているのかんかを手軽に確認出来ます。 こちらと合わせて読みたいところですね。 カテゴリー別配色アイデア100 | Webクリエイターボックス配色センスが全くない?それならマテリアルパレットをちょっと使ってみて? | Flips Blog Web担の小技 ちなみに解析は無料でできますが、解析するとNew!のところにばっちりサイトが出ますので、そのへんだけご理解の上ご利用を。 配色解析ツール ウェブデザインデータ http://webcolourdata.com/ それでは、また。

    パッとWebデザインのカラーを抽出して可視化してくれるウェブサイトの「配色」解析ツール
  • 見ているだけでデザインの参考になりそうな無料で使えるHTML5Webサイトテンプレート

    ボリュームがあり、かつクオリティの高いHTML5Webサイトテンプレートが25個紹介されていたのでシェア。 眺めているだけでも参考になりそうなテンプレート集 実際に見ているだけでも素晴らしい。とくに最初に紹介されているFlatfyはあっちではかなり利用されている黄金パターンを採用し、かつ使いやすいのが特徴的。 1. Flatfy WordPressプレミアムでもよく見かける形のもはや海外オーソドックススタイル。 この25個の中でも最も美しいデザインとして紹介されています。テンプレートはBootstrapフレームワーク、HTML5、CSS3、そしてjQueryを駆使して作られています。 2. Yebo – Flat HTML5 CSS3 Template 彼、ピーターは無料でダウンロードできるいくつかの美しいHTML5のWebテンプレートを開発しています。これはモダンかつエレガントに見える、

    見ているだけでデザインの参考になりそうな無料で使えるHTML5Webサイトテンプレート
  • Windows好きな私が仕方なくMacを買ったのでとりあえずMacをDisろうと思う

    つい先日。 Mac miniを買いに行って来ました。これも全部アップルが悪くて、iPhoneアプリを最終的に出荷するためには結局Macないとだめなんかーい!という事で、仕方なく買いに行ったわけです。アップル最悪です。ゲイツ大好きです。 覚悟しなさいMac。 購入編 とりあえずそこら辺の電気屋とかパソコン工房みたいなジャンク系も含めて、そこら中にあふれているWindowsマシーンと違い、ごく限られた店でしか買えないMac。 私の家からそこへ行くには、電気屋を2店舗もスルーしなければならないほど遠くて、もはや内心この時点でアップルふざけるなと思っていたわけです。現地に到着後、目的のMac miniを探してようやく購入というところでストップ。 トラックパッドが売り切れていて、さらに入荷未定状態+Bluetoothキーボードも無い。 なにやらタイの影響でと言っていましたがよくわかっていません。そん

    Windows好きな私が仕方なくMacを買ったのでとりあえずMacをDisろうと思う
  • 無料で使える単一ページのHTML/CSSテンプレート集

    美しい単一ページの無料テンプレート集。 CSS/HTMLの勉強にも使えそうですが、細かいところで単一ページらしいアイデアが使われているところも見所です。 色々と使い所満載のテンプレート集 単一ページだからと思って油断していましたがなかなかのクオリティでびっくり。 Free Single-Page HTML5 Portfolio Template Demo / Download スライドショーの部分も細かいですがよく出来てます。 Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 Demo / Download Page 一般的な縦型のシングルページ。スムーズな移動も特徴的です。 Resume (HTML) Demo / Download Page Roundfolio: A Free Portfolio T

    無料で使える単一ページのHTML/CSSテンプレート集
  • 「わかってもらえない」ダメな企業サイトになるための3つの条件

    多くのWebサイトが乱立するなか、ユーザーに対してわかってもらうという課題があります。 出来るWebページは、この「わかってもらう」事が最も重要であり、そしてこの課題をキッチリクリアしています。はたしてわかってもらえるWebサイトとは一体どんな工夫がなされているのでしょうか。 よく陥る3つの失敗から学ぶ わかってわかってもらえないサイトになるための3つの条件とでもいいましょうか。 Webサイトにて一番陥りやすいトラップの一つに、「わかってもらえるだろう」という思い込みがあります。この「わかってもらえるだろう」という感情は何処から来るのかというと、実は結構シンプルな答えですが、「制作するときに参考にしたサイトに似せる」という部分から来ています。 最大の過ちが起こる過程には、Webサイトを作ろうと考える企業と、Web屋との間に、上下関係がある為と言えます。 例えばWeb屋に全て丸投げする企業。

    「わかってもらえない」ダメな企業サイトになるための3つの条件
  • デザイナーからデザインの基礎や原則を学べるエントリーまとめ(webデザイナ向け)

    webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTMLCSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでもべて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること

    デザイナーからデザインの基礎や原則を学べるエントリーまとめ(webデザイナ向け)
  • jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳

    もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 1)3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;

    jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
  • クリエイティブタイポグラフィ61総まとめ2010

    webにかかわる人も、そうで無い人もデザインにかかわる全てのクリエイターなら、一度は通る道が、タイポグラフィデザインです。 文字、いわゆるテキストさえもデザインする事で、デザインの幅は大きく広がります。 今回はそうしたクリエイターに送る資料としてホットでクリエイティブなタイポグラフィ作品をまとめました。 また、これからタイポグラフィについて記事を書こうと思った方の資料として使っていただければという思いも込められています。 キュートでかわいいタイポグラフィパターン ちょっとしたアクセント、背景に注目です。 リンク先で拡大画像が見れますが、それぞれの文字がフルーツで出来ています。 立体的な造形物です。リンク先では様々な角度からの画像が見れます。 リンク先ではそのほか様々な作品が閲覧できます。 このページでは、そのほかラブリーなタイポグラフィが閲覧できます。 チュートリアルになっています。 リン

    クリエイティブタイポグラフィ61総まとめ2010
  • あなたの文章や会話のプレゼンテーションを向上させる9つの記事

    文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。 こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。 こうした失敗に気づくためには、ある程度正解、もしくは成功した話を聞くのが一番です。 というわけで、プレゼン力をつけたいという方の為の膨大なエントリーを、私のYamadaフィルタでふるいにかけ、厳選したものをご紹介いたします。 1)上司が“唸る”報告書 の書き方 もはや上司どころか、そこらへんのユーザーすらうなってしまうほどの破壊力のあるエントリ。 かなりブログの書き方に似てる部分もあり、とても参考になりました。 2)チームのパフォーマンスを最大限に高めるために--5つの心得 以下の内容について細かく説明されています。 若干プレゼンと離れますが、チーム全体をプレゼンしつつ成功させるという点が個人的に感じた部分だったのでご紹介。

    あなたの文章や会話のプレゼンテーションを向上させる9つの記事
  • Webサイトのフッター200個とフッターデザインの考え

    フッターの美学。 そんな素敵サイトを紹介しようといくつかチョイスしていたら海外ブログのDWSが「The 200 best footers on the web」なんていう化け物エントリーをさらっと出してきたもんだから驚きだ。 しかもクオリティもめちゃ高い。 なので今回はこのエントリーを紹介して終わろうかなって・・・。 参考までにネタ帳が好きなフッターを7つほど紹介します。 たま、フッターまとめサイトの楽しみ方も一応書いておきます。 以下からどうぞ。 すばらしいフッターデザイン200 The 200 best footers on the web « Web Design Shock もはやひとつのショーケースというか一冊のになってもおかしくないクオリティの記事です。 ご堪能あれ! 中でもネタ帳がお気に入りのフッター7つ Tomáš Pojeta | kreativní grafik ここ

    Webサイトのフッター200個とフッターデザインの考え
  • photoshopの魅力的なカスタムシェイプ60から本当に使えそうなものをチョイス

    60もあれば、いいのはまぁ、それなりに有るだろうなとは思うのですが、見ても何も感じないものもありました。 感性の違いかもしれませんが、その中で『これは使えそうだ』と思えるものが7つ有りましたのでご紹介。 当に使えそうなカスタムシェイプ とりあえず以下のエントリから。 60+ Attractive Photoshop Custom Shapes いろいろ眺めていて、これだと思えるものをチョイス。 案外少なかった。 カスタムシェイプ事態つかわないからそう感じるんだろうか・・・。 最終的にイラレでって人はあれだけど、photoshopラブリーな人にお勧め。 噴出しシェイプ デフォルトのカスタムシェイプに満足できない+イラストレータまで使うのが面倒な人向けのシェイプ追加。 比較的様々なシュチュエーションで使えるため人気のアイテム。 イラストレータなどで自作して引き伸ばしたりっていうのが面倒な人に

    photoshopの魅力的なカスタムシェイプ60から本当に使えそうなものをチョイス
  • 光を表現するPhotoshopのブラシ416個*ホームページを作る人のネタ帳

    Photoshop光のブラシ web制作を進める上で、光を直接使うのではなく、なにかの背景に潜らせたり、メニューなどの後ろにうっすらと構えているラインとしてよく使われるのが、光のラインシリーズだ。 こうしたブラシは非常に人気が高く、私も良くブクマしているのですが、いかんせん、画像が無いとなんとも情報として使えない。 そこで今回はリンクとイメージを直結してただの羅列エントリとして仕上る事にしました。 あとブラシの設定方法がわからないという人がいたら記事の下のほうを参考にしてみてください。 1(+11) 2(+7) 3(+10) 4(+12) 5(+3) 6(+8) 7(+12) 8(+4) 9(+7) 10(+20) 11(+4) 12(+24) 13(+22) 14(+8) 15(+8) 16(+9) 17(+18) 18(+6) 19(+6) 20(+8) 21(+6) 22(+8) 2

    光を表現するPhotoshopのブラシ416個*ホームページを作る人のネタ帳
  • web制作者のための2009年話題になったサービスいろいろ

    ちょいと古めのうっとりくるサービスやエントリーを持ってきました。 なんて事はない。私がお勧めする2009年度に話題になったwebサービスや、ジェネレータを中心に、厳選してお届けいたします。 Twtiiter関連多し Twitterプロフィール検索 その名のとおりついったーのプロフィールを検索する検索エンジン。同じような趣味を持っている人を探すときなどに使われる。 ついったーの友人関係を可視化するwebサービス 友人関係というか会話関係があられもない姿で現れる恐ろしいサービス。 TweetLevel ついったーの影響力を測定するサービス。 影響力というか戦闘力。やってる事は単純なサービスなんだけど、こうやってしっかりデザイン組んで作り上げるところが当に参考になった。どんなサービスであれ、愛情は見習わなければならない。 Twib - Twitter ホットエントリー Twitterでのホッテ

    web制作者のための2009年話題になったサービスいろいろ
  • 完全無料40のベクター画像コレクションパック

    40素材パックを見逃すな! 以下。 40 Absolutely Free Vector Pack Collections 一つ一つが濃厚でクオリティの高いベクター画像集ページにつながっている。 たとえばそれは 人の姿をしたシルエットであったり。 様々な要所で使えるオブジェであったり。 きらびやかな装飾であったり。 iPodであったり。 綺麗なタグであったり。 様々なものが収録されていますので、興味を沸くものや、今後使えそうなもの、また、探していたものが見つかるかもしれません。一度はすべて目を通しておくのも良いかもしれませんね。 それでは、また。

    完全無料40のベクター画像コレクションパック
  • 手軽に導入しやすい特徴的な14のドロップダウンメニューサンプル

    なかなか素敵なまとめ記事がありました。 大規模なサイトに最適なリンク案内として、ドロップダウンメニューの導入が使われる事がありますが、今回のエントリーは、こうしたメニューの導入を簡単にしてくれるものとなるでしょう。 CSS、jQuery、MooTools、JavaScript WEBサイトのメニューはシンプルであるべきと考えます。大規模なWEBサイトでは、ドロップダウンメニューを設置することで、ユーザーが容易に移動できるようになる。時にそれらの設置が難しい時は以下を開いてみると良い。 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger 14ある中で今回触った感触としてお勧めが5つ。 現れ方がカッコいいドロップダウンメニュー ClarkLab ? Animated Drop Down Menu with jQue

    手軽に導入しやすい特徴的な14のドロップダウンメニューサンプル
  • 商用無料で使える写真素材サイトまとめ2009年度初版*ホームページを作る人のネタ帳

    とりあえず自分がこんなまとめがあると後でつかうだろうなぁというものをかき集めてみました。 ページ自体を少しでも軽量化したかったので画像は、そのサイトをイメージできるだけのサイズにカットしています。テキストリンクだけだとあとでわからなくなる事が多いので、必要最低限のシンボルとして表示しています。 商用可能な写真素材サイト 5000 Free Stock Photos ノーアカウントで5000の写真と8000のクリップアートがダウンロードし放題。 Free Photo - Cepolina Photos 画像数8000超え。お勧め。 Free Photos, Free Stock Photos, Photography BurningWell Image * After 現在21000点以上の素材がダウンロードし放題。 FreeDigitalPhotos.net 600pxくらいまでの画像は無

    商用無料で使える写真素材サイトまとめ2009年度初版*ホームページを作る人のネタ帳
  • 無料アイコン100パック2009年版*ホームページを作る人のネタ帳

    アイコンまとめ祭り。 今回は量も量なので画像は小さめ、クリックすると拡大方式を使っています。 ※無料ダウンロード可能なハイクオリティアイコン総まとめ2013年版にて、最新の無料アイコンをご紹介しています。 無料アイコン 1~10 Free Icon Pack: Web Injection - Tutorial9 システムアイコンやRSSアイコンなどの詰め合わせ。 タグがいい感じすぎる。 mfayaz's Art Blog: FreeHand_ColorStroked icon pack オープンソースで出来たもの系のアイコン集。しかも手書き風。 IconTexto: Drink Web 2.0 各種ソーシャルサービスを空き缶アイコンにしたもの。 Freebies Aggregator: Vector Social Media Icons わざとダサめのアイコンに仕上げてある感じがいい。 H

    無料アイコン100パック2009年版*ホームページを作る人のネタ帳
  • JavaScript、FLASHのイメージギャラリーまとめ15個ほど*ホームページを作る人のネタ帳

    今回は過去のホームページを作る人のネタ帳にて、まとめの一部として使われていたイメージギャラリーを主役にまとめました。 JavaScript系はブログでも使う事が出来たりしますので、お時間のあるときにでもお試しください。 (Flashに一点追加しました) CSSJavaScript Photo Sliderライブラリ。 滑らかなスライドを実装できます。CSSデザインである為、デザインのカスタマイズも可能。 ダウンロードページ 商用利用の場合は29ドルだけど、非営利の場合は無料で使える。 テキストが表示されているところもポップアップするので試してみると楽しいです。 ダウンロードページ 正確にはギャラリーではないですが、虫眼鏡による画像のビューア。 FLASHではないところがまた乙。重いのが難点か・・・。 ダウンロードページ こちらも虫眼鏡。地味に2つの機能がある。 クリックしながら右にドラッグ

    JavaScript、FLASHのイメージギャラリーまとめ15個ほど*ホームページを作る人のネタ帳
  • フリーのウェブデザインテンプレートのPSD

    ウェブデザインのテンプレートは結構多いけど、こうしたPSD形式での配布は珍しいですね。 今回はフリーPSDテンプレート10というエントリからご紹介。 デザインの勉強に持つかえるかも 配布形式はPhotoshopなんかで開くPSDファイル。 ダウンロードしてじっくり見てみるのも有りかもしれませんね。 Darkwood Free hosting template Old burned paper Blog Source 10全ては以下に。 過去紹介しているhtml/cssテンプレートサイト 1170 + Ajax/Javascript/Dhtml examples and demos to download Dynamic Drive DHTML(dynamic html) & JavaScript code library Ajax/JavaScriptの宝庫。htmlはあまり関係ないけどお

    フリーのウェブデザインテンプレートのPSD
    hayasi-n
    hayasi-n 2009/03/18
  • 1