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

CSSの記事一覧

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

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

もっと見る

List

  • 2009/12/28

CSSの画像埋め込みを補助する「CSSEmbed」

CSSEmbedはJava製のオープンソース・ソフトウェア。CSSを使ったWebサイトデザインで、HTML中には画像のパスを出さずCSSで定義するケースがある。これによりCSSで制御できるデザインの範囲が大幅に広がるのだが、さらに一歩進めてCSS中に画像データを埋め込んでしまう手法がある。元のCSS それはdata U...

List

  • 2009/12/19

セクシーなボタンでユーザビリティを向上する「Sexy Buttons」

Sexy ButtonsはJavaScript/CSS製のオープンソース・ソフトウェア。Webサイトのユーザビリティを向上する上で考えたいのがアイコンの使い方だ。素っ気ない文字だけの表示に比べて表現力が高くなり、ユーザビリティも大幅に向上する。アイコン付きの分かりやすいボタン Webサイトにおいて重要なのは最後に実行さ...

List

  • 2009/11/16

CSSとJavaScriptを組み合わせたアニメーションライブラリ「emile」

emileはCSS/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを行う際、まず思いつくのはFlashを使った手法だろう。だがそこまで複雑なアニメーションでもなく、そもそもFlashを扱うのが苦手な場合はどうしたら良いだろう。そこで使えそうなのがJavaScriptだ。 ...

List

  • 2009/11/14

iPhone/iPod Touch向けWebサイト向けテンプレート「Webapp.net」

Webapp.netはiPhone/iPod Touch向けのオープンソース・ソフトウェア。iPhone/iPod Touchはモバイルデバイスなので画面の大きさに制限がある。そのためPC向けのWebサイトを表示はできるが、できれば最適化されたWebサイトを提供したい。専用のインタフェースを提供すれば、ユーザ体験がぐっ...

List

  • 2009/11/01

Google Codeで使われているソースコードハイライタ「Google Code Prettify」

Google Code PrettifyはJavaScript/CSS製のオープンソース・ソフトウェア。Google Codeではリポジトリにあるソースコードをオンラインで閲覧する機能がある。多様な言語に対応しており、色づけによってソースコードの閲覧が容易になる。JavaScriptの正規表現 そんなハイライトライブラ...

List

  • 2009/10/25

難読モード/編集モードを備えたCSSエディタ「snap{css}」

snap{css}はWindows向けのフリーウェア(ソースコードは公開されている)。CSSの編集は何のエディタで行っているだろう。大抵テキストエディタか、オーサリングソフトウェアになるだろう。使い慣れたエディタで編集するというのも良いが、専門のエディタを使うと効率的になるかも知れない。難読化モード snap{css}...

List

  • 2009/10/16

テキストエリアを使ってコーディングしやすくする「CodeMirror」

CodeMirrorはJavaScript製のオープンソース・ソフトウェア。Webブラウザのテキストエリアの貧弱さは言うに事欠かない。メモ帳レベルの機能しかなく、とても使い勝手が悪い。HTMLを作成する場合はWYSIWYGなエディタに変換するCKEditorのようなソフトウェアも存在するが、Webブラウザ上でプログラミ...

List

  • 2009/10/08

CSSを柔軟にデザインできるフレームワーク「CSScaffold」

CSScaffoldはPHP+CSS製のオープンソース・ソフトウェア。CSSは柔軟に設定ができるため、つぎはぎに設定を付け足していくと管理が煩雑になっていく。はじめこそネストした設定も適切に行うのだが、徐々に乱れていくとやたら長いクラス名ができたり、設定が複数箇所に点在したりすることになる。元CSSファイル そうなると...

List

  • 2009/10/07

CSSを使ったクロスドメインAjax「CSSHttpRequest」

CSSHttpRequestはJavaScriptを使ったオープンソース・ソフトウェア。AjaxはWebシステムを進化させた凄い技術ではあるが、制約も色々とある。特に大きいのがクロスドメインによるデータの授受ができないという問題だろう。その問題を解決するため、JSONPをはじめとする様々な対抗技術が生み出されている。デ...

List

  • 2009/09/29

CSSで自動生成ドキュメント「CSS Doc」

CSS DocはRuby製のオープンソース・ソフトウェア。プログラミングソースを複数人で参照するときや、ライブラリを開発した際に必要なのがドキュメントだ。最近では各言語向けに○○Docと呼ばれるものが普及している。これにより関数やメソッドの前に特定のシンボルを付けつつ説明を書くだけで後々コマンド一つでソースドキュメント...

List

  • 2009/09/11

