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

デザイン - CSSの記事一覧

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

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

もっと見る

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です。#...

List

  • 2014/11/07

cssplot – CSSだけで作られているシンプルなグラフ

グラフライブラリというと、かつてはFlashを使ったり今はSVG/Canvasを使って描画するものが多いです。格好良いグラフが描けるのは確かですが、利用までの敷居が若干高いのが難点と言えるでしょう。そこで紹介したいのがcssplot、スタイルシートだけで作られたグラフライブラリです。これならば導入が簡単になりそうです。...

Missing

  • 2014/09/28

windows_98.css – 昔懐かしい。Windows 98風スタイルシート

みんな大好きWindows。その大きな転換になったのはWindows 95やWindows 98だったんじゃないかと思います。徹夜して並んで大騒ぎしたなんて懐かしい記憶がある方もいるのではないでしょうか。そんな懐かしいWindows 98を思い出させてくれるスタイルシートがwindows_98.cssです。使い道はあれ...

List

  • 2014/08/22

Styledown – Markdownを使ったスタイルガイド

最近はCSSでスタイルガイドを作成するケースが増えています。プログラムがAPIドキュメントを書くのと同様、デザインについても適切な文書があることで多人数での効率的な作業が行えるようになるというものでしょう。スタイルガイドを書く方法は幾つかありますが、今回はStyledownを紹介します。書き慣れた人も多いであろう、Ma...

List

  • 2014/06/14

altclass - 幅によってクラスを変更するJavaScriptライブラリ

レスポンシブWebデザインの面倒なところは同じような設定が散見されることではないでしょうか。上の方で幅の定義があるものの、実際のクラス定義はどの幅に対するものなのか分かりづらいことがあります。そこで使ってみたいのがaltclassです。JavaScriptを使いますが、幅によってクラスを付け替えてくれる便利なライブラリ...

List

  • 2014/05/29

Stylr - Webブラウザ上でビジュアルスタイルシート設定

手打ちでスタイルシートの設定を行っているデザイナーの方はどういったやり方でスタイルを決めていくでしょうか。数値を変更してブラウザを再読み込みして、再度変更して再読み込みして…を繰り返したりするのはとても面倒です。そこで紹介したいのがStylrです。スタイル設定をビジュアル的に、その場で反映しつつ確認できるソフトウェアで...

List

  • 2014/05/26

EmberUI - Ember.jsを使ったWebアプリケーション用UIコンポーネント集

あなたがWebアプリケーションを開発する際に使っているJavaScriptフレームワークは何でしょう。小さなものであればjQueryが良いかも知れません。が、より大きくコード量が増えていくともっと大型なフレームワークを必要とするはずです。Ember.jsはその有力な選択肢の一つです。そしてそこにEmberUIを組み合わ...

List

  • 2014/05/14

Wholly – 表形式のデータ選択を便利に

これは業務システムに良さそうです!テーブルのセルを選択したとき、それがどの行のどの列のセルなのか分からなくなったりした経験はないでしょうか。Excelなどのように行、列のヘッダーが固定できれば良いのですがWebではそう簡単ではありません。そこで使ってみたいのがWhollyです。選択したセルと同列をハイライト表示すること...

List

  • 2014/05/11

jagrid - Excel方眼紙をWeb上に再現!

これは凄いかも知れない…。最近のCSSフレームワークは幅を12分割した上でデスクトップ、タブレット、スマートフォンに適応させるスタイルになっています。しかしこれでは緻密な画面設計を求められる日本の業務システムにはマッチしません。日本の業務システムと言えばExcel方眼紙がデフォルトです(断定)。そのUIに慣れ親しんだ人...

List

  • 2014/05/08

iHover - 多彩なマウスオーバーアクションが格好いいスタイルシートライブラリ

最近はフラットUIの流行もあって説明をなるべく少なめに、アイコンでどういった機能かを表すことが増えてきています。しかしアイコンが分かりづらかったり抽象化され過ぎていると一見して機能が分かりづらくなります。そこでマウスオーバーによる説明表示がおすすめです。スマートフォンやタブレットでは使えませんが、デスクトップであればマ...

List

  • 2014/05/05

Pure CSS Components - CSSだけで作られた各種コンポーネント

Webアプリケーションでは表現力をあげるために各種コンポーネントが作られていますが、通常その手のライブラリはJavaScriptとスタイルシートの組み合わせによって実現しています。そうなるとJavaScriptの互換性やそもそも有効にしていない場合に使えません。そこで考えだされたのがPure CSS Component...

List

  • 2014/03/29

css2sass – CSSをSass/Scssに一発変換!

今までの書き方からどう変わるのか見てみましょう。HTML/JavaScriptそしてスタイルシートはここ数年で代替記法がたくさん登場しています。個人的にはHamlやJadeはきついなぁと思ってしまうのですが、CoffeeScriptのようにコーディングがとても楽になる言語もあります。スタイルシートにおいてはSassおよ...

List

  • 2014/03/25

Fluidity – たった115 bytesでHTMLのレスポンシブ対応率を高める

レスポンシブWebデザインを考え始めるとメディアクエリーや細かな表示の制御など考えるべきところがたくさんあって、厄介な印象が強くなる訳ですが、もっとシンプルに考えて良いんじゃないと訴えかけてくるのがFluidityになります。HTMLは元々素の状態でも“ほぼ”100%レスポンシブであると言います。そしてそのほぼから外れ...