見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ
作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
積極的に取り入れたい9つのCSS3（+jQuery）テクニック
CSS3（+jQuery）を使った、ちょっといいかも！と思うエフェクトを集めてみました。 まだまだ非対応ブラウザが多い CSS3 ですが、できるだけ積極的に使ってみたいなーとも思ってます。 まずはいろいろ試してみることからはじめてみましょう！ CSS3 の登場で、いろんな CSS のトリックを使ったエフェクトが考えられてます。まだまだ CSS3 に非対応のブラウザも多いので、全てを CSS3 で表現する訳にはいかないのが現状ですが、私的には積極的にどんどん取り入れていきたいなーとも思ってます。 海外ブログなどで、色んな CSS3 を使った Tips が紹介されているので、その中からいくつかご紹介します。どれもサンプルを作って試してみたものばかりです。以下の環境で動作確認もしています。 Mac : firefox、Safari、Chrome Win : firefox、IE8、Safari、
[CSS]サイズが分からない要素を真ん中に配置するテクニック
width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t
「根拠のないリニューアルは悪」- 株式会社ネコメシ 山本郁也氏が語る、UXを考える上で大切なこと｜U-NOTE【ユーノート】-イベントまとめプラットフォーム
2006年4月19日 ... マーケティングの世界で古くから使われている格言に「ドリルを買いに来た人が欲しいの はドリルではなく穴である」というものがある。ソリューションを売る難しさの本質を表現し ている言葉だが、これが未だに理解されていない。 2. Break the bias 「確証バイアス」 ⇒自分に都合の良いものを信じてしまいやすくなるというもの。 起業家というのは中立的な立場になりにくい。 「生存者バイアス」 ⇒成功者の意見を聞いてみたいということはよくあること。 ただ、成功している人の言っていることが全て正しい訳ではない。 成功している理由を分かっている人はあまり多くない。 「リニューアルすれば、良くなる症候群」 ⇒ビジュアルのリニューアルは、根本的な設計が間違っているという論理の上で、少し気に入らないから直すくらいのレベル。 自分が気に入らないという理由だけで行うと、たいて
無料すぎて助かった！WEB制作が「はかどる」素材まとめ
作成：2013/01/21 更新：2014/11/01 Web制作 > 無料素材のブックマークが無限に増えてきた そうだ！整理しよう 今回は一つ一つ紹介せず、すでに「素敵にまとめてあるサイト」をまとめました。まとめ系４８サイトのまとめです。 フォント、素材からレスポンシブ対応した初心者でもOKのWordPressテーマまで、全て無料です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．日本語フリーフォント ２．海外のおしゃれなフリーフォント ３．国内の写真素材 ４．アイコン ５．ユニークな素材 ６．ベクター ７．Photoshop補助 ８．ワイヤーフレーム ９．レスポンシブなWordpressテーマ １０．スマホ用ページ テンプレート １．日本語フリーフォント 重複するのもありますが、以下のサイトでほとんどの無料系フリーフォントが揃うと思います。 201
「第一回 プログラマ向けデザイン勉強会」の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた - give IT a try
はじめに みなさん、明けましておめでとうございます！・・・と言うにはあまりにも遅すぎる時期になって2013年最初のブログ更新となりました。 「そろそろブログ書かなきゃ書かなきゃ〜！」と思っていたのですが、年末から妻のパン屋のWebサイトのリニューアルに没頭してしまい、間が空いてしまいました。 せっかくなので、2013年最初のエントリではそのお話をしたいと思います。 「第一回 プログラマ向けデザイン勉強会」の発表資料が素晴らしい！ 前々から妻からは「Webサイトのデザインをリニューアルしてほしい」と言われていたのですが、僕自身はあまりデザイン方面には強くないプログラマなので、どうしようかと困っていました。 そんなとき、ネットで見つけたのが「第一回 プログラマ向けデザイン勉強会」でした。 東京の勉強会なので、僕は参加できませんでしたが、発表者の方々のわかりやすいスライドが公開されていたので、だ
Big Badass Bootstrap List
Docs and Articles Get started, educated and secure. Components Additional Bootstrap specific addons to supplement the base Bootstrap features Display BOOTSTRAP-MAXLENGTH Uses badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work. WATABLE a pretty decent jQuery table plugin BOOTSTRAP-TIMEPICKER A simple timepicke
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Honoka - 日本語も美しく表示できるBootstrapテーマ
jQuery Demos and Examples with HTML5/JavaScript Source Code | Kendo UI for jQuery
ushigyunet｜iPhoneからゲームやグルメまで、ひたすら詳しくレビューするブログ
Twitter Bootstrapのテーマをオンラインで作成出来るツール・Bootstrap magic
ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