Advertisement

css-ultimate-guide-2017-1

 
トレンドの変化やCSSの進化によって、最近は大量のツールや便利なリソースが公開されるようになりました。
 
この記事では、2017年これまでにリリースされた便利CSSツールやリソースをカテゴリごとにまとめてご紹介します。
 
制作時間の節約にもなるCSSライブラリとツールは、より手軽に利用できるだけでなく、Flexbox や CSS Grid といったまだ完全に理解していないCSSプロパティを習得するのにも最適といえるでしょう。
 

2016年にリリースされた、ウェブデザインの制作時間を節約できる無料ウェブツールやアプリをまとめてご紹介します。インストールなどする必要もなく、ブックマークしておけ
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめてい

 

 

コンテンツ目次

 

CSS Flexbox ツール&ライブラリ

Waffle Grid

Flexbox グリッドシステムを利用した、レスポンシブ対応で7KBの軽量CSSフレームワーク。Sassによるカスタマイズ性も◎。

waffle-grid

目次へ戻る

 

 

 

RAGrid

CSSクラス名の代わりに分かりやすいアトリビュートを利用した、Flexbox グリッドシステム。

ragrid

目次へ戻る

 

 

 

Griddd

とてもシンプルでカスタマイズしやすい、FlexboxをベースにしたCSSグリッドシステム。

griddd

目次へ戻る

 

 

 

Flexbox Cheatsheet

たくさんのサンプル例と一緒に、体感しながらCSS Flexboxの仕組みについて学ぶことができるチートシート。

flexbox-cheatsheet

目次へ戻る

 

 

CSS Grid ツール&ライブラリ

Griddy

CSS Grid の仕組みについて学ぶことができるオンラインツール。より詳しい CSS Grid については、こちらのエントリーが参考になります。

griddy

目次へ戻る

 

 

 

Graaf

スタイルシートを追加するだけで、グリッドレイアウトに合わせて半透明オーバーレイを表示します。

graaf

目次へ戻る

 

 

 

CSS Grid Cheat Sheet

ビジュアルで体感的に CSS Grid について学ぶことができるオンラインチートシート。

css-grid-cheat-sheet

目次へ戻る

 

 

 

CSSコンポーネント

Foundation Building Blocks

ウェブサイトで利用する100種類を超えるUIコンポーネントが揃っており、すぐにHTML/CSSのページ作成を行うことができるスタートキット。

foundation-building-blocks

目次へ戻る

 

 

 

bttn.css

CSSでスタイリングされたボタンデザインを一式揃えており、プロジェクトに応じて使い分けることができます。

bttn-css

目次へ戻る

 

 

 

The Explodal

CSS とほんの少しの JSで作成された、超印象に残るポップアップ式の Modal ウィンドウ。

explodal

目次へ戻る

 

 

 

Buttons

高品質なピクセルパーフェクト・ボタンが揃ったデザインコレクション。そのままCSSコピーで利用できます。

buttons-collections

目次へ戻る

 

 

 

Social Share Kit

サイトに欠かせない各ソーシャルメディアのシェア用ボタンで、さまざまな種類が用意されています。

social-share-kit

目次へ戻る

 

 

 

SCSS Only Slider

モバイル表示もばっちりなレスポンシブ対応のCSSスライダーの作り方チュートリアルで、サンプルファイルも公開されています。

scss-only-slider

目次へ戻る

 

 

 

CSS Loader

CSSのみで実現できるシンプルなローディング用スピナー作成キット。

css-loader

目次へ戻る

 

 

 

CSS アニメーションツール&ライブラリ

Animatelo

ウェブサイトに動きを加えたいときに便利な animate.css をベースにした、CSSアニメーション用ライブラリ。

animatelo

目次へ戻る

 

 

 

Animista

CSSアニメーションを手軽に作成でき、作成したコードをそのままコピペすることも可能。

animista

目次へ戻る

 

 

 

Obnoxious.CSS

よりクリエイティブでユニークな動きをサイトに加えたいときに使いたいアニメーション用ライブラリ。

obnoxious

目次へ戻る

 

 

 

CSS Icons

CSSのみでスタイリングされたアイコンセットで、同時に2種類のデザインをモーフィング変化させることも可能。

css-animate-morphing-icon

目次へ戻る

 

 

 

It’s Tuesday

より控えめでページデザインにも合わせやすいCSSライブラリ。

its-tuesday

目次へ戻る

 

 

 

