Not A Programmer のメモ帳: 5月 2013

2013年5月31日金曜日

要素を自動でセンタリングさせる為のスクリプト・Midway.js

要素をセンタリングさせる為だけのスクリプトです。CSSだけでも出来る事は出来るので無くても困りませんけど・・軽量で手軽に使えるのであっても困らないのでメモ的に。

via Pocket http://kachibito.net/web-design/midway-js.html

「構造化データマークアップ支援ツール」をGoogleが公開、HTMLベースでのタグ付けが可能に

Googleは、構造化データのタグ付けを支援するために2つの機能を追加しました。

via Pocket http://www.suzukikenichi.com/blog/structured-data-markup-helper/

「構造化データマークアップ支援ツール」をGoogleが公開、HTMLベースでのタグ付けが可能に

Googleは、構造化データのタグ付けを支援するために2つの機能を追加しました。

via Pocket http://www.suzukikenichi.com/blog/structured-data-markup-helper/

Gmailユーザー必見！Webブラウザ版Gmailにて各種ショートカットを確認する方法

Amazing Gmail Rubix / kowitz どうも、Gメーラーのおつぱ（ @OZPA ）です。先日、Web版のGmailは「⌘（command）+ enter」キーでメールを送信できると言うことが発覚したのですが、その記事をアップしたところ、FacebookにてあのLIGの好

via Pocket http://ozpa-h4.com/2013/05/31/gmail-shortcut/

Eコマース用のさまざまなUIエレメントが揃ったフラットなデザインのPSD素材

商用でも無料で利用できるロイヤリティフリーのEコマース用のフラットなデザインのUIキットを紹介します。

via Pocket http://coliss.com/articles/freebies/freebies-psd-ecommerce-flat-ui-kit-by-graphicsfuel.html

ダウンロードしておきたいフリーのデザインフォントのまとめ -2013年5月

最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 Valkyrie 個人・商用利用無料。 Regular, Bold, Extended, Italicなど全12ウェイト。

via Pocket http://coliss.com/articles/freebies/freebies-font-2013-may.html

ダウンロードしておきたいフリーのデザインフォントのまとめ -2013年5月

2013年5月30日木曜日

【Googleマップ】チョー便利！電車の乗り換えは「ホーム番号」をチェックすべし【Y!乗り換え案内】

路線より数字で教えてくれた方が、東京迷路に慣れてない私には嬉しい限り！数字くらいは理解できますからね。いつのアップデートで追加されたかはわかりませんが、最初はありませんでしたよね。（よね？）

via Pocket http://www.tabroid.jp/news/2013/05/googlemap0527.html

iPhone 5S？　廉価版？　Macはマイチェンあり？　6月10日開催のWWDC、現時点までの噂をまとめてみました

今年のWWDCは6月10日から14日までサンフランシスコで開催されます。注目すべきはやはりティム・クックによるプレゼン。果たしてどんなサプライズが飛んでくるのでしょうか？　ワクワクが止まりません。

via Pocket http://www.gizmodo.jp/2013/05/5smac610wwdc.html?utm_source=rss20&utm_medium=rss

Gmailの受信トレイがリニューアル―カテゴリー別のタブが設けられ、自動振り分けされる

今日（米国時間5/29）、GoogleはGmailの受信トレイをリニューアルした。新しい受信トレイの上部にはカテゴリー別の複数のタブが設けら、受信したメールは自動的にタブに分類されるようになった。Google+、Twitter、Facebook、You

via Pocket http://jp.techcrunch.com/2013/05/30/20130529gmail-for-desktop-and-mobile-gets-a-new-inbox-now-automatically-categorizes-your-email/

UIのアニメーションを目的別に分けたまとめ -Meaningful Transitions

デスクトップやスマフォやタブレット向けのページやアプリのユーザインターフェイスには、多種多様なアニメーションが使用されています。

via Pocket http://coliss.com/articles/build-websites/operation/work/ui-transitions-for-intraction.html

