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

CSSの記事一覧

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

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

もっと見る

List

  • 2008/05/29

iPhone/iPod Touch向けWebサイトフレームワーク「Safire」

3GのiPhoneがもうすぐ発表されると噂されており、そうなるといやが応にも日本向けの製品登場を期待してしまう(どこのキャリアかは分からないが)。プライベートな利用はもちろんのこと、その人気を活かした専用のWebサイトを構築する需要を喚起することだろう。自社サイトおよびクライアントのサイトをiPhone/iPod To...

List

  • 2008/03/17

JavaScriptを使ってCSSを拡張「MoreCSS」

※ 画像は公式サイトデモより最近のWeb開発は単純なタグ構成をCSSを使って装飾していくという形式が多い。確かに開発側にとっても単純な構造は分かりやすく、CSSで見た目を変更できるのはデザインとシステムの分離ができ、効率的だ。そしてこのソフトウェアはそれをさらに発展させてくれる。今回紹介するオープンソース・ソフトウェア...

List

  • 2008/02/03

必見!CSSを使って複数の画像を一つに「CSS Sprite Generator」

Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに...

List

  • 2008/01/28

CSSを圧縮してサイズ軽減「Rainpress」

JavaScriptはライブラリが充実するにつれて、サイズが肥大化している。そのため、サイズを少しでも軽減しようと変数名を置き換えて難読化し、余計なタブやスペース、改行を消してサイズを小さくするツールが存在する。同様のことがCSSについても言える。サイズの大きくなったCSSはこれで縮小しよう。今回紹介するオープンソース...

List

  • 2008/01/23

CSS+画像でグラデーション「CSS Gradient Text Effect」

ソフトウェアと言えるかどうか不明だが、とても格好いいのでご紹介。最近のサイトの特徴として、グラデーションを使ったクールな印象があげられる。ヘッダーなどのインパクトを与える文字にグラデーションを使ったサイトも良く見かけるだろう。文字にグラデーションを適用するには画像を使うのが一番手軽だが、文字列を選択してコピーできないと...

List

  • 2008/01/17

リンク先のファイル種類をアイコン表示「Iconize」

Webサイトを色々見ていて、リンクをクリックしたらPDFファイルだった、なんて経験は誰しもがあるだろう。インライン表示になっていると突然固まったようになってしまって、がっかりしてしまう。他にもメディア系(QuickTimeやWMVなど)もそうだ。リンク先が何なのか予め分かっていると、クリックしないとか覚悟してからクリッ...

List

  • 2007/12/26

RoR用。CSSでグラフを描く「CSS Graphs Helper for Ruby on Rails」

最近はWebアプリケーションを構築しようと思うとRuby on Railsを使うようになっている。慣れれば慣れる程開発の効率が良くなり、さらに便利なものになっていく。そんなRailsの魅力をさらに増してくれるのが数多いプラグインの存在だ。その中から一つ、グラフ作成のプラグインを紹介しよう。今回紹介するオープンソース・ソ...

List

  • 2007/12/09

コンパクトなCSSフレームワーク「Boilerplate」

ここ最近、次々と目にするようになってきたCSSフレームワーク。TomcatやRailsをはじめとするサーバサイド、prototype.jsやjQueryといったクライアントサイド、そしてデザイン領域のCSSへとフレームワークの裾野は広がっている。こうしたフレームワークを覚えれば、サイトの構築は手軽になる。CSSによる三...

List

  • 2007/12/05

JavaScriptとCSSの融合「Dynamic CSS via JavaScript」

JavaScriptを使ってCSSを変更というのは良くあることだ。例えばクリックで表示を消す場合やフェードアウトさせるような類のイフェクトがある。$.style.display="inline";のような指定をするだろう。しかしこれではCSSとJavaScriptの距離が遠い。もっとダイナミックにCSSを操作しよう。今...

List

  • 2007/11/15

Web上の開発環境「Rainbow 9」

様々なWebアプリケーションが登場しているが、それでも作成はローカル環境で行う必要があり、不便さが残っている。開発すらWeb上でできればどれだけ手軽だろう。そんな希望を実現させてくれるかも知れないのがこのソフトウェアだ。今回紹介するオープンソース・ソフトウェアはRainbow 9、Webブラウザ上で開発するソフトウェア...

List

  • 2007/11/06

各種言語に対応したハイライタ「CodePress」

