Resource - シンプル

レスポンシブWebデザインの表示確認ツール・「Demonstrating Responsive Design」

Demonstrating Responsive Design Demonstrating Responsive DesignはレスポンシブWebデザインのデバイス別の表示を確認出来るツールです。URLを入力すればフレーム内に表示され...

カラーパレットを共有できる・「PLTTS」

PLTTS PLTTSはカラーパレットを共有出来るWebサービスです。カラーコードで検索すると、そのカラーが含まれるパレットを調べられるので参考にしたりインスピレーションの向上にもなるかもしれません。まだ数は多くないですが、シェアサー...

カウントダウンをGIFアニメで作成出来る・「Gif Countdown」

Gif Countdown Gif CountdownはよくあるカウントダウンタイマーをGIFで作れるWebツールです。需要はともかく技術が面白かったです。色の変更やタイムゾーンの指定も可能ですが、含まれるテキストは今の所、固定のよう...
Ads

様々なスマフォやタブレット、PCなどのスクリーンのサイズを一覧化・「Screensiz.es」

Screensiz.es Screensiz.esはスマフォやタブレット、PCなどのスクリーンサイズを一覧化したWebサイトです。一覧テーブルではOSや普及率、サイズなどでソートも可能で、不要な項目は非表示にする事も出来ます。 ...

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

SlickMap CSS SlickMap CSSは、サイトマップを作る為のCSSです(sitemap.xmlではなく、人用のサイトマップ)。上図のように、階層を分かりやすく可視化し、ユーザーに取って分かりやすいナビゲーションを作成す...

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

.FITGRD .FITGRDはレスポンシブWebデザインにも対応したグリッドレイアウトを構築する為のCSSです。フレームワークではない、との事です。(当記事では一応フレームワークのカテゴリに含めています)CSS自体は非圧縮でも4KB...

描いた絵をGifアニメに出来るペイントツール・「GIFPaint」

GIFPaint GIFPaintはGifアニメを作る為のヘペイントツールです。ちょっとネタ的なツールですが、面白かったので。絵を1枚1枚描いていき、Encoded GIFsを押せばダウンロード可能になります。そのまま直接Tumblr...

Webフォントとしても使えるMetroスタイルのアイコンセット・「Metrize Icons」

Metrize Icons Metrize IconsはMetroスタイルなアイコンのセットです。シンプルで使いやすそうですね。SVGやWebフォントも用意されています。ライセンス形態は明示されていませんが、商用で使えて帰属表記の必要...

Adobe製のレスポンシブ対応UIライブラリ・「Topcoat」

Topcoat TopcoatはAdobe社が提供するOSSのCSSフレームワークです。シンプルで使いやすいUIでレスポンシブWebデザインにも対応しています。モバイル版はタップしやすいようにエレメントの高さをやや高くしてくれてるのも...

フラットなデザインでよく使われてる色をまとめている・「Flat UI Colors」

Flat UI Colors Flat UI Colorsはフラットなデザインで良く用いられている色をまとめたWebサイトです。確かに見かける色合いはこんな感じですね。コンテンツに合うようなら導入も考えたいですけどその機会は今の所無さ...

Retinaディスプレイ用の画像を作成できるPhotoshopアクション・「Retinize It」

Retinize It Retinize ItはiOSで採用されているRetinaディスプレイに対応する為の画像を作れるPhotoshopアクションです。@2xのファイルを作成する事ができます。ドロップシャドウを用いている場合は諸注意...

SassのコードをCSSに即時変換・「SassMeister」

SassMeister SassMeisterはSass記法で書いたコードを即時CSSに変換するツールです。左に書き込めばCSSが右側に表示されます。OSSとしてGithubでも公開されています。Rubyで書かれているようですね。 ...

ミニマルなマークアップで書かれたCSSフレームワーク・「Markup Framework」

Markup Framework Markup Frameworkはミニマルなマークアップで書かれた、モバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。必要最低限、をコンセプトに構成したようです。ベースとし...

CSSのショートハンドを解除してから整形する・「FESS」

FESS FESSはCSSのショートハンドを解除して整形するWebツール。解除する機会は一般的にはあまり無いかも知れない&まだベータ版なので優れた精度では無いけど、珍しいので。精度に関しては、例えば background:red u...

正規表現をブラウザ上で実行テスト・「refiddle」

refiddle refiddleはWeb上で正規表現をテストできるツールです。jsfiddleライクに正規表現を試すことが出来ます。上にコード、下にテキストを書いて、マッチした部分がハイライトされる仕組み。 refiddle

ダミー画像を手軽に作成する・「PlaceIMG」

PlaceIMG PlaceIMGはダミー画像生成サービスです。マウスでスライダーを動かしてサイズを決めたり、数値でサイズを指定、ダミー画像のカテゴリの指定、フィルターでセピアやモノクロ化なども出来ます。 PlaceIMG

CSSによる三角形をジェネレートできる・「CSS triangle generator」

CSS triangle generator CSSで三角形を簡単に作成出来るツールです。オールドブラウザのシェアもかなり低下していて良い傾向ですけど、まだ対応する必要があるケースもあるので覚えておくと便利かもしれない。 C...

デバイスに応じたMedia Queriesのコードをコピペ出来るスニペット一覧表・「Media Query Snippets」

Media Query Snippets Media Query Snippetsは、任意のデバイスに対応する為のMedia Queriesのコードを一覧にしてコピペ出来るようにまとめているWebサイトです。チートシート的に使えて良さ...

テキストの差分をチェックするだけのシンプルツール・「Diff Checker」

Diff Checker Diff Checkerはテキストの差分をチェックするだけのシンプルなツールです。左と右のフィールド内のテキストの差分をハイライトします。軽量で地味に便利かもしれません。が、日本語対応はあまり期待できません。...

オンラインでシンプルなダイアグラムを生成出来る・「Graphity Diagram Editor」

Graphity Diagram Editor Graphity Diagram Editorはオンラインでシンプルなダイアグラムを生成できるWebツールです。マウスで直感的に作成、画像にエクスポートすることも出来ます。また、作成途中...

一度だけダウンロードできるファイル転送サービス・「JustBeamIt」

JustBeamIt JustBeamItは一度だけダウンロードできるファイル転送サービスです。ファイルをドラッグ&ドロップするとアップロードされ、URLが発行されるので送りたい相手にそのURLを知らせる、というシンプルなもの。ファイ...

Font Awesomeのアイコンを利用したボタンを作成出来る・「CSS3Butt.in」

CSS3Butt.in CSS3Butt.inは、Font Awesomeで公開されているフォントを使ったボタンを手軽に作成出来るツールです。使いたいアイコンを選択し、色やテキスト、サイズを設定してコードをコピペするだけ。 CS...
Ads