新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
アートディレクションカンパニーDONGURI
DONGURI IS A PLAY COMMUNITY. WE WILL MAKE YOUR BUSINESS MORE ENJOYABLE. I WILL MAKE YOUR ORGANIZATION A MORE ENJOYABLE PLACE. NOW, LET'S PLAY WITH US. DONGURIは多様な専門家が共遊するプレイコミュニティです。 メガ〜ミドルベンチャーからスタートアップを対象とした組織変革コンサルタント。デザイン思考を軸にサービス変革に取り組むリサーチャーやファシリテーター。マーケティングを得意とするプランナー。ブランディングやアイデンティティ構築を主戦場とするデザイナーまで――。 多種多様な専門家がプロジェクトに合わせてチームを結成し、事業や組織の課題発見から、ハンズオンによる解決にまで取り組みます。 組織が成長していく過程で、大きなイシューに阻まれ、仕
チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」:phpspot開発日誌
iCheck jQuery plugin - highly customizable checkboxes and radio buttons チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」。 一般的なチェックボックスを少し調整してクールにしたものや、リデザインした物など、クールにカスタマイズすることが出来ます。 シンプルなデザインにしてみた物。 ボタンっぽくしてみたもの よりカスタマイズしてみたもの 関連エントリ 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン ２次元のラジオボタンを作るチュートリアル＆jQueryサンプル
Web屋なら絶対参考にしたい！Web制作で役立つサイトとtwiterアカウント | らふらく ^^
Web業界にいると、常に新しい情報や技術が生まれるため、 必要な知識の移り変わりが速いです。 そこで、最新技術に乗り遅れず、知識を吸収するためにも フォローしておくと便利なtwitterアカウントとWebサイトを紹介したいと思います。 ①Webクリエイターボックス Webクリエイターボックス Web制作のテクニックやコード集を記事にしてくれています。 分量もちょうど良く、さくさく読み進める事が出来ます。 twiterアカウントはこちら。 @webcreatorbox ②Webデザインレシピ Webデザインレシピ 美人デザイナー「のりさん」が運営するサイト。 CSSやらデザイン系のTipsを中心にWebデザインのテクニックをわかりやすく解説してくれてます。 個人的に非常に助かったのはこちらの記事。 CSSは分かるけど jQuery は苦手 … という人が jQuery
jQuery Mobileカスタマイズ自由自在
9/8に行われたHTML5 Conference 2012での「jQuery Mobileカスタマイズ自由自在」のセッション資料です。
テキストのサイズを調整し、両端をピッタリと揃えて表示するスクリプト・slabTextをWPプラグインとして日本語環境に対応・WP slabText
ご連絡頂いて、良さ気だったので ご紹介。以前記事にした、テキスト の両端を揃えるタイポグラフィ系 のスクリプト・slabTextを日本語 でも利用出来るようにし、且つWP で利用出来るようにしてくれました。 今年の1月くらいにご紹介したslabTextをWPで、且つ日本語で利用出来る、というプラグインです。slabTextに関しては以前の記事をご参照下さい。 テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT 過去記事でも書いたように、普通に使っても日本語環境で使うのは若干微妙でした。（単語単位で半角スペースを入れる必要があった）これをうまく解消してくれているので需要も結構あるのでは無いかなと思います。 もともと目をつけていたスクリプトだったので日本語環境で利用出来るようになったのはとても嬉しいです。スクリプトの開発者さんは
iPhoneのON/OFFスイッチっぽいものを実装するjQueryプラグイン「Toggles」:phpspot開発日誌
jQuery Toggles - Simon Tabor iPhoneのON/OFFスイッチっぽいものを実装するjQueryプラグイン「Toggles」 次のようなiPhoneっぽいデザインは勿論、独自デザインでも同じようなスイッチを実装できます。 実装コードは以下のように簡単に実装できます。 $('.toggle').toggles({click:$('.clickme')}); こういうデザインもアップル発という気がしますが、UI におけるアップルの影響はいつも高いなぁと思ってしまいますね 関連エントリ iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート 立体感がリアルなON・OFFスイッチ実装jQueryデモ
[CSS]ホバーで子がハイライト、家系図のようなツリーを実装するスタイルシート -CSS3 Family Tree
子孫のみハイライト [ad#ad-2] CSS3 Family Treeの実装 HTML ツリーはリスト要素で、各アイテムの親子関係はリストの入れ子で実装します。 <div class="tree"> <ul> <li><a href="#">親</a> <ul> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> </ul> </li> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> <li><a href="#">孫</a> <ul> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> </ul> </li> <li><a href="#">孫</a></l
アルファシス – alphasis.info -
カテゴリー別アーカイブ JavaScript (2,265) リファレンス (1,050) Hello World (3) 基本構文 (8) 変数 (13) 定数 (2) データ型 (5) リテラル (13) 文字列リテラル (4) 配列リテラル (3) オブジェクトリテラル (3) 演算子 (52) 制御構造 (65) if (5) switch (4) while (6) do-while (6) for (10) for-in (8) for each-in (6) break (6) continue (5) debugger (1) function (1) return (1) var (1) with (1) try-catch-finally (3) throw (1) ユーザー定義関数 (21) ユーザー定義オブジェクト (10) 組み込み関数 (10) 組み込み定数 (
selectボックスを超カッコよくするjQueryプラグイン「Chosen」:phpspot開発日誌
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
レスポンシブなフォームを作成するフレームワーク「jq-idealforms」:phpspot開発日誌
jq-idealforms レスポンシブなフォームを作成するフレームワーク「jq-idealforms」 フォームのデザインが良い感じにデザインされているだけではなく、幅を狭くすることでレイアウトが変更されるレスポンシブなフォームを簡単に実装出来ます。 ポップアップによる入力ヒントの実装も可能。とにかくデザインが良い感じなので非デザイナーさんでもカッコいいフォームが作れるという部分も特徴 スマホの場合、レイアウトが最適化されます jQueryとLESSを使って実装されています 関連エントリ フォームをカッコよくするjQueryプラグイン集１５ 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォーム要素をクールにするためのjQueryプラグイン集
Photoshopで作成したかのようなクオリティのボタンやナビゲーションをCSSで作ってみた！的なものだけを集めたギャラリー・CSSDeck
CSS3でこんなクオリティのボタンが作れる！ みたいな記事をよく見かけると思うんですが、 そういったものだけを集めたデザインギャラ リーがありましたのでシェア。CSSの勉強に 如何でしょう。さもPhotoshopで作ったかの ようなエレメントが豊富にあります。 タイトルよく分からんですねｗ CSS3のグラデーションやbox-shadowなどを駆使して、今まではPhotoshopで作成していたかのようなクオリティのボタンなどを作った！みたいな記事を多々見かけてきたかと思いますが、そういったものだけを集めたデザインギャラリーです。 一見よくあるパーツデザインギャラリーや、dribbbleっぽい感じですが、これらのボタン等は全てcssで作成されています。それだけでなく、ソースも公開されていますので結構重宝しそうなサイトですね。 こんな立体感のあるボタンとか。 こんなソーシャルボタンとか。 ソース
Index :: Webデザイナーズレシピ
Sample Design Webデザインのサンプルです。 DropDown Navi jQuery を使ったドロップダウンメニューです。 Contents Slider jQuery Cycle Plugin を使ったスライダーです。 Form Validation フォームに入力された値を、送信前にその場でチェックします。jQueryプラグイン使用。 Form UI Elements チェックボックスやラジオボタン、セレクトボックスを画像で装飾！セレクトボックスにはjQueryプラグインを使用しています。 jQuery UI Accordion & Tabs jQuery UI を使ったアコーディオンとタブです。 Box Equal Heights コンテンツの量によって、バラバラだったボックスの高さを jQuery で揃えています。 Masonry jQueryプラグイン、Mason
jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。 - 甘味志向＠はてな
JavaScript Advent Calendar 2011 オレ標準コース、2日目のもろへいやです。とても遅れてすいません… 私は技術的な話は得意ではないので、デザイン面からJavaScriptプログラマーに向けてのTipsを書きたいと思います。 今回は、アニメーションの話を書いてみます。 jQueryは標準で、要素の表示・非表示を切り替えるときにフェードやスライドを使うことが出来ますよね。 $("#box").fadeIn("fast"); たった一行で、アニメーション効果を付加することができるので、 プログラマーのみならずデザイナーの方でもjQueryを使っている人は多いんじゃないかと思います。 しかし、簡単なおかげで何をするにアニメーション効果をかけまくってしまったり。 あるいはアニメーション効果なんて無駄！ ということで、全然使っていない人もいると思います。 ですが、アニメーシ
jQueryで手軽にサクッとシンプルなニュースティッカーを作る
今更なTipsなんですけど、まぁ自分用の 復習的な記事です。カスタマイズしやす いニュースティッカーを作るコードで、 1行でも4行でも画像でも、cssで見た目 をスタイルするだけで少量のコードで 実装する事が出来ます。 いろいろプラグインを紹介しておいてアレですけど、実際プラグインに依存すると困ることのほうが多いので簡単なものは簡単なコードで実装出来る程度にはしておきたい所ですね。 Sample:01ティッカーです。実際こんな風には実装せず、目立たないところに配置しますけど・・ 以下のコードで実装します。 function ticker(){ $('#news li:first').slideUp( function(){ $(this).appendTo($('#news')).slideDown(); }); } setInterval(function(){ticker()}, 50
[JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms
画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。 チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモ フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。 デモでは、3つのスタイルが用意されています。 スタイル：Comix Ideal Formsの主な特徴 フォームに美しい外観を与える軽量（14Kb）のスクリプト。 カスタマイズも簡単で、非常に使いやすいです。 画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装 ファイルのアップロード 以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js
モダンなデザインのプレゼンテーションコンテンツをHTMLで実装出来るようにするjsライブラリ・deck.js
なかなか良かったのでご紹介。最近よく 見かけるHTML製のプレゼンテーション を実装出来るライブラリ。素敵なデザイン で実装できてエフェクトなんかも選択 出来るみたいですね。タッチデバイスに も最初から対応できてるといろいろと ありがたいんですけど・・ というわけでメモ。もういくつもあるので今更って感じかもですけど。jQueryのプラグインとして動作するjsライブラリです。 シンプルです。キーボードの矢印キーで操作できます。modernizrでIEにも一応対応。 実装方法なんかも解説してくれているのですぐに分かるかなと思います。 縦に出来たりエフェクトをフェードにしたりデザイン少し変えたり、みたいなデモがありました。 あんまり使う機会が無いのに使いたい気持ちがあるので無駄にメモしてしまいますな・・ HTML製のプレゼンテーションはGoogle+でもお世話になってるjay-hanがまとめてく
[CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック
ビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。 デモページ：スクリーンサイズが960pxより小さい時の表示 以下は各ポイントを意訳したものです。 実装 これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。 HTML：Step 1 まずは、nav要素内にul要素とselect要素の2つを記述します。 ※最終形は、異なります。 <nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href
３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」:phpspot開発日誌
jQuery 3 State Switch Plugin ３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」。 フォーム要素といえばcheckboxやradio等がありますが、どちらもcheckedかそうでないかの２つの状態を保持させることが出来ます このプラグインを使えば３つの状態を保持させることができます。状態はクリックで切り替えます。 選択肢が３つあるような場合に活用することができそうです クリックで状態が切り替わります 関連エントリ 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 レイアウトに関する強力なjQueryプラグイン６つ 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery UIの各エレメントをレトロ風のかわいいデザインに変更するテーマファイル -jQuery UI Theme Retro