Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Framework

[CSS] Keiyaku CSS – 日本の契約書のためのCSSライブラリ

  • Pocket
  • このエントリーをはてなブックマークに追加

Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするためのCSSライブラリ。契約書でよく見る、第何条何項みたいな書式を、マークダウン形式で簡単に記述することができます。HTML書かなくてもマークダウンで簡単に書けるという点も魅力です。契約書以外にも、例えばサイト内の利用規約のスタイルとしても使えそうです。お硬い系の記述ってどうしても必要ですからね。

[CSS] Basscss – 汎用クラスをまとめたCSSフレームワーク

  • Pocket
  • このエントリーをはてなブックマークに追加

汎用的に使いまわしやすいクラス指定をまとめたCSSフレームワーク。サイト内では「Low-Level CSS Toolkit」と表現されています。サイト内において使いまわしやすいという意味よりは、どちらかというとサイトをまたいで使える汎用的なクラス指定をまとめたフレームワーク、といった感じのものです。例えば「m0」とClass指定する事でmargin:0を指定、「border-bottom」と指定すれば下線を引けます。プロパティ名からClassが命名されているので、CSS書き慣れた人ならすぐに勝手がわかると思います。この記述法だとオブジェクト指向のCSS記述とも相性良さそうですね。
ただし既存のCSSフレームワークとの併用を考えている場合、すでに用意されている指定を再実装しちゃう可能性もありそうです。例えばBootstrapであればHelper Classedといった似たような仕組みが用意されているので、こういう場合は必要なもののみ抽出した上で実装した方が良いかもしれません。

[CSS] Flexbox Grid – フレックスボックスでレイアウトされたCSSグリッドシステム

  • Pocket
  • このエントリーをはてなブックマークに追加

FlexboxでレイアウトされたCSSグリッドシステム。もちろんレスポンシブレイアウトにも対応してます。グリッド指定の仕組みは一般的な手法と同じなので、Bootstrapとか使った事ある人ならすぐに馴染めそうです。機能としてはオフセット指定、オートレイアウト、グリッドのネスト、横や縦方向のアライメント指定、ボックスの順番の入れ替えなどがあります。最後の機能を使うと、記述順とは逆方向にボックスを並べる事もできます。このへんFlexboxっぽい機能だなーと思いました。

[CSS] Bulma: a modern CSS framework based on Flexbox – FlexboxベースのCSSフレームワーク

  • Pocket
  • このエントリーをはてなブックマークに追加

FlexboxベースのCSSフレームワークだそうです。CSSフレームワークってだいたいFloat使ったグリッドレイアウトのものが多いけど、最近じゃレイアウト組む手法も徐々にFlexboxになりつつあるので、慣れた人には便利そうです。実際Flexboxでレイアウト組むの楽ですからね。レスポンシブレイアウトや、フルスクリーン、垂直軸のセンタリング、ボタンやフォームパーツなども揃っているようです。

[Web Design] Material Design for Bootstrap – Bootstrap用のMaterial Designテーマ

  • Pocket
  • このエントリーをはてなブックマークに追加

BootstrapベースのMaterial Designテーマ。製作者が言うには「GoogleはMaterial DesignでWebを美しくして、TwitterはBootstarpでレスポンシブかつエフェクティブに開発できるようにした。なのでこの2つを一緒にした」的な事を謳ってます。実際テンプレートページ(いくつか有料のものもあります)をいくつか見たけどスゴくよく出来てると思います。なんかのLP作る時なんかにちょうどイイテンプレートがチラホラありました。個人的にはMaterial Designにはあまり馴染みがないけど、これはなかなかナイスです。

[CSS3] AniCollection – CSSを使ったアニメーションのコードスニペット紹介サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS3を使った様々なアニメーションのコードスニペットを紹介するサイト。サイト内の角丸四角にマウスオーバーするとアニメーションをプレビューでき、目玉のアイコンをクリックでコードを見る事ができます。また「+」マークを使って複数のアニメーションを選択する事で、アニメーションのコードをまとめて生成する事もできます。アニメーション関連のCSSフレームワークとしても使えますね。

[Web Design] 50 CSS and JavaScript Tools, Frameworks and Libraries from 2015 – CSS, JSに関するツールやフレームワークをまとめた記事

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSやJSに関するツールやフレームワーク、ライブラリなどを50個まとめた記事。2015年の、とあるので、比較的最近のものばかりが集められているようです。記事内でカテゴリ分けされていて、上からCSSツール、レスポンシブレイアウトのためのWebフレームワーク、マテリアルデザインのフレームワーク、ちょっとしたCSSツール、JSライブラリ・フレームワーク、Webアプリとなっています。こういう記事って、ダラダラ見てるだけでも新しい発見があったりしますね。

[Web Design] wwwhere – Web制作に必要な各種リソースをまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Web制作に必要な様々なリソースをまとめたサイト。あらゆるカテゴリの情報リソースやツール類がまとめられてます。各情報はカテゴリに分けて整理されており、例えば「Coding」→「Code Editor」と進めば、Webコーディングにおけるツール類(この場合は主にローカルアプリケーション)をまとめて見る事ができます。あとはその中から自分に必要なツールを選ぶだけ。Webの制作って以前に比べるとこうした既存のツールを組み合わせて使う機会がグっと増えたので、日常的に使うツールがまだ固まってない人なんかにはこういうサイトは便利かもしれません。新しいツールの発掘にもイイですね。