ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
地図にマッピングし、指定した位置にコンテンツを表示出来る軽量jQueryプラグイン・CRAFTMAP
使いやすそうだったので備忘録。 Googleマップライクに動かせて マーキング、その場にコンテンツ を表示させる事も可能な軽量 jQueryプラグイン・CRAFTMAPです。 ちょっと説明下手ですね・・ マーキングもデザインのカスタマイズも割と楽で色々なものに応用できそうです。商用は有料なのですが、もしかしたら使うかも。 メニューから選択するだけでなく、ドラッグ可能でマーカーをクリックすることでもスクロールしてくれます。地図コンテンツでたまに見かけるインターフェースですね。 特にGoogle Map API等は使用していません。シンプルに、地図の画像を作って、座標に応じてマーカーを設置する、というものです。ライブラリも軽量ですよ。 サンプル作ったのでどうぞ。 Sample コード<script type='text/javascript' src='https://ajax.googlea
商用も無料でリンク不要の日本語フォント・こども丸ゴシックと、無料で手に入るフォント配布サイトの早見表
はんなり明朝の作者さんより新作の ご連絡がありましたのでご紹介です。 丸みのある可愛らしい丸ゴシックの 「こども丸ゴシック」。今回も商用 でも無料でリンクなども不要と、 太っ腹なご提供です。貢献者さんで すね・・・頭が下がります。 さて、またも商用利用OK・リンク不要の日本語フォントが登場です。いつもご連絡頂き有難う御座いますー！ 現在漢字は創意製作中で、先行してひらがな、カタカナ、アルファベットをご提供頂きました。 かわいい丸ゴシックのフォントです。漢字は製作中とのことです。Twitterでフォロー(@typingart)しておくと見逃さないかもしれません。 テスト的に使って見ました。今年の漢字は「絆」なのでそんなニュアンス。コピーは思い付きです。手書き風のような丸みのあるフォントは人の声などを表すのに適してますね。子供や女性がターゲットのサイトで活躍してくれるかもしれません。漢字が出来
Free Cheat Sheet For Designing Web Forms — Smashing Magazine
Created by Joe Leech and released for Smashing Magazine and its readers, this sheet contains an Omnigraffle template, as well as Photoshop (PSD) and PDF examples for you to download and use as you wish. Forms, forms, forms: so often overlooked in design. In this post, we are pleased to release the Form Design Cheat Sheet, created by Joe Leech and released for Smashing Magazine and its readers. Thi
How To Set Up A Print Style Sheet — Smashing Magazine
In a time when everyone seems to have a tablet, which makes it possible to consume everything digitally, and the only real paper we use is bathroom tissue, it might seem odd to write about the long-forgotten habit of printing a Web page. Nevertheless, as odd as it might seem to visionaries and tablet manufacturers, we’re still far from the reality of a paperless world. [Links checked February/08/2
20 Festive Christmas Icons [Freebie] — Smashing Magazine
The year is slowly coming to an end and we’re glad to present to you a festive icon set to inspire you in your designs. In this post we present a minimalist collection of 20 free festive vector (.EPS) icons created by offset media. The pack includes color and grayscale versions. The pack includes mostly Christmas related icons, such us the gingerbread man, nutcracker, snowman and the very well-kno
Free New Twitter Profile Page GUI PSD — Smashing Magazine
Today we are glad to release a yet another freebie: a Twitter GUI PSD for the recently released Twitter UI update, designed by Jon Darke and released exclusively for Smashing Magazine and its readers. The PSD provides the full mockup with all layers in vectors, allowing you to scale up the design elements without loss of quality. The set includes two versions: one for personal accounts and also th
WordPressの検索機能をもっと使いやすくする
2013年4月1日 Wordpress WordPressにはデフォルトで検索フォームが設定されているので、一行のコードを追加するだけで簡単に検索フォームを設置することができます。しかしその検索フォームは本当に簡易なもの。よりユーザーが使いやすくなるようにカスタマイズする方法をいくつか紹介します。実際にWebクリエイターボックスで使っているコードも公開しているので、ぜひ参考にしてみてください。 ↑私が10年以上利用している会計ソフト！ 検索フォームの設置方法 まずは基本編、フォームの設置方法です。自分でオリジナルテーマを作成したり、カスタマイズする時に地味にひっかかる検索フォームの設置方法（たぶん）。設置するだけなら以下の一行をテーマファイル内に記述するだけでWordPressが最初から用意しているフォームを実装することができます。 <?php get_search_form(); ?>
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ 2013年3月23日 Webサイト制作, Wordpress, スマートフォン 以前「WebサイトをiPhoneで見やすくする5つの方法」という記事でWebサイトをスマートフォンに対応させる方法を紹介しました。当時はそこで紹介しているMobifyというサービスでスマートフォンに対応させていたのですが、JavaScriptが使えないので、リデザインを期に別の方法でスマートフォンに対応させる事にしました。タイトルにあるとおり、WordPressのテーマを変更する方法とCSS Media Queriesを使った方法の２通りを試したので、その比較についても書いてみようと思います。 ↑私が10年以上利用している会計ソフト！ 最初に試した方法はCSSのMedia Queries（メディア クエ
ページの右上等に分かりやすく通知を表示できたりする「jsMessage」:phpspot開発日誌
Message library ページの右上等に分かりやすく通知を表示できたりする「jsMessage」 ページの右上にアニメーションしながら流れるように通知を流すようなことが出来ます。 通知だけではなくてダイアログのような物を実装することも出来ます。 スキンにも対応しておりルックアンドフィールを変えることも容易 関連エントリ Twitter風にエラーや通知をページ上部に表示させるjQueryプラグイン 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 Android風の簡単な通知を実現する「jQueryToast」
iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル:phpspot開発日誌
Apple rotator banner effect with jQuery | jQuery Plugins iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル 左にメイン画像、右にサムネイルで３つあるあのiTunesストアのインタフェースをjQueryを使ってサイトで再現できます 解説ページはこちら シンプルなマークアップで実現できています Appleの製品のユーザインタフェースは色々なところに影響を与えていてそういうところもやっぱりさすがだなぁというところですね。 関連エントリ Apple.comの新スライダーエフェクトを実装するjQueryプラグイン Apple関連のフリーのアイコンや素材集２０
円形で回転するタイマーを実装できるjQueryサンプル:phpspot開発日誌
Animated Circle Timer | jQuery Plugins 円形で回転するタイマーを実装できるjQueryサンプル。 １〜１０秒の間で指定して指定秒数をかけてタイマーを回すようなものが作れます。 CSS3を使っているので非対応ブラウザでは動きませんが、なかなか面白いサンプルだったのでご紹介です デモページはこちら プラグイン形式ではないのでブラッシュアップの余地はありますが、実験や勉強用にソースを見てみてもよいかも。 タイマー秒数はソースに直接書く感じのようです 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」 ファンシーなデザインのカウントダウンタイマー実装jQueryプラグイン「Fancy Countdown」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」
15 Responsive CSS Frameworks Worth Considering - Speckyboy Design Magazine
CSS frameworks are pre-written CSS files that help web designers and developers create websites faster and more efficiently. They are perfect for those looking to launch projects without getting bogged down in the details of coding CSS from scratch. In this collection, we’re focusing on smaller, lightweight frameworks. These minimalist frameworks all offer a simpler alternative to more comprehensi
フリーのCSSメニューテンプレートとチュートリアル集:phpspot開発日誌
Free CSS Menu Templates & Design Tutorials | Daily Syntax フリーのCSSメニューテンプレートとチュートリアル集。 メニューを組む場合に結構迷うこともありますが、サンプルが多くあるとこんな感じにつくろうとイメージがわきやすくなりますね。 最近仕事でメニューをデザインしてるのですが、どうしようかと迷っているところで発見したのでメモがてらにご紹介です 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 ページ下部で折りたためるメニュー実装サンプル CSSのナビゲーションメニューサンプル５５
スクロールした時に面白いエフェクトが実装されたサイト集:phpspot開発日誌
30 Examples of Parallax Scrolling Effects in Web Design スクロールした時に面白いエフェクトが実装されたサイト集 サムネイルでは一見普通のサイトですが、スクロールすることで動きが出たりして一見の価値のあるサイトがあつまっています。 ちょっとしたサプライズ効果があり一工夫されていることで印象に残るサイトになりそうです こういう付加価値を付けられると１００点のものが１２０点ぐらいの評価をクライアントさんにもらえるのかも 関連エントリ お洒落なECサイトデザイン集３８ 奥行きをうまく使ったサイトデザイン集３０ iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集
ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」:phpspot開発日誌
stickyFloat | jQuery Plugins ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」 ページをスクロールするとメニューもスクロールしてくれて別ページに移動しやすいあのUIのアニメーションや遅延のカスタマイズが可能なjQueryプラグインです。 アニメーションの仕方によっては気分が悪くなるというようなケースもあってカスタマイズには注意したいこのUIですが、アニメーションなどを使って利用者の負担にならないものが簡単に実現できそうです デモサイト上で１０種類のアニメーションや遅延、アニメーション時間の設定が可能で、動作を確認しながらカスタマイズ可能です。 Delay・Durationを多めにして適度なタイミングで横に来ているというようなものがベストですかね 実装コードは次のように超簡単です jQuery('#
組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」:phpspot開発日誌
jQuery Org Chart ? a plugin for visualising data in a tree-like structure The Silver Lining 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 次のような組織図を作ることができます。ドラッグ＆ドロップでインタラクティブに再配置することも可能です ドラッグ＆ドロップで再配置可能 気になるマークアップですが、ul, li を階層的に記述するだけでよいものになっています。これを上記のようにビジュアライズしてくれるのは楽ですね 関連エントリ アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」 複数要素の関連をビジュアライズできるライブラリ「arbor.js」
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」:phpspot開発日誌
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」 2011年12月07日- W3Clove :: site-wide markup validation tool W3C Validator の結果を一括で得られ、サイトマップのXMLも生成してくれる便利なサービスのご紹介です 最初にトップページのURLを入力すると、サイトをクロールしてくれるのでしばらく待ちます。 まっていると結果が次のように出ます。 OKなものはグリーンデ表示され、赤でエラー、オレンジで警告といった具合に分かりやすくW3C Validatorの結果が閲覧できます サイト全体で多く見られたエラーのサマリも見ることができ、どこを集中的に改善すればいいのかが分かりやすいです 関連エントリ スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」
３ステップではじめるレスポンシブWEBデザイン:phpspot開発日誌
Responsive Design in 3 Steps ３ステップではじめるレスポンシブWEBデザイン。 今後新しくサイトを公開する時はスマホ対応なんていうのは当たり前になってきている時代で、デザイナーさんにとっては必須であるレスポンシブWEBデザインを３ステップで簡単に説明してくれています。 CSSが分かる人ならさほど難しいものではないのでサクッと理解しちゃえます。 METAタグを付与 IEでもMedia Queriesを使えるようにスクリプトをインクルード レイアウトを作る css3 media query を記述。ブラウザの幅によって要素を非表示にしたりしてCSSを切り替えられるというわけですね JavaScriptが不要っていうのは素晴らしいですね 関連エントリ 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 HT
超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」:phpspot開発日誌
Craftyslide - A tiny jQuery slideshow plugin 超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」 スライダーといえば多機能なものも多いですが、逆にそんな機能いらないよという場合も多かったりします 機能に比例してスクリプトサイズは上がるのでできるだけ軽いものがいいという場合にこちらはよいかもしれません。 マークアップは単にul li リストに画像を並べているだけでシンプルで綺麗 あとは1行jQueryプラグインで初期化するだけです。 アニメーションが気に入らない場合も自分でちょこっとカスタマイズすればよさそうですね 関連エントリ jQueryベースの画像スライダー３０まとめ 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 Apple.comの新スライダーエフェクトを
How to Create CSS3 Buttons - Designmodo
Step 1 – HTML The HTML is very simple, we’ll just create 3 anchor tags with the class of ‘button’ and since we will create three different colors styles we will give to each link a different color class <div id="css"> <img src="img/css.png" alt="title image"> <a href="#" class="button big green">sign in <span>One minute</span></a> <a href="#" class="button big blue">sign in <span>One minute</span>
レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」:phpspot開発日誌
ResponsiveSlides.js Responsive jQuery slideshow レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 画面サイズが変わっても問題なく動作するレスポンシブなスライドショー実装が可能です サイズは１KBぐらいでマークアップも超シンプルに記述できます ブラウザサイズを変更しても問題なし 今後はこうしたライブラリもレスポンシブ対応必須となっていきそうですね 関連エントリ ３ステップではじめるレスポンシブWEBデザイン 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 ファイルアップロード関連のjQueryプラグイン１０
小さくてかわいい１６０個のアイコンセット「160 Tiny Icons」:phpspot開発日誌
160 Tiny Icons - 365psd 小さくてかわいい１６０個のアイコンセット「160 Tiny Icons」。 次のようなアイコンセットがダウンロード可能です。種類が豊富で癖が無いので汎用に使えそうですね 関連エントリ ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」 CSS3のブラウザ別対応がアイコンで超分かりやすいサイト TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０ 汎用に使える４５０のアイコンセット「Nortwood icons」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」:phpspot開発日誌
Slidorion, A jQuery Plugin | jQuery Image Slider and jQuery Accordion | Random Demo スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」。 左側をスライダー、右側をテキストを入れたアコーディオンな感じのウィジェットが実装できます。 ほどよくアニメーションして良い感じです。 マークアップも綺麗に記述可能。 関連エントリ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 ファイルアップロード関連のjQueryプラグイン１０ 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」 jQue
パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL:phpspot開発日誌
Parallax Slider with jQuery パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL スライダーの背景がパララックスを利用していて画像が切り替わる際に奥行きが表現されるというものです。 サンプルのUIも超カッコいいのですが、画像が切り替わった時の奥行き感が素晴らしい。 ちょっと古い記事なんですが、知らなかったのでご紹介です デモはこちら パララックス効果を導入してみたいという方にはいいチュートリアルにもなります 関連エントリ 並べた画像を敷き詰めて超カッコよくするjQueryサンプル 円形で回転するタイマーを実装できるjQueryサンプル 良い感じで動作するニュースティッカー実装jQueryサンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
人や動物のシルエット
http://www.smashingmagazine.com/2011/12/02/integrating-amazon-s3-with-wordpress-2/
大きなパノラマ写真をGoogleMap風インタフェースで拡大縮小させられるライブラリ「PanoJS3」:phpspot開発日誌
フリーのオープンソースなHTML5動画プレイヤーいろいろ:phpspot開発日誌