”あとで読む”や”読みかけ”をChromeのオムニバーで管理する「既読マーク」

世の中にはさまざまな「あとで読む」サービスが提供されるようになりました。それぞれに特徴があり、うまく使い分けられているかたも多いのではないでしょうか。

via Pocket http://web-marketing.zako.org/hacks/google-chrome/chrome-mark-as-read.html

2013年5月29日水曜日

via Pocket

クライアントサイドの全文検索エンジン「lunr.js」

lunr.

via Pocket http://www.moongift.jp/2013/05/20130529/

フラットUI風、軽量＆レスポンシブ対応CSSフレームワーク『Pure』

Yahoo!が作っているCSSフレームワークですかね。軽量＆レスポンシブ対応ですよ。Bootstrap的に気軽に使えそうです。

via Pocket http://www.ideaxidea.com/archives/2013/05/pure.html

Webサイトのサイトマップを作る為のCSS・「SlickMap CSS」

SlickMap CSSは、サイトマップを作る為のCSSです（sitemap.

via Pocket http://kachibito.net/useful-resource/slickmap-css

2013年5月28日火曜日

画像の好きな場所にキャプションを表示「Label.css」

画像をぽんと貼っただけでは分からないこともちょっとしたキャプションで説明してあげるとぐっと分かりやすくなります。そんな処理を手軽に実現してくれるのがLabel.cssです。

via Pocket http://www.moongift.jp/2013/05/20130528-2/

マルチデバイス体験のためのデザインの課題

ここ 1, 2 年のアプリ購入の条件はマルチデバイスでシームレスな操作ができることができることが前提になっており、その傾向はますます強くなっています。私が愛用している Byword も保存という操作をすることなく、マル

via Pocket http://www.yasuhisa.com/could/article/multidevice-experience/

テキストエフェクトのチュートリアル集ベスト40 / ウェブデザインライブラリー

テキストエフェクトはPhotoshopチュートリアルでとても人気のあるコンテンツです。わたしたちは文字を毎日使います。文字を飾ってきれいで鮮やかにしたい時もあります。だからこそPhotoshopを使うのです。

via Pocket http://www.webdesignlibrary.jp/2013/05/40.php

海外の人気ブログ・ニュースサイトのCSSの勉強に役立つ記事が一覧でチェックできる -Css Tv

via Pocket http://coliss.com/articles/build-websites/operation/css/css-news-csstv.html

サイトのデザイン変更が反映されない時のスーパリロードとキャッシュさせない方法

先週の金曜にGunosyを見ていると「サイトのデザイン変更が反映されない時の対策 | monopocket.

via Pocket http://weboook.blog22.fc2.com/blog-entry-367.html

できることはToDo管理だけじゃない！「Any.DO」の超便利な裏ワザ機能6選

AndroidでAny.DOを使用中に不在着信があると、この機能が自動的にスタートします。これはほかのToDoアプリにはない、とても便利な機能。不在着信後、画面下部にアラートが表示され、折り返しを促してくれるのです。

via Pocket http://www.lifehacker.jp/2013/05/130528anydo.html

2013年5月27日月曜日

Google サイト運営者向けツールバーに新機能が追加されました

Google サイト運営者向けツールバーは、2012 年以来、既に 23 万 4,000 人以上のお客様にご利用いただいております。このツールバーは Chrome の拡張機能として、サイトを閲覧しながら AdSense アカウントの最新の収益情報や掲載

via Pocket http://adsense-ja.blogspot.com/2013/05/google.html

[JS]コンテンツをデスクトップ時はタブに、タブレット・スマフォ時はアコーディオンにするスクリプト

シンプルなHTMLで、デスクトップ時は水平・垂直のタブに、タブレット・スマフォ時はアコーディオンに自動変更（指定も可）するレスポンシブ対応のjQueryのプラグインを紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-easy-responsive-tabs-to-accordion.html

アイデアを膨らませるストーリーボード用の全430+種類のイラスト素材

