どうもですよ、はやちですよ。 今回は、パラパラ漫画風のjQueryプラグインをご紹介します。 ソースはGitHubの方からDLしてくださいまし( ˘ω˘)☞三☞ｼｭｯｼｭｯ ROLLER BLADE.js セットアップ まず、プラグインと専用のCSSをセットします。 <script src="rollerblade.js"></script> <link rel="stylesheet" src="rollerblade.css"> 初期の画像を設定 次に、いつも登場しているこいつの画像を置き、設定します。 <div id="target" class="rollerblade"> <img src="path/to/image/1.jpg" alt="Rollerblade.js"/> </div> JSの設定 こいつがくるくると回るようにしたいので、スタート時の「0」から、ひと回りする

こんにちは、フロントエンドエンジニアのいなばです。 最近何件かフォームのバリデーションの実装について相談される機会が続いたので、 社内勉強会の資料を作ったついでに記事にもしてみました。 今回は、大きく分けて下記2点を満たすフォームを作ってみたいと思います。 不正な入力値のとき、エラー内容がリアルタイムに表示される 各項目の入力内容により、送信ボタンの非活性化 / 活性化が切り替わる 最近では当たり前になりつつある、エラーの内容がその場で確認できて、項目のバリデーションがすべて通らないと送信ボタンが押せないフォームです。 基本方針 HTML/CSSでできることはHTML/CSSでやる HTMLでできないことをJavaScriptでカバーする HTML5からフォームのバリデーションに関する機能が拡張されたため、使えるものは使ってなるべく楽に実装することを目指します。 フォームを構成する要素 ざ

ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の

こんにちは、デザイナーのぺちこです。 近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。 私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。 大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。 そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ！」と立ち止まってしまいます。 サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。 というわけで今回は、テキストリンクのHo

お疲れ様です、ももこです。 おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。 今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」※すでに提供を終了していますをご紹介したいと思います。 「SIMPLE MODAL」 デモ 用意されているデモは全部で8種類あります。 その中でも特に使用頻度が高そうな5つのデモをご覧ください。 ALERT シンプルなアラート風ウィンドウ 商品紹介などに使えそうな基本的なウィンドウ MODAL　AJAX AJAXを使用し、コンテンツにアコーディオンを含めているウィンドウ MODAL IMAGE LightBox風に画像を表示するウィンドウ VIDEO EMBED 動画を埋め込んで再生するウィンドウ 記述 ウィンドウ内のテキストや画像は全てスクリプトの中に含めます。 「

こんにちは、しょごです。 CMSを使ったシステムサイト構築を長年やっていると、Movable TypeとWordPress、結局どっちがいいの？という疑問が出てくるかと思います。 そこで今回は、改めて完全ウチの目線でMovable Typeのメリットを検証してみたので、お伝えしていきたいと思います。 遠慮はしませんよ。マジで。 Movable Typeのメリットを検証してみた 今回お伝えするMovable Typeのメリットは下記のとおり。 HTMLの静的出力ができる 現行サイトに導入しやすい 導入はラク！設置＆ブラウザで必要情報入力するだけ テンプレート構築に必要なのは“MTML”のみ バージョンアップが簡単（システム的目線で） 「ウェブサイト」機能で同等のサイトを複数管理しやすい 1つずつ見ていきましょう！ 1. HTMLの静的出力ができる Movable TypeのメリットとしてHT

こんにちは。社長の岩上です。 先日、あるプロジェクトで、海外のデジタルエージェンシーを調べる機会がありました。その中でも、制作物のクオリティが非常に高い企業がいくつかありましたので、9社をピックアップしご紹介します。 それでは見ていきましょう。 B-Reel http://www.b-reel.com/ ストックホルム、ロンドン、ニューヨーク、ロサンゼルス、ベルリン、バルセロナに拠点を持ち、デジタルと映像の両方ともものすごくクオリティが高いです。CannesやCLIO、D&AD、One Show、Webbyなど、多数の国際的な賞を受賞しています。 http://www.b-reel.com/news/ 社内ブログがシンプルでステキ。 UNIT9 http://www.unit9.com/ 出だしから映像がドンッと流れてくるサイトです。映像とデジタル、ゲーム、VR、テクノロジーの5部門で形成

エンジニアの王です。 そもそも「素材」というのは「何かを作るための原材料」ですから、デザイナー・グラフィッカーなどにとっての「写真素材」とは、新しい何かを作るためのもととなる写真であって、ほぼそのままアイキャッチとして使ったり、記事内で使ったりするものではありません！ 同じ「写真素材」とは言っても、使い方によっては向き不向きっていうのがありますからね。今回は特にデザイナー向けの無料で使える写真素材サイトをご紹介します！ 私は「デザイナーに優しい写真素材」とは以下のような特徴を持っていると考えています。（もちろんすべてのケースに当てはまるわけではないが） 被写体が明確 背景が単純 同じオブジェクトを複数のアングルから撮っている テクスチャ系 切抜き済み そのため、今回は以上の特徴を多く持っている写真素材サイトだけに焦点をあてて紹介したいと思います！ おすすめ順で列挙していきますので、上位にき