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

CSSの記事一覧

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

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

もっと見る

List

  • 2009/05/23

Webブラウザでいかに読みやすい状態に仕上げるか「Better Web Readability Project」

コンピュータ上の文字は書籍や新聞に比べると読みづらい。それはフォントの問題もあるだろうし、電磁波の影響かもしれない。PDFなど可読性を良くするための技術もあるが、それでもコンピュータで長文を読もうという気にはならない。読みやすいWebページを目指す だが今後コンピュータがさらに利用されていく中では可読性の向上は必須とい...

List

  • 2009/05/03

Googleドキュメントでも集中して物書きに勤しむ「WriteRoom for Google Docs」

背景や余計な機能を一切見せず、物書きだけに集中できるソフトウェアがWriteRoomだ。当サイトでも類似のソフトウェアを幾つも紹介してきた(Dark Room:Windows、PyRoom:Linux、Writespace:MS Word、TextRoom:Windows/Linux、JDarkRoom:Java)。こ...

List

  • 2009/05/02

高速なJavaScript CSSセレクトエンジン「Sizzle」

Prototype.jsやjQueryなどのJavaScriptフレームワークではHTMLのクラス名やIDなどを指定して要素を取得できるようになっている。とは言え、簡単な要素の取得のためにフレームワーク全体を読み込むというのはちょっと面倒だ。次世代版のCSSセレクタエンジン そこでもっと手軽に使えるCSSセレクタとして...

List

  • 2009/05/02

WordPressのためのテーマフレームワーク「Thematic」

MOONGIFTのデザインは見づらい、見づらいと言われつつも何となく変更する気力が起きずそのままになってしまっている(申し訳ない)。デザインしてみたいという方がいらっしゃれば、このメールアドレス宛に連絡&金額を送ってもらいたい。シンプルにカスタマイズが容易なWordPressのテーマ用フレームワーク と、まぁ宣伝はそこ...

List

  • 2009/04/18

iPhone向けWebサイト構築の基盤に「UiUIKit」

特定デバイス向けのWebサイト構築というのはごくシンプルだ。iPhone向けのWebサイトを構築する場合は、iPhoneで正しく見られれば良い。PCのように多彩なブラウザが使われていたりするとその表示誤差を吸収する必要があるが、iPhoneであればSafariだけで良い(今の所は)。アイコンリスト そのため、iPhon...

List

  • 2009/04/08

Blueprint CSSのレイアウト設計をグラフィカルに行う「Boks」

Blueprint CSSはCSSフレームワークの先駆け的なソフトウェアだが、これを使うとグリッドなデザインを簡単に実現できるようになる。多様なブラウザにも対応し、かつきっちりとしたデザインが組めるとあって、便利に使われている。グラフィカルにグリッド設計ができる とは言え、最初は使いこなすのに苦労するかも知れない。これ...

List

  • 2009/03/15

圧縮だけじゃない。CSSを解析した上で圧縮する「CSS Compressor」

CSSは最近のWebシステムでは当たり前のように使われている。そして肥大化したCSSはネットワークの帯域を余計に食っているようなものだ。それを解決する手段として、CSSの余計な空白や改行を消して圧縮する技術がある。こんなにちっちゃくなっちゃった! だがCSS Compressorはもう一歩先の技術を使って、さらに圧縮を...

List

  • 2009/03/05

YUI Grids BuilderのCSSをシェイプアップした「Object Oriented CSS」

CSSのフレームワークは既に多数登場している。レイアウトを簡単に決められるものや、ブラウザ互換性が高いレイアウトを簡単に構築できるとあって利用されるケースも増えている。だが、CSSは一度作成された後のリファクタリングがしづらく、肥大化しやすい傾向にある。yahoo、gCalといったクラスがある 有名なCSSフレームワー...

List

  • 2009/03/04

クリックでCSSのクラス名と構造を表示する「SelectorGadget」

CSSはよくも悪くも柔軟で、構造的に管理するのが難しい。デザインが乱れた時に、よくよく確認してみると別な場所で定義されているクラスやID、またはタグ名に対する直接指定のプロパティが影響していたということはよくある。ブックマークレット形式という珍しいオープンソース・ソフトウェア そのようなデザイン上の問題を素早く解決して...

List

  • 2009/02/21

