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

デザイン - CSSの記事一覧

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

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

もっと見る

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です。見ているだけで非常に面白いイフェクトになっ...

List

  • 2013/06/28

BootsrapをGoogle+風に「Bootplus」

BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア(Apache License 2.0)です。最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使っ...

List

  • 2013/06/24

Bootstrapで物足りなく感じているウィジェットをまとめて提供「Fuel UX」

Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア(MIT License)です。Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまい...

List

  • 2013/06/23

ダイナミックなアニメーションを実現する「Anima」

AnimaはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。CSS3になって、スタイルシートを駆使すれば華麗なアニメーションが実現できるようになってきました。しかしそこには限界もあります。そこでより本格的なアニメーションを作り上げたいと考える方はAnimaをベースにしてみる...

List

  • 2013/06/22

二重送信の防止に。ボタンにローディングアイコンを追加「Ladda」

LaddaはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。フォームで最後に必ずあるのが送信ボタンです。最近ではAjaxを使っている場合も多く、送信した直後に何らかの反応をしないと二重送信やストレスの原因になってしまいます。そこで使ってみたいのがLaddaです。色々なタイプ...

List

  • 2013/06/13

SVGをCSSを使ってHTMLで表現「svg2css」

svg2cssはPython製のオープンソース・ソフトウェア(MIT License)です。SVGのベクター画像はもっと使われるべきだと思うのですが、レガシーなブラウザでは表示ができないのが躊躇させてしまう要因です。そこで試してみたいのがSVGをCSSで表現してしまうsvg2cssです。使い方は簡単で、ターミナルでSV...

List

  • 2013/06/10

多様な記法からHTML/JavaScript/CSSを生成「Prepros」

PreprosはWindows用のオープンソース・ソフトウェア(MIT License)です。今はHTMLやJavaScript、スタイルシートを素のまま書くのではなく、別な記法を使ってそれぞれファイルを生成するタイプが人気です。しかし更新するたびに生成し直すのは非常に手間です。そこで使ってみたいのがPreprosです...

List

  • 2013/06/08

Yahoo製、軽量なレスポンシブWebデザインフレームワーク「Pure」

Pureはスタイルシート製、BSD Licenseのオープンソース・ソフトウェアです。Webサービスのデザインテンプレートとして一躍有名になっているBootstrap。そのライバルとも言える存在、Pureが登場しました。開発元はあの米Yahooです。様々なテンプレートが登録されています。こちらはフォーム。ボタン。フラッ...

List

  • 2013/05/28

画像の好きな場所にキャプションを表示「Label.css」

Label.cssはスタイルシート製のオープンソース・ソフトウェア(MIT License)です。画像をぽんと貼っただけでは分からないこともちょっとしたキャプションで説明してあげるとぐっと分かりやすくなります。そんな処理を手軽に実現してくれるのがLabel.cssです。例えばこれは左指定した場合。文字は左寄せです。こち...

List

  • 2013/05/26

レスポンシブなグリッドだけを提供する軽量スタイルシート「fitgrid」

fitgridは本番環境下でも耐えられる軽量なレスポンシブグリッドなスタイルシートです。レスポンシブなWebデザインを実現するのは大変ですが、Bootstrapを使うとそれっぽさが残ってしまう…。そんなジレンマを感じている方はfitgridを試しましょう。fitgridは軽量なグリッドレイアウトを提供します。デスクトッ...