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

デザイン - CSSの記事一覧

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

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

もっと見る

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で表示したテ...

List

  • 2013/03/22

Windows8アプリを開発する際に使える?BootstrapをWindows8 Style UIに「metro-bootstrap」

metro-bootstrapはBoostrapをWindows8 Style UIに変更するデザインテーマです。正直言ってWindows8はインストール以来全然使っていない筆者ですが、Windows8 Style UI(旧Metro UI)は好きです。あのすっきりとしたデザインはタブレットやWebでこそ活きるのではな...

List

  • 2013/03/22

幅を狭くしてもグリッドを極力活かすデザインフレームワーク「Responsable Grid System」

Responsable Grid SystemはレスポンシブWebデザインに対応したグリッドデザインフレームワークです。レスポンシブなデザインフレームワークでは幅を縮めるとグリッドの数が一気に減るのが多いようです。しかしResponsable Grid Systemを使えばPCレベルのデザインを極力活かしたグリッドデザ...

List

  • 2013/03/04

Google Chromeのデベロッパーツールをもっと見やすく使いやすく「mnml Theme」

mnml ThemeはGoogle Chromeのデベロッパーツール用のカスタムCSSです。Google ChromeでのWebサービス開発においてデベロッパーツールがなければもはや開発が成り立ちません。そんなデベロッパーツールをより見やすく使い勝手よくしてくれるのがmnml Themeです。こんな感じの黒を基調とした...

List

  • 2013/02/26

無茶しやがる…。スタイルシートだけでHTMLをMarkdownに「Markdown.css」

Markdown.cssはスタイルシートを使ってHTMLをMarkdownフォーマットとして表示するソフトウェアです。既存のHTMLをMarkdownで書くとどうなるか、変換ツールも幾つかありますが今回は変わり種のMarkdown.cssを紹介します。純粋なHTMLソースコード。一般的なスタイルシートを当てた例。Mar...

List

  • 2013/02/19

コンパイルしてスタイルシートを生成する高機能代替言語「Roole」

Rooleはコンパイルしてスタイルシートに変換する独自のマークアップ言語です。スタイルシートについてScssやSass、Lessなど様々な代替マークアップが開発されています。今回もその一つ、Rooleを紹介します。例。波括弧は不要です。変数が使えます。条件分岐できます。繰り返しできます。mixi-inです。メディアごと...

List

  • 2013/02/02

Windows8 Style UIに似た見やすいパネル型天気予想「Expanding Overlay Effect」

Expanding Overlay EffectはWindows8 Style UIを模した天気表示ソフトウェアです。ここ最近Metro UI(現Windows8 Style UI)を模したWebサービスを目にすることが増えてきました。Windows8のシェアが増えればさらに多くなるかもしれません。今回はWindows...

List

  • 2012/12/19

SQLのEXPLAINをCSSにも。スタイルシートデザインのお供に「CSS Explain」

CSS Explainはセレクターを入力すると、その解析結果を表示してくれるライブラリです。CSSはWebデザインと構造とを切り離すために使われていますが、JavaScriptから指定することも多くある意味でプログラマブルな存在です。そんなスタイル設定をSQLのExplainライクに解析するのがCSS Explainで...

List

  • 2012/12/18

Apacheのファイル一覧を一変させるテーマ「Apaxy」

ApaxyはApacheのmod_autoindex用のデザインテーマです。Apacheでmod_autoindexを使うと自動でディレクトリ内のファイル一覧が作成されます。それをカスタマイズし、格好いい表示にしてくれるのがApaxyです。かつてここまで格好いいファイル一覧を見たことがあっただろうか…。もちろんディレク...

List

  • 2012/12/10

CSS3アニメーションをWebブラウザ上で作成&実行「Stylie」

StylieはCSS3のキーフレームベースのアニメーションをグラフィカルに設定できるソフトウェアです。CSSでアニメーションを実行できるのは知られていますが、その実装となるとかなり面倒な雰囲気があります。しかしStylieを使えばグラフィカルに簡単に設定が可能です。デフォルトの表示です。左から右へボールが流れていきます...