ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザイン - CSSの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2018/04/15

blend.js - 二つの画像を重ね合わせるJavaScriptライブラリ

一つ一つの素材は単純でも、素材同士を合成することで新しい素材を生み出すことができます。最近ではAIによって、風景写真を別な風合いに変えたりするものもあります。従来、人手でやっていたような作業がすべて自動でできるようになっています。今回紹介するblend.jsはAIほど高度な訳ではありませんが、二つの画像をWeb上でミッ...

List

  • 2018/04/13

CSS ICON - ピュアなCSSだけで作られたアイコンセット

アイコンセットはいくらあっても便利です。昔は小さな画像の集まり、その後はCSSスプライト、そして最近ではアイコンフォントを使うパターンが多くなっています。アイコンフォントは便利ですが、読み込みに失敗するとトウフだらけになってしまうのが難点です。そこで使ってみたいのがCSS ICONです。ピュアなCSSだけで作られたアイ...

List

  • 2018/03/26

Shards - Bootstrap4に対応したデザインテーマ

Bootstrapは有名なUIデザインフレームワークですが、先日バージョン4が正式にリリースされました。その結果、これまで使われてきた多くのテーマが使えなくなっています。3を使い続けても良いですが、徐々に情報は増えていくのでバージョン4を追いかける方が良いでしょう。ということでテーマも新しいものに乗り換える必要がありま...

List

  • 2018/02/22

Image Glitch Effect - ホラー映画風のグリッチ効果を演出

ホラー映画などで、映像に突然ノイズが入って乱れるという効果がありますが見たことはあるでしょうか。映像の不安定さによって感情も不安になり、何か起こるのではないかと心配になってしまいます。そんなグリッチ効果をスタイルシートだけで実現できるのがImage Glitch Effectです。## Image Glitch Eff...

List

  • 2018/02/15

Arakawa Template - シンプルで実用性の高いWebテンプレート

Webデザインは多彩ですが、多くの機能は他のWebデザインでも使われているものです。例えばレスポンシブWebデザインへの適用は大抵のWebサイトで実現されており、イチから作る必要はないでしょう。WebデザインもDRYの考えが大事です。そこで使ってみたいのがArakawa Templateです。汎用的なWebサイトテンプ...

List

  • 2018/02/05

CrookedStyleSheets - CSSだけでユーザ行動をトラッキング

ユーザがどういった操作を行ったのか、それを知りたいと考える人は大勢います。Webの場合、JavaScriptを使うことで各イベントのトラッキングができます。しかしプライバシーを気にする方はJavaScriptをオフにすることでそれを防げます。そんな中にあってもトラッキングできる技術がCrookedStyleSheets...

List

  • 2017/12/24

emoji-awesome - 絵文字版Font Awesome

Font Awesomeを使うと手軽にアイコンを差し込めるとあって利用者はとても多いです。最近よくある単色系のモダンなWebページを作ろうと思ったらとりあえず入れておくという方も多いのではないでしょうか。そんなFont Awesomeの絵文字版を目指すのがemoji-awesomeです。JavaScriptは使わず、ク...

List

  • 2017/10/07

Slide Presentation Framework - HTMLスライドのフレームワーク

HTMLでプレゼンテーションを作るケースが増えています。HTMLであれば専用のソフトウェアを使わずに済み、バージョン管理も簡単です。さらにアニメーションなどは難しい分、逆にコンテンツに集中できるのが利点です。最近ではMarkdownベースのものが増えていますが、今回紹介するSlide Presentation Fram...

List

  • 2017/08/25

Slack Black Theme - Slackアプリを黒ベースのデザインに

コミュニケーションツールは一日に目にする機会の多いサービスと言えます。それだけに目を刺激しない、低刺激なデザインやカラーリングになっていると嬉しいでしょう。現在最も使われているであろうSlackについてはどうでしょう。プログラミングエディタは黒ベースなのに、Slackが白ベースだと目が痛くなってきます。そこで使ってみた...

List

  • 2017/08/22

o-grid - グリッドだけ提供するCSSライブラリ

最近のレスポンシブWebデザインを支えるのはグリッドデザインです。画面幅を幾つかに分割し(大抵12個が多いですが)、画面幅によってその内幾つのブロックを横に並べて表示するかを決定します。多彩なUIフレームワークと共に提供されることが多いですが、今回はごく基本的なグリッド機能だけ提供するo-gridを紹介します。## o...

