ke-tai.org » CSS

ガラケー独自のstyle=”○○○”形式で書かれたインラインCSSをHTMLと分離してくれるサービス「Cascader」

matsui — Fri, 20 May 2011 14:59:12 +0000

ガラケー用のホームページを作る場合、ドコモの古い端末が外部CSS形式の表記に対応していないため、style=”xxx”といったインラインCSS形式で記述を行わなくてはなりません。

こういったガラケー向けの独自形式で書かれたHTMLを、スマートフォンやPCなど他の環境で使い回すには、全面的な書き直しが必要になるのですが、その手間を省くことができそうなサービスがありました。

「Cascader」というサービスで、HTMLとCSSファイルとを分割してくれます。

海外のサービスですので、当然ガラケー向けに作られたサービスではありませんが、役に立ちそうです。

→　Cascader – Cleaning Up The Web [cascader.co]

「Cascader」というサービスは、この記事で知りました。

→　WEBマーケティングブログ　インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」 [web-marketing.zako.org]

使い方は簡単で、ガラケー向けに作られたHTMLをコピペするだけで、自動的にCSSとHTMLファイルに分割されます。

単純な置換というわけではなく、同じ属性のスタイルは一つのクラスにまとめてくれたりもするようです。
styleだらけのHTMLでも安心です。

外部CSSに対応していないのは、iモードブラウザ1.0の端末だけですので、今後そのシェア徐々には減っていくと思われます。

iモードブラウザ1.0の端末を切り捨てるタイミングや、既存モバイルサイトのスマートフォン版対応などでこのサービスを使うと、きっと楽ができるのではないでしょうか。

関連：

Pythonで書かれたモバイル向けCSSインライン化ライブラリ「HtmlCssInclude」

matsui — Tue, 30 Nov 2010 14:59:47 +0000

Pythonで書かれたモバイル向けCSSインライン化ライブラリ「HtmlCssInclude」というものがあるそうなのでご紹介します。

→　gumi Engineer’s Diary　モバイル向けCSSのインライン化ライブラリを公開しました [d.hatena.ne.jp]

PerlではHTML::DoCoMoCSS、PHPではHTML_CSS_Mobileといったライブラリがありますが、それとほぼ同様の動きをするもののようです。

iモードブラウザ1.0端末では、style属性を使ってCSSの指定を行わなくてはならず、ヘッダ部分に書かれたCSSや外部CSSなどの読み込みが行えません。
これをライブラリを通すことで、styleに展開してくれ、擬似的に外部CSSを実現するというものです。

ドコモ以外の端末や、最近のドコモ端末で採用されているiモードブラウザ2.0では、外部CSS読み込みがサポートされているため、この辺りは心配ないのですが、まだまだ非対応機種のシェアは高いのが実情です。

Python使いの人は要チェックのライブラリではないでしょうか。

関連：

ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」

matsui — Fri, 30 Oct 2009 11:28:52 +0000

良エントリーがありましたのでご紹介します。

ケータイデザインで出来ること出来ないことがキレイにまとめられた「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」というエントリーです。

→　これからゆっくり考L　携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 [sakaki0214.com]

ケータイサイトでは、どうしても実現しづらいデザインというものがあります。
このエントリーでは、ケータイで表現できないようなデザイン案をもらわないように、デザインファイルをもらった時にバーッと見てチェックすべき箇所をまとめているとのことです。

詳細は上記ブログ内でサンプルサイト付きで解説されているので、そちらを見ていただくとして、チェックポイントを簡単に引用させていただくと、次のようになっています。

tableの使用はOKか
背景色を複数色使っていないか
枠線を使っていないか
サムネイル画像の横にテキストが来るパターン
リストアイコンの下に文字が回り込んでくるかどうか
ページの左右に微妙な余白が空いていないか
フォントサイズは2段階ないし1段階か
太字を使っていないか

※非常に細かい話ですが、上記エントリー内では902がテーブルが利用不可と書かれていますが、902はiモード対応HTML6.0なので全機種でtableタグが利用できるはずです。

このブログの書き手はコーダーさんとのことで、ならではの視点で良エントリーとなっていますね。

最近はケータイサイトでもかなり凝ったデザインが求められるようになってきていますので、デザインのやり取りが発生する際のチェック項目として活用してみてはいかがでしょうか。

関連：

