ウェブデザインのセンスを磨こう！ 2014年洗練されたディテールのUIデザインのまとめ2014年、チェックしておきたいUIデザインをdribbbleから紹介します。 高解像度の.psdや.pngファイルをダウンロードできたり、動きをアニメーションgifで楽しめたりします。 2014年を振り返りつつ、来年はどんな素敵なデザインが生まれるのか楽しみですね。 GIF for the Weather App まずはUIの動きも楽しめるシリーズ。リンク先ではGIFアニメーションで動いています。 お天気アプリのコンセプトで、一日の天気をアコーディオン型のパネルで楽しく見せます。
[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
WordPressをカスタマイズする便利な10個のスニペット
10 Very Useful WordPress Hacks [ad#ad-2] 下記は各ポイントを意訳したものです。 リンクを新しいウインドウで開く 検索結果ページのインデックスを阻止 編集ボタンを設置 コントロールパネルのリンクを設置 データベースエラーページのカスタマイズ ページ内にもう一つのページを埋め込む 著者の情報を加える Facebookのボタンを加える WordPressのアドミンバーを下に移動 管理者用のパスワードをリセット リンクを新しいウインドウで開く デフォルトでリンクを常に新しいウインドウで開くようにします。 「wp-admin」フォルダ内の「quicktags.js」を変更します。 変更前 if (!edCheckOpenTags(i)) { var URL = prompt('Enter the URL' ,defaultValue); if (URL) {
HTML5 APIで何ができるようになるかを学ぶ -HTML5逆引きリファレンス
HTML5には、Canvasをはじめ、Drag&DroppやAudio&VideoやGeoloacationなど数多くのAPIが用意されています。 これらのAPIは策定中のものも多く、仕様が確定していませんが、現在利用できるAPIの機能を逆引きでまとめた実用的な解説書を紹介します。 [ad#ad-2] ウェブサイトやウェブアプリケーションにHTML5 APIをすぐに利用したい、また近い将来利用したい、そんな人に役立つ一冊となっています。 また、逆引きの形式で使用頻度の高いサンプルが数多く掲載されているので、何ができるんだろう？？ という人にもビジュアル的に把握できるものとなっています。 HTML5逆引きリファレンスでとりあげているAPI 書籍の中で取り上げているAPIです。 それぞれのAPIごとに、実用的なサンプルコードが逆引きの形式で掲載されており、コードは専用サイトからダウンロードして
[JS]わずか2行のスクリプトで実装するアニメーション機能付きスライドショー
A slide-show in 2 lines of JavaScript デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: コンテンツ（HTML） Step 2: ページめくり（JavaScript） Step 3: スタイリング（CSS） Step 1: コンテンツ（HTML） はじめに、スライドショーのコンテンツを用意します。 ここでは一つのスライドに一行のテキストを表示します。 HTML5 <!DOCTYPE HTML> <html> <head> <title>My slides</title> </head> <body> <section>This is the <em>first</em> slide</section> <section>This is the <em>second</em> slide</section> <secti
数字で見る、2010年のインターネット業界
2010年のEmail、ウェブサイト、サーバー、ドメイン、ユーザー、ソーシャルメディア、ブラウザ、動画、画像の状況をそれぞれ数字であらわした「Internet 2010 in numbers」を紹介します。 Internet 2010 in numbers [ad#ad-2] 下記は、意訳したものです。 Email ウェブサイト ウェブサーバー ドメイン インターネットユーザー ソーシャルメディア ブラウザ 動画 画像 Email 107兆 2010年に送られたEmailの数 2,940億 一日の平均 18.8億 Emailのユーザー数 4億8,000万 2010年のEmailの新規ユーザー数 89.1% スパムメールのシェア 2,620億 上記に基づいたスパムメールの数 29億 Emailのアカウント数 25% そのうち企業アカウントが占める割合 [ad#ad-2] ウェブサイト 2億5
目の保養になる、素敵な写真のまとめ集 -2010年12月 | コリス
Archive by month 2010年12月 (16) 2010年11月 (52) 2010年10月 (54) 2010年9月 (47) 2010年8月 (59) 2010年7月 (49) 2010年6月 (43) 2010年5月 (35) 2010年4月 (48) 2010年3月 (53) 2010年2月 (51) 2010年1月 (45) 2009年12月 (65) 2009年11月 (38) 2009年10月 (49) 2009年9月 (58) 2009年8月 (35) 2009年7月 (69) 2009年6月 (78) 2009年5月 (66) 2009年4月 (59) 2009年3月 (75) 2009年2月 (72) 2009年1月 (78) 2008年12月 (65) 2008年11月 (68) 2008年10月 (69) 2008年9月 (57) 2008年8月 (7
顧客を逃してしまう、Eコマースサイトの15のポイント
Eコマースサイトの設計・制作時の間違いで、顧客を逃してしまう15のポイントと解決方法をSmashing Magazineから紹介します。 15 Common Mistakes in E-Commerce Design 下記は、そのポイントと解決方法を簡潔にしたものです。 原文ではキャプチャ入りで詳細に解説されています。 商品の詳細な紹介ページが無い。 商品の外観・材質・重量・寸法など詳細な情報を提供します。 連絡する手段が分かりにくい（提供されていない）。 ウェブサイトの全ページの見つけやすい場所に連絡に関する情報を掲載します。 購入のフローが長すぎる（分かりにくい）。 シンプルなレイアウトにし、入力→確認→完了のようにフローを簡潔にします。 購入時にサイトへの登録を必須にしている。 登録無しでも購入できるようにします。登録を入れる際は最後にオプションでいれます。 サイトの検索機能が役に立
見栄えがよく、分かりやすいエクセルのグラフを作成する5つの簡単なテクニック | コリス
Chandoo.orgのエントリーから、見栄えがよく、分かりやすいエクセルのグラフを作成する5つのテクニックとカラフルにデザインされた73のエクセルのテンプレートを紹介します。 How to NOT spend $ 150,000 and still dress up your charts 色の代わりにグラデーションやパターンを使用したグラフ 色の代わりに画像を使用したグラフ 注目するポイントにテキストを配置したグラフ オリジナルの色を使用したグラフ ラベルに画像を使用したグラフ デザインされたグラフの73のテンプレート [ad#ad-2] 色の代わりにグラデーションやパターンを使用したグラフ グラフの配色にフラットな色ではなく、グラデーションやパターンを使用します。 スライドに使用する際は、グラデーションを控えめに。 グラフを右クリックし、「データ系列の書式」を表示します。 「パターン
エクセルのデータを見やすくする5つの簡単なテクニック | コリス
Chandoo.orgのエントリーから、条件付き書式を利用して、エクセルのデータを見やすくする5つのテクニックを紹介します。 Learn Cool Microsoft Excel Conditional Formatting Tricks テーブルの横列・縦列をハイライト 条件付き書式を使用したガントチャート セル内に配置するグラフ ミスやエラー・データ欠落などのハイライト表示 直感的に把握できるデータテーブル [ad#ad-2] エクセルデータは、Chandoo.orgのエントリーの一番下からダウンロードできます。 テーブルの横列・縦列をハイライト テーブルのデータを見やすくするために、横列・縦列を交互にハイライト表示にします。 ハイライトにするテーブル全体を選択します。 メニューより、[書式] - [条件付き書式] を選択。 「数式」を選択し、「=MOD(ROW(),2)=0」を入力し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