複雑なグリッドに対応した軽量CSSフレームワーク「Golden Grid」

※ 画像は公式サイトデモよりWebサイトを作っていて、複雑なページ構成をCSSだけで組もうとするとすぐに無理がくる。floatやclear、left/rightなどを組み合わせるのだが思い通りにいかない。やっとできたと思ってIEでみたらぶっ飛んでいた、なんてことはざらにある。それだけでもうやる気がなくなってしまうことだ...

List

  • 2009/02/09

Sass記法を用いたCSSフレームワーク「Compass」

CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。コマンドラインオプション そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを...

List

  • 2009/02/02

複数の画像を一つにまとめてCSSで表示「SmartSprites」

Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。コマンドラインで実行して連結する GoogleやAmazonでは回避策として複数の画像を一つにまとめ、C...

List

  • 2009/01/31

複雑なWebサイトデザインを容易に実現するテンプレート「YAML」

なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。整ったデザインが簡単に手に入るのはすばらしい! Webプログラマの一番の悩みどころがデザインだ。特にC...

List

  • 2009/01/25

どのブラウザでどのCSSハックが使えるか「CSS Selector Shell」

純粋なCSSだけで各ブラウザ間の表示互換性が保てればベストだが、実際の現場ではそのようなことがないのはよく知られている。そのため、各ブラウザ向けにCSSハックが登場しており、表示の互換性を保つために使われている。どのハックが有効かチェック だがFirefoxの各バージョン、Google Chromeなど様々なブラウザに...

List

  • 2009/01/24

CSSやJavaScriptファイルを連結、圧縮「Minify」

jQueryやPrototypejs、YUIなど様々なJavaScrptライブラリが登場している。また、CSSもフレームワークが出てきており、便利な反面、表示されるまでのコネクション数やダウンロードサイズが肥大化している。CSSやJavaScriptを連結&圧縮 それを解決する手段として、サイズの縮小や複数のファイルを...

List

  • 2008/12/27

Web開発者に便利。WebサイトのCSSプロパティが簡単に分かる「CSSViewer」

デザインが苦手な人にとって(筆者をはじめ)、CSSによるデザインに問題がある際に何が問題なのかを把握するのがまず難関だ。別な場所で設定した内容が関連している場合もあるだろうし、IDで指定しているのか、はたまたClassで複数指定している場合もあったりするとさらにややこしい。CSSで困った時に役立つFirefoxアドオン...

List

  • 2008/12/08

今時のWebサイトを構築するのに便利そうなCSSフレームワーク「Malo」

海外に見る最近のWebサイト(特にトップページ)のデザインは、縦に何段かに分かれたデザインが多い。一番上は大きな画像とともに二段構成、その下が2×2のテーブル組みなどでサービスの特徴を書き、次に横並びの3段で利用者の声といった具合だ。今時のWebサイトっぽいデザインが簡単に まぁテーブルで組めばできないことはない。だが...

List

  • 2008/11/26

段組みを実現するCSSレイアウトをオープンソースで「Typogridphy」

プログラマーやSEの方々はWebデザインが苦手だ。私自身、色々勉強はしつつもどうにも好きにはなれない。そのため、極力テンプレート的なものを使って作業するようにしている。デザインを後回しにすると、システムがある程度できた時にはじめることになり、折角乗っている気分を台無しにする恐れがある。CSSで段組みを実現 最近の流行は...

List

  • 2008/08/11

iPhone/iPod Touch向けインタフェーステンプレート「iPhone Universal」

iPhoneは国内ですでに7万台売れているそうだ。この数字が大きいかどうかは分からないが、iPod Touchと含めて考えると10万人以上のユーザがいると考えられるだろう。世界で考えれば数百万人のユーザが存在する。iPhone/iPod Touch専用のHTMLテンプレート そのため、AppStoreのように専用端末で...

List

  • 2008/07/22

複雑な段組みを可能にするCSSフレームワーク「Emastic」

雑誌や新聞などでは複雑な段組みを行って、情報を見やすくしている。ネット媒体の場合、あまりそうした点は考慮されず、二段または三段のカラムで構成されることが多い。しかも幾つかのカラムはメニューなどに使うので、文章自体は殆ど組版が施されていない。CSSだけとは思えないほど細かく制御されている Webはそういった媒体ではない、...