DSiブラウザの縦長表示でCSSを動かす

list このエントリーをはてなブックマークに追加

え~、しばらく放置していた、子供ツイッター http://kidtwi.jp/ ですが、再起動します。

と、言いますか、2方面の路線を上に乗せてしまおうかなと。

  • DSi でツイッタークライアント
    → 上下画面を使って、DSアプリ風に作る。
  • 低学年用の学習ツールとして使う。
    → 算数(かずあて、たしざん、ひきざん)
    → ひらがなを覚える

な学習方面です。

モバツイの真似っこ画面を HTML で組んでいたんですが、どうも上下スクロールってのは、DSi には似合わないんですよね。できるならば、

  • 上の画面で表示。
  • 下の画面で、ぽちぽちと入力

のような感じで、普通のゲーム感覚にしたい。

で、どこまで、CSS が組めるのか、Javascript が動くのか?と調べてみると、

開発/入門 – ニンテンドーDSブラウザーWiki
http://hammerspace.squares.net/DS/wiki.cgi?page=%B3%AB%C8%AF%2F%C6%FE%CC%E7

「携帯ゲーム機用Webページ」の作り方(2/4):CodeZine
http://codezine.jp/article/detail/5223?p=2

DSiブラウザで”DS”らしいアプリケーションが作れるかも知れない – ここのことはなかったことにするかも
http://d.hatena.ne.jp/yellow_73/20090407/p1

なところを調べてみると、

media を指定することで、縦長表示で CSS を使えるようになる。

<style type=”text/css”  media=”handheld”>
</style>

縦長表示を強制的に使うには次の meta タグを指定する。

<meta name=”viewport” content=”width=device-width” />

なところまで分かりました。

試してみると、position あたりは癖がある(必ず左上が基点になるらしい)のですが、文字や画像の重ね合わせもできるし、jQuery の位置指定も動いているので大丈夫そう。

製作中の tips は少しずつアップしていきます。

 

カテゴリー: 開発 パーマリンク