Wiiのウェブブラウザ「インターネットチャンネル」向け
ウェブページ制作の基本

Wii向けウェブサイトのつくり方 - HTML編 （1）

ローカルデータの使用

　ユーザーが直接利用可能なストレージがないため、ファイルをダウンロードして保存したり、フォームからファイルをアップロードしたりすることができません。

　コンテンツ側からは、CookieやFlashのLocal Shared Objectとしてデータを保持できます。

input type="file" は選択できない

表示モード

　Wiiリモコンの「2」ボタンを押すことにより、通常の表示と、Operaのスモール・スクリーン・レンダリングによる「タテ長モード」を切り替えることができます。

　タテ長モードでは、一部を除いてCSSのプロパティが省略され、ケータイのような縦スクロールのみの表示に再レンダリングされます。

　それぞれのモードではmedia属性が異なり、通常モードでは「tv」、タテ長モードでは「screen」が適用されるため、「tv」「screen」2種類のCSSを用意し、それぞれのモードに最適なスタイルを当てることが可能です。

2つの表示モード

	標準モード	タテ長モード
切り替え	Wiiリモコンの「２」ボタンで相互にモード切り替え
表示	HTML/CSSの記述通り	一部の属性は無視される
スクロール	必要に応じて縦横	縦のみ
画面の拡大縮小	可	不可
メディアタイプ	tv	screen

各モードにおけるCSSの対応状況

　主なプロパティとセレクタの対応について、概要を一覧にまとめました。セレクタの詳細については、css3.infoのセレクタテストをインターネットチャンネルで実行して対応状況を確認できます。

　実際の動作は、プロパティ、セレクタそれぞれについて簡単な表示テストのページを用意しましたので、ご覧ください。

主なCSSプロパティの対応状況
（○：対応／△：一部対応／×：非対応）

プロパティ名	通常モード	タテ長モード
background-attachment	○	×
background-color	○	○
background-image	○	×
background-position	○	×
background-repeat	○	×
background	○	×
border-collapse	○	×
border-color	○	×
border-spacing	○	×
border-style	○	×
border-top border-right border-bottom border-left	○	×
border-top-color border-right-color border-bottom-color border-left-color	○	×
border-top-style border-right-style border-bottom-style border-left-style	○	×
border-top-width border-right-width border-bottom-width border-left-width	○	×
border-width	○	×
border	○	×
bottom	○	×
caption-side	○	×
clear	○	×
clip	○	×
color	○	×
content	○	×
counter-increment	○	○
counter-reset	○	○
cursor	×	×
direction	○	×
display	○	△
empty-cells	×	×
float	○	×
font-family	○	○
font-size	○	×
font-style	×	×
font-variant	○	×
font-weight	○	×
font	○	△
height	○	×
left	○	×
letter-spacing	○	×
line-height	○	×
list-style-image	○	×
list-style-position	○	×
list-style-type	○	△
list-style	○	△
margin-right margin-left	○	×
margin-top margin-bottom	○	×
margin	○	×
max-height	○	×
max-width	○	×
min-height	○	×
min-width	○	×
outline-color	○	○
outline-style	○	○
outline-width	○	○
outline	○	○
overflow	○	×
padding-top padding-right padding-bottom padding-left	○	×
padding	○	×
position	○	×
quotes	○	○
right	○	×
table-layout	○	×
text-align	○	○
text-decoration	○	○
text-indent	○	×
text-transform	○	○
top	○	×
unicode-bidi	○	○
vertical-align	○	×
visibility	○	○
white-space	○	△
width	○	×
word-spacing	○	×
z-index	○	×

主なCSSセレクタの対応状況
（○：対応／×：非対応）

セレクタ	対応状況
*	○
E	○
E[foo]	○
E[foo="bar"]	○
E[foo~="bar"]	○
E[foo^="bar"]	○
E[foo$="bar"]	○
E[foo*="bar"]	○
E[hreflang|="foo"]	○
E:root	○
E:nth-child(n)	○
E:nth-last-child(n)	×
E:nth-of-type(n)	○
E:nth-last-of-type(n)	×
E:first-child	○
E:last-child	×
E:first-of-type	×
E:last-of-type	×
E:only-child	×
E:only-of-type	×
E:empty	×
E:link E:visited	○
E:active E:hover E:focus	○
E:target	○
E:lang(foo)	○
E:enabled E:disabled	×
E:checked	×
E::first-line	○
E::first-letter	○
E::selection
E::before	○
E::after	○
E.class	○
E#id	○
E:not(s)	○
E F	○
E > F	○
E + F	○
E ~ F	○