path: root/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html

---
title: メディア
slug: conflicting/Web/CSS/Media_Queries/Using_media_queries
tags:
  - CSS
  - Example
  - Guide
  - Intermediate
  - NeedsMarkupWork
  - NeedsUpdate
  - Web
  - ガイド
  - 中級者
translation_of: Web/Progressive_web_apps/Responsive/Media_types
original_slug: Web/Progressive_web_apps/Responsive/Media_types
---
<div>{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/Responsive/")}}</div>

<p class="summary">これは <a href="/ja/docs/Web/Guide/CSS/Getting_Started">CSS の第一歩</a>チュートリアル第14章で、第1部の最終章です。このチュートリアルの多くのページでは、 CSS プロパティや値と、そのコンテンツを表示する方法を指定するための使い方に焦点を当てていました。</p>

<h2 class="clearLeft" id="Information_Media" name="Information_Media">メディアについて</h2>

<p>CSS の目的は、コンテンツがどのようにユーザーに表示されるのかを指定することです。この表示には複数の表現形式をとることができます。</p>

<p>例えば、おそらくあなたはこれをディスプレイ付きの端末で読んでいるでしょう。しかし、大画面に映して多くの人に読んでもらいたいと思うこともありますし、印刷したいと思ってう場合もあるでしょう。これらの様々なメディアには、それぞれ異なる特性があります。 CSS はメディアの種類に応じてコンテンツを提示する機能を持っています。</p>

<p>あるメディア種別に特有の規則を定義するには、 {{CSSxRef("@media")}} に続けてメディア種別を記述し、さらに続けて波括弧の中に規則を記述します。</p>

<div class="tuto_example">
<h4 class="tuto_type" id="Example" name="Example">例</h4>

<p>あるウェブサイトの文書に、主要なサイトメニューを含むナビゲーション領域が設けられているとします。</p>

<p>マークアップ言語では、ナビゲーション領域の親要素は <strong>id</strong> <code>nav-area</code> を持っています ({{HTMLVersionInline(5)}} では、これは <strong>id</strong> 属性を持つ {{HTMLElement("div")}} 要素での代わりに、{{HTMLElement("nav")}} 要素でマークアップできます)。</p>

<p>文書を印刷するときにはナビゲーション領域は無意味ですから、この CSS (下記) では、文書を印刷する際にはナビゲーション領域を削除します。</p>

<pre class="brush:css">@media print {
  #nav-area {display: none;}
  }
</pre>
</div>

<p>よく知られたメディア種別には次のようなものがあります。</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>screen</code></td>
   <td>端末のカラーディスプレイ</td>
  </tr>
  <tr>
   <td><code>print</code></td>
   <td>ページ単位に印刷されるメディア</td>
  </tr>
  <tr>
   <td style="padding-right: 1em;"><code>projection</code></td>
   <td>プロジェクター</td>
  </tr>
  <tr>
   <td><code>all</code></td>
   <td>すべてのメディア (既定値)</td>
  </tr>
 </tbody>
</table>

<div class="tuto_details">
<h4 class="tuto_type" id="More_details" name="More_details">より詳しく</h4>

<p>ある規則の集合にメディア種別を定義する方法は、他にもあります。</p>

<p>文書のマークアップ言語によっては、スタイルシートが文書にリンクされたときに、メディア種別を定義できるものがあります。例えば、 HTML では <code>LINK</code> 要素の <code>media</code> 属性を使ってメディア種別を指定することができます。</p>

<p>CSS ではスタイルシートの初めに {{CSSxRef("@import")}} を使って、 URL から他のスタイルシートを読み込むことができ、オプションとしてメディア種別を指定することができます。</p>

<p>これらは、様々なメディア種別のスタイル付け規則を異なるファイルに分離する方法です。</p>

<p>メディア種別の完全な説明は、 CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> をご覧ください。</p>

<p>{{CSSxRef("display")}} プロパティのその他の利用例は、このチュートリアルの後で登場する <a href="/ja/docs/Web/Guide/CSS/Getting_Started/XML_data">XML データ</a> のページにあります。</p>
</div>

<h3 id="Printing" name="Printing">印刷</h3>

<p>CSS には、印刷や、一般のページ付けされたメディアに特有の対応があります。</p>

<p>{{CSSxRef("@page")}} 規則で、ページマージンを設定できます。両面印刷には、マージンを <code>@page:left</code> と <code>@page:right</code> で別々に指定できます。</p>

<p>印刷メディアでは通常、インチ (<code>in</code>) や ポイント (<code>pt</code> = 1/72 inch)、センチメートル (<code>cm</code>) や ミリメートル (<code>mm</code>) など、適切な単位を使います。フォントの大きさにあわせるために em (<code>em</code>) を使ったり、パーセント値 (<code>%</code>) を使ったりするのも同様に適切です。</p>

<p>ページ境界における文書の内容の分割方法を、 {{CSSxRef("page-break-before")}}, {{CSSxRef("page-break-after")}}, {{CSSxRef("page-break-inside")}} プロパティを使って制御することができます。</p>

<div class="tuto_example">
<h4 class="tuto_type" id="Example_2" name="Example_2">例</h4>

<p>次の規則はページの四辺の余白を1インチに設定します。</p>

<pre class="brush:css">@page {margin: 1in;}
</pre>

<p>次の規則は、すべての <small>H1</small> 要素が確実に新しいページで始まるようにします。</p>

<pre class="brush:css">h1 {page-break-before: always;}
</pre>
</div>

<div class="tuto_details">
<h4 class="tuto_type" id="More_details_2" name="More_details_2">さらに詳しく</h4>

<p>ページ付メディアへの CSS の対応の詳細は、 CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> をご覧ください。</p>

<p>CSS の他の機能と同様に、印刷はブラウザーの選択とその設定に依存します。例えば、 Mozilla ブラウザーでは、印刷用に既定の余白、ヘッダー、フッターが用意されています。印刷される書式を完全に制御することはできないことを覚えておいてください。印刷時にすべてのユーザーのブラウザーの選択や設定を予測することは不可能です。</p>
</div>

<h3 id="User_interfaces" name="User_interfaces">ユーザーインターフェイス</h3>

<p>CSS は、コンピューターのディスプレイのようなユーザーインターフェイスを持つ端末のために、特別なプロパティを持っています。これらのプロパティは、ユーザーが作業するインターフェイスの近哲の表示方法を動的に変更することができます。</p>

<p>5つの特別なセレクターがあります。</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><strong>セレクター</strong></td>
   <td><strong>選択対象</strong></td>
  </tr>
  <tr>
   <td><code>E{{CSSxRef(":hover")}}</code></td>
   <td>ポインターが上にあるすべての E 要素</td>
  </tr>
  <tr>
   <td><code>E{{CSSxRef(":focus")}}</code></td>
   <td>キーボードフォーカスを持つすべての E 要素</td>
  </tr>
  <tr>
   <td><code>E{{CSSxRef(":active")}}</code></td>
   <td>現在のユーザーの行動に関係する E 要素</td>
  </tr>
  <tr>
   <td><code>E{{CSSxRef(":link")}}</code></td>
   <td>ユーザーが未訪問の URL へのハイパーリンクのある E 要素</td>
  </tr>
  <tr>
   <td><code>E{{CSSxRef(":visited")}}</code></td>
   <td>ユーザーが訪問済みの URL へのハイパーリンクのある E 要素</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>注: </strong>:visited セレクターで獲得できる情報は {{gecko("2.0")}} で制限されました。詳細については<a href="/ja/docs/Web/CSS/Privacy_and_the_:visited_selector">プライバシーと :visited セレクター</a>をご覧ください。</p>
</div>

<p>{{CSSxRef("cursor")}} プロパティは、ポインターの形を定義します。よく使われる形は以下のとおりです。マウスを以下のリストの項目上に置いて、あなたのブラウザーで実際に使われるポインターの形を見てみてください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <td><strong>セレクター</strong></td>
   <td><strong>選択対象</strong></td>
  </tr>
 </thead>
 <tbody>
  <tr style="cursor: pointer;">
   <td><code>pointer</code></td>
   <td>リンクを示します</td>
  </tr>
  <tr style="cursor: wait;">
   <td><code>wait</code></td>
   <td>プログラムが入力を受け付けられないことを示します</td>
  </tr>
  <tr style="cursor: progress;">
   <td><code>progress</code></td>
   <td>プログラムが動作しているが、入力が受付可能であることを示します</td>
  </tr>
  <tr style="cursor: default;">
   <td><code>default</code></td>
   <td>既定値 (通常は矢印)</td>
  </tr>
 </tbody>
</table>

<p>{{CSSxRef("outline")}} プロパティは、キーボードフォーカスを表すためによく使われる輪郭を作ります。その値は {{CSSxRef("border")}} プロパティに似ていますが、特定の辺だけには定義できない点が異なります。</p>

<p>ユーザーインターフェイスの他のいくつかの機能は、通常の方法で、属性を使って提供されます。例えば、利用不能、もしくは読み取り専用の要素は <strong>disabled</strong> 属性または <strong>readonly</strong> 属性を持ちます。セレクターは、他の属性と同じく、 <code>[disabled]</code> や <code>[readonly]</code> のように角括弧を使ってこれらの属性を定義することができます。</p>

<div class="tuto_example">
<h4 class="tuto_type" id="Example_3" name="Example_3">例</h4>

<p>次の規則は、ユーザー操作に対し、動的に変化するようなボタンのスタイルを定義します。</p>

<pre class="brush:css">.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  padding: 5px 10px;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active, .green-button.active {
  border-style: inset;
  }
</pre>

<pre class="brush:html">&lt;table&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;button class="green-button" disabled&gt;Click me&lt;/button&gt;&lt;/td&gt;
   &lt;td&gt;&lt;button class="green-button"&gt;Click me&lt;/button&gt;&lt;/td&gt;
   &lt;td&gt;&lt;button class="green-button active"&gt;Click me&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="line-height:25%;"&gt;
   &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="font-style:italic;"&gt;
   &lt;td&gt;disabled&lt;/td&gt;
   &lt;td&gt;normal&lt;/td&gt;
   &lt;td&gt;active&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
</pre>

<h4 id="Live_Sample" name="Live_Sample"><strong>ライブ例</strong></h4>

<p>{{ EmbedLiveSample('User_interfaces', '', '', '', 'Web/Apps/Progressive/Responsive/Media_types') }}</p>

<p>フル機能を持つボタンでは、デフォルトならボタンの周囲に濃い輪郭線を描き、キーボードフォーカスを受けるとボタン表面に点線の輪郭線を描きます。ポインターを上に置いたときのホバー効果も持っているかもしれません。</p>
</div>

<div class="tuto_details">
<h4 class="tuto_type" id="More_details_3" name="More_details_3">さらに詳しく</h4>

<p>CSS におけるユーザーインターフェイスについての詳細は、 CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> をご覧ください。</p>
このチュートリアルのパートIIでは、 Mozilla のユーザーインターフェイスのためのマークアップ言語の例があります。


</div>

<h2 id="Action_Printing_a_document" name="Action_Printing_a_document">実習: 文書を印刷する</h2>

<div class="note">
<p><strong>注:</strong> CSS カウンターを使ったページ番号の印刷は Firefox でのみ動作します。仕様書では動作が定義されているか、他のブラウザーで対応するかどうかは不明確です。 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=774830">issue filed with Chromium</a> を参照してください。</p>
</div>

<ol>
 <li>新しい HTML 文書 <code>doc4.html</code> を作成してください。次の内容をコピー＆ペーストしてください。

  <pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Print sample&lt;/title&gt;
    &lt;link rel="stylesheet" href="style4.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Section A&lt;/h1&gt;
    &lt;p&gt;This is the first section...&lt;/p&gt;
    &lt;h1&gt;Section B&lt;/h1&gt;
    &lt;p&gt;This is the second section...&lt;/p&gt;
    &lt;div id="print-head"&gt;
      Heading for paged media
    &lt;/div&gt;
    &lt;div id="print-foot"&gt;
      Page:
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li>新しいスタイルシート <code>style4.css</code> を作成してください。次の内容をコピー＆ペーストしてください。
  <pre class="brush:css">/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
  display: none;
  }

