レスポンシブWebデザインにも対応のシンプルで軽量なCSSグリッドシステム・「Pills」 - かちびと.net
PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えないそうで、.whole(全体)、.half(1/2)、.three-quarters(3/4)のように直感で分かるような人間に優しいclass名にしているそうです。また、.twelve、.sevenといったclass名でも使えるそうです。この辺りは好みとは思うのですが、始めて使いはじめる、という場合はとっかかりやすい気はしますね。ライセンスはMIT。 Pills
HTMLをCanvasにして画像としてダウンロードできるようにする - かちびと.net
Result スニペットとは言えませんが・・ｗ html2canvasとjQueryを使ってCanvas化、ダウンロード出来るようにするコード。tableとかグラフをユーザーがダウンロード出来るようにする、みたいなの。 jQuery jQueryに加えてhtml2canvas.jsを読み込み。サンプルではCDNを使ってます。 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> jQuery var element = $("#html-content-holder"); // 画像化したい要素をセレクタに指定 var getCanvas; //プレビュー $("#btn-Preview-Image").on('click', function () {
WordPressの管理画面をクリーンでシンプルなスタイルに変更するプラグイン・「Slate Admin Theme」 - かちびと.net
Slate Admin ThemeはWPの管理画面のスタイルをシンプルでクリーンなスタイルに変更してくれるプラグインです。上記のようなスタイルになります。公式とあまり変わらないように見えますが、メニューの項目のアイコンの位置が変わったりスペースを多く取ってくれていたりnotificationが見やすくくなっていたりと、公式から大きく変えずに見やすさだけ向上していると個人的には思えて好印象でした。いつか使うかもと思ったので備忘録として。 Slate Admin Theme 尚、こちらはpro版もあるようで、有料版ではスタイルだけでなく、管理画面、ログイン画面のロゴの変更やスタイルのカスタマイズ、管理画面内への任意のメッセージの挿入、任意のメニューの表示/非表示へのスイッチ、管理画面内のフッターのカスタマイズなど様々な機能が追加されているようです。pro版は本プラグインを有効化すればフッターに
モバイルアプリ向けのランディングページテンプレート・「Takeoff」 - かちびと.net
Takeoffはモバイルアプリ向けのランディングページのテンプレートです。よく配布されているような、いわゆるWebページのテンプレは使わないのですけど、こちらはスタイルを初期化すれば使いやすそうだったので備忘録として。スクロール連動型のペラサイトになっています。背景とテキスト、モックアップが変化するだけのシンプルなもの。RWDにも対応しています。割と良いのですが、スマフォで下部から上部にスクロールする時と上部から下部にスクロールする時のエフェクトが全く同じなので混同するかも知れません。ここはエフェクト直して使ったほうが良さそう。ライセンスはMITです。 Takeoff
JavaScript製のオープンソースなCMS・「CMS.js」 - かちびと.net
CMS.jsはJavaScript製のCMSです。オープンソースとして公開されています。サーバーサイド・スクリプトの援助なしにクライアントサイドでWebアプリケーションを構築する事が出来る、との事です。jekyllを意識しているみたい。ライセンスはMITです。 CMS.js
Githubで公開されているjQueryのプラグインと詳細をまとめている・「jQuery Cards」 - かちびと.net
jQuery CardsはGithubで公開されているjQueryのプラグインと詳細をまとめているWebサイトです。詳細はREADME.md等を引っ張ってきてるみたいです。また、全てではありませんが、動作デモもCodePenのenbedで置いてくれています。Aboutにはデモを用意してます的な事書かれていますので創意作成中と言ったところかも知れませんね。数えてはいませんが1000以上あるそう。カテゴリもしっかり分けられていますので探しやすい印象でした。ところどころアレな箇所もありますが覚えておいて損はなさそうです。 jQuery Cards
gistやYoutube、Vine、TwitterやGoogle Mapなど、様々なサービスをembed出来る・「embed.js」 - かちびと.net
embed.jsは様々なサービスの埋め込みを容易に行えるようにする為のスクリプトです。テキストから自動で文字列を解析し、embedしてくれる、というもの。例えばGistやYoutubeなら、URLを貼るだけで勝手に埋め込みをしてくれます。現在対応しているのはFrickr、Vine、Google Map、Twitter、Vimeo、USTREAM、Youtube、CODEPEN、JSFIDDLE、Instagramなどの他に、任意の画像、音声、動画ファイル、URLの自動リンク化、markdownのパース、絵文字サポートからsyntax highlightまで多岐にわたります。結構便利。CMS等に摂り入れたいスクリプトですね。ライセンスはMIT。 embed.js
inputやtextareaで、指定した文字数を超えた際に警告文を出す - かちびと.net
Result maxlength属性は何かとアレなので文字数自体は制限せずに、予め設定した文字数を超過した際に警告文を出すようにする jQuery /** * Characters limit exceeded warning with a simple jQuery plugin * @copyright Copyright 2013-2015 Joan claret * @license MIT * @author Joan Claret Teruel <dpam23 at gmail dot com> * Licensed under The MIT License (MIT). * Copyright (c) Joan Claret Teruel <dpam23 at gmail dot com> */ ;(function($, document, window, undefin
フリーの写真素材や動画、音源等を配布しているWebサイトを大量にコレクションしている・「AllTheFreeStock.com」
AllTheFreeStock.comは写真素材や、動画素材、音源やモックアップ等を無料で公開、配布するWebサイトをコレクションしているWebサイトです。貴方のプロジェクトのスタートアップに役立ててほしいとのこと。かなり大量に集められており、それぞれのWebサイトはiframeでその場に表示されます。割といろいろな方に需要ありそう。 AllTheFreeStock.com
様々なJavaScriptライブラリやフレームワーク、プラグイン等を探せる・「JavaScripting.com」
JavaScripting.comは公開されている様々なJSライブラリやフレームワーク、プラグイン等を探せるWebツールです。大量のJSライブラリ等を収集しており、細かくカテゴリ分け、探しやすいようにしてあるみたいです。それぞれのJSライブラリやフレームワークは本サイトやGithub等へのリンクとともに、概要、CDN、リポジトリなども確認可能となっています。 JavaScripting.com
Webサイトの背景用の動画をCC0ライセンスで公開している・「Coverr」
CoverrはWebサイトの背景用の動画をパブリックドメインで公開、配布しているWebサイトです。毎週月曜日に7つの動画を配布するみたい。動画を背景にする為のJavaScriptやCSS、HTML等のコードも書いてくれていますよ。著作権が放棄された素材なので気軽に使えて良いですね。 Coverrvia:K’conf
背景色を指定するとWCAGのガイドラインに基づいたテキストカラーをピックアップしくれるカラーツール・「COLOR SAFE」
COLOR SAFEは背景色を設定すると、WCAGガイドラインに基づいたテキストカラーをパレットにして提出してくれるアクセシビリティカラーツールです。任意のテキスト、フォントの種類やサイズ、太さの指定も可能となっています。ピックアップされたカラーコードはHEXとRBGから選択可能で、クリックだけでクリップボードに格納してくれる親切設計でした。 COLOR SAFE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
検索機能の付いたFAQページを手軽に作成できる・「HelpSite.io」 - かちびと.net
リストやテーブルにフィルタリング機能やソート、検索機能を付与するスクリプト・「List.js」 - かちびと.net
Bootstrapで使えるコードスニペットを集めている・「CodeLab」 - かちびと.net
ブレンドモードを利用したカラフルなフィルタの為のCSS・「Colofilter.css」 - かちびと.net
Web制作時に役に立つ（かもしれない）ツールを大量に公開している・「Richard’s Toolbox」 - かちびと.net
textareaにオートコンプリート機能を加えるライブラリ・「jQuery.textcomplete」
React.jsベースのプレゼンテーションライブラリ・「Spectacle」
任意の画像を元にしたグラデーションカラーをCSSで作成する・「Gradify」