List

  • 2017/06/04

Mavo - Webアプリケーションを作る新しいアプローチ

最近、ReactやVueなどのビューエンジンに人気が集まっています。双方向更新が可能で、データをアップデートすれば自動的にUI側も更新されます。これにより、DOM周りのステータス管理から解放されるようになります。今回紹介するMavoもビューエンジンですが、半分ロジックも加わったような作りになっています。## Mavoの...

List

  • 2017/05/03

mini.css - 小さくても多彩なUIを提供するスタイルシートフレームワーク

CSSフレームワークはたくさん存在します。それぞれにコンセプトがあり、使いやすいものを選択するでしょう。特にUIパターンが多いものはデザイン的に統一感が出やすく、場当たり的に素材を探さずに済むので重宝します。今回はそんな多数のUIを揃えたCSSフレームワーク、mini.cssを紹介します。## mini.cssの使い方...

List

  • 2017/01/24

ColorMe - Webブラウザ上で色の調整

色を生み出すというのは大変なことです。ぴたりと当てはまる色がすぐにできあがれば良いですが、そうそう簡単にできるものではありません。だいたいの色を決め、そこから徐々に絞り込んでいくのが良いのではないでしょうか。そんな色の作成作業をサポートしてくれるのがColorMeです。様々な要素を使ってベースになる色を変化させられます...

List

  • 2016/09/28

Mobi.css - モバイルファーストなCSSフレームワーク

最近ではモバイルファーストというのも当たり前になっています。まずタブレットやスマートフォン向けに最適化されていれば、デスクトップ向けに考える時にも情報が整理された状態から考えられます。逆からは情報を削除する必要があり、ストレスです。今回紹介するMobi.cssはまさにモバイル用のCSSフレームワークとなっています。##...

List

  • 2016/08/26

GitHub Dark - GitHubのデザインを黒ベースに

明るい画面を見続けていると目が疲れてしまいます。そこでプログラマなどはコード編集画面を暗くし、長時間画面を見ていても疲労しないようにしています。それは何もコードを書くときだけに限りません。WebブラウザでGitHubのページを見る機会が多い人はGitHub Darkを使ってみると良いでしょう。## GitHub Dar...

List

  • 2016/08/07

Cutestrap - 8KBの軽量CSSフレームワーク

BootstrapやFoundationといったCSSフレームワークはフル機能が実装されており、便利な反面、融通が効きづらかったり、サイズが大きかったりします。かといってごくシンプルなものを使ってほぼ自作というのも面倒です。そこで使ってみたいのがCutestrapです。定義としてはnormalize.cssとBoots...

List

  • 2016/07/15

awsm.css - 標準タグのみを使った綺麗なデザインフレームワーク

HTMLタグにはそれぞれに意味があります。その意味を活かしたデザインを行うことで、SEOのようにコンピュータはもちろんスクリーンリーダーなどでも使いやすいコンテンツに仕上がります。しかし多くの場合、デザイン上の理由で全く関係のないタグが使われることがあります。そこで使ってみたいのがawsm.cssです。## awsm....

List

  • 2016/06/20

RichCSS - 再利用性の高いスタイルシートを作成

CSSはなんとなく書いてもそれなりに表示できてしまうため、適切に運用し続けるのが難しい技術です。企業によって様々なルールがあり、正解もなかなか見つかりません。むしろ一定の法則に載ってしまう方が楽と言えます。今回紹介するRichCSSもそんなスタイルシートフレームワークの一つになります。デザインフレームワークではないので...

None

  • 2016/04/17

native-css - スタイルシートをReact用オブジェクトに変換

Reactではスタイルシートをファイルのまま使うよりも、JavaScriptからスタイル要素に直接指定する方法が好まれます。ただ、その際に問題になるのは通常のスタイルシートと書き方が全く異なるということでしょう。数年前まではデザイナーとエンジニアの作業分担が言われていたのですが、Reactではうまくいきません。そこで代...

List

  • 2016/04/01

Descartes - JavaScriptでスタイルシートを記述

スタイルシートはクラスやIDの仕方が多彩であるため、デザイナーによって記述が大きく異なります。その結果、更新を重ねるたびに複雑で分かりづらいものになっていきます。そんな煩雑化を防ぐためにSassやLessを使ってプログラマブルに管理するのが一般的になっています。今回はさらにプログラマブルに、JavaScriptでスタイ...