iPhone OS 3.0のSafariでコピーふきだしを無効にするには

matsui — Mon, 22 Jun 2009 14:59:55 +0000

先日リリースされたばかりのiPhone OS 3.0絡みのTIPSをご紹介します。

iPhone OS 3.0から待ちに待ったコピペ機能が付きましたが、スクロールすることが多いサイトなどでは、ふきだしが表示されてしまって不便なことがあります。

このふきだしをCSSを使って無効にする方法があるそうです。

→　masuidrive on rails – iPhone 3.0のMobileSafariでコピペを無効にする方法 [masuidrive.jp]

コピー用のふきだしとは次のようなものです。
画面を少しの間長押ししていると表示されます。

次のようなCSSを指定するだけで、コピーのCSSがでなくなるようです。

body {
     -webkit-user-select: none;
}

非常に簡単ですね。
iPhone向けサイトを作成されている方は覚えておいて損はないと思います。

他にも何かiPhone 3.0向けのTIPSをご存知の方がいましたら、ぜひタレコミをお願いします。

関連：

ドコモ端末がついに外部CSSに対応したようです

matsui — Wed, 20 May 2009 01:47:51 +0000

昨日発表されたドコモの新端末（iモードブラウザ2.0端末）では、とうとう外部CSSに対応したようです。

JavaScriptやCookie対応の影に隠れて触れられてなかったのですが、これはかなり大きな修正です。

ドコモのCSSはケータイサイト作成の上で、最大の懸念とも言ってよかったのでこれは嬉しいですね。

→　NTT docomo　作ろうiモードコンテンツ　iモードブラウザ2.0対応i-CSS2について [nttdocomo.co.jp]

外部CSSに加えて、もちろんヘッダ内に書くCSSにも対応しているようです。

これは昨日から新しく提供が開始された、iモードHTMLシミュレータII 8.2でも確認できます。

→　NTT docomo　作ろうiモードコンテンツ　iモードHTMLシミュレータII [nttdocomo.co.jp]

test.html






サンプル




テスト


あいうえお

リンク

test.css

html {
	background: #99AA99;
}

div.head_area {
	text-align: center;
	color: #00FF00;
}

a {
	color: #FF0000;
}

なぜこんなに大きく表示されるのかは不明ですが、とにかくCSSが反映されています。

現在ケータイサイトを作成する上で、ドコモが外部CSSを読み込まないことによるハックを利用することがあるのですが、それはすぐに修正したほうが良さそうですね。

ドコモは今回の夏モデルからずいぶんと歩み寄ってくれましたね。
これでようやくまともな開発ができそうです。

関連：

Perl用の3キャリア対応CSS変換モジュール「HTML::MobileJpCSS」

matsui — Thu, 15 Jan 2009 14:59:08 +0000

Perl用の3キャリア対応のCSS変換モジュール「HTML::MobileJpCSS」がリリースされたとのことです。

→　komoriyaのはてなダイアリー　3キャリア対応のCSS変換モジュールHTML::MobileJpCSS [d.hatena.ne.jp]

→　CPAN　HTML-MobileJpCSS-0.01 [search.cpan.org]

ドコモのCSSは、ヘッダ部への記述や外部CSSの利用ができないという困った仕様ため、ページの作成には非常に苦労します。

これらを解決するには、Perlでは「HTML::DoCoMoCSS」、PHPでは「HTML_CSS_Mobile」といったライブラリがありましたが、今回新たな選択肢が追加されたことになります。

従来のライブラリとの違いは、文字サイズやhrタグなどのキャリアによる見え方の差異を吸収してくれたり、isyleの変換機能などが付いている点のようです。

キャリアによる文字サイズの違いは非常に困ることが多いところなので、これは便利な機能ですね。

Perl使いの方はぜひ試してみてはいかがでしょうか。

関連：

iPhoneのCSSで拡大・縮小・回転などのアニメーションさせる方法

matsui — Wed, 20 Aug 2008 13:06:16 +0000

先日「iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法」という記事を書きましたが、今回はその続きです。

前回は、左から右にすーっとアニメーションするだけでしたが、今回は拡大・縮小・回転といったアニメーションをさせてみたいと思います。

また前回は「-webkit-animation-name」を使う方法でしたが、今回はやり方を変えてみました。

　
静止画なのでわかりづらいですが、左からクルクルと回転しながら縮小して、右のようになります。

