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

デザイン - CSSの記事一覧

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

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

もっと見る

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%レスポンシブであると言います。そしてそのほぼから外れ...

List

  • 2014/03/13

UnCSS – 使っていないスタイル設定を探してスタイルシートをリファクタリングしよう!

プログラマーにとって過去のコードに手を加えていくことで負の資産を生み出すように、デザイナーにとってもスタイルシートの度重なる修正は負の資産を生み出していきます。その結果、全体のバランスが崩れたり、リファクタリングもできずに破綻したりします。スタイルシートの場合、プログラミングのようにUnit Testを書いてリファクタ...

List

  • 2014/03/13

SocialRail - 縦型ソーシャルボタンを簡単に設置

あらこれシンプルで素敵。筆者が好きなMashableやDigg Digg for Wordpress

List

  • 2014/03/13

Stylestats - Webデザイナー向け。スタイルシートを解析!

複雑になる前に使いたいですね…日々運用が続いた結果、スタイルシートの中が荒れてしまい、もはやメンテナンスが大変と言った声は良く聞きます。ゼロベースで作っても良いかも知れませんが、まずは現状を適切に把握すべきでしょう。どういった設定があって、どういった色設定があるのか…それらを知ることで改善するアイディアも湧くかも知れま...

List

  • 2014/03/09

PACE - pjax用のローディング表示ライブラリ

最近流行っているpjax。コツはいりますが画面遷移がなくなること、同じレンダリングを行わないことで表示速度が速くなると言ったメリットがあります。Ajaxも画面の一部を書き換えたりするので同じようなメリットがあります。そんなAjax/pjaxを使った場合、ページ読み込み中のローディング表示は欠かせません。そのためのライブ...

List

  • 2014/03/04

CSS Shake – CSS3で実現するシェイクアニメーション

CSS3を使えばアニメーションも実現できますが、敷居はまだ高いように思います。せっかくの機能が使われないのは非常に勿体ない訳で、一つのライブラリとして提供されれば使いやすくなるのではないでしょうか。ということで今回はCSS Shakeを紹介します。CSS3を使ってシェイクジェスチャーを実現するアニメーションライブラリで...

List

  • 2014/01/30

2006〜09年、各年の人気オープンソース・ソフトウェアベスト5

# 2006年の人気オープンソース・ソフトウェア、ベスト5!MOONGIFTの前身、Open Alexandriaとして運営されていた期間は年ごとのフィルタリングができず取得できませんでした…。運営していた期間全体での人気だったソフトウェアはこちらです。古いソフトウェアになると紆余曲折あってプロジェクトがなくなったり、...

List

  • 2014/01/15

SpritePad - ファイルをどんどん追加してスプライト画像を作成

CSSでスプライト画像を使うことは増えてきましたが、作成が面倒なのは変わっていません。専用のソフトウェアも幾つかありますが今回はWebブラウザ上でスプライト画像を作成できるSpritePadを紹介します。# 使い方使い方は簡単で、まずはアイコン画像をSpritePadにドロップしていきます。!複数ファイルをまとめてドロ...

List

  • 2013/12/18

Myth - 学習コストの低そうなスタイルシート代替記法

コンパイルしてJavaScriptに変換する系統の言語としてはDartやCoffeeScriptなどが知られています。同様にスタイルシートについてもSassやScss、LESSといった代替記法が存在します。今回紹介するMythもその一つで、スタイルシートの代替記法なのですが、多数の機能がある訳ではなく最も必要とされるで...

List

  • 2013/11/21

Prefectly - 使おう!WebFontとCSSを使った日本地図

誰かが作ってくれると思っていた!Stately

List

  • 2013/11/13

Kalei - コンパイルレス!JavaScriptで自動生成されるスタイルガイド

うん、コンパイルレスは確かに手軽ですね。プログラマーが複数人での開発に際してAPIドキュメントを必要とするのと同様にWebデザイナーであればスタイルガイドが必要になるでしょう。そうしないと意図した使われ方をしなかったり、変更が及ぼす影響範囲が分からなくなります。CSSのスタイルガイドを生成するソフトウェアは幾つかありま...

List

  • 2013/09/11

Google ChromeのDeveloper toolsの可読性を向上「Readable-ChromeDevThemes」

Readable-ChromeDevThemesはGoogle Chrome用、スタイルシート製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。IDEやプログラミング用エディタにおいて言語ごとのハイライト処理は必須でしょう。それによってコードの可読性が上がれば、バグの発生を抑えたり...

List

  • 2013/09/04

既存のHTMLからID/クラスを抜き出してCSSを生成「extractCSS」

extractCSSはJavaScript製のオープンソース・ソフトウェア(MIT License)です。スタイルシートの記述法は幾つかあります。linkタグで外部ファイル化、styleタグでインラインに表示、そしてstyle要素でタグごとに指定する方法です。styleタグに書き込まれてしまったスタイル設定を一気に書き...

List

  • 2013/07/07

CSS3によるパノラマ3Dイフェクト「CSS3-panorama」

CSS3-panoramaはスタイルシート製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。CSS3ではスタイルシートだけでアニメーションが実現できる機能があります。それを使って作られたサンプルソフトウェアがCSS3-panoramaです。見ているだけで非常に面白いイフェクトになっ...