http://webrocketsmagazine.com/ Webロケッツマガジンは、WebデザイナーやWebディベロッパーのためのWeb専門マガジンです。海外の最新情報、Webに関する様々なテクニック、Webデザインの最新動向など、プロフェッショナルには欠かせない情報を発射しています。 ja http://webrocketsmagazine.com/entry/20120224/css3-image-effects.html http://webrocketsmagazine.com/entry/20120224/css3-image-effects.html Fri, 24 Feb 12 12:11:02 +0900 CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 http://webrocketsmagazine.com/img/upload/3466.png http://webrocketsmagazine.com/entry/20120224/css3-image-effects.html http://webrocketsmagazine.com/entry/20120220/60-free-business-icons.html http://webrocketsmagazine.com/entry/20120220/60-free-business-icons.html Mon, 20 Feb 12 14:04:21 +0900 提案資料や設計資料をアイコンや図入りでわかりやすくしたいけれど、寄せ集めたアイコンは図柄がばらばら…足りないものがある･･･など思ったことはありませんか？そんな要望に答えて、提案資料等に使えるビジネス系アイコン素材60種を作成しました。 気に入ってくださった方は是非ご使用下さい。 http://webrocketsmagazine.com/img/upload/3395.png http://webrocketsmagazine.com/entry/20120220/60-free-business-icons.html http://webrocketsmagazine.com/entry/20120213/how-to-triange-in-css3.html http://webrocketsmagazine.com/entry/20120213/how-to-triange-in-css3.html Mon, 13 Feb 12 12:03:25 +0900 この記事では、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 http://webrocketsmagazine.com/img/upload/3378.png http://webrocketsmagazine.com/entry/20120213/how-to-triange-in-css3.html http://webrocketsmagazine.com/entry/20120206/antialias-mspgothic-css-hack.html http://webrocketsmagazine.com/entry/20120206/antialias-mspgothic-css-hack.html Mon, 06 Feb 12 16:39:00 +0900 CSS3 を使って Windows から見るブラウザ上の "MS Pゴシック" をメイリオみたいに、アンチエイリアスさせて表示する方法を発見してしまったので紹介します。この記事で紹介するテクニックは、ハックに近いものですので、使用は自己責任でお願いします。 http://webrocketsmagazine.com/img/upload/3322.png http://webrocketsmagazine.com/entry/20120206/antialias-mspgothic-css-hack.html http://webrocketsmagazine.com/entry/20120203/css3-bevel.html http://webrocketsmagazine.com/entry/20120203/css3-bevel.html Fri, 03 Feb 12 15:56:03 +0900 CSS3 の border-radius を使えば、ボックスの角を丸めることができますよね？ でも、ベベル（丸くない border-radius）を付けるにはどうしたらいいか、ずーと気になっていたので、調べてみたら見つけました！... ということで、今日の記事では「LEA VEROU」で紹介されていた、↓みたいにボックスの角にベベルを付ける方法を紹介します。 http://webrocketsmagazine.com/img/upload/3307.png http://webrocketsmagazine.com/entry/20120203/css3-bevel.html http://webrocketsmagazine.com/entry/20120131/css3-aqua-button-tutorial.html http://webrocketsmagazine.com/entry/20120131/css3-aqua-button-tutorial.html Tue, 31 Jan 12 13:19:00 +0900 CSS3 の新しいプロパティーを総動員したら、Photoshopとかで作ったきれいなアクア風（ガラス風）ボタンにどこまで近づけるか？ というのを実際にやってみました。チュートリアル風に、ステップごとに分けて説明していますので、CSS3を使ったリアルな表現のためのテクニックとして、ポイントだけでも覚えておくと、いろんなところで応用できると思います！ http://webrocketsmagazine.com/img/upload/3261.png http://webrocketsmagazine.com/entry/20120131/css3-aqua-button-tutorial.html http://webrocketsmagazine.com/entry/20120127/circle-ideas-for-your-design.html http://webrocketsmagazine.com/entry/20120127/circle-ideas-for-your-design.html Fri, 27 Jan 12 14:08:40 +0900 2012年のWebのトレンドに円があるらしいです。もちろん、今まで 円という表現がなかったというわけではありませんが、CSS3で簡単に円を表現できるようになったことで、「矩形と同じように円が使える」ってことですからねー。トレンドというよりは、より一般化していくんだと思います。そこで今回の記事では、円をサイトに使うためのアイディアを紹介します。 http://webrocketsmagazine.com/img/upload/3236.png http://webrocketsmagazine.com/entry/20120127/circle-ideas-for-your-design.html http://webrocketsmagazine.com/entry/20120126/css3-wave-animation.html http://webrocketsmagazine.com/entry/20120126/css3-wave-animation.html Thu, 26 Jan 12 11:59:11 +0900 またまた CSS3 の小ネタです。これがやりたくて、ひそかに研究していました。この記事では、CSS3を使って、でボタンにロールオーバー時リングが波紋のように広がるエフェクトを作る方法を紹介します。デモ一式をダウンロードできますので、時間があれば、自分のパソコンにダウンロードして、いろいろ実験してみてください。おもしろいです。 http://webrocketsmagazine.com/img/upload/3218.png http://webrocketsmagazine.com/entry/20120126/css3-wave-animation.html http://webrocketsmagazine.com/entry/20120125/rounded-thumbnail-using-css3.html http://webrocketsmagazine.com/entry/20120125/rounded-thumbnail-using-css3.html Wed, 25 Jan 12 13:05:19 +0900 CSS3のborder-radiusっていろいろできて面白いですね。で、今回の記事は、CSS3の border-radius を使った円形いサムネイルの作る方法を２種類紹介します。２つめの方法では、長方形の画像でも丸いサムネイルを作ることができるので、結構実用的に使えるんじゃないかと思います。 http://webrocketsmagazine.com/img/upload/3206.png http://webrocketsmagazine.com/entry/20120125/rounded-thumbnail-using-css3.html http://webrocketsmagazine.com/entry/20120123/create-funny-logo.html http://webrocketsmagazine.com/entry/20120123/create-funny-logo.html Mon, 23 Jan 12 18:03:42 +0900 何かに使えるというわけではないんですけど、ネタとして面白かったので Create Funny Logo というサービスを紹介します。 http://webrocketsmagazine.com/img/upload/3189.png http://webrocketsmagazine.com/entry/20120123/create-funny-logo.html http://webrocketsmagazine.com/entry/20120119/game-like-interface-website.html http://webrocketsmagazine.com/entry/20120119/game-like-interface-website.html Thu, 19 Jan 12 14:30:13 +0900 ゲームというのは不思議なもので、僕らゲーム世代はゲームと聞くと論理不要でついついやってしまいますよね！。この記事では、そんなゲーム的な要素をインターフェースに取り入れているサイトを紹介したいと思います。 http://webrocketsmagazine.com/img/upload/3166.png http://webrocketsmagazine.com/entry/20120119/game-like-interface-website.html http://webrocketsmagazine.com/entry/20120117/idea-of-new-webservice.html http://webrocketsmagazine.com/entry/20120117/idea-of-new-webservice.html Tue, 17 Jan 12 11:33:34 +0900 「来年こそ、Webサービスを作ってやろう！」と考えているけれど、何を作ったらいいのかわからない... という人のために、新たなWebサービスを考える時に使えそうな「視点を変える方法」をいくつか考えてみました。 http://webrocketsmagazine.com/img/upload/3117.png http://webrocketsmagazine.com/entry/20120117/idea-of-new-webservice.html http://webrocketsmagazine.com/entry/20120113/marching-ant-animation.html http://webrocketsmagazine.com/entry/20120113/marching-ant-animation.html Fri, 13 Jan 12 14:20:55 +0900 マーキーとは、Photoshop とかで、範囲選択したときに表示されるあの点線みたいなヤツです。PARK LA FUN というサイトで、これを見かけて面白いなと思ったので、作り方を紹介します。 http://webrocketsmagazine.com/img/upload/3112.png http://webrocketsmagazine.com/entry/20120113/marching-ant-animation.html http://webrocketsmagazine.com/entry/20120112/css-gradient-border.html http://webrocketsmagazine.com/entry/20120112/css-gradient-border.html Thu, 12 Jan 12 11:40:54 +0900 CSS3で線のグラデーションができないかと考え、Illustrator とかでよくやる「塗りとパスのオフセットを使って実現する線のグラデーション」を、CSS3で実験してみました。 http://webrocketsmagazine.com/img/upload/3100.png http://webrocketsmagazine.com/entry/20120112/css-gradient-border.html http://webrocketsmagazine.com/entry/20120111/code-cola.html http://webrocketsmagazine.com/entry/20120111/code-cola.html Wed, 11 Jan 12 12:13:32 +0900 表示中のWebページのスタイルシートを Illustrator のようなビジュアルな UI で、ブラウザから変更できる chrome 拡張、Code Cola を紹介します。 http://webrocketsmagazine.com/img/upload/3077.png http://webrocketsmagazine.com/entry/20120111/code-cola.html http://webrocketsmagazine.com/entry/20120110/css3-stitched-border.html http://webrocketsmagazine.com/entry/20120110/css3-stitched-border.html Tue, 10 Jan 12 11:26:45 +0900 「HOW TO CREATE STITCHED LOOK IN CSS」より、CSS3でスティッチ風に飾ったボタンを作る方法を紹介します。 http://webrocketsmagazine.com/img/upload/3069.png http://webrocketsmagazine.com/entry/20120110/css3-stitched-border.html http://webrocketsmagazine.com/entry/20120106/happy-new-year.html http://webrocketsmagazine.com/entry/20120106/happy-new-year.html Fri, 06 Jan 12 13:19:15 +0900 遅くなりましたが、あけましておめでとうございます。なんとか新年を迎えることができたWebロケッツマガジンの今年の抱負です。 http://webrocketsmagazine.com/img/upload/.png http://webrocketsmagazine.com/entry/20120106/happy-new-year.html http://webrocketsmagazine.com/entry/20111227/masked-animation-using-jquery.html http://webrocketsmagazine.com/entry/20111227/masked-animation-using-jquery.html Tue, 27 Dec 11 10:25:06 +0900 Flashでよくやっていた表現で、jQueryで置き換えられるものはないかと考えていて、ふとマスクを思いついたので紹介します。応用次第ですので、アイディアのネタとして見てください。 http://webrocketsmagazine.com/img/upload/2945.png http://webrocketsmagazine.com/entry/20111227/masked-animation-using-jquery.html http://webrocketsmagazine.com/entry/20111226/slavery-footprint.html http://webrocketsmagazine.com/entry/20111226/slavery-footprint.html Mon, 26 Dec 11 13:09:53 +0900 インスピレーションのためのサイトリーディングということで、不定期で私が「これは！すばらしい」と思ったサイトをその概観だけではなく、もう少し掘り下げて読んでみようという記事です。 http://webrocketsmagazine.com/img/upload/2882.png http://webrocketsmagazine.com/entry/20111226/slavery-footprint.html http://webrocketsmagazine.com/entry/20111221/animate-menu-underline-using-jquery.html http://webrocketsmagazine.com/entry/20111221/animate-menu-underline-using-jquery.html Wed, 21 Dec 11 11:54:05 +0900 この記事では、メニュー下のラインがマウスを追いかけるようにアニメーションするギミックをjQueryで実現する方法を紹介します。言葉ではうまく説明できないので、本文のサンプルを見てください。 http://webrocketsmagazine.com/img/upload/2771.png http://webrocketsmagazine.com/entry/20111221/animate-menu-underline-using-jquery.html http://webrocketsmagazine.com/entry/20111220/80-design-quotes-for-inspiration.html http://webrocketsmagazine.com/entry/20111220/80-design-quotes-for-inspiration.html Tue, 20 Dec 11 12:20:32 +0900 WEBデザイナーに「やるぞ！」と思わせる名言を海外サイト Web Design Mash, Design Was Here などから一気に紹介します。デザインとは何か ―先人達の皮肉と希望がぎゅぎゅっと詰まっていて、デザイナー魂に火をつけちゃうかもしれない名言集です。 http://webrocketsmagazine.com/img/upload/2763.png http://webrocketsmagazine.com/entry/20111220/80-design-quotes-for-inspiration.html http://webrocketsmagazine.com/entry/20111219/logo-generation-service-logotype-maker.html http://webrocketsmagazine.com/entry/20111219/logo-generation-service-logotype-maker.html Mon, 19 Dec 11 12:36:21 +0900 この記事は、結構本格的なロゴが作れちゃうサービス「LOGOTYPE MAKER」を紹介します。 http://webrocketsmagazine.com/img/upload/2692.png http://webrocketsmagazine.com/entry/20111219/logo-generation-service-logotype-maker.html http://webrocketsmagazine.com/entry/20111216/my-favorite-illustrative-websites.html http://webrocketsmagazine.com/entry/20111216/my-favorite-illustrative-websites.html Fri, 16 Dec 11 12:34:57 +0900 イラストを活かした個性的なサイトデザインは、見ていて創り手の世界観に魅了されます。その中でも比較的ポップなイラストを使ったサイトを集めてみました。 http://webrocketsmagazine.com/img/upload/2522.png http://webrocketsmagazine.com/entry/20111216/my-favorite-illustrative-websites.html http://webrocketsmagazine.com/entry/20111215/how-to-make-browzer-extension-using-crossrider.html http://webrocketsmagazine.com/entry/20111215/how-to-make-browzer-extension-using-crossrider.html Thu, 15 Dec 11 12:04:13 +0900 jQueryで各種プラウザに対応した拡張が作れてしまう、crossriderというオンラインサービスを紹介します。 http://webrocketsmagazine.com/img/upload/2465.png http://webrocketsmagazine.com/entry/20111215/how-to-make-browzer-extension-using-crossrider.html http://webrocketsmagazine.com/entry/20111213/23-orange-website.html http://webrocketsmagazine.com/entry/20111213/23-orange-website.html Tue, 13 Dec 11 12:08:58 +0900 この記事では、メインカラーに普段使いそうで、それほど使わない色「オレンジ」のサイトをいくつか紹介します。 http://webrocketsmagazine.com/img/upload/2382.png http://webrocketsmagazine.com/entry/20111213/23-orange-website.html http://webrocketsmagazine.com/entry/20111212/cool-modal-window-website.html http://webrocketsmagazine.com/entry/20111212/cool-modal-window-website.html Mon, 12 Dec 11 11:12:10 +0900 この記事では、Webサービス製作時などに参考になりそうな、モーダルウィンドウのデザインをいくつか紹介します。 http://webrocketsmagazine.com/img/upload/2235.png http://webrocketsmagazine.com/entry/20111212/cool-modal-window-website.html http://webrocketsmagazine.com/entry/20111209/html-code-generation-using-excel.html http://webrocketsmagazine.com/entry/20111209/html-code-generation-using-excel.html Fri, 09 Dec 11 11:25:37 +0900 この記事では、Excelのデータ表から簡単にHTMLを生成方法を紹介します。 http://webrocketsmagazine.com/img/upload/2170.png http://webrocketsmagazine.com/entry/20111209/html-code-generation-using-excel.html http://webrocketsmagazine.com/entry/20111208/pink-websites.html http://webrocketsmagazine.com/entry/20111208/pink-websites.html Thu, 08 Dec 11 11:40:54 +0900 今回はピンクを使ったサイトを色々集めました。可愛らしいものから、キュート・ビビット・セクシー・女性的・優しさをイメージしたものをピックアップ！ http://webrocketsmagazine.com/img/upload/2134.png http://webrocketsmagazine.com/entry/20111208/pink-websites.html http://webrocketsmagazine.com/entry/20111207/web-design-contact-forms.html http://webrocketsmagazine.com/entry/20111207/web-design-contact-forms.html Wed, 07 Dec 11 11:19:29 +0900 海外サイトのお問い合わせフォームを集めてみました。お問い合わせフォームは作るけどパターン化してるって思ったことありませんか？ インスピレーションの素敵なサイトをリストアップしましたので、今後のサイトデザインに悩んだ時に参考にしてください。 ページフッターにお問い合わせフォームがあるサイトもあるので、スクロールしてご覧ください。 http://webrocketsmagazine.com/img/upload/2078.png http://webrocketsmagazine.com/entry/20111207/web-design-contact-forms.html http://webrocketsmagazine.com/entry/20111206/5-strategy-of-registration-form.html http://webrocketsmagazine.com/entry/20111206/5-strategy-of-registration-form.html Tue, 06 Dec 11 10:57:20 +0900 Webサービスを作る際に、ユーザー登録までの導線をどう引くかというのは、ユーザー数にも影響してくる大きな要因になりますね。そこで、この記事では、ユーザー登録までの導線をどう引くかといういくつかの手法を紹介しちゃいます。Don't miss it!。 http://webrocketsmagazine.com/img/upload/2021.png http://webrocketsmagazine.com/entry/20111206/5-strategy-of-registration-form.html http://webrocketsmagazine.com/entry/20111205/how-to-scroll-website-in-non-programing.html http://webrocketsmagazine.com/entry/20111205/how-to-scroll-website-in-non-programing.html Mon, 05 Dec 11 11:58:49 +0900 この記事では、jQueryのプラグインを使ってノンプログラミングで今流行りのスクロールするサイトを作るプラグインの紹介とチュートリアルを紹介します。 http://webrocketsmagazine.com/img/upload/2025.png http://webrocketsmagazine.com/entry/20111205/how-to-scroll-website-in-non-programing.html http://webrocketsmagazine.com/entry/20111202/jquery-jparallax-plugin-tutorial.html http://webrocketsmagazine.com/entry/20111202/jquery-jparallax-plugin-tutorial.html Fri, 02 Dec 11 10:09:46 +0900 この記事では、マウスにあわせて画像や背景が3D的に動かす（パララックス効果）ギミックを簡単に実現できる、jQueryプラグイン、jParallaxの使い方と、jParallaxを使ったサイトを紹介します。 http://webrocketsmagazine.com/img/upload/2024.png http://webrocketsmagazine.com/entry/20111202/jquery-jparallax-plugin-tutorial.html http://webrocketsmagazine.com/entry/20111201/what-do-you-read-css-property.html http://webrocketsmagazine.com/entry/20111201/what-do-you-read-css-property.html Thu, 01 Dec 11 10:20:38 +0900 新人デザイナーが最初にぶち当たる試練に、英語があったりします。自分だけが知らないのかと思って、先輩聞けずなんとなくごまかしているうちに・・・いまさら聞けないし。といったことになるかもしれません。そこで今回の記事では、CSSプロパティー関連の英語で読みにくいものをピックアップして、読み方を解説します。 http://webrocketsmagazine.com/img/upload/2027.png http://webrocketsmagazine.com/entry/20111201/what-do-you-read-css-property.html http://webrocketsmagazine.com/entry/20111130/tasty-restaurant-website.html http://webrocketsmagazine.com/entry/20111130/tasty-restaurant-website.html Wed, 30 Nov 11 11:19:26 +0900 レストランや居酒屋などのサイトって見た目のインパクトって大事ですよね。そこで、食べ物系のサイトでよくある被写界深度が浅い写真がメインになっているサイトを集めてみました。基準はおいしそうかどうかです。お昼ごはんは何を食べに行こうか、考えながら見てください（笑）。 http://webrocketsmagazine.com/img/upload/2026.png http://webrocketsmagazine.com/entry/20111130/tasty-restaurant-website.html http://webrocketsmagazine.com/entry/20111129/25-cool-apparel-websites.html http://webrocketsmagazine.com/entry/20111129/25-cool-apparel-websites.html Tue, 29 Nov 11 10:41:18 +0900 Webデザイナーなら、アパレル系ブランドのサイトは、一度やってみたいと思うものではないでしょうか。なぜかWebデザイン業界の中でもあそこだけ、世界が違うんですよねー色々な意味で・・・。そこで今回の記事では、アパレル系のWebサイトを集めてみました。憧れながら見てください。 http://webrocketsmagazine.com/img/upload/2023.png http://webrocketsmagazine.com/entry/20111129/25-cool-apparel-websites.html http://webrocketsmagazine.com/entry/20111128/21-website-using-paper-texture.html http://webrocketsmagazine.com/entry/20111128/21-website-using-paper-texture.html Mon, 28 Nov 11 11:54:32 +0900 紙のメタファというのは、デザインに困ったときに使うテクニックじゃないでしょうか。僕もよく困ったときに使います。そこで今回の記事では、紙のメタファを使っているサイトをいくつか、紹介します。 http://webrocketsmagazine.com/img/upload/2028.png http://webrocketsmagazine.com/entry/20111128/21-website-using-paper-texture.html http://webrocketsmagazine.com/entry/20111125/manipulate-for-eyecatching-image.html http://webrocketsmagazine.com/entry/20111125/manipulate-for-eyecatching-image.html Fri, 25 Nov 11 11:02:16 +0900 TOPページに使ういい写真がない！　そんな経験をしたことがある Webデザイナーさんのために、「うーん」と悩んでしまう、その写真をなんとか、TOPページのメイン写真にする方法を考えて見ました。 http://webrocketsmagazine.com/img/upload/1403.png http://webrocketsmagazine.com/entry/20111125/manipulate-for-eyecatching-image.html http://webrocketsmagazine.com/entry/20111124/27-decorated-thumbnails.html http://webrocketsmagazine.com/entry/20111124/27-decorated-thumbnails.html Thu, 24 Nov 11 11:05:39 +0900 写真を扱うサイトでは、写真の見せ方がサイト全体の雰囲気を決定する、大切なデザイン要素になってきますよね。そこで、この記事ではサムネイルがキレイなサイトを、とにかくたくさん集めてみました。 http://webrocketsmagazine.com/img/upload/2011.png http://webrocketsmagazine.com/entry/20111124/27-decorated-thumbnails.html http://webrocketsmagazine.com/entry/20111122/portfolios-using-own-faces.html http://webrocketsmagazine.com/entry/20111122/portfolios-using-own-faces.html Tue, 22 Nov 11 10:12:20 +0900 ポートフォリオサイトの最大の目的は自分を売り込むことです。ましてやフリーランスになると、自分で営業もしなければならないので、自分の顔を覚えてもらうというのは大切なことです。そこで、この記事では、海外のポートフォリオサイトから自分の顔をモチーフにした使ったサイトをいくつか紹介します。 http://webrocketsmagazine.com/img/upload/1225.png http://webrocketsmagazine.com/entry/20111122/portfolios-using-own-faces.html http://webrocketsmagazine.com/entry/20111121/navigation-menu.html http://webrocketsmagazine.com/entry/20111121/navigation-menu.html Mon, 21 Nov 11 11:42:55 +0900 ウェブサイトのデザインは、どこかに主力となる部分が1つはあるかと思います。 今回は、サイトに訪れる人がコンテンツを見つけてくれるために必要である素晴らしいと思ったメニューデザインのサイトを集めてみたので、ご紹介します。メニューのナビゲーションが視覚的にわかりやすいシンプルタイプ。 http://webrocketsmagazine.com/img/upload/1202.png http://webrocketsmagazine.com/entry/20111121/navigation-menu.html http://webrocketsmagazine.com/entry/20111118/awesome-javascript-gimmick-website.html http://webrocketsmagazine.com/entry/20111118/awesome-javascript-gimmick-website.html Fri, 18 Nov 11 11:35:55 +0900 海外で人気のサイトの中から、JavaScriptを使ったギミックがすごすぎるサイトをいくつかピックアップしてみました。新しいサイトを作る際などのインスピレーションとして眺めてみるのも楽しいと思います。 http://webrocketsmagazine.com/img/upload/2063.png http://webrocketsmagazine.com/entry/20111118/awesome-javascript-gimmick-website.html http://webrocketsmagazine.com/entry/20111117/website-using-tag-and-ribbon.html http://webrocketsmagazine.com/entry/20111117/website-using-tag-and-ribbon.html Thu, 17 Nov 11 11:54:39 +0900 海外ではリボンを使ったサイトをよく見かけます。リボンってプレゼントのイメージやかわいいキュートなイメージしがちですが、今回集めたサイトは、POPなタイプやクールなイメージでまとまっているものを集めました。また、結構使えそうなリボンのフリーダウンロード素材も合わせて紹介しています。 http://webrocketsmagazine.com/img/upload/1028.png http://webrocketsmagazine.com/entry/20111117/website-using-tag-and-ribbon.html http://webrocketsmagazine.com/entry/20111116/how-to-code-preloader-width-jquery.html http://webrocketsmagazine.com/entry/20111116/how-to-code-preloader-width-jquery.html Wed, 16 Nov 11 18:13:56 +0900 フラッシュサイトの専売特許だったNowローディング（プリローダとも）ですが、jQueryやHTML5の登場によって、様々な表現が可能となり、最近では、非フラッシュサイトでも見かけるようになりました。この記事では、jQueryを使ってプレローダーを表示する法を考えて見ます。 http://webrocketsmagazine.com/img/upload/2070.png http://webrocketsmagazine.com/entry/20111116/how-to-code-preloader-width-jquery.html http://webrocketsmagazine.com/entry/20111115/php-thumbnailer.html http://webrocketsmagazine.com/entry/20111115/php-thumbnailer.html Tue, 15 Nov 11 23:09:36 +0900 ホームページとかを作っていると、写真ページやギャラリーとかのサムネイルで画像のサイズを縮小したいときってありますよね。 画像処理ソフトでやる場合、画像数が多いと結構大変になってきます。そこで、この記事では1つのPHPファイルアップするだけで使える、サムネイラーを作ってみました。 http://webrocketsmagazine.com/img/upload/997.png http://webrocketsmagazine.com/entry/20111115/php-thumbnailer.html http://webrocketsmagazine.com/entry/20111114/how-to-scroll-website-holizontal-width-jquery.html http://webrocketsmagazine.com/entry/20111114/how-to-scroll-website-holizontal-width-jquery.html Mon, 14 Nov 11 12:50:00 +0900 この記事では、「Smooth Vertical or Horizontal Page Scrolling with jQuery」で紹介されていた方法を参考に、jQueryでサイト全体を横や縦にスクロールさせる１つの方法を紹介します。 http://webrocketsmagazine.com/img/upload/2015.png http://webrocketsmagazine.com/entry/20111114/how-to-scroll-website-holizontal-width-jquery.html http://webrocketsmagazine.com/entry/20111110/html5-contextmenu-share-buttons.html http://webrocketsmagazine.com/entry/20111110/html5-contextmenu-share-buttons.html Thu, 10 Nov 11 13:32:03 +0900 前回の記事では、Firefox8で対応したMenuタグを使っていろいろ遊んでみたのですが、今回の記事では引き続き、このMenuタグを使って、実用的な例として、右クリックメニューにFacebookとかの共有メニューを表示してみたいと思います。 http://webrocketsmagazine.com/img/upload/927.png http://webrocketsmagazine.com/entry/20111110/html5-contextmenu-share-buttons.html http://webrocketsmagazine.com/entry/2011110901/firefox8-contextmenu-usage-and-demo.html http://webrocketsmagazine.com/entry/2011110901/firefox8-contextmenu-usage-and-demo.html Wed, 09 Nov 11 17:10:39 +0900 新しくリリースされたFirefox8は、HTML5で追加されたmenu要素に対応しているそうです。ということでこの記事では、コンテキストメニュー（右クリックで表示されるメニュー）をmenuタグを使って表示する方法を紹介したいと思います。 http://webrocketsmagazine.com/img/upload/924.png http://webrocketsmagazine.com/entry/2011110901/firefox8-contextmenu-usage-and-demo.html http://webrocketsmagazine.com/entry/20111109/facebook-like-tagging-jquery-plugin.html http://webrocketsmagazine.com/entry/20111109/facebook-like-tagging-jquery-plugin.html Wed, 09 Nov 11 10:10:06 +0900 Facebookやdeliciousのタグ編集欄って、タグの入力・編集・削除が１つのテキストボックスの中で実現されていて、すごいと思いませんか？。そこで、あんなUIをJavaScriptで簡単に実現するjQueryのプラグインを紹介したいと思います。 http://webrocketsmagazine.com/img/upload/2066.png http://webrocketsmagazine.com/entry/20111109/facebook-like-tagging-jquery-plugin.html http://webrocketsmagazine.com/entry/20111108/kids-website-11.html http://webrocketsmagazine.com/entry/20111108/kids-website-11.html Tue, 08 Nov 11 11:22:00 +0900 僕の苦手なデザインの分野の１つがこのキッズ向けサイトです。一般に子供は、原色に近い色を好み、反対に大人は彩度の低いものを好むと言われています。だから、子供が見るように作ったサイトと言うと、大人には痛いほどカラフルなものが多かったりします。そこでこの記事では、いくつかの子供向けサイトを紹介してみようと思います。ブックマークして子供向けサイトを制作する際などに参考にしてください。 http://webrocketsmagazine.com/img/upload/741.png http://webrocketsmagazine.com/entry/20111108/kids-website-11.html http://webrocketsmagazine.com/entry/20111107/polaroid-like-polarism.html http://webrocketsmagazine.com/entry/20111107/polaroid-like-polarism.html Mon, 07 Nov 11 11:38:22 +0900 ここ最近、Facebookとかソーシャルサービスで自分のプロフィール写真をアップしたりすることが多くなっているのではないでしょうか。今日紹介するサービスは、アップロードした写真をポラロイド風に変換できるpolarismというサービスです。 http://webrocketsmagazine.com/img/upload/861.png http://webrocketsmagazine.com/entry/20111107/polaroid-like-polarism.html http://webrocketsmagazine.com/entry/20111104/website-with-landscape-17.html http://webrocketsmagazine.com/entry/20111104/website-with-landscape-17.html Fri, 04 Nov 11 12:20:34 +0900 最近、イラスト調のランドスケープ（風景）をバックに使ったサイトを、いろいろなところで見かけるようになりました。そこで今回の記事ではランドスケープのイラストを使ったサイトをいくつか紹介してみます。 http://webrocketsmagazine.com/img/upload/794.png http://webrocketsmagazine.com/entry/20111104/website-with-landscape-17.html http://webrocketsmagazine.com/entry/20111102/scrollable-website-with-jquery.html http://webrocketsmagazine.com/entry/20111102/scrollable-website-with-jquery.html Wed, 02 Nov 11 11:18:43 +0900 jQueryでコンテンツをスクロールさせる海外サイトを最近見るのですが、あれはかっこいいですね。そこで、今回の記事では、jQueryでコンテンツをスクロールさせているサイトをいくつか紹介しつつ、このタイプのサイトに特有の問題についても触れてみたいと思います。 http://webrocketsmagazine.com/img/upload/815.png http://webrocketsmagazine.com/entry/20111102/scrollable-website-with-jquery.html http://webrocketsmagazine.com/entry/20111031/smartphone-apps-website-11.html http://webrocketsmagazine.com/entry/20111031/smartphone-apps-website-11.html Mon, 31 Oct 11 21:55:13 +0900 スマートフォン向けのアプリがたくさんリリースされている中、それを紹介するサイトというものも多く登場してきています。そこでこの記事では、スマフォアプリを紹介するサイトのデザインをいくつか集めてみました。 http://webrocketsmagazine.com/img/upload/723.png http://webrocketsmagazine.com/entry/20111031/smartphone-apps-website-11.html http://webrocketsmagazine.com/entry/20111024/purple-website-10.html http://webrocketsmagazine.com/entry/20111024/purple-website-10.html Mon, 24 Oct 11 16:26:15 +0900 独特の雰囲気を持つパーブルですが、なかなか使うことがないよーって人も多いんじゃないでしょうか。 この記事では、この紫を使ったいい感じのサイトをいくつか紹介してみたいと思います。これを見たら、紫を少し使ってみようかなと思えるかもしれません。 http://webrocketsmagazine.com/img/upload/741.png http://webrocketsmagazine.com/entry/20111024/purple-website-10.html