サンプルコードは次の通りです。

ポイントは、7～8行目のJavaScriptです。

el.style.webkitTransition = '-webkit-transform 3s ease-in-out';

ここでアニメーションの定義を行っています。
「3s」というのがアニメーションさせる時間で、この例では「3秒」です。
「ease-in-out」というのがアニメーションの動きの強弱で、この例では「最初と最後をゆっくり」ということです。

詳しくはこちらのページに書かれています。（英語です）
→　Surfin’ Safari – Blog Archive » CSS Animation [webkit.org]

el.style.webkitTransform = 'translate(180px,40px) rotate(180deg) scale(0.1)';

続いてこの部分で、移動・拡大縮小、回転の数値を設定しています。

「translate(180px,40px)」の部分で、移動する位置を指定しています。
この例では右に180ピクセル、下に40ピクセルです。（左や上に移動する場合はマイナスの値を指定します）

「rotate(180deg)」は回転です。
この例では、半時計周りに180度回転させています。

「scale(0.1)」は拡大・縮小です。
ここでは0.1倍と1/10の大きさにしています。

この他にも、skew(変形)や、matrix（変換行列）なども使えるようです。

iPhoneをお持ちの方はこちらのページからご確認ください。
→　縮小・回転のサンプルページ

またこの辺りの話は、こちらのページがサンプルが豊富でとても参考になります。

→　iPhone向けサイトを考える : リッチっぽいiPhone向けサイトを作るためのCSS3アニメーション [livedoor.jp]

関連：

iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法

matsui — Wed, 13 Aug 2008 13:06:02 +0000

iPhoneはJavaScriptを使わなくても、CSSのみでアニメーションができるようです。
今回はその方法をご紹介します。

サンプルとして、ボタンを押すと赤い四角が右にツーっと動く、というものを例に解説しようと思います。

この赤い四角が

「move right」ボタンを押すことで、右にアニメーションします

サンプルのHTMLは次の通りです。

ポイントとなるのは「-webkit-animation-xxx」の部分です。

上記の例では、クラス名「slide」に対して、上記のようなアニメーションのような定義を書いています。

-webkit-animation-name: "slide-right";
-webkit-animation-duration: 2s;

1行目で名前を定義します、この名前は下と一致していれば適当なもので構いません。
2行目でアニメーションの速度を定義しています。
今回の例では2秒です。こちらの数字を少なくすれば早く移動することになります。

@-webkit-keyframes "slide-right" {
	from { left: 10px; }
	to { left: 190px; }
}

こちらの部分で、移動開始位置と終了位置を設定します。

以上でアニメーションの定義は終わりです。

あとはアニメーションさせたいオブジェクトのクラス名を「slide」とセットしてやれば、アニメーションが開始されます。

document.getElementById("target").className = "slide";

なお、上記でアニメーションは開始されるのですが、アニメーション終了後は元に位置に戻ってしまうので、その後に座標を終了位置に変更しています。

document.getElementById("target").style.left = '190px';

厳密にはアニメーションの発動時にJavaScriptを使ってしまっているので、タイトルの「CSSだけで」というのはちょっぴり嘘になりますが、まあ使わないでもできないことはないということでお許しください。

サンプルＨＴＭＬをアップしましたので、iPhoneをお持ちの方はこちらから実際にお試しください。
→　iPhone用　アニメーションのサンプル

このアニメーションのテクニックは、応用すれば次のようなflick動作などに使うことができます。

→　Ajaxian » iPhone Safari Flick Navigation By Example [ajaxian.com]

→　iPhoneから見れるflickのサンプル　myDailyPhoto [mydailyphoto.com]

このようなインターフェイスは、なかなか便利そうです。
iPhoneをお持ちの方は試してみてはいかがでしょうか。

関連：

iPhone向けサイト作成のベースに便利なテンプレート集「iPhone Universal」

matsui — Mon, 11 Aug 2008 06:05:12 +0000

本日は、iPhone向けサイトを作成する際に、ベースとして利用できそうなテンプレート「iPhone Universal」をご紹介します。

→　Google Code　iphone-universal [code.google.com]

「iPhone Universal」は、iPhone向けのページを作成するためのサンプルとなるHTML, CSSのテンプレートです。

ライセンスはGPL v3で公開されており、リストやボタン、フォームやパネルなど、一通りのサンプルが収録されています。

