※デスクトップ版Operaでご覧になっている方は「スモールスクリーン表示」でもサンプルを確認できます。
一部のゲーム機及び携帯ブラウザはscreenメディア用CSSを解釈しますが、画面の大きさや実装度の問題で再現性はいまいちです。というわけで、handheld用のCSSを用意して携帯ブラウザで閲覧しやすいデザインを提供しようというという試みです。ニンテンドーDSブラウザー、Operaスモール・スクリーン・レンダリングモード、一部携帯電話などのhandheldメディアに対応しています。携帯サイトのスタンダードなスタイルで、そこそこ読みやすいと思います。
default.cssの解説（Alternative Design Project）に似ているのは仕様です。ADPを参考に作ったので。携帯サイトのデザインは似たり寄ったりというのもあります。ADP式だと携帯ブラウザの他、NN4やMacIE5などの化石ブラウザにも対応できるので、根気がある方はそちらをおすすめします。
CSSをダウンロード後読み込ませるだけで使用できます（多分）。どのサイトでも使えると思いますが、ダメだったら諦めてください。handheldメディアは機種によって実装に差があるので、このCSSが実用的になるには時間がかかると思われます。
ダウンロードしたCSS一行目の文字符号化方法をサイトに合わせて修正してください。デフォルトはShift_JISになっています。
head内に以下のようなlink要素を書き加えてください。
<link rel="stylesheet" href="./handheld.css" type="text/css" media="handheld">以上で作業は終わりです。handheldメディアに対応した携帯ブラウザから閲覧するとhandheld用のレイアウトになっているはずです。
link要素にmedia属性がない場合は、うまく適応されない場合があります。media属性は必須です。
例えばCSS着せ替えテンプレートプロジェクトのデフォルトテンプレートにhandheld用CSSを読み込ませたとして、
<link rel="stylesheet" href="./csstemplate/style.css type="text/css">
<link rel="stylesheet" href="./handheld.css" type="text/css" media="handheld">のように、media属性が指定されていないlink要素があるとhandheld用CSSがうまく適応されません。なので、
<link rel="stylesheet" href="./csstemplate/style.css type="text/css media="screen">
<link rel="stylesheet" href="./handheld.css" type="text/css" media="handheld">のようにmedia属性を書き加える必要があります。CDPは元々media属性の記述がないので、handheld用CSSを使いたい方はご注意ください。
img、input、textarea、preなど）がはみ出さないようにmax-widthを指定します。float、positionは使わないでください。これくらいだと思います。240px程度の小さな画面なので凝ったことはしなくていいです（というかできません）。余白を取って見出しに変化をつけたら、あとはブラウザのデフォルトスタイルに任せておきましょう。読めればいいのです。
先に書きましたが、handheldメディアはまだ環境が整っていないので使えない場合は諦めてください。