* CSS Viewport ** 仕様書 [2] -[[CSS 2.1]] --[CSECTION@en[9.1.1 The viewport]] --[CSECTION@en[10.1 Definition of "containing block"]] --[CSECTION@en[11.1.1 Overflow: the [CODE(CSS)@en['overflow']] property]] --[CSECTION@en[14.2.1 Background properties: [CODE(CSS)['background-color']], [CODE(CSS)['background-image']], [CODE(CSS)['background-repeat']], [CODE(CSS)['background-attachment']], [CODE(CSS)['background-position']], and [CODE(CSS)['background']]]] ** 説明 [3] [[連続媒体]]の[[利用者エージェント]]は、通常[[利用者]]に対して [DFN@en[[[viewport]]]] を提供します。[[利用者]]は [[viewport]] を通じて[[文書]]にアクセスできます。 [[Viewport]] は[[窓]]その他の[RUBYB[[[画面]]]@en[screen]]上の[RUBYB[表示領域]@en[viewing area]]です。 [SRC@en[[[CSS 2.1]] 9.1.1]] [4] [[利用者エージェント]]は [[viewport]] の大きさが変更された時に[[文書]]の[[配置]]を変更して[['''構いません''']]。 [SRC@en[[[CSS 2.1]] 9.1.1.]] ** 画布との関係 [5] [[Viewport]] が[[画布]]中の[[文書]]が[[レンダリング]]されている[RUBYB[[[領域]]]@en[area]]より小さい時、 [[利用者エージェント]]は[[スクロール機構]]を提供する[['''べきです''']]。 [SRC@en[[[CSS 2.1]] 9.1.1]] [6] [[画布]]1つに対して [[viewport]] は高々1つです。 [SRC@en[[[CSS 2.1]] 9.1.1]] ** 包含ブロックとしての viewport [9] [[連続媒体]]では、[[根要素]]の基準となる[[包含ブロック]]は [[viewport]] の[[次元]]を持つ[[矩形]]です。これを[DFN[[[初期包含ブロック]]]]と呼びます。 [[画布]]の[[原点]]がその[[原点]]となります。 [SRC@en[[[CSS 2.1]] 10.1]] *** 固定配置 [8] [CODE(CSS)@en[[[position]]: [[fixed]]]] ([[固定配置]]) の[[箱]]については、 [[包含ブロック]]が [[viewport]] により[[確立]]されます。 [SRC@en[[[CSS 2.1]] 9.6.1, 10.1]] [7] [CODE(CSS)@en[[[position]]: [[fixed]]]] ([[固定配置]]) の[[箱]]は、 -[[媒体型]]が [CODE(CSS)@en[[[handheld]]]]、[CODE(CSS)@en[[[projection]]]]、 [CODE(CSS)@en[[[screen]]]]、[CODE(CSS)@en[[[tty]]]]、 [CODE(CSS)@en[[[tv]]]] の場合、 [[viewport]] に対して固定され、[[スクロール]]によって移動しません。 -[[媒体型]]が [CODE(CSS)@en[[[print]]]] の場合、[[頁]]が [[viewport]] を通じて見られる場合 (例えば[[印刷プレビュー]]の時) であっても [[viewport]] ではなく[[頁箱]]に対して固定されます。 [SRC@en[[[CSS 2.1]] 9.3.1]] [10] [[固定配置要素]]に関する[[静的位置]]の算出においては、 [[固定配置要素]]の[[包含ブロック]]は [[viewport]] ではなく[[初期包含ブロック]]であるものとみなします。 [SRC@en[[[CSS 2.1]] 10.3.7, 10.6.4]] ;; [[初期包含ブロック]]は常に[[画布]]の[[原点]]に錨付けされていますが、 [[viewport]] の[[画布]]に対する位置は変化します。 ** 背景 [12] [CODE(CSS)@en[[[background-attachment]]: [[fixed]]]] は[[背景画像]]を [[viewport]] に対して固定します [SRC@en[[[CSS 2.1]] 14.2.1]]。 [13] >>12 の場合、 [CODE(CSS)@en[[[background-attachment]]]] は [[viewport]] を基準に解釈されます [SRC@en[[[CSS 2.1]] 14.2.1]]。 ** スクロール [11] [[HTML文書]]で [CODE(HTMLe)@en[[[html]]]] [[要素]]の [CODE(CSS)@en[[[overflow]]]] [[算出値]]が [CODE(CSS)@en[[[visible]]]] の場合、 [CODE(HTMLe)@en[[[body]]]] [[要素]]の [CODE(CSS)@en[[[overflow]]]] [[算出値]]が [[viewport]] に適用されます。 それ以外の場合、[[根要素]]の [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に適用されます。 [[Viewport]] に適用された[[要素]]の [CODE(CSS)@en[[[overflow]]]] の[[使用値]]は [CODE(CSS)@en[[[visible]]]] になります。 [[Viewport]] の [CODE(CSS)@en[[[overflow]]]] が [CODE(CSS)@en[[[visible]]]] の場合、 [CODE(CSS)@en[[[auto]]]] と解釈されます。 [SRC@en[[[CSS 2.1]] 11.1.1]] [26] [[スクロール・バー]]が現れる時の [[viewport]]、あるいは[[初期包含ブロック]]に[[スクロール・バー]]の領域が含まれるのかどうかは不明です。 普通の[[箱]]の場合を類推すると [[viewport]] の[[内容辺]]相当 = [[詰め辺]]相当の外側で、 [[初期包含ブロック]]に含まれないと解釈するのが妥当だと思いますが・・・。 ** 内容辺、境界辺 [14] 本来 [[CSS]] の [[viewport]] は1つの[[矩形]]ですが、 便宜上[[箱]]同様に[DFN[[RUBYB[[[内容辺]]]@en[content edge]]]]/[DFN[[RUBY[内容箱]@en[content box]]]]、 [DFN[[RUBYB[[[境界辺]]]@en[border edge]]]]/[DFN[[RUBY[境界箱]@en[border box]]]]という用語を使います。 [15] 通常 [[CSS]] によって何らかの形でアクセス可能なのは[[内容箱]]・[[スクロール・バー]]とその内側だけです。 その外側の[[境界線]]は、あったとしても [[Webブラウザ]]の[[利用者界面]]に属するものです。 [16] [[WinIE]] の[[奇癖モード]]では、 [CODE(HTMLe)@en[[[body]]]] [[要素]]の [CODE(CSS)@en[[[border]]]] が [[viewport]] の[[境界領域]]になります。 [CODE(CSS)@en[[[border]]]] を指定しない場合や[[標準モード]]では既定の境界が[[レンダリング]]され、 [[CSSOM]] [CODE(DOMa)@en[[[offset[VAR[*]]]]]] などに影響します。 ** CSSOM による大きさの取得 *** 内容箱 **** Firefox [17] - [[無奇癖モード]] -- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]] - [[奇癖モード]] -- [CODE(JS)@en[[[document]].[[body]].[[client*]]]] --- ただし、 [CODE(HTMLe)@en[[[html]]]], [CODE(HTMLe)@en[[[body]]]] の両方が [CODE(CSS)@en[[[overflow]]]] による[[スクロール・バー]]を持つ場合を除きます。 **** Safari [18] - [[無奇癖モード]] -- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]] - [[奇癖モード]] -- [CODE(JS)@en[[[document]].[[body]].[[client*]]]] ([CODE(DOMa)@en[[[clientTop]]]]、[CODE(DOMa)@en[[[clientLeft]]]] に [CODE(HTMLe)@en[[[body]]]] の [CODE(CSS)@en[[[border-top-width]]]]、 [CODE(CSS)@en[[[border-left-width]]]] が入ります。) **** Opera [20] - [[無奇癖モード]] -- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]] - [[奇癖モード]] -- [CODE(JS)@en[[[document]].[[body]].[[client*]]]] -- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]] (横方向のみ) **** WinIE [22] - [[無奇癖モード]] -- [CODE(JS)@en[[[document]].[[documentElement]].[[offset*]]]] -- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]] ([[境界辺]]が[[原点]]) - [[奇癖モード]] -- [CODE(JS)@en[[[document]].[[body]].[[client*]]]] *** 内容箱 + スクロール・バー **** Firefox [24] - [CODE(JS)@en[[[window.innerWidth]]]], [CODE(JS)@en[[[document.innerHeight]]]] **** Safari [25] - [CODE(JS)@en[[[window.innerWidth]]]], [CODE(JS)@en[[[document.innerHeight]]]] **** Opera [19] - [[奇癖モード]] -- [CODE(JS)@en[[[document]].[[body]].[[offset*]]]] - [CODE(JS)@en[[[window.innerWidth]]]], [CODE(JS)@en[[[document.innerHeight]]]] *** 境界箱 **** WinIE [21] -[[奇癖モード]] -- [CODE(JS)@en[[[document]].[[documentElement]].[[offset*]]]] -- [CODE(JS)@en[[[document]].[[body]].[[offset*]]]] -- [CODE(JS)@en[[[document]].[[documentElement]].[[scroll*]]]] - [CODE(JS)@en[[[document]].[[documentElement]].[[getBoundingClientRect]]()]] *** Viewport と初期包含ブロックのずれ [23] - 原則として -- [[無奇癖モード]]: [CODE(JS)@en[[[document]].[[documentElement]].[[scroll*]]]] -- [[奇癖モード]]: [CODE(JS)@en[[[document]].[[body]].[[scroll*]]]] --- ただし、[[Firefox]] で [CODE(HTMLe)@en[[[html]]]], [CODE(HTMLe)@en[[[body]]]] の両方が [CODE(CSS)@en[[[overflow]]]] による[[スクロール・バー]]を持つ場合を除きます。 - [[Safari]] では常に: [CODE(JS)@en[[[document]].[[body]].[[scroll*]]]] - [CODE(JS)@en[[[window.pageXOffset]]]], [CODE(JS)@en[[[window.pageYOffset]]]] ([[WinIE]] 以外) - [CODE(JS)@en[[[window.scrollX]]]], [CODE(JS)@en[[[window.scrollY]]]] ([[WinIE]], [[Opera]] 以外) * [CODE(HTML)@en[]] [1] [CITE[Mapion touch - A blog? with Σαιτω]] ([TIME[2008-02-09 23:15:11 +09:00]] 版) [27] [CITE@ja[ニンテンドーDSiブラウザー:Q&A]] ([TIME[2008-12-16 10:58:36 +09:00]] 版) > Q.19 > ニンテンドーDSiブラウザーでうまく表示できるホームページを作りたいのですが・・・ > A.19 > を HTML の ... 内に指定することで、幅240px高さ352pxで、横スクロール縮小表示無く、2画面が縦につながった状態でHTMLを表示させることができます。 > ページレイアウトをpx(ピクセル)単位ではなくて、%(パーセンテージ)を基準として行われている場合は、 を指定してください。 [28] [CITE@ja[Travellers Tales : iPod touch/iPhone の viewport 属性の区切りはセミコロンではなくカンマ]] ([TIME[2009-01-19 15:29:59 +09:00]] 版) [29] [CITE[IRC logs: freenode / #whatwg / 20090915]] ([TIME[2009-10-31 11:41:27 +09:00]] 版) [30] [CITE@en[Safari Dev Center: Safari HTML Reference: Supported Meta Tags]] ([TIME[2009-12-09 23:16:02 +09:00]] 版) [31] [CITE@en-us[Developing Web Applications for Internet Explorer Mobile 6 on Windows Mobile 6.5]] ([TIME[2010-06-09 17:30:37 +09:00]] 版) [32] [CITE@en[CSS Device Adaptation]] ( ([TIME[2010-11-03 06:00:41 +09:00]] 版))