シンプルなリスト

入力フォーム

パネル

上記画像はネイティブアプリではなく、すべてHTMLとCSSを使って作られたiPhone風インターフェイスです。

なお、こちらにサンプルもアップしてみましたので、iPhoneをお持ちの方はどうぞご確認ください。

→　iPhone Universal デモ

関連：

ドコモ用にCSSをインライン化してくれるPHPライブラリ「toInlineCSSDoCoMo」がバージョンアップ

matsui — Thu, 07 Aug 2008 10:17:55 +0000

以前ご紹介した、ドコモのCSSをインラインに埋め込む形に自動変換してくれるPHPライブラリである「toInlineCSSDoCoMo」がバージョンアップしたようです。

→　アシアルブログ　toInlineCSSDoCoMoをバージョンアップしました [asial.co.jp]

以前書いた紹介記事はこちらです。

→　ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」

→　ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」(続き)

ケータイサイト構築の中で、大きな課題となっているのが、ドコモ端末が外部CSSの読み込みに対応していないという点です。

この「toInlineCSSDoCoMo」を利用することで、外部CSSを自動で「style=”xxx”」形式に置換してくれますので、ケータイサイトのHTML作成がぐっと楽になります。

今回のバージョンアップでは以下の点が修正されたとのことです。

内部での変換をUTF-8で行うように
数値文字参照と実体参照を実行時にエスケープ
XML宣言の逆転現象を回避するように修正
エラー処理モードを追加し、strictモードのときのみ例外を投げて、それ以外の時は無視するように

私はお盆前進行により、まだ試せていないのですが、前回のバージョンで問題となっていた箇所の多くが改善されているようですね。
手が空きましたらすぐに活用したいと思います。

また上記ブログによると、ソフト名がイケてないとの指摘をうけたらしく、変更を考えているとのことです。
ステキなネーミングに期待したいと思います。（←プレッシャー）

関連：

90秒で理解するiPhone JavaScript（マルチタッチ編）

matsui — Mon, 28 Jul 2008 13:05:45 +0000

仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。

まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。
ここまでわかったことをメモ代わりに記載したいと思います。

今回はひとまず座標の取得までです。
ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。

マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。

Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難
タッチのイベントは、リスナーまたは「onTouchXXX」から取得
タッチ数は「event.touches.length」で取得
座標は「event.touches[i].pageX (or pageY)」で取得

1. Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難

マルチタッチを行う前の下準備として、Safari自体のスクロールや拡大・縮小を、動作しないようにしておいた方が無難です。

対象をドラッグしようとしているのか、画面をスクロールしようとしているのか、プログラム側で判断するのは難しいためです。
今回は次のように調整しました。

横スクロールと拡大・縮小を禁止しています。　→　参考エントリ

縦スクロールは、「event.preventDefault();」で抑止できるようです。
（後述のサンプルプログラム内でご確認ください）

2. タッチのイベントは、リスナーまたはonTouchXXXから取得

タッチ関連のイベントには

onTouchStart
onTouchMove
onTouchEnd
onTouchCancel

の4つがあり、それぞれonClick()などと同じような形で、イベントを取得できます。

またリスナー方式の場合は、

document.addEventListener("touchstart", touchHandler, false);
document.addEventListener("touchmove", touchHandler, false);
document.addEventListener("touchend", touchHandler, false);
document.addEventListener("touchcancel", touchHandler, false);

のような形で利用します。
touchcancelはどのようなケースで使われるのかは不明です。
もしご存じの方がいましたら教えてください。

3. タッチ数は「event.touches.length」で取得

これは簡単です。
タッチ情報は「event.touches」に配列の形で格納されますので、その数を見ればOKです。
（event変数が何かについては、後述のサンプルプログラムでご確認ください）

4. 座標は「event.touches[i].pageX (or pageY)」で取得

タッチ座標は「event.touches[i].pageX」のような形で取得します。
シングルタッチの場合は「event.touches[0].pageX」。
ダブルタッチの場合は、上記に加え「event.touches[1].pageX」にも値がセットされます。
最大5個（touches[4]）まで機能するようです。

サンプルプログラムは下記の通りです。










タッチ数: 

タッチ0: X:, Y:

タッチ1: X:, Y:

タッチ2: X:, Y:

タッチ3: X:, Y:

タッチ4: X:, Y:

