Webサイトのテキストのスタイルを作成、CSSでダウンロードできる・「Type Nugget」
Type Nugget Type NuggetはWebサイトのテキストを直感的なUIでスタイル、CSSをダウンロードできるWebアプリです。見出しやパラグラフ、リスト、リンクなどのテキストスタイルを設定、CSSをジェネレートしてくれる...
Resource - Webデザイナー向け
Markdownでプレゼンテーションを作成出来る日本国産のオープンソースソフトウェア・「Marp」
Marp MarpはMarkdown記法でプレゼンテーションを作成出来るオープンソースのソフトウェアです。MacアプリのDecksetのようにMarkdownでプレゼンを作成できますが、こちらはWindows、Linux版も用意されて...
カルーセルやアコーディオン、ドロップダウンメニューなどをCSSのみで実装するコードを集めた・「You Don’t Need JavaScript」
You Don't Need JavaScript See the Pen Without JavaScript Carousel by SitePoint (@SitePoint) on CodePen. You Don't Ne...
要素をシェイクさせるスタイルシート・「CSShake」
CSShake CSShakeは要素にシェイクするようなエフェクトを付与するスタイルシートです。小刻みに震えたり大きく揺れたり縦揺れ、横揺れなどいろいろ用意されていますが、これらのエフェクトをclassで管理しよう、というもの。多用す...
UIコンポーネントに特化したCSSフレームワーク・「modulr.css」
modulr.css modulr.cssはUIコンポーネントに特化したCSSフレームワークです。多彩で豊富なカラーパレット、テキストの装飾、細かく設定できるグリッド、様々な種類のナビゲーション、各シーンに対応出来るボタンスタイル、フ...
ブラウザで動作する軽量なベクタードローツール・「Inker」
Inker Inkerはブラウザで動作するベクターグラフィックスドローツールです。ブラウザ上でドロー、PNGやSVG、EPSなどでエクスポートする事が出来ます。動作も軽くUIもわかりやすく、割と使いやすい印象でした。アプリのツアーにg...
いろいろなオプション付きのツールチップ作成CSSライブラリ・「Tootik」
Tootik Tootikは色々なオプション付きのツールチップ実装CSSライブラリです。CSSのみでツールチップを作成、オプションとして位置の設定や「成功」「注意」などの通知用、表示遅延、テキストの複数行、矢印の有無、フェードエフェク...
h1やh2などの見出しに合わせてページの目次(TOC)を自動作成するスクリプト・「Tocbot」
Tocbot Tocbotはページ内の見出しを元に、目次(table of contents)を自動作成するスクリプトです。Tocifyに触発されて作成したそうですが、1つの違いはjQueryに依存せず、バニラなスクリプトで動作する点...
シンプルさを重視したオープンソースの小規模/個人向けプロジェクト管理ツール・「Kanboard」
Kanboard Kanboardはオープンソースのプロジェクト管理ツール。小規模チームまたは個人プロジェクト向けに作られています。最小限の機能に、最小限の装飾に抑え、プロジェクト管理という目的のみに絞ったシンプル、ミニマルなツールに...
動画をフルスクリーンで背景にするスクリプト・「Vidage.js」
Vidage.js Vidage.jsはフルクリーンで動画を背景にするスクリプトです。スマフォなどのモニタサイズが狭いデバイスなどでは画像が背景になるようにするようです。ファイルサイズは圧縮版で4.7kbほど。非依存型なので単体で動作...
Electronアプリの為のOSXライクなUIフレームワーク・「Photon」
Photon PhotonはElectronで作られたアプリのためのデザインフレームワークです。OSX風に作られているようです。Electronは御存知の通りGithub製でHTML,JS,CSSで作れるクロスプラットフォームなデスク...
Web制作者向けのツールを多数揃えている・「Dans Tools」
Dans Tools Dans ToolsはWeb制作者向けのオンラインツールを複数揃えて公開しているWebサイトです。JavaScriptやCSS、JSONの圧縮や整形、ファイルのコンバーター、diffツール、.htaccessのコ...
軽量でシンプル、非依存なJavaScriptデイトピッカー・「flatpickr」
flatpickr flatpickrは軽量でシンプル、パワフルなJavaScriptデイトピッカーです。非依存型ながら軽量なコードで実装されていますが、機能はなかなか充実しています。同じclass名で複数フォームに対応できるのも...
タスク管理サービスのTaskuluのシステムをベースにしたOSSのヘルプデスクツール・「Deskulu」
Deskulu Deskuluはタスク管理サービスのTaskuluが開発、公開しているヘルプデスク・チケットシステムです。TaskuluｍのシステムをベースにDrupal 7を使って設計されているとの事。Taskuluは有料サービスで...
モバイルフレンドリーで軽量、シンプルなCSSフレームワーク・「Wing」
Wing Wingはモバイルフレンドリー且つ軽量シンプルなCSSフレームワークです。RWD対応で圧縮版4kbと軽量、グリッドやボタン、フォームやリストなどのUIが揃えられています。ライセンスはMIT。よくあるフレームワークですが、個人...
ステム(Stem)とは何か、アセンダー(Ascender)とは何か等、タイポグラフィの用語を図解で学べる・「Type Terms」
Type Terms Type Termsはタイポグラフィの専門用語を図解で学べるWebサイトです。上図のように図解でそれぞれの対象となる部分やラインの用語をクリックすると解説が表示される、というもの。パッと見でどの用語が何を指すかが...
Bootstrap 4ベースのすっきりしたデザインな管理画面向けテーマ・「Modular Admin」
Modular Admin Modular AdminはBootstrap 4ベースの管理画面テンプレートです。すっきりしたデザインで見やすい印象でしたのでメモ。ボタンやカード、アイコン、テーブルやチャートなどのUIも揃っています。ラ...
CSSアニメーションのループ間にdelayを挿入してくれるWebツール・「WAIT! Animate」
WAIT! Animate WAIT! Animateはkeyframesを使ったCSSアニメーションでループに待機時間を指定して挿入、CSSコードを吐き出してくれるWebサービスです。delayさせたい時間を入力すればパーセンテージ...
レスポンシブWebデザインにも対応のシンプルで軽量なCSSグリッドシステム・「Pills」
Pills PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えな...
Webアプリの為に設計されたシンプル軽量なCSSフレームワーク・「Vital」
Vital VitalはWebアプリケーションの為に開発されたCSSフレームワークです。Webアプリの開発を妨げないように、極力軽量(CSS自体は圧縮版で6KB、アイコンフォントは2KB分用意されています。)に、JavaScriptは...
ダミー画像をSVGで作成出来るオープンソースのダミー画像生成ツール・「placeholder.pics」
placeholder.pics placeholder.picsはダミー画像をSVGで作成出来るソフトウェアです。Goで書かれており、OSSとしてソースコードが公開されています。ダミー画像そのものはサイズ指定、背景カラー、グラデーシ...
複雑なtableでも対応できる、セルがどの列と行に属しているかをハイライトするスクリプト・「jquery-gettable」
jquery-gettable jquery-gettableはtableのセルがどの列と行にあるかをハイライトしてくれるスクリプトです。jQueryに依存しています。上図のようにセル上にマウスを持って行くと、そのセルが属する行と列が...