ブログをはじめとしてサイト上でプログラム言語を記述することは多々ある。そして見やすさのためにはハイライト表示されているのが良い。表示はもちろんのこと、編集まで考えると便利なのがこのライブラリだ。今回紹介するオープンソース・ソフトウェアはCodePress、JavaScriptベースのコードハイライタだ。CodePres...

List

  • 2007/10/31

よく使うスタイルをユーティリティ化「logicss」

CSSを使うのが当たり前になり、Webエンジニアと言えどもある程度のデザインはこなす必要がある時代になっている。だがいざやってみると色々と大変なのがCSSでもある。よく使われるスタイル指定や、テクニックをまとめてしまったのがこちらのソフトウェアだ。今回紹介するオープンソース・ソフトウェアはlogicss、どこでも使える...

List

  • 2007/10/23

Webサイトを手軽にクールに「GreyBox」

最近のWebサイトでは画面遷移をなくし、Ajax化するのが好まれる。とは言え、既存のサービスに対して実装するのはそうそう単純ではない。それにAjaxを使った場合、PVの計測が難しく、メディア等では取り入れづらい。だが、これを使えば簡単にそれっぽい実装ができそうだ。今回紹介するオープンソース・ソフトウェアはGreyBox...

List

  • 2007/10/22

リッチなWebアプリケーションを実現「Rico」

※ 画像の一部は公式サイトデモより。アプリケーションをWeb化する上で、リッチなユーザインタフェースは欠かせない。そうでなくとも動作はするが、ユーザビリティを高めるのには必須と言えるだろう。自作しても良いだろうが、やはり既存のライブラリを利用するのが手っ取り早い。チェックしてほしいのはこれだ。今回紹介するオープンソース...

List

  • 2007/10/15

サイトのパフォーマンス向上を目指そう「YSlow」

AjaxやCSSや様々なJavaScriptライブラリによって、サイトが豪華になっていく反面、全体的なシステムパフォーマンスは急激に悪化している。JavaScript等で、このサイトは重いなと感じる事が少なからずあるはずだ。便利な機能を提供する限り、これは変えられないのだろうか。いや、そんな事はない。変えるべきポイント...

List

  • 2007/10/12

CSS Validを目指せ!「CSS Validator」

CSSを使ったサイトが当たり前になりつつあるが、ブラウザ間の整合性を保つのは非常に難しい。ましてやValidなCSSをくみ上げるというのは並大抵ではなく難しい。チェックする機能が必要だ。オンライン上でCSSのチェックをしてくれるサービスとしてはW3C CSS 検証サービスがあるが、これはサービスが既にローンチしている必...

List

  • 2007/09/27

出た、構造化CSS「CleverCSS」

前にCSSの記述テクニック 階層宣言コーディングというエントリーを読んだ。これはエイプリルフールネタではあるが、同じ事を考える人は他にもいるようだ。そして、それをネタとしてではなく、ないなら実現してしまおうと考える。今回紹介するオープンソース・ソフトウェアはCleverCSS、構造化CSSを実現するソフトウェアだ。Cl...

List

  • 2007/09/11

プログラマブルCSS「Moonfall」

CSSは柔軟な書き方に対応するフォーマットだが、運用を続けていくと構造の階層が乱れていったり、フォントサイズの設定が様々な場所に散らばったりと管理しづらくなっていく。データを上手に管理すべく、プログラマブルなCSSを導入してみるのはいかがだろう。今回紹介するオープンソース・ソフトウェアはMoonfall、CSSジェネ...

List

  • 2007/08/30

半透明でクールなヘルプ「CoolTips」

最近新しいサービスを作っているのだが、ようやく最終段階に入り細かいユーザビリティを気にできるようになった。その中で、入力フォームや分かりづらい項目に説明をつけようと思った。ただのリンクでは寂しすぎる。あまり使われる事がない機能かも知れないがクールに攻めよう。今回紹介するオープンソース・ソフトウェアはCoolTips、...

List

  • 2007/08/29

必見!Webデザインのお供に「XRAY」

Webサイトをデザインをしていて、どうにもサイズがずれる事があるかも知れない。そうした時、いちいちソースを表示してCSSのクラスを確認して、CSSファイルと照らし合わせていないだろうか。非常に手間ひまのかかる作業だ。 表示されているそのものを確認できれば便利だ。そしてそれを実現するソフトウェアがこれだ。 今回紹介する...