サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
webarekore-c.hatenablog.com
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編?と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも!ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ!テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き(?)「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
早いもので年が明けて1か月が経ちました。春はまだ遠いと思っていましたが少し暖かくなってきたような気もします。 来年に正式勧告が予定されているHTML5ですが、既に世の中にはHTML5を駆使したサイトがたくさんあります。 今日は「HTML5+CSS3で書かれた一瞬Flashと見間違うようなサイト」をご紹介します。 ウェブの進化 http://www.evolutionoftheweb.com/ すごい上に勉強になるサイトです。 ブラウザの歴史とインターネットの歴史。さらに画面の明度を変えたり、ズームイン/アウトも出来ちゃいます。 Mr.doob http://mrdoob.com/92/Google_Gravity_HTML5 かつてFlashのActionScriptで高度なインタラクティブな実験サンプルを公開していた方のHTML5実験サイトです。 あのGoogleがめちゃくちゃになったり
どうもこんにちは、僕です。 皆さんも大分お世話になっていると思われるjQuery。 今日はそのjQueryを使ったユニークなプラグインを紹介してみます。 1.wScratchPad http://www.websanova.com/plugins/scratchpad スクラッチ機能を実装できるプラグインです。 スクラッチ部分の色や画像の指定、更にはカーソルにコインを使うことができます。 また、どれくらい削ったのかをパーセント表示してくれる機能も搭載しています。 2.oriDomi http://oridomi.com/ 要素を折り紙のように折りたたむことが出来るプラグインです。 折り数や向き、折り幅などの指定が出来るようです。 3.Cheat Code http://www.trovster.com/lab/plugins/cheat-code/ キーコマンドを実装できるプラグインです。
前回紹介しました 今話題の第二回全国統一HTML5実力テストを受けてみた! http://t.co/kA5Q2kNM 応用編が本日リリースしました。 jsdo.it 第二回全国統一 HTML5実力テスト - jsdo.it - Share JavaScript, HTML5 and CSS http://jsdo.it/event/html5cat/2012/autumn/ 前回の結果は81点で、神コーダ―という称号もいただきました。 応用編ということで教材で少し勉強しちゃいました(笑) いざ、チャレンジ!! 今回は答えを空白にドラッグ&ドロップで解答していきます。 流石応用編だ なかなかやりますな(・Θ・;)アセアセ… では結果です。 79点でした。(:_;) 3番の問題全部間違ってるし・・・・・・ 見なかった事にして下さい(笑) 今回はランキング機能もついていて 自分が全体で何位なのか
どうもこんばんは、僕です。 関東では雪が降った所もあったようですが、こちらはよく晴れたいい天気です。 降ったら降ったで大変ですが、全く降らないというのも何か物足りない…なんて気もしますね。 さて今日は、「テキストをアニメーションさせるjQueryプラグイン」を紹介していきたいと思います。 以前はFlashを使用したアニメーションが主流でしたが、最近はFlashに代わってjQueryを使ったアニメーションがが多く用いられています。 jQueryってすごいなぁ(小学生並みの感想) …おっと、話が脱線してしまいました。 1.Textualizer http://kiro.me/projects/textualizer.html 2.dynamo.js http://jordanscales.com/dynamo/ 3.TextBlur https://github.com/ottonascare
こんにちは。 WinからMacへ乗り換えました!! 使い慣れない逆方向のスクロールはもちろんのこと、 今までWindowsで使っていたソフトが使えなくて困り中>< そこで、 自分がWindowsでよく使っていたソフト、 Macではコレ使えばいい!って気づいたソフトをまとめてみようと思います。 (完全に個人的な好みですが、ご了承ください) 圧縮・解答フリーソフト Windows : Lhaz +Lhaca Mac : ALZip The Unarchiver CleanArchiver ・使ってみて良かった順:CleanArchiver > The Unarchiver > ALZip CleanArchiverはDS_StoreなどMac用の管理ファイルが圧縮の際、入らないので、 Winユーザとのやり取りの時にはこっちが良いかと。 The Unarchiverは大体解
通勤・通学途中であったり、カフェや道端などでも、今や多くの人がスマートフォンでさまざまなアプリを楽しんでいますよね。 結局どんなゲームが一番人気なんだろう、と思い調べてみました。 『ソーシャルメディア調査報告書2011』によると、実に45.9%の人が育成ゲームで遊んでいるそうです。 ちなみに、「シミュレーションゲーム」が23.3%、「パズル」が14.0%、「学習・クイズ」が11.6%とのこと。 育成ゲーム、ダントツで人気なのですね…。 確かに最近は、綺麗なカードを育ててバトルする!というのが流行りなようです。 私なんかは綺麗なイラストを見ているだけで幸せなので、ついついダウンロードしてしまいます。 さてさて、そんな中でも、去年から私もやっているのが「拡散性ミリオンアーサー」というゲーム。 ▲ Webサイトでは本格的なアニメーションのトレーラーも公開 スマートフォン向けながら、RPGとサイト
皆さんこんにちは 今日はjsdo.itさんが主催する 第二回全国統一 HTML5実力テスト - jsdo.it - Share JavaScript, HTML5 and CSS http://jsdo.it/event/html5cat/2012/autumn/ テストを受けてみました。 最初の問題はWEBサイト作ったことのある人なら簡単だと思います。 しかし・・・・・・・・・・・・ 問題が進んでいくたびに 難易度が上がっていく。。。(TwT。) そして採点へ! 81点でした。意外に結構あっていたんですね。 なんと神コーダーという称号をGETしました。 ほかにもJavaScriptとiSOのテストが受けることができます。 私の結果は散々だったので公開は控えますね。。。。。。。 このテストは学生や、WEB屋の方も勉強になると思います。 結果はツイートできるのでフォロワーと競い合うのも 面白
皆さんこんにちは!今日はWeb上のフリー素材サイトを集めてみました。 ソザイング http://sozaing.com/ こちらのサイトにお世話になっている方は多いと思います。 私もこのサイトをすごく利用させていただいてます。 カテゴリー別なので見やすく、種類も多いのでとてもおすすめです。 イラストがすべて無料 「イラストAC」 http://www.ac-illust.com/ こちらのサイトはイラスト素材が魅力です。 私は絵を描くのが苦手なのでイラスト素材を使いたい時は迷わず ここを利用しています。 会員登録(無料)する事でダウンロードできます。 和柄・和風デザイン用AI・EPSファイル無料ダウンロード-粋屋 日本の伝統文様と伝統色- http://www.ikiya.jp/crest/download.html 和の素材といえばこのサイト 非常にクオリティの高い和の素材が沢山あります
「カリグラフィー」という言葉をご存じでしょうか? カリグラフィーとは文字(特に欧文)を美しく書く技術のことです。古くはコーランにも用いられ書面を美しく飾ることに使われてきました。 参考 : カリグラフィー - Wikipedia カリグラフィーはフォントにも用いられますが、今回はシンプルで使いやすい飾り枠としてのカリグラフィーを紹介します。 Abstract_Valentine02 http://www.allfreebrush.com/Vectors/Holiday/2011/0213/3597.html これからのシーズン、バレンタインに使えそうな可愛らしくもしつこくないカリグラフィー。 Caligraphy Design Elements http://www.allvectors.com/caligraphy-design-elements/ シンプルなラインのカリグラフィーがたく
もうすっかりCSS3も浸透したようですね。 スマホのアプリなんかを見ていても、「おっ、ここはCSS3使ってるな」なんていうデザインをよく見かけたりします。 画像を使わなくてもそれなりに豪華な見栄えを作る事が出来るので重宝しているのですが、グラデーションやら、リボンやら、あれって自分で一から書こうとすると結構面倒くさいですよね。 そこで、今日は簡単にリボンやボタンが作成できるCSSジェネレーターの「Live Tools」を紹介します。 トップページはこんな感じ。 ここから、自分が作りたいものを選んでクリックします。 試しに一番右端のリボンをクリックすると…。 こんな画面が出てくるかと思います。 このページが作業画面ですね。 この時点で、やっぱり別のを作りたい!という場合は、右上の「Change Tool」というボタンを押すだけで切り替えられるみたいですね。 さて、この画面をスクロールしていく
年が明けたと思ったら、あっという間にバレンタイン! もう一か月切ったんですね…。 大手製菓企業では、Webサイトの方も大分バレンタインっぽくなっていました。 今年の森永、ロッテ、明治のサイトデザインは以下の通り! 1.森永製菓 全体的にピンクを基調とした可愛らしいWebサイト。 女性に嬉しい、チョコレートのレシピを中心とした内容になっています。 レシピだけではなくて、パティシエの技も紹介しているのが特徴。 素人でも意外と簡単に作れそうなチョコレート飾りの作り方も! ワンランク上の手作りチョコレートを目指す女の子には有難いですね。 2.ロッテ 赤を基調としたロッテのWebサイト。 真っ赤な色とドット柄やレースといった、女の子が好きそうなデザインです。 おなじみのキャッチコピー通り、やっぱりこちらも手作りレシピが中心となっている様子。 近日公開の手作りチョコレシピ診断も面白そうです。 3.明治
風邪引いてしんどい…僕です。 登場から数年、すっかりお馴染みとなった「lightbox」。 この数年の間に様々な派生プラグインが出ました。 今回は、そのいくつかを紹介していきたいと思います。 1.ColorBox 2.fancyBox 3.prettyPhoto 4.jQuery.popeye 2.1 5.Shadowbox.js(商用利用は有料) http://www.tripwiremagazine.com/2012/07/jquery-lightbox-plugins.html 他にも、こちらのサイト(英語)で沢山のlightboxライブラリが紹介されていますので、気になった方はこちらもどうぞ。 それでは、体調がすぐれないのでこの辺で…m(_ _)m
日本でもどんどん認知度を上げているNAVER(ネイバー)! 日本では検索エンジンって聞かれると、GoogleやYahooを思い出しますが、 韓国では、NAVER・Daumなどが普通です。 今回は、韓国のNAVERで提供しているWEB標準開発ガイドやUIパターン、 その他のサービスなどを紹介したいと思います。 ( 完全に韓国のサイトなので、日本語に翻訳機能を使うのをオススメします。 翻訳に間違いがあるかと思います。ご了承ください。) NULI - 広く共有するWEB標準開発ガイド http://html.nhncorp.com/ ヌリって読むのかな?ちなみにNULIは韓国語で「広げる」という意味です。 メニューは英語で書かれているので、問題ないかと思いますが、 一応、カテゴリの説明です。 ( ちなみにサイト内の右下にある設定ボタンが結構面白い。) ・UIO FACTORY : マークアップ
貴方のWebサイトは情報をしっかり整理していますか? 整理できてないなぁと思う方はこの記事を参考に情報を整理してみて下さい。 ユーザーを迷わせないWebサイト造りでアクセスアップを狙いましょう! ・情報を整理する5つの方法 1.位置(Location) 情報に距離や場所など、地理的、物理的な概念を与えてそれらの位置に従って整理する方法です。 例えば、地図や案内図、見取り図などがあります。 2.アルファベット(Alphabet) アルファベット順や五十音順に整理する方法です。 例えば、辞書や電話帳などがあります。 3.時間(Time) 時間軸によって整理する方法です。 例えば、テレビの番組表や日記、年表やカレンダー、などがあります。 4.分野(Category) 情報をジャンルやカテゴリー毎にわけて整理する方法です。これは何を基準に分野分けするかというのが最も重要になります。 スーパーでの商
皆さんはご存じですか?jsdo.itが行っている 「第三回全国統一HTML5実技コンテスト」 http://jsdo.it/event/html5csc/vol3 お題はHTML5で表情を豊かに表現する「顔文字(・∀・)」です。 エントリーは誰でも簡単にできるみたいです。 また、選ばれると豪華な賞品をゲットできます。 凄いですね。 MacBookProはめっちゃ欲しいです~ スクリプトを勉強中の方や得意な方は挑戦してみて下さい。 応募期間は1/16日までなので気をつけてくださいね。 学生やクリエーターなどたくさんの人がエントリーしてますね。 またjsdo.itは作品のコードも閲覧できるので、気になった動きなどを参考にして みるのもいいかも知れません。 またスクリプトが苦手な方はこちらで勉強してみてください。 とほほのJavaScriptリファレンス http://www.tohoho-we
あけましておめでとうございます! 今年も当ブログをよろしくお願いします。 皆さん、お正月をどのようにお過ごしでしょうか。 新しい年を迎えたということで、Web制作の新しいお供を探してみるのはいかがでしょう? 今日は「入力補助付きのHTMLエディタ」をご紹介します。 ■Crescent Eve http://www.kashim.com/eve/ 軽くて多機能なエディタです。HTML5に対応しています。 タグ、属性の入力補助の他に文法チェックやショートカットの機能もあります。 「Ctrl」+「Enter」でその場所の適切な閉じタグが入力出来る、という機能がかなり便利です。 ■ez-HTML http://www.w-frontier.com/software/ezhtml.html コードの編集からFTPでのアップロードまで出来るエディタです。タブ機能付き。 ちょっと編集してアップロードする
どうもこんにちは、僕です。 2012年もいよいよ終わりが近づいて来ました。 慌てて家の大掃除をしている方も多いのではないでしょうか? 今回は、いらないファイル等のパソコンのゴミを掃除してくれるメンテナンスツールをまとめてみました。 ※筆者はWindows XPユーザーなので、Vista・7・8・Macをお使いの方には対応しきれない部分があるかもしれません。ゴメンナサイm(_ _)m 1.Glary Utilities 様々なパフォーマンス改善ツールを1つにまとめたソフトです。 一時ファイルの削除やスパイウェアのスキャンを1クリックで行えるので、操作も簡単です。 2.CCleaner こちらもGlary Utilitiesのようなパフォーマンス改善ツールです。 未使用のレジストリ等の削除ができます。 Glary Utilitiesと併せて使用すると良いでしょう。 3.Safarp Windo
2012年ももう終わりですね。皆さん今年はどんな一年でしたか? 私はマヤ文明を信じて どうせ今年中に死ぬならと思い 今まで貯めたお金を全て使って なんと・・・・・・・・・・ 世界一周旅行をしました!! なんーて冗談はさておき(-_-) 今日は2013年に流行りそうな「アシンメトリー」を使ったWEBサイトを紹介したいと 思います。 2012年はパララックス効果を使ったWebサイト流行りましたね。 では紹介したいと思います。 spacho http://www.spacho.com/ こちらのサイトはレイアウトがアシンメトリーで エフェクトが作り込まれています。 私はトマトが嫌いですがこれなら飲みたくなるかも(笑) Alex Kehayias http://www.astronautradio.com/ トップのメニューを押すとアシンメトリーのスクロールになります。 戻り方が分かりづらいのがB
個人的にデザインする時、よく使っているのがテクスチャ!です。 ちょっと加えるだけでも、完成度が全然変わります! しかし、テクスチャが凄く気に入っても、 海外サイトだったり、著作権に基づく記述などが必要になったり、 使う時に少し大変ですよね。。 そういうことで悩んでいる時に、 見つけた一つのサイトがすごく良かったので紹介したいと思います。 Lost & Taken http://lostandtaken.com/gallery たくさんのテクスチャや素材を配布していて、 個人的・商用利用どちらでもフリー! 記述やリンクなどはやってくれたら嬉しいけど、必須ではない とのことです。 テクスチャで何ができる? と疑問がある方はこちらの記事を参考にしてください。 上記のサイトのテクスチャが使われている作品のまとめ記事です。 50 Design Tutorials That Use lt Textur
こんにちは! もう年の瀬でかなり寒くなってきました。寒いと手がかじかんで上手く動かず、作業スピードが落ちてしまいますよね……。 少しでも作業効率を上げるために手を温めるのもいいですが、普段使っているDreameaverをカスタマイズするというのもいかがでしょう? ちょっと手を加えるだけで驚くほど便利になっちゃいますよ。 なお今回はDwのconfigurationファイルの書き変えを行うものもあるため、カスタマイズ前にファイルのバックアップを必ず取ってください。 ・CSSのコードヒントの順番を変える CSSで横幅を指定する時、「wi」と入力しコードヒントからwidthと打つつもりが、 ↑のようにwidowsという何に使うんだか分からないものを誤入力……なんて経験ありませんか? そんな誤入力を防ぐ為に、コードヒントの順番を変えてしまう方法があります。 Program Filesから Adobe
もうすっかり辺りはクリスマスの雰囲気に包まれていますね。 駅前のイルミネーションがとてもきれいです。 ただ、浮かれてもいられないこの時期…。 もう年末です。年末といえば、やらなければいけない事がありますよね。 そうです、年賀状です。 新年に、お友達や親戚の皆に届くように年賀状を書かなければなりません。 毎年干支にちなんだイラストを描いて印刷しているのですが、一枚描くのもなかなかに大変ですよね。 そこで、本日は年賀状をぱぱっと装飾できるイラストをご用意しました! 個人・商用無料のフリーイラストですので、年賀状のデザインに困っている方はワンポイントなどにぜひご使用ください。 背景も透過済みですので、切り抜いてご使用くださいね。 ■ ダウンロードは下記URLからどうぞ! https://www.dropbox.com/s/8jpcwcutmofts6u/%E5%B9%B4%E8%B3%80%E7
最近はenchant.jsなどでゲームを作る事もあったので、ドット絵を描く機会も増えました。 9leapなんかを覗いてみると、結構皆さんドット絵で作ってらっしゃいますよね。 あえてドット絵風にして、ちょっと昔風のゲームにしてみるのも素敵です。 enchant.jsのサイトでは素材としてドット絵を配布してくださっているのですが、 どうせなら自分で作ってオリジナリティを出したいところ。 ▲こんな感じのドット絵をうごかしたりしてました。 普通にイラストを描くのも楽しいんですが、最近ドット絵で絵を描くのが再熱してます。 最近発売した「とびだせどうぶつの森」のマイデザインで描くのが楽しくて仕方がないのです。 マイデザインで洋服や看板を描いたりできるのですが、これがドットで打たないといけないので良い練習になります。 ▲ビンタがかわいすぎてつらい。マイデザインでつくった服を着てくれました。 3DSなので
どうもこんにちは!僕です。 今日は、HTMLやCSSを使ってモバイルアプリが作れてしまう『PhoneGap Build』を紹介していきたいと思います。 PhoneGapとは、Adobe社より公開されている、スマートフォン向けアプリケーション制作のためのフレームワークです。 簡単に説明すると、「HTML・CSSの知識さえあればスマホアプリが作れてしまう」スグレモノです。 そして、今回解説する『PhoneGap Build』は、ソースコードをアップロードすることでアプリをビルドしてくれるWebサービスとなっています。 それでは、実際に使ってみましょう。 HTML・CSS・でコーディングをする 今回はとりあえず「Hello World!!」と表示するだけのアプリを作ってみます。 コーディングが終わったら、index.htmlとして保存し、zipファイルに圧縮しておきましょう。 PhoneGap
皆さんは自分の住んでいる地域や県のサイトを見たことがありますか? 見たことがあるという人の多くは「お固いなあ……」という印象が多いかと思います。 仕方のない事とはいえなんだか無味乾燥……。 ですが市や区としての公式サイトはカッチリでも、 観光などのサイトでは真面目な印象の自治体も意外にもはっちゃけていたり、 凄く凝っていたりするサイトは多いのです! 最近では香川県の「うどん県」がたいへん話題になりニュースにも取り上げられ、記憶に新しいかと思います。 今日はそんな「うどん県」に負けないくらいイケてる自治体・公共機関のWebサイトをご紹介します。 ◆東京都交通局 観光路線バス「東京→夢の下町」 http://www.kotsu.metro.tokyo.jp/bus/shitamachi/japanese/index.html 伝統色でまとめられた「古き良き日本らしさ」を表現した都バスのサイト。
ワイヤーフレーム? 企画やサイトの方向が決まったら、どこにどういう内容を入れるかで結構悩みますよね。 PhotoshopやFireworksでやっている方もいらっしゃると思いますが、 個人的にはソフトを使用する前に、手書きのワイヤーフレームを作るのをオススメします。 メリット ・修正が早い、作業時間が早い ・細かい要素なども描けるため、よりサイトの全体像が分かる ・チームメンバーやクライアントにより直感的に伝えることができる デメリット ・具体的な数値やサイズがないため、またソフトで作業しなければならない」 ・絵が下手だと逆効果(涙目) 単純なボックスや配置の仕方よりも スケッチで細かいところまで表現することによってより理解が深まると思います。 手書きワイヤーフレームの例 iPad app sketch 結構細かいところまで描いています。 マガジンやカタログのサイトの時は撮影の時点から使え
このページを最初にブックマークしてみませんか?
『Webデザイン初心者向けのあれこれ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く