HTML/JavaScript/CSSをシェイプアップ!「Patu Digua」

HTMLやJavaScript、CSSを構造化して見やすく書こうと思うとインデントやスペースを使うだろう。確かに見やすいが、ブラウザへのレンダリングを行う上では特に意味はない(中には意味のあるスペースもあるが)。できるだけ転送量を抑えようと思うと、このスペースをなくしていくという作業が大事になる。HTML/JavaSc...

List

  • 2009/09/08

CSSによる画像分割を行うSprite画像を生成する「SpriteMe」

小さなアイコンを多数集めて一つの画像にし、CSSで分割するCSS Spriceという技術については何度か紹介したい。Tonttuもその代表ソフトウェアの一つだ。ブラウザからサーバに対するアクセス数が減るのが最も大きな効果で、小さなアイコンを数多く使っているサイトほど有効だ。生成したい画像をドロップする Tonttuの場...

List

  • 2009/08/30

整然とライン上で表示されるCSSフレームワーク「Baseline」

大学ノートには横線が引かれている。これを使って文字を書けば、斜めになったり一部だけ文字の大きさが変わって読みづらくなったりしない。整然と並んで書かれていれば後で読み返す時にもきっと分かりやすいはずだ。ある一定の基準に沿っていると安心感があり、情報を受け入れやすくなるのだ。グリッド コンテンツを重視したWebサイトではそ...

List

  • 2009/08/20

便利!CSS Spriteを作成するAIRアプリ「Tonttu」

CSS Spriteとは小さなアイコンなどの画像をくっつけて一つの画像として保存し、表示する際にはCSSで位置を指定して表示するという手法だ。Googleをはじめ、膨大なアクセスのあるWebサービスで活用されている手法であり、画像を読み込むコネクション数を減らすことができる。CSS Spriteを作るならぜひ使いたい ...

List

  • 2009/06/27

Sassから自動でCSSを生成する「saag」

CSSをそのまま書くのは面倒というのは誰しもが感じる所だろう。そこで最近では構造化されたCSSを作成し、変換プログラムを介して別なフォーマットにするという類のソフトウェアが幾つか登場している。PythonではCleverCSS、RubyではSassやLessが知られている。下がSass、上がCSS だがいずれのフォーマ...

List

  • 2009/06/27

iPhoneのSafariでカバーフロー調のアクションを実現する「css-vfx」

写真は撮るだけでは面白くない。見せ方が重要だ。例えばiPhoneやiPod Touchは液晶の大きさもあって、写真を皆に見せるのに便利なインタフェースだ。だが、ただ写真をリストアップしたり、アルバムに入っているものを見せるだけでは面白くはない。iPhoneに最適化されたカバーフロー表示を行うJavaScript オンラ...

List

  • 2009/06/26

iGoogle風UIを実現&解説「iNettuts」

iGoogleの画面が使いやすいか、と言われると答えに窮するところだか個人がメンテナンスできる機能はとても便利だ。ブックマークレットやFirefoxアドオン等でもただ与えられた画面をそのまま使うのではなく、ユーザが自分にとって使いやすい形に変化させる(または許容する)のはとても大事だ。3カラム表示のウィジェットポータル...

List

  • 2009/06/21

Rubyによる構造化CSSライブラリ「Less」

CSSのメンテナンス性の悪さは言うに及ばないだろう。どうとでも書けてしまう手軽さはあるが、ファイルが分かれていたり、ネストしている場所としていない場所があったりするともう管理ができなくなる。ちょっとした変更がどこに影響するかも分からず、もはや触るのが怖くなる。Lessの記述例 そんな訳でCSSは慣れれば慣れるほど使い方...

List

  • 2009/06/21

Webシステム開発者に送る便利なテンプレート「Web App Theme」

正直、Webデザインは苦手だ。システムは構築できても、その後のデザインで行き詰まって頓挫したサービスは数知れない。最近ではWebデザインテンプレートを使うようになったが、汎用性の低いものが多くカスタマイズも困難な場合が多い。Basecampにも似たWebアプリケーションテンプレート 例えばWebシステムの管理画面を考え...

List

  • 2009/06/13

CSSのプロパティを見ながら指定できる「Simple CSS」

CSSを常日頃から使わないと、ちょっとしたプロパティを忘れてしまう。例えばcursorプロパティに設定できる文字は何があっただろうか、といった具合だ。ネットを使って調べても良いが、オフラインの場合に困ってしまう。テキスト設定 そんな時に使えるのが、CSSエディタだ。シンプルなものが良ければSimple CSSが便利だ。...