段落毎に設置した画像を、その段落が終わるまで固定させるスクリプト・「jquery-stopattop」
jquery-stopattop jquery-stopattopは段落毎に設置した画像を、段落がスクロールし終わるまで固定させるスクリプトです。ちょっと僕の説明が下手でピンとこないと思いますので動作サンプルを用意しました。名前の通り...
Resource - オープンソース
Markdownでデータを可視化する為のMarkdown-Itプラグイン・「Markvis」
Markvis MarkvisはMarkdownでデータを可視化する為のMarkdown-Itプラグインです。Markdown-ItはMarkdownでオリジナルのレンダリングをする為のJS製のレンダラ/パーサーで、その拡張として使う...
クリックやホバーでアニメーションしながら変化するアイコンのセット・「Animated Icons」
Animated Icons Animated Iconsはホバーやクリックでアニメーションしながら別のアイコンに変化するアイコンのセットです。60個を無料提供してくれています。あまり使わなそうなものも含まれていますがシンプルで使いや...
スマフォアプリでよく使われそうなコンポーネントをまとめたUIキット・「React Native UI Kitten」
React Native UI Kitten React Native UI Kittenはスマフォアプリの為のUIコンポーネントをまとめたUIキットです。外観の施工をサポートするから君はコンテンツ施工に集中してくれよ！みたいな事書い...
チャットのような対話コンテンツの為のUIフレームワーク・「BotUI」
BotUI BotUIはチャットのような対話コンテンツのUIのためのJavaScriptフレームワークです。いわゆるbot用でしょうか。返すメッセージや内容、タイミングなどの設定も簡単に出来るようになっています。 ライセ...
オープンソースの地図作成ツール・「TileMill」
TileMill TileMillはオープンソースとして公開されている地図作成ツールです。Mac,Win,Linuxで動作するそう。MapBox作・・なのかな？OSMのWikiを見る限りはそのようです。CSSを書く感覚で作成出来るのは...
よく使われるUIをまとめたReactのUIコンポーネントライブラリ・「Rebass」
Rebass Rebassはよく使われるUIをまとめたReact向けのUIコンポーネントライブラリです。各フォーム周りのエレメントからボタンやリンクなどの一般的なUI、プログレスバーやバッジ、タブなど、有ると嬉しいUIまで大量に用意さ...
Flexboxとvue.jsがベースのUIフレームワーク・「Sirius UI」
Sirius UI Sirius UIはvue.js+FlexboxなUIフレームワークです。コンポーネントやらスタイルやらがいろいろと揃えられている、どちらかと言えばBootstrap寄りのコンセプトかもしれません。ある程度揃えられ...
パフォーマンスを最重要視したWordPressテーマフレームワーク・「Astra」
Astra Astraはパフォーマンスを最重要視したWordPressのテーマフレームワークです。各スピードテストサービスで高得点をマークした結果を見る限りではかなり良さそうです。DLして使ってみましたが、ライブエディターで簡単にカス...
MediumライクなUIのツールバーで任意のテキストをシェア出来るようにするスクリプト・「share-this」
share-this share-thisはMediumライクなUIのツールバーで任意のテキストをSNS等に投げられるようにする、というスクリプトです。シェア先は各SNSは勿論、動作サンプルを見ると、メールやハッカーニュース等、任意の...
SVGで書かれたCC0ライセンスの世界の国旗のセット・「country-flags」
country-flags country-flagsはSVGで書かれた世界の国旗のセットです。CC0ライセンスで配布されています。というのも、もともとWikipediaにある素材をまとめたもののようです。WikipediaでCC0（...
HTMLメールの軽量boilerplate・「bojler」
bojler bojlerはHTMLメールの軽量boilerplateです。簡単にひな形を作成出来るように設計されているとの事。スタイルリセット、レスポンシブ対応、グリッド、ユニーティリティのclassが特徴だそうです。ライセンスはM...
シンプルで使いやすいスタイルのCSSボタンのセット・「beautons」
beautons beautonsはシンプルで使いやすいスタイルのCSSボタンのセットです。csswizardry謹製みたいです。classを付与すればそのスタイルになってくれます。フレームワークをベースとしている場合は使いにくいケー...
CC0ライセンスの高品質な写真を配布する・「Free Stock Images」
Free Stock Images Free Stock ImagesはCC0の写真素材を配布するフリーフォトストックサービスです。数多に存在する同様コンテンツと同じですが、人物画像に関してモデルリリースを取得しているから安心して使っ...
StackOverflowのようなQ&Aコンテンツを構築する為のOSS・「Scoold」
Scoold ScooldはStackOverflowのような質問サイトを構築するためのオープンソースソフトウェアです。フルテキスト検索、評価システム、レスポンシブ対応、SEOフレンドリー且つ、GoogleやFacebookなどのアカ...
開発者向けのOSSなSVGアイコン集・「DEVICON」
DEVICON DEVICONは開発者向けのSVGアイコン集です。angularjs、apache、github、gulp、nodejsなどといった、開発者が良く目にするアイコンがまとまっています。SVGなのでカスタマイズもしやすくな...
Bulmaフレームワーク向けに作られたVue.jsベースのUIコンポーネント・「Buefy」
Buefy BuefyはBulmaフレームワーク向けに作られたVue.jsベースの軽量なUIコンポーネント集です。よく必要とされるtableやタブ、ボタン、アラートやモーダルウィンドウ、フォーム周りなど一通り揃えられています。Bulm...
1996〜2005年までのWebデザインのトレンドを確認出来る・「Web Design Museum」
Web Design Museum Web Design Museumは1996〜2005年までのWebデザインのトレンドを収集したWebプロジェクトです。当時のWebデザインのトレンドを取り入れたWebサイトのスクリーンショットを公...
スタイルガイドを作成する為のテンプレート・「Style Guide Guide」
Style Guide Guide Style Guide Guideはスタイルガイドを作成する為のテンプレートです。静的サイトジェネレーターで日本語情報も存在するJekyllが使われており、面倒なスタイルガイドの作成をサポートしてく...
YoutubeやVimeoのような動画共有サービスを構築する為のOSS・「YouPHPTube」
YouPHPTube YouPHPTubeはYoutubeやVimeoのような動画共有サイトを構築する為のソフトウェアです。名前の通りPHPで作られています。YoutubeやVimeoなどから動画をインポート→エンコード可能、Face...
レスポンシブで軽量なflexboxベースのCSSフレームワーク・「griddd」
griddd gridddはレスポンシブで軽量なflexboxベースのCSSフレームワークです。カスタマイズ性を重視しておりclassもシンプルにされています。大きな特徴はないけどそれ故の使いやすさがある印象でした。MITライセンスの...
ECサイトに必要なUI構築をサポートするライブラリ・「Shop.js」
Shop.js Shop.jsはECサイトに必要になるカートやチェックアウトのUI構築をサポートするライブラリです。カートニ追加する、チェックアウトのフォーム、カートをスライドインさせるなどなど。そういえばありそうでなかったかも。ライ...