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

デザイン - CSSの記事一覧

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

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

もっと見る

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でスタイ...

List

  • 2016/03/01

Clairvoyance - CSSカバレッジツール

Webサイトの運営を続けていると、徐々にスタイルシートが汚くなっていきます。使われているか使われていないかの判断がしづらいので、消せずに追加するのみだからです。プログラミング言語であればコードカバレッジによってコードの利用状況が確認できます。そこで同じような仕組みであるClairvoyanceを使ってみましょう。## ...

List

  • 2015/10/03

Gapless 5 - JavaScript/CSS製のギャップレスプレーヤー

音楽には間が大事な要素になると思いますが、コンサートや連続した曲が続く場合、間が邪魔に感じることがあります。そんな時のためにギャップレス再生と呼ばれる技術があります。Webにおいても音楽コンテンツが増えていますので、Gapless 5のようなギャップレスプレーヤーはニーズがありそうです。## Gapless 5の使い方...

List

  • 2015/09/20

Office UI Fabric - Office 365で使われているフロントエンドフレームワーク

実際のプロダクトで使われているソフトウェアは実践でもまれている分、より細かなニーズに応えられるようになっています。理想的な形ではなく、より実践的な視点で構築されているものでしょう。今回紹介するOffice UI FabricはMicrosoftの提供するOffice 365で使われているフロントエンドフレームワークにな...

List

  • 2015/09/11

StyleStats - スタイルシートの状態をチェック

プログラミングの場においてはカバレッジであったり、メソッド単位の行数であったり、日ごとにおけるコード量の増加など可視化が進んでいます。見える化によって様々な情報が得られるようになり、改善ができるようになります。スタイルシートにおいてもそれは同様です。可視化によって様々な情報が得られます。それを実現するのがStyleSt...

List

  • 2015/08/27

Toggle css bookmarklet – スタイルシートがない状態を確認できるブックマークレット

SEOはまず文書構造を考える必要があります。スタイルシートで表示はカスタマイズできますが、それはクローラーには理解できませんし、スクリーンリーダーのようなアクセシビリティを考える際にも文書構造はとても大事です。そこでWebサイトがスタイルシートを解除するとどう見えるのか、それを体験できるのがToggle css boo...

None

  • 2015/06/27

purifycss - SPA向けの不要なスタイルシートチェッカー

スタイルシートを長期間、整合性をとりつつメンテナンスし続けるというのは至難の業です。迷ったら新しく追加してしまえば良いのですが、設定を消すという選択はとても難しいでしょう。そこで使ってみたいのがpurifycss

List

  • 2014/12/02

CSS Dig - CSSのスタイル設定を手軽に確認

Webサイトを制作する上で、他のサイトから学べる点はとても多いと思います。しかし最近ではスタイルシートも細かく分けて設計されていたり、フレームワークを使っていて個別の要素の設定が分かりづらいことがあります。DevToolsを使うのもいいですが、スタイルシートごとに分かれているので見づらいという方もいるでしょう。そこで使...

List

  • 2014/11/21

CSSViewer – 任意のWebサイトで要素のスタイル設定を確認

Webデザイナーの方で、今表示されているページのスタイルシート設定を確認したいと思ったことはないでしょうか。DevToolsなりを使って確認できますが、スタイルシートごとに分かれていたりしてちょっと分かりづらいです。実際にどのスタイル設定が適用されているか確認したい、そんな目的にぴったりなのがCSSViewerです。#...