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

デザイン - CSSの記事一覧

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

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

もっと見る

31534?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2ffa08ef58976a425764bae44e5db2d778

  • 2011/11/12

Webデザイナーにお勧め!LESSファイルを監視してCSSに自動変換「SimpLESS」

SimpLESSはLESSファイルのあるフォルダを監視して作成や更新のタイミングでCSSファイルに変換してくれるソフトウェアです。CSSで不満に感じられることの多い、入れ子の構造や変数定義などを可能にするCSSライブラリがLESSです。そんなLESSファイルの作成、更新を監視してCSSファイルを自動生成してくれるソフト...

31294?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f10%2fscreenshot2011-10-28-10.55.30_thumb

  • 2011/11/07

Webデザイナーにオススメ!SCSS/Sassで記述してリアルタイムに変換、デザインを確認「Compass」

独自の記法でCSSを記述するフレームワークがいくつか出てきました。しかし実際に利用する際にはCSSに変換する必要があります。記述して変換、では手間に感じて利用したくないでしょう。そこでCompassを使って自動変換してくれる環境を構築しましょう。実行しているところです。メニューバーに常駐します。設定です。SCSSまたは...

31255?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f10%2fscreenshot2011-10-28-9.50.08_thumb

  • 2011/11/06

CoffeeScriptがWebの世界を制する?HTML/CSS/JavaScript生成「coffee-world」

coffee-worldはディレクトリを監視してCoffeeScriptからHTML/CSS/JavaScriptを生成するソフトウェアです。最近、JavaScriptを素のままで書くことが減ってきています。CoffeeScriptから変換した方がコーディング量も少なく、かつ可読性の高いコードが書けるようになってきまし...

29530?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-12-9.49.06_thumb

  • 2011/09/22

NetBeans上でSCSSを使いやすく「SCSS Editor」

SCSS EditorはNetBeansにSCSS対応のハイライト、CSS自動生成機能を追加するプラグイン。SCSS EditorはNetBeans用のオープンソース・ソフトウェア。最近JavaScript界隈で人気が集まっているのがCoffeeScriptだ。Railsでは3.1から正式採用されると言われており、Ti...

List

  • 2011/09/14

WindowsでWeb開発を行っているプログラマ、デザイナに。JavaScript/CSS短縮、難読化ライブラリ「Microsoft Ajax Minifier」

Microsoft Ajax MinifierはJavaScript/CSSを短縮化/難読化するWindows用のソフトウェア。Microsoft Ajax MinifierはWindows用のオープンソース・ソフトウェア。Webアプリケーションはもちろん、WebサービスであってもJavaScriptを多用することが当...

29004?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-22-10.00.35_thumb

  • 2011/09/01

これがあればWebアプリケーションのデザインがすいすいできる「Bootstrap」

Bootstrapは今風のWebアプリケーションを開発するのに最適なデザインパーツを提供するCSSテンプレート。BootstrapはCSS製のオープンソース・ソフトウェア。ITエンジニアが苦手にするのがWebデザインだ。作るのは良いが、それを奇麗に配置していくのがとても難しい。Webサービスが流行るか否かに技術が及ぼす...

28086?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f07%2fscreenshot2011-07-07-16.23.54_thumb

  • 2011/07/19

マックスは1KB。限られたリソースの中でWebサイトを多彩にアレンジする「CSS1K」

CSS1Kは1KBのCSSでどこまでWebサイトを表現できるかをチャレンジするプロジェクト。CSS1KはCSS製のオープンソース・ソフトウェア。昨今のWebサイト開発ではCSSの存在を欠かすことができない。優れたWebデザイナーの作るCSSはとても美しく、分かりやすい。しかしCSS自体がとても冗長的なマークアップ言語で...

List

  • 2011/07/07

Sprite画像を使ってWebコネクション数を減らす。その補助ツールとして使おう「Sprite Cow」

Sprite CowはSprite画像からアイコンを切り出す作業を補助するソフトウェア。Sprite CowはPython/JavaScript製のフリーウェア(ソースコードは公開されている)。Webサーバを高速化するための一つの手段がWebサーバへのコネクションを減らすということだ。複数ファイルに分かれているものを一...

27739?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f06%2fscreenshot2011-06-21-10.46.11_thumb

  • 2011/07/04

