Resource - CSS

フレキシブルなclass名を意識して設計されたCSSフレームワーク・「Biomatic UI」

Biomatic UI Biomatic UIはフレキシブルなclass名を意識して設計されたCSSフレームワークです。どういう形が「フレキシブルだ」と感じるかは個人差があると思うので、ここでは柔軟であるかどうかは触れないでおきますが...

HTMLやCSS、JavaScriptのコードを綺麗に整形してくれる・「DirtyMarkup」

DirtyMarkup DirtyMarkupはHTML/CSS/JavaScriptのコード整形ツールです。従来のフォーマッター同様にある程度の調整機能も付いています。また、本ツールはAPIも公開しており、今のところは無料で利用可能...

css gridのコードを生成できる・「Griddy」

Griddy Griddyはcss gridのコードを手軽に実装できるツールです。実行結果を確認しながらdisplay: grid;のコードを生成してくれます。よくあるやつですね。css gridはちょっと複雑でとっつきにくい感あるの...
Ads

クリックするだけでPantoneカラーをhexコードでコピーできる・「Pantone colors」

Pantone colors Pantone colorsはPantoneの色名をクリックするだけでhexコードでコピーできるツールです。Pantone社が提供する色見本帳にある色名、いわゆるPantoneカラーをCSS等で使えるよう...

シンプル、スマート、モダンを特徴としたモバイルファーストなCSSフレームワーク・「TURRETCSS」

TURRETCSS TURRETCSSはシンプル、スマート、モダンを特徴としたモバイルファーストなCSSフレームワークです。JavaScriptは併用されていません。パフォーマンスが重視されており、軽量高速なWebサイト構築に貢献して...

基本的なコンポーネントのみを提供するCSSスターターキット・「Shoelace.css」

Shoelace.css Shoelace.cssは基本的なコンポーネントのみを提供する軽量なCSSスターターキットです。役立ちそうなコンポーネントのCSSリセットみたいなものと考えてくれとのこと。このCSSは本来、Surreal C...

ミニマルなワイヤーフレームの為のCSSフレームワーク・「WIP」

WIP WIPはミニマルなワイヤーフレーム作成の為のCSSフレームワークです。なんだかややこしいですが、ミニマルなワイヤーフレームをHTML/CSSで作ろう、というもの。少し前にご紹介したようなワイヤフレーム用の棒状のフォントを併用し...

シンプルで使いやすいスタイルのCSSボタンのセット・「beautons」

beautons beautonsはシンプルで使いやすいスタイルのCSSボタンのセットです。csswizardry謹製みたいです。classを付与すればそのスタイルになってくれます。フレームワークをベースとしている場合は使いにくいケー...

モダンなWeb向けの小さなCSSリセット・「tinyreset」

tinyreset tinyresetはモダンなWeb向けの小さなCSSリセットです。よく分かりませんね。適切なタイトル思いつかなかったので直訳しました。ただ、内容は良いリセットだと思います。オールドブラウザほぼ死滅の今日ではリセット...

CSSやMicrodata、Open Graphなどのシンプルなコードジェネレーターを沢山公開している・「Web Code Tools」

Web Code Tools Web Code Toolsはさまざまなコードジェネレーターを公開しているWebサイトです。CSSやHTML、Microdata、Open Graphなどなどのコードとパパッと作成出来るものがずらりと並び...

レスポンシブで軽量なflexboxベースのCSSフレームワーク・「griddd」

griddd gridddはレスポンシブで軽量なflexboxベースのCSSフレームワークです。カスタマイズ性を重視しておりclassもシンプルにされています。大きな特徴はないけどそれ故の使いやすさがある印象でした。MITライセンスの...

ボタンのスタイルを大量に集めたスタイルシート・「Buttons」

Buttons Buttonsはボタンのみを集めたスタイルシートです。少し前の、影のある立体的なものや、ベーシックなもの、丸みのあるもの、フラットなものなどさまざまなボタンのスタイルかなり大量に揃えられています。どこかで役に立つ・・か...

classを使わないミニマルなCSSフレームワーク・「Sakura」

Sakura Sakuraはclassを使わないミニマルなCSSフレームワークです。カラーテーマはいくつか用意されていますが、コンポーネント等は基礎的なもののみとなっています。それでも、デモを見る限りしっかりとWebコンテンツとして機...

家系図のような縦表示の階層を描けるスタイルシート・「hierarchi-view」

hierarchi-view hierarchi-viewは上図のような家系図でよくある縦表示の階層を描けるCSSです。例では企業等での役職順が表現されています。こういうの作るの割と面倒なので地味に使いみちあるかもですね。 hi...

軽量でベーシックなレスポンシブWebデザイン対応CSSフレームワーク・「Cirrus」

Cirrus Cirrusは軽量でベーシックなRWD対応CSSフレームワークです。コアに加えて必要なコンポーネントのをモジュール式に追加する形のようですね。最低限のコンポーネントに加えてホバーエフェクトやカードスタイルも用意されている...

flexboxを使った、シンプル軽量なグリッドシステム・「Waffle grid」

Waffle grid Waffle gridはflexboxを使った、シンプル軽量なグリッドシステムです。7kbほどのスタイルシートでレスポンシブ、カスタマイズ性も考慮された設計との事です。ありがちなclassなのでフレームワーク的...

使用してないCSSを解析して削除、使用中のものだけ残してくれる・「UnCSS」

UnCSS UnCSSはCSSををパースして使用してないスタイルを削除、使用中のものだけ残してくれるツールです。OSSとしてもソースコードが公開されています。この手のは先発のツールがありますので好みで。複数Webページにまたがってパー...

シンプルでベーシックなレスポンシブWebデザインのグリッドレイアウト・「Spacegrid CSS」

Spacegrid CSS Spacegrid CSSはシンプルでベーシックなRWDのグリッドレイアウトCSSです。カラムは6までしか無く、それ以上は何もないので1.5kbと軽量な作りになっています。こういうのは汎用的に使えるので良い...

ディープラーニングでHTMLにclassを自動付与してくれる・「CSSRooster」

CSSRooster CSSRoosterはディープラーニングでHTMLコードを分析し、適切なclass名を自動付与してくれるWebツールです。1000以上のWebサイトのHTML構造を学習し、適切なclass名を自動で与える、という...

任意のWebサイトや要素に設定されたCSSを解析するChromeエクステンション・「CSS Peeper」

CSS Peeper CSS Peeperは任意のWebページやそのページの各コンテナに設定されたCSSを解析するChromeエクステンションです。解析したいページでエクステンションを起動すると、Webページのfont-familyや...

大量のCSSフレームワークやライブラリ、スニペット、ツール等をコレクションしている・「CSSReflex」

CSSReflex CSSReflexは大量のCSSフレームワークやライブラリ、スニペットやツール等をコレクションしているWebサイトです。よくあるキュレーションサイトですね。レスポンシブの計算機やフィルターツールなどもありますが、特...

disple:tableを使ったモバイルファーストなCSSグリッドシステム・「Table Grid」

Table Grid Table Gridはdisple:tableを使ったモバイルファーストなCSSグリッドシステムです。といっても実用性を考えて作った重要性の高いプロジェクトではなく、単に実験的に作ったようです。floatやfle...
Ads