CSSリファレンス、ガイド&チェックリスト

Flawless Typography Checklist

インタラクティブで視覚的なチェックリストを使い、直感的にタイポグラフィーデザインを学ぶマスターコース。

flawless-typography-checklist

目次へ戻る

 

 

 

Sassmagic

Sassについて詳しく学ぶことができるリファレンスガイド。

sassmagic

目次へ戻る

 

 

 

Boilrplate

さまざまなウェブプロジェクトをはじめるときに確認したいボイラープレートのディレクトリ集。

boilrplate

目次へ戻る

 

 

 

CSS ウェブフレームワーク

awsm.css

クラス名やアトリビュートを使わずに、構造上美しいHTMLマークアップを実現するCSSライブラリ。

awsm-css

目次へ戻る

 

 

 

Brutalist Framework

ウェブデザイントレンドとして静かな人気となっている、ブルータリズムの考えをベースにしたオープンソースのフレームワーク。

brutalist-framework

目次へ戻る

 

 

 

BBC Grandstand

CSSによるスタイリングでよく問題となるポイント解決に役立つクラス名を集めたコレクション。

bbc-grandstand

目次へ戻る

 

 

 

iotaCSS

SASSをベースとしたオープンソースのOOCSSフレームワーク。

iotacss

目次へ戻る

 

 

 

Semantic UI

美しくて、レスポンシブ対応のレイアウトを手軽に作成できる開発用フレームワーク。

semantic-ui

目次へ戻る

 

 

 

CSS フレームワーク

Luxbar

超軽量で、レスポンシブ対応のCSSのみで作成されたナビゲーションバー。

luxbar

目次へ戻る

 

 

 

Mini.css

より機能的で軽量さを追求した CSS フレームワーク。

mini-css

目次へ戻る

 

 

 

kernel.css

マテリアルデザインの概要を参考に、他要素の挙動に干渉しない、超軽量なCSSとJavaScriptでできたフレームワーク。

kernel-css

目次へ戻る

 

 

 

Petal

モダンな見た目を実現できる軽量CSS UI フレームワークで、LESSをベースに作成されています。

petal

目次へ戻る

 

 

 

Tent CSS

ウェブサイト制作の土台づくりとして使えるフレームワークで、本当に必要なもののみを揃えたサバイバルキット。

tent-css

目次へ戻る

 

 

 

Spectre.css

超高速で拡張しやすい開発環境を実現できる、軽量でレスポンシブ、モダンなCSSフレームワーク。

spectre-css

目次へ戻る

 

 

 

その他のCSSツール

CSSRooster

ディープラーニングによってHTML用のクラス名を記述してくれるボット。

css-rooster

目次へ戻る

 

 

 

WebGradients

180種類以上のCSSグラデーションを確認でき、ボタン一発でコピペできる無料コレクション。

webgradient

目次へ戻る

 

最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる

 

 

Blend

美しいCSSグラデーションを直感的に作成することができるジェネレーター。

blend-css-gradient

目次へ戻る

 

 

 

Brand Colors

1,ウェブ制作に利用できる1,100+種類のカラーリングを、sassやLess、Styles、CSSでまとめたコレクション。

brand-colors

目次へ戻る

 

 

 

Angled Edges

SASSのmixinで作成された、斜めに入ったスリット用スタイリング。

angle-edges

目次へ戻る

 

 

 

Plumber

より見た目の良いドキュメントを作成し、素早いCSS開発を行うことができるツール。

plumber

目次へ戻る

 

 

 

Clippy

複雑なシェイプもCSSクリッピングマスとして、エディター内で作成からコードの発行まで可能なツール。

clippy-grundformen

目次へ戻る

 

 

 

RPG Awesome

ファンタジーRPGをイメージして作られたアイコンフォントのセットで、Bootstrapで人気のFont Awesomeにも似たつくり。

rpg-awesome

目次へ戻る

 

 

 

UnCSS Online

使用してないCSSを解析し、使用中のものだけを残して不要なCSSを削除します。

uncss-online

目次へ戻る

 

 

 

CSS Stats

作成したページのURLやCSSファイルを指定することで、スタイルシートを視覚的に分析できるツール。

css-stats

目次へ戻る

 

海外サイト Speckyboy Design Magazine で公開された 30 of Our Favorite CSS Resources from This Year より許可をもらい、翻訳転載しています。

 

参照元リンク : 30 of Our Favorite CSS Resources from This Year – Speckyboy Design Magazine