このような感じで座標が取得できます　（クリックで拡大）

実際にiPhone/iPodTouchをお持ちの方はこちらかお試しください。
http://ke-tai.org/test/multitouch/multitouch.html

座標が取得できてしまえば、線を引くのも、画像を回転させるのも自由自在ですね。

とりあえず動作はしていますが、アップルの公式ドキュメントを読んで作ったわけではないので、もし間違っていたらご指摘をお願いします。

なお、今回のエントリー名にはホッテントリメーカーを利用させていただきました。
もし90秒で理解できなかったら（というか難しいですよね・・・）ご勘弁ください。

関連：

CSSの変更だけでPCサイトをiPhoneに対応させる方法

matsui — Tue, 15 Jul 2008 08:11:20 +0000

旬のiPhoneネタをご紹介します。

CSSを変更するだけで、既存のPCサイトを「iPhone」「iPod touch」に対応させる方法が、スライドで公開されています。
7/4にアップルストア銀座で行われたイベントで使われたスライド資料のようです。

→　SwapSkills公式サイト　7月4日　アップルストア銀座無料イベント！開催テーマ『誰でも出来るiPhoneのウェブサイト』 [swapskills-allweb.blogspot.com]

おそらくこの資料のベースとなったスライドで、内容はやや異なっていますが、スライド内で紹介されているタグを抜き出して解説していますので、こちらのページの方がわかりやすいかもしれません。

→　Kawa.netブログ　 PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法 [kawa.at.webry.info]

iPhoneからのアクセスかどうかを判定するには、ユーザエージェントから判断するのではなく、linkタグのmedia属性でCSSを切り替えるのが良いようです。

他にも画面幅を調整する方法や、指タッチでも使いやすくするコツなどが紹介されています。

言葉での解説ありきの資料のため、ややわかりづらいところがありますが、iPhone対応サイトを作ろうと考えている方には役に立つと思います。

どこかに発表時の音声やムービーは公開されていないのでしょうか？
ご存じの方がいましたら教えてください。

関連：

ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」(続き)

matsui — Thu, 10 Jul 2008 08:51:05 +0000

昨日から、ドコモで外部CSSやスタイルタグが利用できるようになるＰＨＰライブラリ、「toInlineCSSDoCoMo」に夢中です。

読み手がかたよってしまうことを承知の上で、続編の記事を書かせていただきます。

私の作成したサイトはSmartyを使ったものが多いため、フィルタを作成しようかなと考えていたら、既に同じようなコードを書いていた方がいました。
当ブログにいつもコメントを戴いているmaru_ccさんのブログです。

→　PHPライブラリ「toInlineCSSDoCoMo」をEthnaに組み込んでみた [hatena.ne.jp]

ここでは、Ethnaに「toInlineCSSDoCoMo」を組み込む方法が紹介されています。
Ethna使いの方は要チェックですね。

ひとまず私はSmartyフィルタだけ拝借し、一部を修正して利用させていただくことにしました。

しかし実際に動かしてみたところ、幾つか問題が出てきました。
どれも「toInlineCSSDoCoMo」の問題というよりは、PEARの「HTML_CSS」の問題のようです。

1. Warningエラーが出る

サイト内のHTMLの書き方が汚く、HTMLをパースする際にエラーになってしまうようです。
こちらは少しずつ書き直していくしかないですね。

ただ、「」のような書き方でも何故かエラーになってしまうため、困っていたりします。

通常のCSSと同じようにエラーを出したくない方は、「@」でエラー抑止をすると良いと思います。
またCSSファイルが読み取れなかった場合でも、Exceptionに飛んでいってしまうため、注意が必要です。

2. 文字化けしてしまう

HTMLヘッダ内の文字コード指定のmetaタグより前にtitleタグがあった場合には、文字化けしてしまうようです。
調べてみると、metaタグを先に書くのが正しいようですね。
今まで特に問題がなかったので気づきませんでした。

3. non-objectエラーで止まってしまうことがある

