WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コードをコピーできるようになっている、という感じです。 スタイルは一貫したもので統一されているので自由に組み合わせても、見た目はある程度はチグハグにならず整えられたサイトが出来上がるかなと思います。 利用にあたりユーザー登録も不要で自由に利用できるみたいです。 Windstatic

CSS Pie Chart GeneratorCSS製の円グラフを手軽に作れるシンプルなWebアプリです 画像だと管理が面倒だしCSSだとコード書くのが面倒な円グラフなので地味に需要はあるかも？ 以下、試しに使ってみた感想です 動作テスト 設定項目に入力するだけで使えます。タイトルやソース元、ラベルと数値を入力すれば即反映されます ドーナツ型にも出来たりサイズ変更も自在に行えます。勿論、日本語も問題ありません。 Codepenに作られたコードを投げる機能もあるので動作テストも楽で良いのでは CSS Pie Chart Generator

Result こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ CMSの管理画面なんかで複雑化したページを階層表示する、とかWebサイトのサイトマップとかいろいろ用途はありそうです css.tree {/*親要素*/ position: relative; background: white; margin-top: 20px; padding: 30px; font-size: .85rem; font-weight: 400; line-height: 1.5; color: #212529; } .tree ul {/*親フォルダ*/ padding-left: 5px; list-style: none; } .tree ul li {/*ファイル名部分*/ position: relative; padding-top: 5px; padding-bott

Result マウスドラッグした文字数を数えます。JSはバニラです 使う機会があるかは分かりません jsfunction biR() { document.addEventListener("mousedown", rOS); document.addEventListener("mouseup", rOS); document.addEventListener("onkeyup", rOS); document.addEventListener("onkeydown", rOS); document.addEventListener("onkeydown", rOS); document.onselectionchange = function() { rOS(); }; } function rOS() { var cout, rts, rt; c = window.getSelect

textareaでオートコンプリート機能を実装するスクリプト・jQuery.textcompleteのご紹介。デモではコメント投稿で絵文字を使う、みたいなケースが紹介されています。 textareaでオートコンプリート機能を実装する、というもの。使いどころは限られそうですが、コンテンツ次第では便利なスクリプトですね。 こういうの。上記例では絵文字を打つのにコロンで括るので、コロンを打つとオートコンプリートで候補を出してくれるようになっています。 jQueryは1.7以降を使うように、との事。 $('textarea').textcomplete(strategies);セレクタを指定して呼びだすテキストを作っていきます。 デモではコロンを正規表現で判別して事前に作ってあったテキストをオートコンプリートとして実装、アイコン付きに置換してるみたいですね。詳細はGithubに書かれています。 ラ

コンテナのサイズに合わせて自動的に画像をフィットさせる、というスクリプトのご紹介です。jQueryに依存しています。RWDなんかと相性良さそうですね。 コンテナに合わせてフィットさせる、というもの。似たスクリプトは既存しますので選択肢の一つとして。 サイズに応じて自動でフィットさせます。 ↑ こんな感じ。 $('.foo').imageFill();基本的にはコンテナをセレクタとして指定するだけ。 <div class="foo"> <img src="bar.png"> </div>そのコンテナの中に画像を含めます。楽でいいですね。 ライセンスはMITとGPLのデュアルライセンスとなっています。詳細は以下にて。 imagefill.js

ユニークなスクリプトだったのでなんとなくメモ。一文字ずつエフェクトを加えてランダムに動かす、というもの。やりすぎるとアレですけどこれはこれで面白いですね。 以前カーニング向けの似たようなスクリプトがありましたが、こちらはアニメーションさせる目的で作ったみたいですね。 こんな感じで動きます。一歩間違えると鬱陶しいだけですが、アイデア次第では面白いコンテンツに出来るかもしれませんね。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.funnyText.js"></script>本体とスクリプトを読み込みます。 $('.foo').funnyText({ speed: 700, bor

Loaders.cssはCSSのみで作られたローディングアイコンのセットです。CSSで作られているのでスタイルの変更やスピード調整もしやすく、軽量で済む反面、対応ブラウザも限られるので現状ではスマフォ向けになりそうです。今のところ28種のアイコンのソースコードが公開されています。ライセンスはMITとの事。 Loaders.css

Animated Type Loaderはテキストで作られたローディングを実装する為のCSSです。keyframesと:nth-of-typeを使ってspanでラップしたテキストを順番に表示させる、というシンプルなもの。テキストのみなのでマークアップやテキストの変更、CSSによる装飾など、管理が楽で良いですね。探せばゴロゴロとチュートリアルや紹介記事が出るレベルの今更な内容ですが、個人的に使う機会が出来たので備忘録として。 Animated Type Loader (via keegan lambert)

CSS Rulerはemやrem等のCSSで使う単位のサイズを比較出来るツールです。値を変えることでどの単位がどう変化するかを確認出来るようになっています。また、それぞれのエレメントにマウスホバーすれば簡単な説明も表示されます。 CSS Ruler

jquery.localizationTool.jsはWebサイトを多言語化する為のスクリプトです。jQueryに依存しています。シングルページ向け、というのは、本スクリプトがAPI等を利用した自動翻訳的なものではなく、制作側で手作業で翻訳を施す簡易的な仕様だから・・だと思います。指定したセレクタ内の言語を、予め設定した言語とその言語下における翻訳テキストを、ドロップダウンの選択毎で置換する、というものになるのでページ数の多いWebサイトには不向きかもですね。ただ、自身で設定するので応用が効きやすい、自動翻訳による誤訳の心配がない、というのは利点です。ライセンスはMITとの事。 jquery.localizationTool.js

deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように自動で置換し、CSSでスタイリング可能にしてくれます。現在はsvgというclassが指定されていますが、任意のユニークなclass名に変えたい時はコードの最下部にあるdeSVG(“.svg”, true);の箇所を変更すればOKです→(Sample)。非依存型で軽量、<img>タグにはclassを与えればいいだけと、手軽で良い感じです。 deSVG

Nibblerは任意のWebサイトのアクセシビリティやソーシャルメディアのサポート状況、害悪なコンテンツの有無、SEO的な部分の評価等を調査し、スコアレポートを提出してくれるツールです。ざっくり調査するなら手軽で良いですね。調査項目も割と多いので多少時間がかかります。 Nibbler

CSS GRADIENT ANIMATORは少しずつ色が変わるグラデーション背景をCSSで作成出来るWebサービスです。keyframesを使ってアニメーションさせているみたいですね。なかなか素敵。 CSS GRADIENT ANIMATOR

JS NICEは難読化されたコードを読みやすく整形するツールです。ただ整形するだけでなく、ローカル変数の名前を変更する事も可能みたい。沢山のOSSから規則性を学習したプログラム解析技術を利用しており、適切な変数名を提案してくれる、との事です。まだあまり触っていないので何とも言えませんが・・・興味のある方は以下でお試しになってみては。 JS NICE

画像やボックス要素にマウスホバーすると 別のボックス要素をフェードエフェクトや スライドアニメーションで表示させる事が 出来るjQueryプラグインです。昔は色々と これ系を見かけましたけど最近は全然無い ですね。 これくらいなら自作する、という方も多いのか、以前はかなり見かけたホバーエフェクトのjQueryプラグインは全然見かけなくなりましたが、プラグインの方が楽な場合も多々あると思いますのでこういうのも覚えておくと工数を減らせるかもしれません。 ボックス要素が画像の上にオーバーレイ込みで表示されます。マウスを乗せたらRead more、みたいなのも容易に出来ますね。 divの上にdiv的な事も出来ます。 IEでも問題ないです。 簡単に実装出来ました。 コード <script type='text/javascript' src='http://ajax.googleapis.com/a

今更なTipsなんですけど、まぁ自分用の 復習的な記事です。カスタマイズしやす いニュースティッカーを作るコードで、 1行でも4行でも画像でも、cssで見た目 をスタイルするだけで少量のコードで 実装する事が出来ます。 いろいろプラグインを紹介しておいてアレですけど、実際プラグインに依存すると困ることのほうが多いので簡単なものは簡単なコードで実装出来る程度にはしておきたい所ですね。 Sample:01ティッカーです。実際こんな風には実装せず、目立たないところに配置しますけど・・ 以下のコードで実装します。 function ticker(){ $('#news li:first').slideUp( function(){ $(this).appendTo($('#news')).slideDown(); }); } setInterval(function(){ticker()}, 50

ちょっと欲しいかも、と思って備忘録。矢印や 指など、マウスポインタでお馴染みの形をした、 スタイラスがちょっとかわいいです。やや大き めなのでiPadなどのタブレット系デバイス向け ですかね。正直使い勝手はアレですけど、便 利は便利な気がします。 でもこういうのはやっぱり見た目で買ってしまいそうです。ペン型は便利だけど面白みは無いですしね・・ 良く見るマウスポインターの形をしたスタイラスです。指とカーソルの2種類用意されていて。磁石も付いてるみたい。 こんな感じで使う。臨場感ありそう・・・・と思ったけどポインタでかすぎて無いかもですねｗ使いにくそうですけど、動画見る感じではそうでも無さそうでした。そう見せてるのかもですけどｗ 動画 この動画見ると確かに料理のときや食べながら使いたい時に画面汚さないしいいかも。磁石になってるのも素敵。 ペン型のスタイラス意外はあんまり見たことが無いので、こう