こんにちは。matsudaです。

以前、こちらでも紹介させていただきました犬・猫写真でカワイイか投票する「Cute or Not」ですが、これはもともとNintendoDSで遊べるように作っていました。DSブラウザはいまさらな感が否めないですが、上画面に写真・下画面に投票ボタンにして、タッチパネルでポチポチできて、暇つぶしにはもってこいな気がしたからです。

簡単にデザインできるだろう…とはじめは思っていましたが、実はそうでもなく、ちょっと苦戦したところがあったので、メモ程度に残しておきます。

※以下、DSブラウザー特有の“縦長モード”での場合です。

■画面のデザインは1画面：縦176px×横247px

NintendoDS の液晶は1画面192px×256pxになっています。そのうち上画面は上16pxがURL表示、下画面は下16pxが機能表示に利用されています。横幅はスクロールバー用に9px使用されているので、結局1画面の有効範囲は176px×247pxになります。

■CSSはhandheld

当初、CSSが反映されず悪戦苦闘しました。 <link rel="stylesheet" href="style.css" media="handheld" type="text/css"> とmedia="handheld"を入れるとうまくいきます。

■CSSのfont-sizeは3段階

x-small、small、mediumのみでした。あの小さな画面ではこれくらいでちょうどいいのでしょうね。

などど悪戦苦闘している時に見つけた、とても便利なサイトがありましたので最後にご紹介します。（もっと早くに見つけておくべきでした…）

●ニンテンドーDSブラウザーWiki - 開発/html仕様
http://hammerspace.squares.net/DS/wiki.cgi?page=%B3%AB%C8%AF%2Fhtml%BB%C5%CD%CD

●DSブラウザ実験ページ
http://ds.wakufactory.jp/dev/
こちらの“縦画面モード用テンプレ”を利用すると便利です！

そのほかTipsをご存知であればぜひ教えてください。