styleタグで内部CSSを指定した場合に、152行目の「$parent->removeChild($node);」でエラーとなってしまうことがあります。
同じstyleタグの書き方でもエラーが出る場合と、出ない場合があるので詳細は調査中です。（styleタグ自体を削除すると直ります）
ひとまず152行目に、「if ($parent) {」を追加し回避しています。

4. Smarty->fetchでコンテンツを取得してる場合、outputfilterでは対応できないかも

私のサイトでは、よく使う表示ブロックは、Smartyのテンプレート関数を作成し、独自タグを設定しています。

例えば、最新ニュースを表示したいときには、タグ「{displayNews num=”5″}」で表示するようにしています。
（こうすると、あちこちでニュースを表示できて便利なためです）

内部ではsmarty->fetchメソッドでニュースを取得しているのですが、fetchに対してもoutpufilterが効いてしまいます。
fetchされるテンプレートは当然ヘッダ情報などを持っていませんので、outputfilterとtoInlineCSSDoCoMoとの相性は、あまり良くありません。

ということで、「ob_start([コールバック関数])」を利用し、出力直前の情報に対して、処理を行うことにしました。

コールバック関数のサンプルは次の通りです。

setBaseDir($basedir)->apply($out);
  } catch (Exception $e) {
    // エラー処理へ
  }
  return $buf;
}
?>

今のところ、これで一通りうまくいっています。
もう少し試行錯誤が必要ですが、快適なHTML製作に向けて、1歩前進です。

関連：

ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」

matsui — Wed, 09 Jul 2008 10:42:20 +0000

ケータイ向けサイトを作っていく上で一番問題となるのが、ドコモ端末が外部CSSファイル読み込みや、styleタグでの内部参照に対応していないことです。

PerlではHTML::DoCoMoCSS [hatena.ne.jp] というライブラリがあり、かねがね羨ましく思っており、いつか移植したいなと思っていたりしたのですが、ついにPHPでもこの問題を解決してくれるライブラリが登場しました。

これは素晴らしすぎます。

→　Asial blog　DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました [asial.co.jp]

→　ゆどうふログ　勘違いのないようにtoInlineCSSDoCoMoの仕様について言っとくか [hatena.ne.jp]

oInlineCSSDoCoMo.phpは、基本的にはid:tokuhiromさんの作った上記のHTML::DoCoMoCSSをPHP用にリライトしたもので、それに若干の機能追加をしています。

とのことですので、基本的には上記Perlのライブラリを踏襲したつくりとなっているようです。

動作環境としてはPHP5.1以上とのことで、残念ながら4系で動いているサイトには使えないようです。

インストールは簡単で、

# pear install HTML_CSS

で、必要なPEARライブラリをインストールして、ダウンロードしたファイルを展開するだけです。
中に入っている「sample.php」にアクセスすれば、サンプルが表示されると思います。

使い方も簡単で、表示させたいHTMLの内容を取得して、toInlineCSSDoCoMoに渡してやるだけでＯＫのようです。

setBaseDir('./')->apply($document);
} catch (RuntimeException $e) {
  var_dump($e);
} catch (Exception $e) {
  var_dump($e->getMessage());
}
?>

これでケータイサイトのHTML作成が相当楽になりますね。

早速、自分のサイトにも適用して試してみたいと思います。
ただ、テンプレートシステムにSmartyを使っているので、サンプルのままでは行かない感じです。
この辺りもまとまりましたら、また記事にしたいと思います。

関連：

他のケータイサイトのHTMLを参考にする際に便利な裏技

matsui — Mon, 09 Jun 2008 14:10:23 +0000

本日は、ケータイサイトのHTMLを作成する際に便利な、Tips的なものをご紹介します。

ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。
たとえPCのブラウザから見たとしても、大手サイトはIPアドレスによる制限がかけられていて、ソースが見れるケースはまずありません。

ですので、HTMLがどのように作られているのかは、よくわからないことが多いと思います。

ご存じ「モバゲーTOWN」を例にご説明します。

例えば中央の点線や、「楽しもう」の上下の細い黒線は、どうやって書いているんでしょうか？
画面上から見ただけでは、正直よくわかりません。

そんな時に役立つのが、「画像を保存」機能です。

これを使えば、CSSで書かれているのか、画像なのかがわかります。

点線は画像でした

またスペーサー画像の位置もバッチリわかります。

中央にある緑のカーソルがあたった部分がスペーサー画像

モバゲーTOWNでは、トップページだけでも、10ヶ所以上ものスペーサー画像が使われていることがわかります。
（おそらくドコモ端末で、marginやpaddingが、効かないためだと思われます）

他ケータイサイトのデザインを参考にする際には、ぜひ活用してみてください。

関連：