/* print only */
@media print {

h1 {
  page-break-before: always;
  padding-top: 2em;
  }

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
  }

#print-head {
  display: block;
  position: fixed;
  top: 0pt;
  left:0pt;
  right: 0pt;

  font-size: 200%;
  text-align: center;
  }

#print-foot {
  display: block;
  position: fixed;
  bottom: 0pt;
  right: 0pt;

  font-size: 200%;
  }

#print-foot:after {
  content: counter(page);
  counter-increment: page;
  }

} /* end print only */
</pre>
 </li>
 <li>ブラウザーで文書を見てみましょう。お使いのブラウザーの既定のスタイルが使われています。</li>
 <li>文書を印刷 (または印刷プレビュー) してください。スタイルシートは各セクションをページにわけ、各ページにヘッダーとフッターを追加します。お使いのブラウザーがカウンターをサポートしていれば、フッターにページ番号を追加します。
  <table>
   <tbody>
    <tr>
     <td>
      <table style="border: 2px outset #3366bb; padding: 1em;">
       <tbody>
        <tr>
         <td>
          <table style="margin-right: 2em; width: 15em;">
           <tbody>
            <tr>
             <td>
              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>

              <div style="font-size: 150%; font-weight: bold;">Section A</div>

              <div style="font-size: 75%;">This is the first section...</div>

              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div>
             </td>
            </tr>
           </tbody>
          </table>
         </td>
        </tr>
       </tbody>
      </table>
     </td>
     <td>
      <table style="border: 2px outset #3366bb; padding: 1em;">
       <tbody>
        <tr>
         <td>
          <table style="margin-right: 2em; width: 15em;">
           <tbody>
            <tr>
             <td>
              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>

              <div style="font-size: 150%; font-weight: bold;">Section B</div>

              <div style="font-size: 75%;">This is the second section...</div>

              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div>
             </td>
            </tr>
           </tbody>
          </table>
         </td>
        </tr>
       </tbody>
      </table>
     </td>
    </tr>
   </tbody>
  </table>
 </li>
</ol>

<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;">
 <caption>
 <h4 id="Challenges" name="Challenges"><strong>チャレンジ</strong></h4>
 </caption>
 <tbody>
  <tr>
   <td>印刷に特化したスタイルの規則を、別の CSS ファイルに移してください。
    <p>リファレンスの {{CSSxRef("@import")}} のページを読み、あなたの <code>style4.css</code> スタイルシートに、新しい印刷用のCSS ファイルをインポートする詳しい方法を見つけてください。</p>

    <p>ポインターが上にあるときに、見出しを青く変えるようにしてください。</p>
   </td>
  </tr>
 </tbody>
</table>

<p><a href="/ja/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media">チャレンジの解答を見る。</a></p>

<h2 id="What_next" name="What_next">さて次は？</h2>

<p>このページに、理解しづらい点や、意見がありましたら <a href="/Talk:ja/CSS/Getting_Started/Media">Discussion</a> ページに投稿してください。</p>

<p>これまでに、このチュートリアルのすべてのスタイル規則はファイル内に定義されてきました。規則とその値は固定されています。次のページでは、プログラミング言語 <strong><a href="/ja/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong> を使った、規則の動的な変更方法について述べます。</p>