頭の中にあるアイデアを形にし、自分だけでなく他の人ともアイデアを膨らませることができるストーリーボードやスケッチに利用できるイラスト素材を紹介します。

via Pocket http://coliss.com/articles/freebies/freebies-ai-storyboard-illustrations-by-julian-burford.html

ドラッグ＆ドロップで画像をリサイズできる『pictureResizer』（SimpleStyle第153回）

SimpleStyleは、ライフハックできるツールを実際につくり、使い、役立てるライフスタイルを紹介します。 Windows用：『pictureResizer』は、柔軟に設定した設定ファイルにしたがって、画像（jpg）をリサイズするソフトです。

via Pocket http://www.lifehacker.jp/2013/05/130527simplestyle153.html

ブログ記事盗用対策に私が使っているWordPressプラグイン

ブログ盗用の現場が熱い（怖い）！盗用されて、さらに二次盗用されて、挙句オリジナルは検索ヒットせずボロボロ…( ﾉД`)･･･

via Pocket http://plus1world.com/wordpress-plagiarism-prevention

2013年5月26日日曜日

レスポンシブなグリッドだけを提供する軽量スタイルシート「fitgrid」

レスポンシブなWebデザインを実現するのは大変ですが、Bootstrapを使うとそれっぽさが残ってしまう…。そんなジレンマを感じている方はfitgridを試しましょう。fitgridは軽量なグリッドレイアウトを提供します。

via Pocket http://www.moongift.jp/2013/05/20130526-2/

PCサイトではタブによる切り替え、スマフォ等ではアコーディオンで実装できるスクリプト・Easy-Responsive-Tabs-to-Accordion

必要になりそうだったのでメモ。通常のPCサイトではタブ、スマフォ等の画面の狭いデバイスではアコーディオンで実装するスクリプトのご紹介です。jQuery依存になります。

via Pocket http://kachibito.net/web-design/easy-responsive-tabs-to-accordion.html

2013年5月25日土曜日

HTML/JavaScriptを使ってAndroidモックアップアプリをさくさく作ろう！「Fries」

Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを紹介します。

via Pocket http://www.moongift.jp/2013/05/20130523/

レスポンシブWebデザイン対応のHTML5 / CSS3テンプレートを配布する・「HTML5 Up!」

HTML5 Up! HTML5 Up!は様々なHTML5 / CSS3なテンプレを配布するWebサイトです。全てレスポンシブWebデザインに対応しています。現在12~13個ほどあり、素敵なデザインに仕上がっています。ライセンスはCC-BYとなりますので商用では

via Pocket http://kachibito.net/useful-resource/html5-up

【Chrome】 YouTube広告、TED、Huluでの文字化けを直す方法

まぁ、広告だしいいかな、と思っていたのですがHuluやTEDでも文字化けするのでちょいとぐぐって直してみました。ちょっとハマったので細かく手順を紹介してみます。

via Pocket http://www.ideaxidea.com/archives/2013/05/chrome_jimaku.html

見栄えのいいプロフィールページが簡単・無料で作れる「Hoverboard.io」

仕事の実績を紹介するページが欲しいけれど、みんなが使っているありがちなプロフィールサイトとは違うものがいい。そんなライターやデザイナー、デベロッパーなどには「Hoverboard.io」がおすすめです。

via Pocket http://www.lifehacker.jp/2013/05/130523hoverboardio.html

[JS]jQueryも外部CSSも不要！レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js

デスクトップ・タブレット・スマフォ向けのレスポンシブ対応サイトを作成する超軽量（19KB）のスタンドアローンのスクリプトを紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/javascript/js-framework-for-responsive-skeljs.html

[Web]Sass（Scss）+ Compassのテンプレートファイルを作成したので晒してみる

CSSを記述するために開発されたメタ言語、Sass（Scss）+ Compassを覚えてからかなりコーディングが楽になってきた今日この頃。「Sublime Text」にCompassとSassを導入して以来それはそれはその恩恵をありがたく享受しているわけな

via Pocket http://ozpa-h4.com/2013/05/23/sass-scss-template/

上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー

facebookにも同じようなのがありますね。それではHTMLから解説していきます。メニュー全体を真ん中に設置するなどするため、たくさんDivを使っていますが、じっくり考えると難しくないと思います。

via Pocket http://weboook.blog22.fc2.com/blog-entry-365.html

2013年のロゴデザインのトレンドを押さえておく -2013 Logo Trends

via Pocket http://coliss.com/articles/build-websites/operation/design/logo-design-trends-in-2013-by-logolounge.html

[CSS]アニメーションも気持ちいい！フォーカスがはずれてもキープされるパネルを表示するスタイルシート

via Pocket http://coliss.com/articles/build-websites/operation/css/css-demo-social-share-by-labnol.html

一行の記述で使えるJavaScriptグラフライブラリ「Chartkick」

Web上にグラフを描こうと思うと途端に面倒な気がしてしまいます。そこで使ってみて欲しいのがChartkickです。Railsとの親和性の高いグラフ描画ライブラリです。

via Pocket http://www.moongift.jp/2013/05/20130524-3/

３カラムになったGoogle+をGoogle Reader代わりの情報ハブとして使ってみる

Google I/O で全面的にアップデートがあった Google+ ですが、Pinterest を彷彿とさせる最大３カラムのレイアウト、チャットと統合されたハングアウト、そして自動的に写真を GIF アニメやパノラマにする機能など、情報やコ

via Pocket http://lifehacking.jp/2013/05/using-google-plus-as-a-reader/

2013年5月22日水曜日

ビジネスからライフ・ホビーまで全1376種類が揃ったピクトグラムのアイコン素材 -Icon Explorer

via Pocket http://coliss.com/articles/freebies/freebies-symbol-icons-by-geekchamp.html

[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css

画像の上に半透明なラベルを天地中央、左右に簡単に配置でき、しかもホバー時にフェードでラベルを表示するなどのエフェクトも備えたスタイルシートを紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/css/css-label-each-element-labelcss.html

2013年5月21日火曜日

レスポンシブWebデザイン対応のWebサイトを構築する為の軽量フロントエンドフレームワーク・「skel.js」

skel.jsはレスポンシブなWebサイトを構築する為のフロントエンドフレームワークです。19kbと、なかなか軽量で内容も充実した印象でした。使い慣れれば便利そうです。ライセンスはMITとGPL。

via Pocket http://kachibito.net/useful-resource/skel-js

2013年5月19日日曜日

HTML/CSS/JavaScriptを編集してその場で結果確認「Editr」

最近、Jsdo.itのようにWeb上でコードを書いてその結果を確認できるサービスの人気があります。そのオープンソース版とでも言うべきなのがEditrです。

via Pocket http://www.moongift.jp/2013/05/20130519-2/

2013年5月18日土曜日

レスポンシブWebデザイン対応のシンプルで軽量なグリッドシステム・「.FITGRD」

.

via Pocket http://kachibito.net/useful-resource/fitgrd

2013年5月17日金曜日

ウェブデザイナーは要チェック！フラットに効く400種以上のカラーがセットされたスウォッチ素材

フラットなユーザインターフェイスを作成する際にぴったりな400種以上のカラーがセットになったPhotoshop用のスウォッチ素材を紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/design/freebies-photoshop-aco-for-flat-ui-design.html

[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards

パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。くるっとなるのは水平だけでなく、垂直にも対応しています。

via Pocket http://coliss.com/articles/build-websites/operation/css/css-tutorial-flip-boards-by-paulund.html

#Font May.2013 最近惚れた欧文フォント15選

インスピレーション, クリエイティブ Verb Condensed http://www.myfonts.com/fonts/yellow-design/verb-condensed/SonicHand Hand Drawn Webfont http://wegraphics.net/downloads/sonichand-hand-drawn-webfont/Bariol http://www.bariol.com/Dunste An Ultra Thin Web Font http://wegraphics.

via Pocket http://maka-veli.com/Font-2013-04.html