initial commit

4 files changed, 562 insertions, 0 deletions

diff --git a/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
new file mode 100644
index 0000000000..8dfa99f3c8
--- /dev/null
+++ b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
@@ -0,0 +1,43 @@
+---
+title: 要素の寸法の決定
+slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+tags:
+  - API
+  - CSSOM View
+  - Client width
+  - Guide
+  - Intermediate
+  - client height
+  - offsetHeight
+  - offsetWidth
+  - size of displayed content
+translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+---
+<div>{{DefaultAPISidebar("CSSOM View")}}</div>
+
+<p>要素の幅と高さを決定するために調べることができるいくつかのプロパティがあり、どちらがニーズに適しているかを決定するのは難しい場合があります。 この記事は、あなたがその決定をするのを助けるように作られています。 これらのプロパティはすべて読み取り専用であることに注意してください。 要素の幅と高さを設定する場合は、{{CSSxRef("width")}} と {{CSSxRef("height")}}、またはそれをオーバーライドする {{CSSxRef("min-width")}} と {{CSSxRef("max-width")}}、および {{CSSxRef("min-height")}} と {{CSSxRef("max-height")}} プロパティを使用します。</p>
+
+<h2 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">それはどのくらいのスペースを使いますか？</h2>
+
+<p>表示されているコンテンツの幅、スクロールバー（存在する場合）、パディング、ボーダーを含んだ、要素が占めるスペースの合計量を知る必要がある場合は、{{DOMxRef("HTMLElement.offsetWidth")}} プロパティと {{DOMxRef("HTMLElement.offsetHeight")}} プロパティを使用します。 ほとんどの場合、要素に適用される変換がない場合、これらは {{DOMxRef("Element.getBoundingClientRect()")}} の幅と高さと同じです。 変換の場合、<code>offsetWidth</code> および <code>offsetHeight</code> は要素のレイアウトの幅と高さを返し、<code>getBoundingClientRect()</code> はレンダリングの幅と高さを返します。 例として、要素に <code>width: 100px;</code> と <code>transform: scale(0.5);</code> がある場合 <code>getBoundingClientRect()</code> は幅として 50 を返し、<code>offsetWidth</code> は 100 を返します。</p>
+
+<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<h2 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">表示されるコンテンツのサイズは？</h2>
+
+<p>パディングを含み、ボーダー、マージン、スクロールバーは含まない、実際に表示されるコンテンツが占めるスペースを知る必要がある場合は、{{DOMxRef("Element.clientWidth")}} プロパティと {{DOMxRef("Element.clientHeight")}} プロパティを使用します。</p>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">コンテンツの大きさはどれくらいですか？</h2>
+
+<p>コンテンツの実際のサイズを知る必要がある場合は、現在どれだけ表示されているかに関係なく、{{DOMxRef("Element.scrollWidth")}} プロパティと {{DOMxRef("Element.scrollHeight")}} プロパティを使用する必要があります。 これらは、スクロールバーの使用により現在一部のみが表示されている場合でも、要素のコンテンツ全体の幅と高さを返します。</p>
+
+<p>例えば、600x400 ピクセルの要素が 300x300 ピクセルのスクロールボックス内に表示されている場合、<code>scrollWidth</code> は 600 を返し、<code>scrollHeight</code> は 400 を返します。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: 要素の寸法と位置の測定</a>（英語）</li>
+</ul>
diff --git a/files/ja/web/api/css_object_model/index.html b/files/ja/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..0b2a186545
--- /dev/null
+++ b/files/ja/web/api/css_object_model/index.html
@@ -0,0 +1,207 @@
+---
+title: CSS オブジェクトモデル (CSSOM)
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+  - Overview
+  - Reference
+  - 概要
+translation_of: Web/API/CSS_Object_Model
+---
+<p>{{DefaultAPISidebar("CSSOM")}}</p>
+
+<p><strong>CSS オブジェクトモデル</strong>は CSS を JavaScript から操作するための API の集合です。これは DOM にとても良く似ていますが HTML ではなく CSS のためのものです。これにより CSS スタイルを動的に読んだり変更したりすることができます。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("AnimationEvent")}}</li>
+ <li>{{DOMxRef("CaretPosition")}}</li>
+ <li>{{DOMxRef("CSS")}}</li>
+ <li>{{DOMxRef("CSSCharsetRule")}}</li>
+ <li>{{DOMxRef("CSSConditionRule")}}</li>
+ <li>{{DOMxRef("CSSCounterStyleRule")}}</li>
+ <li>{{DOMxRef("CSSFontFaceRule")}}</li>
+ <li>{{DOMxRef("CSSFontFeatureValuesMap")}}</li>
+ <li>{{DOMxRef("CSSFontFeatureValuesRule")}}</li>
+ <li>{{DOMxRef("CSSGroupingRule")}}</li>
+ <li>{{DOMxRef("CSSImportRule")}}</li>
+ <li>{{DOMxRef("CSSKeyframeRule")}}</li>
+ <li>{{DOMxRef("CSSKeyframesRule")}}</li>
+ <li>{{DOMxRef("CSSMarginRule")}}</li>
+ <li>{{DOMxRef("CSSMediaRule")}}</li>
+ <li>{{DOMxRef("CSSNamespaceRule")}}</li>
+ <li>{{DOMxRef("CSSPageRule")}}</li>
+ <li>{{DOMxRef("CSSRule")}}</li>
+ <li>{{DOMxRef("CSSRuleList")}}</li>
+ <li>{{DOMxRef("CSSStyleDeclaration")}}</li>
+ <li>{{DOMxRef("CSSStyleSheet")}}</li>
+ <li>{{DOMxRef("CSSStyleRule")}}</li>
+ <li>{{DOMxRef("CSSSupportsRule")}}</li>
+ <li>{{DOMxRef("CSSVariablesMap")}}</li>
+ <li>{{DOMxRef("CSSViewportRule")}}</li>
+ <li>{{DOMxRef("ElementCSSInlineStyle")}}</li>
+ <li>{{DOMxRef("FontFace")}}</li>
+ <li>{{DOMxRef("FontFaceSet")}}</li>
+ <li>{{DOMxRef("FontFaceSetLoadEvent")}}</li>
+ <li>{{DOMxRef("GeometryUtils")}}</li>
+ <li>{{DOMxRef("GetStyleUtils")}}</li>
+ <li>{{DOMxRef("LinkStyle")}}</li>
+ <li>{{DOMxRef("MediaList")}}</li>
+ <li>{{DOMxRef("MediaQueryList")}}</li>
+ <li>{{DOMxRef("MediaQueryListEvent")}}</li>
+ <li>{{DOMxRef("MediaQueryListListener")}}</li>
+ <li>{{DOMxRef("Screen")}}</li>
+ <li>{{DOMxRef("StyleSheet")}}</li>
+ <li>{{DOMxRef("StylesheetList")}}</li>
+ <li>{{DOMxRef("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p>他にも CSSOM に関する仕様書で拡張されているインターフェイスがあります。 {{DOMxRef("Document")}}, {{DOMxRef("Window")}}, {{DOMxRef("Element")}}, {{DOMxRef("HTMLElement")}}, {{DOMxRef("HTMLImageElement")}}, {{DOMxRef("Range")}}, {{DOMxRef("MouseEvent")}}, {{DOMxRef("SVGElement")}}</p>
+
+<h3 id="CSS_Typed_Object_Model" name="CSS_Typed_Object_Model">CSS 型付きオブジェクトモデル {{Experimental_Inline}}</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("CSSImageValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSKeywordValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathInvert")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathMax")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathMin")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathNegate")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathProduct")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathSum")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMatrixComponent")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSNumericArray")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSNumericValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSPerspective")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSPositionValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSRotate")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSScale")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSSkew")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSSkewX")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSSkewY")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSStyleValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSTransformComponent")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSTransformValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSTranslate")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSUnitValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSUnparsedValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSVariableReferenceValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("StylePropertyMap")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("StylePropertyMapReadOnly")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Obsolete_CSSOM_interfaces" name="Obsolete_CSSOM_interfaces">廃止された CSSOM インターフェイス {{Obsolete_Inline}}</h3>
+
+<p>{{Obsolete_Header}}</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("CSSPrimitiveValue")}} {{Obsolete_Inline}}</li>
+ <li>{{DOMxRef("CSSValue")}} {{Obsolete_Inline}}</li>
+ <li>{{DOMxRef("CSSValueList")}} {{Obsolete_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Tutorials" name="Tutorials">チュートリアル</h2>
+
+<ul>
+ <li><a href="/ja/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a> (これは DHTML/Ajax 時代に作られたのでいくらか更新が必要です)。</li>
+ <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面の向きの管理</a></li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Typed OM")}}</td>
+   <td>{{Spec2("CSS Typed OM")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Painting API")}}</td>
+   <td>{{Spec2("CSS Painting API")}}</td>
+   <td>{{DOMxRef("CSS")}} インターフェイスを {{DOMxRef("CSS.paintWorklet","paintWorklet")}} 静的プロパティで拡張。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>{{DOMxRef("Screen")}} および {{DOMxRef("MediaQueryList")}} インターフェイスと {{DOMxRef("MediaQueryListEvent")}} イベントと {{DOMxRef("MediaQueryListListener")}} イベントリスナーを定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>{{DOMxRef("CSS")}} インターフェイスを拡張し、最新の CSSOM 仕様書の基礎を提供。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td>{{DOMxRef("CSS")}} インターフェイスを定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>この機能のすべてはさまざまなブラウザーで何年かけて少しずつ追加されてきました。これは簡単なページにまとめることができないとても複雑なプロセスでした。利用できるかについてはそれぞれのインターフェイスを参照してください。</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a></li>
+ <li><a href="/ja/docs/Web/Houdini/">Houdini</a></li>
+</ul>
diff --git a/files/ja/web/api/css_object_model/managing_screen_orientation/index.html b/files/ja/web/api/css_object_model/managing_screen_orientation/index.html
new file mode 100644
index 0000000000..18c09fd233
--- /dev/null
+++ b/files/ja/web/api/css_object_model/managing_screen_orientation/index.html
@@ -0,0 +1,175 @@
+---
+title: 画面の向きを制御する
+slug: Web/API/CSS_Object_Model/Managing_screen_orientation
+tags:
+  - Advanced
+  - CSSOM View
+  - Guide
+  - Screen Orientation
+translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
+---
+<p>{{DefaultAPISidebar("Screen Orientation API")}}{{SeeCompatTable}}</p>
+
+<p>画面の向きは、<a href="/ja/docs/WebAPI/Detecting_device_orientation">端末の向き</a>と異なる場合があります。端末が自身の向きを検知することができない場合でも、画面には向きがあります。また端末が自身の向きを知ることが可能であっても、Web アプリケーションのインターフェイスを維持または適合するために画面の向きを制御できるとよいでしょう。</p>
+
+<p>CSS と JavaScript の双方に、画面の向きを扱う方法がいくつかあります。第一の方法は <a href="/ja/docs/CSS/Media_queries#orientation">orientation メディアクエリ</a>です。これはブラウザウィンドウがランドスケープモード (すなわち幅が高さより大きい) かポートレートモード (高さが幅より大きい) かに基づいて、CSS を使用してコンテンツのレイアウトを調整できます。</p>
+
+<p>第二の方法は、画面自身の現在の向きを取得して最終的に固定するために使用できる、JavaScript の Screen orientation API です。</p>
+
+<h2 id="Adjusting_layout_based_on_the_orientation" name="Adjusting_layout_based_on_the_orientation">向きに基づいてレイアウトを調整する</h2>
+
+<p>向きの変化についてのもっとも一般的なケースのひとつが、端末の向きに基づいてコンテンツのレイアウトを変更したいときです。例えば、端末のディスプレイで最長の寸法に沿ってボタンバーを引き伸ばしたいでしょう。メディアクエリを使用して、簡単かつ自動的にこれを行うことができます。</p>
+
+<p>以下の HTML コードによる例を見てみましょう。</p>
+
+<pre class="brush: html">&lt;ul id="toolbar"&gt;
+  &lt;li&gt;A&lt;/li&gt;
+  &lt;li&gt;B&lt;/li&gt;
+  &lt;li&gt;C&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
+</pre>
+
+<p>画面の向きに応じて固有のスタイルを扱うために、CSS で orientation メディアクエリに頼ります。</p>
+
+<pre class="brush: css">/* 始めに、共通のスタイルを定義しましょう */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+</pre>
+
+<p>共通のスタイルを定義したら、続いて向きに対して特有のケースの定義を始めましょう。</p>
+
+<pre class="brush: css">/* 縦長の場合はツールバーを上に置きたい */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* 横長の場合はツールバーを左端に付けたい */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+</pre>
+
+<p>結果は以下のとおりです。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">縦長</th>
+   <th scope="col">横長</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td>
+   <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>メモ:</strong> orientation メディアクエリは、実際は端末の向きではなくブラウザウィンドウ (または iframe) の向きに応じて適用されます。</p>
+</div>
+
+<h2 id="Locking_the_screen_orientation" name="Locking_the_screen_orientation">画面の向きを固定する</h2>
+
+<div class="warning">
+<p><strong>警告:</strong> この API は実験的であり現在は <code>moz</code> 接頭辞付きで、<a href="/ja/docs/Mozilla/Firefox_OS" title="Mozilla/Firefox_OS">Firefox OS</a> および <a href="/ja/docs/Mozilla/Firefox_for_Android" title="Mozilla/Firefox_for_Android">Android 版 Firefox</a> で使用できます。また、Windows 8.1 以降の Internet Explorer では <code>ms</code> 接頭辞付きで使用できます。</p>
+</div>
+
+<p>一部の端末 (主にモバイル端末) は、画面に表示している内容をいつでも読めるようにするため、端末の向きに基づいて画面の向きを動的に変更できます。この動作はテキストコンテンツにはとても適していますが、そのような変化を好まないコンテンツも存在します。例えば端末の向きに基づくゲームでは、そのような向きの変化によって混乱してしまうでしょう。</p>
+
+<p>Screen Orientation API は、そのような変化を抑制したり制御したりするものです。</p>
+
+<h3 id="Listening_orientation_change" name="Listening_orientation_change">向きの変化をリッスンする</h3>
+
+<p>{{event("orientationchange")}} イベントは、端末が画面の向きを変更する度に発生します。また、向きそのものを {{domxref("Screen.orientation")}} プロパティで読み取ることが可能です。</p>
+
+<pre class="brush: js">screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + Screen.orientation);
+});
+</pre>
+
+<h3 id="Preventing_orientation_change" name="Preventing_orientation_change">向きの変更を抑制する</h3>
+
+<p>任意の Web アプリケーションが、自身の要望に合うように画面を固定できます。{{domxref("Screen.lockOrientation()")}} メソッドを使用して画面の固定を、また {{domxref("Screen.unlockOrientation()")}} メソッドで固定の解除を行います。</p>
+
+<p>{{domxref("Screen.lockOrientation()")}} は、適用する固定方式を定義する文字列 (または一連の文字列) を受け入れます。受け入れる値: <code>portrait-primary</code>、<code>portrait-secondary</code>、<code>landscape-primary</code>、<code>landscape-secondary</code>、<code>portrait</code>、<code>landscape</code> (それぞれの値について知るために {{domxref("Screen.lockOrientation")}} をご覧ください)。</p>
+
+<pre class="brush: js">Screen.lockOrientation('landscape');</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> 画面の固定はウェブアプリケーションに従属します。アプリケーション A が <code>landscape</code> に固定、またアプリケーション B が <code>portrait</code> に固定した場合は、アプリケーション A から B に、または B から A に切り替えても {{event("orientationchange")}} イベントは発生しません。これは、双方のアプリケーションが自身の向きを維持しているためです。</p>
+
+<p>ただし、固定の要求を満たすために向きを変更しなければならない場合は、向きの固定で {{event("orientationchange")}} イベントが発生してもかまいません。</p>
+</div>
+
+<h2 id="Firefox_OS_and_Android_Orientation_lock_using_the_manifest" name="Firefox_OS_and_Android_Orientation_lock_using_the_manifest">Firefox OS および Android: マニフェストを使用して向きをロックする</h2>
+
+<p>Firefox OS および Android 版 Firefox (近いうちにデスクトップ版 Firefox も対応予定) 特有の向きをロックする方法として、アプリのマニフェストで <a href="/ja/Apps/Build/Manifest#orientation">orientation</a> フィールドを設定できます。例を示します:</p>
+
+<pre class="brush: json">"orientation": "portrait"</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Screen.orientation")}}</li>
+ <li>{{domxref("Screen.lockOrientation()")}}</li>
+ <li>{{domxref("Screen.unlockOrientation()")}}</li>
+ <li>{{domxref("Screen.onorientationchange")}}</li>
+ <li><a href="/ja/docs/CSS/Media_queries#orientation" title="CSS/Media queries#orientation">orientation メディアクエリ</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li>
+</ul>
diff --git a/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html
new file mode 100644
index 0000000000..7a73cb4b15
--- /dev/null
+++ b/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html
@@ -0,0 +1,137 @@
+---
+title: 動的なスタイル情報の利用
+slug: Web/API/CSS_Object_Model/Using_dynamic_styling_information
+tags:
+  - Beginner
+  - CSSOM
+translation_of: Web/API/CSS_Object_Model/Using_dynamic_styling_information
+---
+<p>{{DefaultAPISidebar("CSSOM")}}</p>
+
+<p>DOM の一部である CSS Object Model (CSSOM) では、 CSS に関する様々な情報を操作するインターフェイスを公開しています。これらは <em>DOM Level 2 Style</em> 勧告で定義されたのち、現在ではそれを置き換える <em>CSS Object Model (CSSOM)</em> で規格化されています。</p>
+
+<p>多くの場面で、可能であれば {{ domxref("element.className", "className") }} プロパティを使ってクラスを操作することが推奨されます。最終的なスタイルをひとつのスタイルシートで制御できる上、JavaScript コードはスタイルの詳細を気にすることなく、正確な詳細はスタイルシートに任せたまま、作成・操作する各セクションの全体的な意味づけに注目できます。しかしながら（スタイルシート全体もしくはある要素についての）個々のルールを操作する方が便利なこともあり、だいぶん後でその方法を紹介します。なおスタイルシートを操作するといっても物理的なドキュメントを操作するわけではなく、要素の DOM スタイルのような内部表現を操作しているだけということに注意してください。</p>
+
+<p>基本となる <code>style</code> オブジェクトは {{domxref("Stylesheet")}} インターフェイスと {{domxref("CSSStylesheet")}} インターフェイスを公開しています。これらのインターフェイスが備える <code>insertRule</code>, <code>selectorText</code>, <code>parentStyleSheet</code> などのメンバーを使うことで、CSS スタイルシートを構成する個々のスタイルにアクセス・操作できます。</p>
+
+<p><code>document</code> から <code>style</code> オブジェクトの集合を取得するには {{domxref("document.styleSheets")}} プロパティを使い、インデックスを付けることで個々のオブジェクトにアクセスできます (ドキュメント内の最初のスタイルシートなら <code>document.styleSheets[0]</code> といった具合に)。</p>
+
+<h2 id="Modify_a_stylesheet_rule" name="Modify_a_stylesheet_rule">CSSOM を使ってスタイルシートを変更する</h2>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Modifying a stylesheet rule with CSSOM&lt;/title&gt;
+&lt;style type="text/css"&gt;
+body {
+ background-color: red;
+}
+&lt;/style&gt;
+&lt;script type="text/javascript"&gt;
+var stylesheet = document.styleSheets[0];
+stylesheet.cssRules[0].style.backgroundColor="blue";
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+body の背景色に対するスタイルシートを JavaScript で変更しています。
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{ EmbedLiveSample('Modify_a_stylesheet_rule') }}</p>
+
+<p>DOM の <code>style</code> プロパティで利用可能なプロパティの一覧は <a href="/ja/docs/DOM/CSS" title="en/DOM/CSS">DOM CSS プロパティリスト</a> に載っています。</p>
+
+<p>CSS の文法を使ってドキュメントのスタイルを変更したい場合は、ルールを追加するか、<code>innerHTML</code> に CSS を設定した {{HTMLElement("style")}} を挿入します。</p>
+
+<h2 id="Modify_an_element_style" name="Modify_an_element_style">要素のスタイルを変更する</h2>
+
+<p>要素の {{domxref("HTMLElement.style", "style")}} プロパティ（後述する "DOM Style オブジェクト" も参照）を使って個々の要素のスタイルを取得または設定することもできます。ただしこのプロパティはインラインに指定された style 属性しか考慮しません。つまり <code>&lt;td style="background-color: lightblue"&gt;</code> であれば "<code>background-color:lightblue</code>" という文字列、もしくは <code>element.style.propertyName</code> を通してこのスタイルにアクセスできますが、スタイルシートで定義された他のスタイルの存在は考慮されません。</p>
+
+<p>また要素のこのプロパティの設定値は、よそでこの要素に定義されたスタイルよりも優先されます。 例えばここで <code>border</code> プロパティを設定した場合、 その要素に対して head 部や外部のスタイルシートで定義されていた <code>border</code> プロパティの指定を上書きすることになります。しかし、その要素に適用される他のプロパティ、 padding や margin や font などには影響を与えません。</p>
+
+<p>個別の要素のスタイルを変更するには次のようにします。</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;simple style example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function alterStyle(elem) {
+  elem.style.background = 'green';
+}
+
+function resetStyle(elemId) {
+  elem = document.getElementById(elemId);
+  elem.style.background = 'white';
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+#p1 {
+  border: solid blue 2px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;!-- スタイルを変える要素のオブジェクトとして 'this' を渡す --&gt;
+&lt;p id="p1" onclick="alterStyle(this);"&gt;
+ クリックして背景色を変更
+&lt;/p&gt;
+
+&lt;!-- スタイルを変える要素のID 'p1' を渡す --&gt;
+&lt;button onclick="resetStyle('p1');"&gt;背景色をリセット&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Modify_an_element_style') }}</p>
+
+<p><code>document.defaultView</code> オブジェクトの {{domxref("window.getComputedStyle", "getComputedStyle()")}} メソッドは、その要素に対して計算された全てのスタイルを返します。このメソッドの使い方について詳しくはサンプルの <a href="/en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle" title="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a> を参照してください。</p>
+
+<h2 id="DOM_Style_Object" name="DOM_Style_Object">DOM Style オブジェクト</h2>
+
+<p><code>style</code> オブジェクトは独立したスタイル指定です。 <code><a href="/en/DOM/document.styleSheets" title="en/DOM/document.styleSheets">document.styleSheets</a></code> から個別にルールを取得するのとは異なり、 style オブジェクトは <code>document</code> またはスタイルが適用される要素から取得されます。ある特定の要素の<em>インライン</em>スタイルを表します。</p>
+
+<p>この記事で例示した CSS プロパティに限らず、 <code>style</code> オブジェクトを通して要素のスタイルを個別に操作できるという点が重要です。</p>
+
+<div id="DOM_Style_Object_code_sample">
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;title&gt;style Property Example&lt;/title&gt;
+  &lt;link rel="StyleSheet" href="example.css" type="text/css"&gt;
+  &lt;script type="text/javascript"&gt;
+    function stilo() {
+      document.getElementById('d').style.color = 'orange';
+    }
+    function resetStyle() {
+      document.getElementById('d').style.color = 'black';
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+ &lt;body&gt;
+  &lt;div id="d" class="thunder"&gt;Thunder&lt;/div&gt;
+  &lt;button onclick="stilo()"&gt;テキストの色を変える&lt;/button&gt;
+  &lt;button onclick="resetStyle()"&gt;テキストの色を元に戻す&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('DOM_Style_Object_code_sample') }}</p>
+
+<p>スタイルの <strong>media</strong> や <strong>type</strong> は存在しないこともあります。</p>
+
+<h3 id="DOM_Style_Object_SetAttribue" name="DOM_Style_Object_SetAttribue">setAttribute メソッドの利用</h3>
+
+<p>要素のスタイルの変更には、要素の <code><a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a></code> メソッドを使うこともできます。</p>
+
+<pre class="brush: js notranslate">var el = document.getElementById('some-element');
+el.setAttribute('style', 'background-color:darkblue;');
+</pre>
+
+<p><code>setAttribute</code> を使うと要素の <code>style</code> オブジェクトで定義されていた既存の <code>style</code> プロパティの指定は全て失われることに注意が必要です。もし上の例に使った <code><var>some-element</var></code> 要素の <code>style</code> 属性がインラインで <code>style="font-size: 18px"</code> のように指定されていた場合、この指定は <code>setAttribute</code> を使うことで失われます。</p>