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

デザイン - CSSの記事一覧

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

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

もっと見る

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は軽量なグリッドレイアウトを提供します。デスクトッ...

List

  • 2013/05/03

スタイルシートをドキュメント化する際にぜひ!「StyleDocco」

StyleDoccoはスタイルシート中に書いた設定をドキュメント化するソフトウェアです。Webデザインにおいてスタイルシートは欠かせません。Webサイトのスタイルシート設定をドキュメントにしたい時に使いたいのがStyleDoccoです。インストールします。デモです。右側にスタイルシート、左側にその説明が表示されています...

List

  • 2013/04/30

ボックスへの影付きスタイルシート設定をパラメータ指定で簡単に「CSS3 Drop Shadows Generator」

CSS3 Drop Shadows GeneratorはCSS3を使ったボックスに対する影付け処理をビジュアル的に行えるサービスです。CSS3を使えばテキストやボックスに対して影を付けるのが簡単です。とは言え細かくカスタマイズされた影をつけるのは非常に手間ひまがかかるでしょう。そこで使ってみたいのがビジュアル的に設定が...

List

  • 2013/04/20

Webブラウザ上でテキストスタイルをダイナミックに編集「Code Cola」

Code ColaはGoogle Chrome機能拡張として動作するスタイルシート設定ツールです。Webインスペクタを使うとWebページを表示したままスタイルシートの編集ができます。ただ、数字やテキストを入力する形なので、思った通りの編集が難しいかも知れません。そこで試したいのがCode Cola、Google Chr...

List

  • 2013/04/20

見通しの良いスタイルシートを維持するために重複した定義を見つけよう「csscss」

csscssはスタイルシート上の重複定義をチェックするソフトウェアです。スタイルシートの便利なところは多少間違っていたとしてもWebブラウザ側が良いように解釈してくれて描画してくれることです。そのため、更新を繰り返すと徐々に不要な定義ができたり、重複したりして思わぬミスにつながったりします。それを防ぐのに使えそうなのが...

List

  • 2013/04/08

あなたのデザインの自由度を邪魔しない、軽量なグリッドデザインフレームワーク「PocketGrid」

PocketGridは0.5KBの小さなCSSフレームワークです。レスポンシブWebデザインのベースにどうぞ。Bootstrapをはじめ多様なデザインフレームワークが出回っていますが、デザインの可能範囲が狭まってしまうのを嫌がる声もあります。そこでほんの基礎部分だけを提供してくれるグリッドデザインテンプレート、Pock...

List

  • 2013/04/07

レスポンシブなフラットUIなWebデザインをご希望なら「Almost Flat UI」

Almost Flat UIはFoundation Framework用のフラットUIテーマです。最近のWebデザインの人気のカテゴリの一つがフラットUIです。日本ではまだまだ導入事例は多くないですが、海外のWebサイトでは取り入れているところが増えています。そこでFoundation Frameworkをベースにデザ...

List

  • 2013/04/03

これは凄い!iOS6用のスタイルシートベースの画像編集ソフトウェア「CSS PhotoEditor」

CSS PhotoEditorはiOS6のMobile Safari上で使えるスタイルシートによる画像編集ソフトウェアです。Webアプリケーションの機能が増すにつれて、徐々にネイティブアプリでしかできないと思われたことがWebブラウザで実現するようになっています。今回はCSSを使った写真編集アプリケーションCSS Ph...

List

  • 2013/04/01

バカが見る、Webブラウザ♪「aprilFools.css」

aprilFools.cssはエイプリルフール用に設定したいカスタムスタイルシートです。エイプリルフールにはぜひ友人や同僚を驚かせたいと思っている人も多いはず。そこで使ってみたいブラウザ用のカスタムスタイルシートがaprilFools.cssです。例えば真反対に。画像だけを反対にもできます。aprilFools.css...

List

  • 2013/03/31

CSSだけでトグルスイッチを実現するUI「CSS Toggle Switches with Bootstrap」

CSS Toggle Switches with BootstrapはCSSのみでトグルスイッチを実現するBootstrap用ライブラリです。JavaScriptを使えば簡単にできることをCSSだけでどう実現するか、そんな取り組みはとても面白いです。今回はCSSだけで実装されたトグルスイッチUIのCSS Toggle ...

List

  • 2013/03/28

メールのためのレスポンシブWebデザインフレームワーク「Antwort」

AntwortはレスポンシブなHTMLメールを実現するスタイルシートフレームワークです。HTMLはWebブラウザを使って閲覧するのに用いるのが基本ですが、他にも使われることがあります。その一つがHTMLメールです。独自の知識が必要になることもあるのですが、Antwortを使えばそのエッセンスだけすぐに得ることができます...

List

  • 2013/03/24

ソートやフィルタにも対応したレスポンシブなテーブル「FooTable」

FooTableはレスポンシブなテーブルデザインを行うライブラリです。レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。PCで表示したテ...