家系図のような縦表示の階層を描けるスタイルシート・「hierarchi-view」
hierarchi-view hierarchi-viewは上図のような家系図でよくある縦表示の階層を描けるCSSです。例では企業等での役職順が表現されています。こういうの作るの割と面倒なので地味に使いみちあるかもですね。 hi...
Resource - CSS/HTML
Foundationに加える事ができるUIコンポーネントを配布する・「Building Blocks」
Building Blocks Building BlocksはCSSフレームワークのFoundationに加える事ができるUIコンポーネントを配布するWebサイトです。zurbが公式に公開しているものになります。ナビゲーションやメデ...
軽量でカスタマイズ性を重視したCSSフレームワーク・「mini.css」
mini.css mini.cssは軽量且つカスタマイズ性を重視したCSSはフレームワークです。各種コンポーネントも用意されており、構成はBootstrapやMaterial Framework、Foundation等を意識しているの...
ファンタジーをイメージしたアイコンを使えるFont AwesomeライクなCSSツールキット・「RPG-Awesome」
RPG-Awesome RPG-AwesomeはファンタジーRPGをイメージして作られたアイコンフォントのセットです。Font Awesomeライクな作りになっているようですね。オーラをまとった人物ピクトグラム、ドラゴンの羽や武器、モ...
CSSフレームワークのBulma向けのテーマを配布する・「Bulmaswatch」
Bulmaswatch Bulmaswatchは以前ご紹介したCSSフレームワーク、Bulma向けのスタイルテーマを配布するWebサイトです。多くはないものの、20以上のテーマが公開されています。Bulmaを使ってこれから何か作る予定...
シンプルでエクステンシブルなフレームワークを目指したCSSフレームワーク・「Vanilla Framework」
Vanilla Framework Vanilla Frameworkはシンプルでエクステんシブルなフレームワークを目指しているCSSフレームワークです。OSのUbuntuをサポートするカノニカル社が公開しているみたいですね。シンプル...
基本的なUIコンポーネントを備えたミニマルなCSSフレームワーク・「Look」
Look Lookはリストやボタン、フォーム、カラーパターン等の基本的なUIコンポーネントを備えたミニマルなCSSフレームワークです。基本的なUIと言っても、ある程度のコンポーネントを全て揃えているものではないようです。他、配置の為の...
基本的なUIコンポーネントも備わったベーシックなCSSフレームワーク・「Caramel」
Caramel Caramelは基本的なUIコンポーネントも備わったベーシックでモダン、レスポンシブなCSSフレームワークです。ボタンのスタイルやRWDに対応したナビゲーション、通知、パンくずやテーブル、プログレスバーからページネーシ...
ITCSSガイドラインに沿って設計されたWebアプリの為のCSSフレームワーク・「Base-L」
Base-L Base-LはITCSSガイドラインに沿って設計されたWebアプリの為のCSSフレームワークです。ITCSSはあまり聞き慣れない方も多いかもしれませんが、CSS Wizardryの人が提唱したメソドロジーです。詳しく解説...
軽量でベーシックなレスポンシブWebデザイン対応CSSフレームワーク・「Cirrus」
Cirrus Cirrusは軽量でベーシックなRWD対応CSSフレームワークです。コアに加えて必要なコンポーネントのをモジュール式に追加する形のようですね。最低限のコンポーネントに加えてホバーエフェクトやカードスタイルも用意されている...
flexboxを使った、シンプル軽量なグリッドシステム・「Waffle grid」
Waffle grid Waffle gridはflexboxを使った、シンプル軽量なグリッドシステムです。7kbほどのスタイルシートでレスポンシブ、カスタマイズ性も考慮された設計との事です。ありがちなclassなのでフレームワーク的...
使用してないCSSを解析して削除、使用中のものだけ残してくれる・「UnCSS」
UnCSS UnCSSはCSSををパースして使用してないスタイルを削除、使用中のものだけ残してくれるツールです。OSSとしてもソースコードが公開されています。この手のは先発のツールがありますので好みで。複数Webページにまたがってパー...
CSSアニメーションを手軽に作成、コードをコピー出来る・「Animista」
Animista Animistaは手軽にCSSアニメーションを作成、コードをコピーできるWebツールです。BasicやEntrance、TextやAttentionなどを選択してアニメーションを作成すればコードが発行されます。動作を...
Webページにカスタマイズ可能なグリッドをオーバーレイ表示させるスタイルシート・「Graaf」
Graaf GraafはWebページにグリッドをオーバーレイするCSSです。よくあるグリッドをオーバーレイさせて表示を確認できる、みたいなやつなんですが、こちらの大きな特徴はカスタマイズ出来る、という点です。スタイルシートはGraaf...
パブリックドメインで配布されている、モバイルファーストでレスポンシブなCSSグリッドシステム・「FLUIDABLE」
FLUIDABLE FLUIDABLEはモバイルファーストなレスポンシブWebデザイン対応のCSSグリッドシステムです。LESSが使われていおり、ライセンスはパブリックドメインの元、配布されていますのでかなり自由に使うことが出来ますね...
シンプルでベーシックなレスポンシブWebデザインのグリッドレイアウト・「Spacegrid CSS」
Spacegrid CSS Spacegrid CSSはシンプルでベーシックなRWDのグリッドレイアウトCSSです。カラムは6までしか無く、それ以上は何もないので1.5kbと軽量な作りになっています。こういうのは汎用的に使えるので良い...
軽量でレスポンシブ、スタイルも選べるナビゲーションメニューのスタイルシート・「LUXBAR」
LUXBAR LUXBARは羽のように軽量なレスポンシブWebデザイン対応のナビゲーションメニュー用スタイルシートです。カラースタイルもいくつか選べます。これで非圧縮で8kbほどなので確かに軽量な設計ですね。また、ナビゲーションを固定...
シンプルで見やすいHTMLリファレンス・「htmlreference.io」
htmlreference.io htmlreference.ioはシンプルで見やすいHTMLリファレンスサイトです。トップページではタグが一覧になっており、ブロック要素、インライン要素、metaタグなどがひと目で分かるようになってい...
さまざまなフォームのスタイルサンプルとコードを大量にまとめた・「77 CSS Forms」
77 CSS Forms 77 CSS Formsは大量のフォームスタイルをまとめたWebページです。CSSで作られたフォームのサンプルが大量に紹介されています。各フォームはCodepenで動作デモを作成してあります。一般的なコンタク...
任意の要素に表示/非表示時のアニメーションエフェクトを付与出来るスタイルシート・「tuesday」
tuesday tuesdayは任意の要素にアニメーションエフェクトを手軽に付与出来るスタイルシートです。上デモのように、CSSによるアニメーションエフェクトを、classを与えるだけでアニメーションによる表示、非表示が出来るようにな...
レスポンシブなEメール向けのCSSフレームワーク・「Foundation for Emails」
Foundation for Emails Foundation for EmailsはRWD対応のHTMLメール用フレームワークです。名前の通り、多数の方に愛用されるCSSフレームワーク、Foundationを提供するZURBが公開...
フルスクリーン動画からスムーズにスマフォのモックアップに移行するイントロテンプレート・「Immersive Video Template」
Immersive Video Template Immersive Video Templateはcodyhouseで紹介された、動画を使ったWebサイトのイントロのサンプルです。フルスクリーン動画で始まり、スムーズにスマフォのモッ...