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

デザイン - CSSの記事一覧

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

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

もっと見る

36033?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f02%2fscreenshot-2012-02-21-16.47.33_thumb

  • 2012/02/29

Bootstrapを使っていると思わせないテーマを作成「Bootswatch」

BootswatchはTwitterのBootstrapテーマエディターです。BootswatchはTwitterの開発したBootstrapをLESSにし、それらを容易にカスタマイズできるようにしたソフトウェアです。テーマのように色合いを変えて様々なWebサイトに適用できるようにします。Bootswatchのトップペ...

35879?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f02%2fscreenshot_2012_02_16_12_51_03_thumb

  • 2012/02/25

jQuery Mobile向けBootstrapテーマ集「Twitter Bootstrap jQuery Mobile Theme」

Twitter Bootstrap jQuery Mobile ThemeはTwitterのBootstrapとjQuery Mobileを組み合わせて使えるテーマ集です。TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQu...

35490?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f02%2fscreenshot-2012-02-08-15.54.04_thumb

  • 2012/02/17

Webデザイナー向け。CSSを手軽に楽しむ「dabblet」,

dabbletはHTMLとCSSを記述してその結果をリアルタイムで確認できるソフトウェアです。データをGistに保存できます。dabbletはCSSのプレイグラウンドです。HTMLとCSSを記述してリアルタイムでその適用結果を確認できます。トップページです。上半分が適用されたHTML、下がそのCSSとなっています。上に...

34628?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f01%2fscreenshot_2012_01_17_05_12_31_thumb

  • 2012/01/26

iPhone向けWebサイトを細かく制御するグリッドライブラリ「iPhone.gs」

iPhone.gsはiPhone用のWebサイト向けのグリッドライブラリです。iPhone向けの最適化サイトを作る際に、グリッドに沿った奇麗なサイトを作りたいと思ったらiPhone.gsを使ってみましょう。4/6/8のグリッド表示ができます。4カラムのグリッドです。320pxを最大幅として1:3、2:2、1:1:1:1...

34070?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f01%2fscreenshot2012-01-04-20.45.07_thumb

  • 2012/01/11

CSS3だけで作るプログレスバー「CSS3 Progress Bars」

CSS3 Progress BarsはCSS3を使ってプログレスバー表示を行います。最近、複雑な表示ですらCSSだけでこなしてしまうようなハックが流行っていますが、CSS3 Progress BarsはCSS3だけを使ってプログレスバーを表示します。表示例です。角丸や複数の組み合わせ表示ができます。さらに細めのタイプも...

33776?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f12%2fscreenshot2011-12-21-16.33.50_thumb

  • 2012/01/07

Compass/Sassを監視して自動でCSS生成「Scout」

ScoutはCompassで生成されたCSS群を監視して自動でCSSを生成してくれます。CSSのフレームワークにCompassやSassを使っているWebデザイナー&プログラマーにお勧めなのがScoutです。フォルダを監視してファイルを修正すれば自動でファイルを生成してくれます。インストールです。Windows、Mac...

33623?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f12%2fscreenshot2011-12-21-16.24.06_thumb

  • 2011/12/31

マルチプラットフォームで動作するLESS専用エディター「Crunch!」

Crunch!はLESSコンパイルツール兼エディターです。CSSの煩わしさから解放してくれる記法が幾つかありますが、今回取り上げるのはLESSです。そしてCrunch!はLESSファイルを編集するためのエディタで、CSSへのコンパイル機能を備えています。インストールです。Adobe AIRが必要です。インストール自体は...

List

  • 2011/12/28

元画像群からSprite画像とCSSを生成「Sprite Factory」

小さなアイコン画像などを一つにまとめて表示はCSSで切り出して行うのがCSS Spriteです。用意する手間があるため二の足を踏むケースも多いのですが、Sprite Factoryを使えばごく手軽に運用ができそうです。インストールします。Rubygemsでインストール可能です。実行はsfコマンドで。ディレクトリを引数と...

32426?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-25-11.09.47_thumb

  • 2011/12/03

JavaScript/CSSの検証、短縮化、マージに「Juicer」

JuicerはCSSやJavaScriptのマージや短縮化を行うRubyライブラリです。短縮にはYUI Compressorを使っています。JavaScriptやCSSを使っている際に一緒に使ってほしいのがJuicerです。短縮化やファイルのマージなどをコマンド一つで行ってくれます。インストールはRubygemsで行い...

31617?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-07-13.01.19_thumb

  • 2011/11/14

小さな改善を積み重ねる。CSSを短縮化するコンソール向けソフトウェア「clean-css」

clean-cssはnode.jsを使ったCSS短縮化ソフトウェアです。コンソールで動作します。一日数十万、数百万とアクセスのあるWebサイトではほんの少しの改善が積み重なって大きな速度改善につながることもあります。CSSも作成したそのままではなくちょっと工夫すれば大きな負荷軽減につながるかも知れません。そのための短縮...

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

  • 2011/11/13

要注目!CSSとJavaScriptで作るアニメーション「Animatable」

AnimatableはJavaScriptでCSSのプロパティを変化させることでアニメーションさせるJavaScriptライブラリです。最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニ...

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サイトができあがる。...