一歩進んだCSSを作成するためにアドバイスする「CSS Lint」

CSS Lintはより良いCSSであるためのアドバイスを行うソフトウェア。CSS LintはJavaScript製のオープンソース・ソフトウェア。今、Webサイトを作る上で欠かせないのがCSSだ。デザインとHTMLマークアップとを切り離すことで、メンテナンスしやすく、かつ構造的な管理のしやすいWebサイトができあがる。...

27826?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2009%2f02%2f52-tm

  • Premium_s 2011/06/24

CSS Spriteを使ってパフォーマンスを改善。関連ソフトウェア×7選と実際の利用状況について

Webサイトの表示を高速化する際には幾つかの施策がとられます。ネットワークやハードウェアで変わることもあれば、ソフトウェアを改善することで性能が向上する場合もあります。その中で、Webデザインの中から貢献できるポイントとしてCSS Spriteがあります。CSS Spriteは一つの画像の中に幾つも小さな画像を配置し、...

26386?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f04%2fscreenshot2011-04-11-16.10.36_thumb

  • 2011/04/20

デザインの柔軟性が売り。HTML/CSSを使ったPDF作成ライブラリ「dompdf」

dompdfはHTML/CSSを使ってPDFを生成するPHPライブラリ。dompdfはPHP製のオープンソース・ソフトウェア。業務システムやレポートを出力する系統のWebアプリケーションで問題になりやすいのが帳票のフォーマットだ。システム的にはCSVまたはHTMLでの出力が楽だが、ユーザが望むのはPDFになりやすい。H...

26355?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f04%2fimg_0537_thumb

  • 2011/04/19

リストやテーブル主体のスマートフォン最適化サイトに「ChocolateChip-UI」

ChocolateChip-UIはHTML5製のスマートフォン最適化サイト用フレームワーク。ChocolateChip-UIはHTML5製スマートフォン用のオープンソース・ソフトウェア。スマートフォンはこれまでのデスクトップ型に比べると圧倒的に画面サイズが小さい。そのためWebサイトのデザインを行う上で注意すべきことが...

26241?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2f1be1d5e7e9448477b42aa72d02972c47

  • 2011/04/11

まさにノウハウの塊。WordPressでCMSサイトを構築するなら「WSCプロジェクト」

WSCプロジェクトはWordPressでCMSサイトを構築するのに使えるテーマを開発するプロジェクト。WSCプロジェクトはPHP製WordPress用のオープンソース・ソフトウェア。ソフトウェアは大抵、最初はごく小さなレベルからスタートする。それが数年かけて開発を続ける内に徐々に機能が追加されたり、逆に削られたりしなが...

26129?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2f4c6ecc7ab4139b9661c7b18ae027117f

  • 2011/04/01

HTML5対応のjQuery UI向けウィジェット集「Aristo jQuery UI Theme」,

Aristo jQuery UI ThemeはjQueryを使ったHTML5対応ブラウザ向けのウィジェット集。Aristo jQuery UI ThemeはWebベース、JavaScript/jQuery製のオープンソース・ソフトウェア。iOSやAndroidといったスマートフォンに対してアプローチする方法としては二種...

25880?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2f19b3ef76809d6b30f14ce100bde0ee14

  • 2011/03/16

iPhone最適化サイト用。CSSを使って絵文字を表示する「Emoji CSS Builder」

Emoji CSS Builderは537種類の絵文字をCSSで定義し、iPhone等で使えるようにするソフトウェア。Emoji CSS BuilderはRuby製/iOS用のオープンソース・ソフトウェア。iPhoneは今やギーグだけの持ち物ではなくなっている。女性も持ち歩くようになっており、コモディティ化してきている...

25807?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2fscreenshot2011-02-28-15.58.55_thumb

  • 2011/03/13

Webデザイナーは要チェック。WordPress用テーマフレームワーク「Whiteboard」

WhiteboardはPHP/HTML/CSSによるオープンソース・ソフトウェア。最近はちょっとしたサイトであればWordPressを使って開発するというのが多いようだ。確かに認証、ブログ、CMS、リンク管理などWebサイトを運営する上で必要な機能が多数揃っている。デスクトップ向け次に必要なのはデザインだ。個人用途であ...