Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」
WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コードをコピーできるようになっている、という感じです。 スタイルは一貫したもので統一されているので自由に組み合わせても、見た目はある程度はチグハグにならず整えられたサイトが出来上がるかなと思います。 利用にあたりユーザー登録も不要で自由に利用できるみたいです。 Windstatic
任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」
CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。 大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality
Google Analytics代替として開発された、Cookie不使用のオープンソースの解析ツール・「Pirsch」
PirschはGoogle Analytics代替として開発された、Cookie不使用のオープンソースの、シンプルでプライバシーに配慮した解析ツールです。 GAほど多機能ではないものの、PVやセッション、リファラなどWebサイト解析に必要なメトリックを提供してくれます。 解析用のスクリプトも1KB未満で解析対象のWebサイトのパフォーマンスを損ないません。データはCSVでエクスポートも可能な他、メールで定期的に解析結果を送る事も可能です。 管理画面もシンプルで見やすく分かりやすい印象でした。OSSとして提供されていますが、Webサービスとしても展開しているようです。現在はベータ版のため、無償で利用できるみたいです。ライセンスはAGPL-3.0との事。 PirschOn Github
シンプルで扱いやすいHTMLテーブルライブラリ・「Grid.js」
Grid.jsはシンプルで扱いやすいHTMLテーブルライブラリです。ReactやAngular、Vueなどは勿論、バニラでも問題なく動作します 9kbと非常に軽量で使い方もすごく簡単です。データを元に自動で指定した要素にtableを作成します。 ソート機能や検索、ページネーション機能なども付いてます。試しに使ってみました example データが少ないのでページングは飾りになってしまっています。あと、現段階で、ソートは数値をうまくソートできないみたいです。 Grid.jsの使い方はとても簡単です。 <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" /> <script src="https://unpkg.com/gridjs"></script>CSSとJSを読み込みます。C
レスポンシブWebデザイン対応のWebサイト開発に特化したオープンソースのWebブラウザ・「Responsively」
ResponsivelyはRWDの開発に特化したWebブラウザです。オープンソースとしてソースコードも公開されています 各スマホのデバイスやタブレット、PCなど異なるデバイスでどのように表示されるかを一括確認できる、というもの Electronベースとなっています。試しに使ってみました こんな感じで設定した各デバイスで指定したWebページが表示されます。スクロールやページの移動は全ウィンドウで連動しています。 ↑ インスペクタもついており、その場で編集、表示確認等を行う事が出来ます ↑ また、全デバイスのフルスクリーンショットもワンクリックで可能となっています。もちろん各デバイス単位でも撮影可能。撮影されたSSはドメイン、日付、撮影した時間を名前としたファイル名やフォルダ名で保存されますので上書きする心配もありません 尚、デバイスはかなりの量が用意されているのでお好みに合わせてウィンドウを
IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する
Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています ※Winodws10でIE11、Edge、Firefox 68.0.1、Opera 62.0.3331等で表示確認しました cssp {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/ line-height: 1.4; max-height: 4.2em; overflow: hidden; position: relative; text-align: justify; text-overflow: ellipsis; width:50%; margin:auto; } p::be
Webサイトマップをビジュアル化して見積もりを計算できる・「Octopus.do」
Octopus.doはWebサイトのサイトマップをビジュアル化して見積もりを計算、シェアできる見積もり計算アプリです。 ページごとに作成する項目を書き、工数を設定すると自動で計算してくれる、というもの。単位は時間となっており、通貨は円にも対応しています。なかなかユニークで便利なツールでした。 というわけで使用感です。 ざっくり使い方 概ね直感で使えると思います。作成予定のコンテンツや作業内容をページ毎に書き、かかる時間を設定します。（※右に0hとあるのは「Oh」ではなくて「0h(0時間)」です。） 各ページに工数を設定したら右上の$マークのボタンをクリックします。メニューが開くのでCurrencyをJapanese YENに設定し、税（TAX）を日本の消費税率の数値に設定します。これで自動計算してくれるようになります。また、別途かかる費用がある場合は項目を追加できるようになっています。 作
レスポンシブなEメール向けのCSSフレームワーク・「Foundation for Emails」
Foundation for EmailsはRWD対応のHTMLメール用フレームワークです。名前の通り、多数の方に愛用されるCSSフレームワーク、Foundationを提供するZURBが公開しているもの。あらゆるメールクライアントで動作を確認しているそうで、Outlookでさえ問題ないとの事。テンプレートも用意してくれています。 スマフォの普及でHTMLメールも需要が増えた・・・なんて実感は思ったよりありませんが、いずれ需要は実感出来る程度には上がっていくんじゃないかなぁと思います。 まあでも格安SIMのユーザーが広がれば制限を気にしたりで需要は上がらないかもしれませんね。僕も東京デジタルホンから10年以上ずっと使っていたSoftbankに見切りをつけて格安SIMに変えました。連れと2人分なので月の携帯代は1万5000円から5000円に下がりました。基本家にいるので自宅ではWifiだから容
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsベースのオープンソース静的サイトジェネレーター・「Nextra」
OSSでソースコードも公開されているJavaScript製のシンプルで使いやすいフローチャート作成Webアプリ・「Drawflow」
架空の都市の地図を作成出来るオープンソースのWebアプリ・「Map Generator」
Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」
ユニークな形状も作れるborder-radiusジェネレーター・「FANCY-BORDER-RADIUS」 | かちびと.net
Vue.jsベースのオープンソースなUIコンポーネントライブラリ・「Element」
BootstrapベースのシンプルなUIのオープンソース管理画面テンプレート・「tabler」
任意のWebページのデータ等を自動でスプレッドシートに挿入、Excelファイルとしてダウンロードできる・「Listly.io」
オープンソースのTrelloライクなカンバンボードシステム・「Restyaboard」
Bootstrapで使える要素を170種ほどセットにしてOSSとして配布する・「Froala Design Blocks」
レスポンシブWebデザイン対応の棒グラフ、折れ線グラフ、円グラフを作れる・「Pizza Amore!」 - かちびと.net
大量のCSSフレームワークやライブラリ、スニペット、ツール等をコレクションしている・「CSSReflex」
