HTMLやCSS、JavaScriptのコードを綺麗に整形してくれる・「DirtyMarkup」DirtyMarkupはHTML/CSS/JavaScriptのコード整形ツールです。従来のフォーマッター同様にある程度の調整機能も付いています。また、本ツールはAPIも公開しており、今のところは無料で利用可能（※1000リクエスト/日）と同時に寄付も募っているようです。APIについてはドキュメントをご確認ください。 DirtyMarkup
自分の心が疲れた時に、紙に書きだす15の言葉
地震やその関連のこともそうですが、ここ1年ほど、個人的に自分の身の回りで色々な事があって、普段あまり気にしない性格なのに少し心が病んでいたと、今になって振り返って実感したのですが、なんとなく思いついたことを紙に書き出すことで少し精神的に安定した気がしました。 元々僕は少し気にし過ぎる面があるので、ちょっとした自己啓発的なものを(依存しない程度に)与えないと不安定になるようです。という訳で、自分の心に効かせる15の安定剤を書いてみるテスト。 自分で思ったことだったり、どこかで見かけた言葉だったり、というものも含まれているかも知れませんが、よく脳裏によぎったり、紙に書き出す言葉です。イメージするだけでなく、紙に書きだす事で自分の心に強く言い聞かせます。 思ったより人は自分を見ていない昔はコンプレックス（容姿も含めて）が多々有りましたが、ある時、叔父にこう言われて随分楽になりました。「お前、随分
色を指定したら、その色に関連した色合いを抽出してくれる・「colllor」
colllorは色のコードを指定する事で、その色と相性の良い色、トーンなどを抽出してくれるカラーツールです。 colllor
Subtle Patternsのパターン画像を閲覧中のサイトの背景として表示確認できるブックマークレット・SubtlePatterns Bookmarklet
使いやすいデザインのパターン画像を公開してくれているサービスのSubtle Patternsの画像を閲覧中のWebサイトの背景として表示確認が出来る、というブックマークレットです。愛用している方は如何でしょう。 Subtle Patternsはパターン画像を公開しているWebサイトで、そのパターン画像を閲覧中のWebサイトの背景として表示確認出来る、というブックマークレットになります。
Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js
ちょっと面白かったのでメモ的に。タイポグラフィ用のライブラリ、Lettering.jsを併用して、テキストにCSS3によるアニメーション効果を容易に与える事が出来る、というスクリプトのご紹介。 使いどころは限定されますが、動きが面白かったのでメモ的に。以前ご紹介したLettering Animateを少し進化させたような感じ。 エフェクトの種類もかなり用意されているのでデモを見てるだけでも楽しかったです。lettering.jsはjQueryのプラグインなので必然的にtextillate.jsもjQuery依存となります。 lettering.jsで1文字1文字のエフェクトにタイムラグを発生させる事が出来ます。 $('.foo') .fitText(0.5) .textillate({ in: { effect: 'flipInY' }});オプションでエフェクト等をセッティングします。
Google Web FontのフォントをCSS3で装飾した状態で確認出来る・Best Google Web Fonts
Googleにホスティングされて いるWebフォントにCSS3等で 3Dやレタープレスなどのエ フェクトをかけた状態をサク サク確認できる、というWeb サービスのご紹介です。 Google Web Fontの使用頻度が高いなら結構役立つかもしれません。装飾したCSSの発行もしてくれます。 右カラムでGoogle Web Fontを選択、左カラムの上部にエフェクトを選択するボタンがあります。選択すれば即座にプレビューに反映されます。上記はLeandeというエフェクト。 下部でCSSのソースやWebフォント用のコードをコピー出来ます。 フォントはGoogle Web Fontにあるもの全てが揃っているわけでは無さそうですが、増えていくんじゃないでしょうか。ご利用は以下よりどうぞ。 Best Google Web Fonts
軽量でシンプルなレスポンシブWebデザイン向けのボイラプレート・Responsive Boilerplate
軽量且つ、クロスブラウザにも対応したレスポンシブWebデザイン対応のCSSフレームワーク・Responsive Boilerplateのご紹介。パッと見た限りですが、かなり使いやすそうです。軽量なのも◎。 軽量なレスポンシブWebデザイン用のボイラープレート(文例集)です。圧縮版で2KBほど。また、IE7等でも表示が崩れません。 いわゆるCSSフレームワークですね。軽量でシンプル。IEにも対応と、欲しい特徴だけ絞られた感じでよかったです。 IE TabのIE7のスクショです。 また、Sublime textのパッケージも用意されていますのでSublime textユーザーの方で興味がありましたらお試しになってみては如何でしょう。ライセンスはMITです。 Responsive Boilerplate
様々なスタイルのツールチップを実装できるスクリプト・opentip
様々なスタイルでツールチップを実装する為のJavaScriptフレームワーク・opentipのご紹介です。噴出しの形状や表示場所、Ajax対応など、状況に応じて実装する事が出来ます。 ツールチップ実装用のJSライブラリです。様々なスタイルで実装可能です。 ツールチップのJSフレームワークです。OSSとして公開されています。 複数のツールチップを一括で出すことも可能です。 <div data-ot="Shown after 2 seconds" data-ot-delay="2"></div>カスタムデータ属性でセッティングできるみたい。 new Opentip("#foobar", "Shown after 2 seconds", { delay: 2 });上記のようにAPIを使用する方法でもOKとの事。 ライセンスはMITです。詳細は以下よりどうぞ。 opentip
著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid
シンプルで良さそうだったのでメモ。 パブリックドメインのCSSフレームワ ークです。レスポンシブWebデザイン にも対応していますし、グリッドレイ アウトにも利用出来るのでなかなか 汎用性があるのでは無いかなと。 ライセンスはCC0(クリエイティブコモンズ版のパブリックドメイン)で、著作権は放棄されていますので、気軽に使えますね。 凄く特殊な性能をもったフレームワークという訳ではありませんが、個人的には余計な物が備わってない方がありがたいのでカスタマイズしやすいです。 グリッドレイアウトにも対応しています。 以下、サンプルです。 Sample css/* UNITS These divider classes are set on .ingrid container --------------------------------------------------------*/ .in
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src
要素をレンガ風に配列するスクリプト・jQuery Masonryで、配列させる要素を下揃えにする
要素をレンガ風に配列するjQueryプラグイン のMasonryで、要素を下揃えに配置出来るよ うにしたい、という内容です。オプション 項目を追加してオンオフを出来るようにカス タマイズします。下揃えにする機会があるか どうかは置いといてｗ jQuery Masonryというのは要素を時系列を崩さずに配列させる事が可能なjQueryのプラグインです。以前少し記事書いたので合わせてご覧下さい。 ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル ご覧の通りテキストコンテンツとは非常に相性が悪く、通常のブログやWebサイトではほぼ使いどころが皆無なプラグインですが、個人的にはギャラリーコンテンツの作成機会が多いので多少調べる機会が多いかもしれません。 こんな感じで下揃えにします。まぁそんだけな
今月ダウンロードしたフリーフォントまとめ
特にネタも無いのでダウンロードした フォントをまとめておきます。好みの テイストじゃなくてニーズに合わせて ダウンロードするので一貫性があまり 無いですが、その辺は適当にスルーし てください。 殆ど英語です。順不動。 Linden Hill 有名なRalewayを産んだフォントファウンダリと同じところのフォントです。数字が可愛い。ライセンスはOFL。 Linden Hill GOVERNOR レトロなフォントを排出するファウンダリの提供するフォントの一つ。可視性が高くて好きです。商用利用も無料。ライセンスはDLしたファイルに同梱されてます。 GOVERNOR Rex こちらはフリーフォントを中心に扱うファウンダリの提供するクールなフォント。商用でも無料ですけど、Webフォントで利用する場合はファウンダリへのリンクが必要です。 Rex Villa Didot こちらもレトロな感じ。多分使う機
ゲーム感覚で楽しく学べる系Webサービスいくつか
ちょこちょこ見かけるので最近に なって見かけた、ゲーム感覚で 楽しく学べるWebサービス的なもの をご紹介。Webアプリのアイデア の参考にもなればなぁとの気持ち も込めて。 ゲーム感覚で学べる、みたいなWebサービスは昔からありますので、ここ最近見かけたものを中心に少しまとめてみます。暇つぶししながら学べるって考えるとお得かもしれませんね。 Web制作に関わるものが中心です。 Kern Type カーニングをゲーム感覚で楽しく学べます。ドラッグで文字詰めしてください。 Kern Type Shape Type ベジェ曲線を学べるサイト。デザイナーさんは勿論、非デザイナーさんもこういうのでデザインがいかに難しく時間がかかるものか理解できるのではないかと。こういうの体感しておくとデザインなんて安売り出来ないし、簡単に学べない事が分かるかと思います。 Shape Type Color — Me
iPhoneやiPadのホーム画面向けアイコン作成用のPSDテンプレート・App Icon Template
iPhoneやiPadなどのホーム画面に表示 させるアイコンを作るためのPhotoshop 用テンプレート・App Icon Template をご紹介。そんなに多用するものじゃ 無いと思うんですけど、便利っちゃ 便利でした。 iOSのホーム画面向けのアイコン用テンプレ。スマートオブジェクトでフレームの変更・追加も容易に出来ます。 iPadやiPhoneなどのアイコン生成用のテンプレートです。フレームみたいなもんですかね。デザインの変更はスマートオブジェクトを利用します。 使ってみた ↑ 上記赤枠がスマートオブジェクトなので開きます。 ↑ 何種類かある中からフレームを決めてスマートオブジェクトを保存すればメインファイルに反映されます。 ↑ インセットも出来るよ。 ↑ テクスチャ追加してみた。スマートオブジェクト側にテクスチャを増やせばテンプレ量産出来ますね。 枠を作ってくれてるので効率的に
ホタルの光をイメージさせるようなエフェクトを実装するjQueryプラグイン・firefly
ちょっと適切なタイトルが思い浮かばな かったのですが、指定した要素を沢山 配置してアニメーションでランダムで 移動させる、というjQueryプラグイン。 デモでは、よく見かけるパーティクルで 作成したホタルっぽいエフェクトを用意 しています。 タイトルじゃ良く分からないと思いますのでデモをご覧下さい。 itsfireflyで使われているエフェクトのオマージュみたいですね。ホタルっぽいエフェクトです。 Canvasとかじゃなくて、画像を直に指定してランダム表示させてアニメーションで動かすプラグイン、みたいな感じ。cssのpositonとz-indexで背景化しています。画像を変えれば違った表現も出来ますねー。プラグインも軽量です。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquer
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PhotoshopのレイヤースタイルをCSS3に変換する・「CSS3Ps」
画像のみ、pタグで囲わないようにする
4つのCSSツールを1つのサイトに集約した・「CSSmatic」
Pinterestライクなレンガ風のレイアウトを構築する為のライブラリ・Nested
