CSS

A collection of 4 posts

CSS

Blueprint CSS と仲良くなるツールあれこれ

ごくたまにですが、自分の本編講演が始まる前に簡単なツールの紹介をすることがあります。小難しいことを話す前にキャッチーな話題に触れて講演に少しでも注目してもらおうと考え、時間がうまく調整出来たときにしています。昨年9月に開催された CSS Nite LP7 では、Blueprint という CSS フレームワークを紹介しました。 Blueprintは、様々なレイアウトパターンを class 属性を変更するだけで作ることが出来ます。カラムの数、コンテンツエリアの横幅、ボックスの移動、そしてフォームの作成など手軽に操作が可能です。柔軟性に長けているだけあってコードの量やファイルの分け方が独特なので、納品物として出せない場合がありますが、HTMLでプロトタイプを作りたいという方には良いツールです。 CSS フレームワークと呼ばれるツールセットは他にも幾つかありますが、Blueprintは関連ツールが豊富にあるのが利用するひとつのメリットといえます。例えばタブや可変グリッドレイアウトは、別途 CSS を追加するだけで実装することが出来ます。こうしたプラグインだけでなく、Compass のような Blueprint と Sass を利用した開発環境もあります。 デザイナーやコードを書く人向けの便利なツールもあります。Photoshop と Illustrator 用のテンプレート。

CSS

TypeKitから始まるウェブ文字革命

今月はじめに John が来日したときに「フォント関連で近々発表があるんだよね」と言っていたのですが、ついに全貌が明らかになったようです。Jeffrey Veen を中心に TypeKit というプロジェクトが立ち上がる模様です。既に WebKit, Opera 10, Firefox 3.1 3.5 でサポートされている @font-face。利用者のパソコンにあるなしに関係なく指定のフォントが使えるようになります。つまり、今まで仕方なく画像文字にしていた部分もテキストで処理可能になる可能性があります。 @font-faceでまず問題になるのが著作権に侵害しないかどうかという部分です。多くのフォントはウェブ上での配布を禁じていますし、@font-face の許可をしていないフォントもあります。法的な問題や DRM を気にせず安心して @font-face を使った文字表現をするために生まれたのが Typekit です。サイトに公開されているカタログの中から好きなフォントを選んで JavaScript を埋め込むだけで使えるようになるそうです。現在、様々なフォントを保持する団体や機関と協議が進められており、無料フォントだけでなく商用フォントもカタログに追加出来るように働きかけているとのこと。今夏リリースが楽しみです。 恐らく発足直後はアルファベットだと思うので、

CSS

3D世界もWebKit採用へ

Qtは、クロスプラットフォームで動作するアプリケーション開発を目的としたフレームワーク。開発と GUI デザインをワンストップで行えるメリットもあるので、様々なデバイスやアプリケーションで Qt が採用されています。代表的な例だと Google Earth でしょう。 様々なライブラリも用意されているわけですが、その中で注目なのが QtWebKit (日本語) というモジュール。Qtで開発されたアプリケーションの中に Webブラウザを埋め込むことが出来るようになります。 Qt は以前から GPL ライセンスとして配布されていたのですが、最近 LGPLライセンスが加わりました。もちろん GPL でも商用利用は可能ですが、よりフレキシブルなライセンシングと再配布が可能になります。これによりさらに積極的な Qt 開発も進むのではないかと考えられます。 今回のライセンスの変更により開発が活発化してきているのが Second Life。以前から Mozilla ベースのウェブブラウザを Second Life 内で利用出来たわけですが、これを WebKit に変更する可能性があるみたいです。

CSS

CSS Variables と CSS の未来

ここ数年にリリースされたウェブブラウザは W3C の仕様に従いつつ、実験的に独自の要素を実装して表現の幅を広げようとしています。CSS まわりでは WebKit がリードしているのではないでしょうか。マルチカラムや複数背景画像のような CSS3 にあるものから、反射やマスクのような変わったものまで実に様々です。 最近 WebKit のほうにも実装され、今月の CSS WG で草案化する可能性がある仕様で CSS Variables というのがあります。その名のとおり「CSS で変数を扱う」というもので、値を一元管理出来るようになります。詳しくは withD のこちらの記事が参考になりますが、サンプルコードを書くとこんなかんじです。 @variables { companyTheme: #069 highlight: #ffc; PageTitleSize: 18px; SubheaderSize: 14px; } h1 { background: var(companyTheme)