MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    Media

    これは CSS Getting Started チュートリアル第14章で、第1部の最終章です。このチュートリアルの多くのページでは、文書の見せ方の定義に利用可能な CSS プロパティや値に焦点を合わせていました。このページでは、CSS スタイルシートの目的と構造をもう一度見ていきます。

    メディアについて

    CSS の目的は、文書がどのようにユーザに提示されるのか、定義することです。提示には複数の表現形式をとることができます。

    例えば、おそらくあなたは、ディスプレイデバイスでこのページを読んでいるでしょう。しかし、大勢の聴衆向けにスクリーンへの投影を行ったり、印刷したりしたいかもしれません。こうしたメディアはそれぞれ、異なる特性を持ちます。CSS によって、文書をメディアごとの違ったやり方で提示できます。

    あるメディアタイプに特有のルールを定義するには、@media に続けてメディアタイプを記述し、さらに続けて波括弧の中にルールを記述します。

    あるウェブサイトの文書には、ユーザがサイト内を移動できるように、ナビゲーション領域が設けられています。

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

    文書を印刷するときにはナビゲーション領域は無意味ですから、スタイルシートで完全に取り除きます:

    @media print {
      #nav-area {display: none;}
      }
    

    よく知られたメディアタイプには次のようなものがあります:

    screen カラーのコンピュータ用ディスプレイ
    print ページづけされたメディア
    projection 投影ディスプレイ
    all すべてのメディア(デフォルト)
    さらに詳しく

    あるルールの集合にメディアタイプを定義する方法は、他にもあります。

    文書のマークアップ言語によっては、スタイルシートが文書にリンクされたときに、メディアタイプを定義できるものがあります。例えば、HTML ではオプションとして LINK タグの media 属性を使ってメディアタイプを定義できます。

    CSS ではスタイルシートの初めに @import を使って、URL から他のスタイルシートを読み込むことができ、オプションとしてメディアタイプを指定できます。

    こうした技法を使うと、メディアタイプごとのスタイルづけルールを、ファイル分けできます。これは、スタイルシートを構造化する上で便利なことがあります。

    メディアタイプの完全な説明は、CSS 仕様書の Media をご覧ください。

    このチュートリアルの後で登場する XML データ のページには、display プロパティの利用例がもっとあります。

    印刷

    CSS には、印刷や、一般のページ付けされたメディアに特有のサポートをいくつか持っています。

    @page ルールで、ページマージンを設定できます。両面印刷には、マージンを @page:left@page:right で別々に指定できます。

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

    ページ境界での文書内容の切り離し方を、page-break-beforepage-break-afterpage-break-inside プロパティを使って制御できます。

    次のルールは四辺のページマージンを 1インチに設定します:

    @page {margin: 1in;}
    

    次のルールは、H1 要素が確実に新しいページで始まるようにします:

    h1 {page-break-before: always;}
    
    さらに詳しく

    ページづけされたメディアへの CSS のサポートの詳細は、CSS 仕様書の Paged media をご覧ください。

    CSS の他の機能と違って、印刷はブラウザとその設定に依存します。例えば、Mozilla ブラウザは印刷時、デフォルトのマージン、ヘッダー、フッターを用意します。あなたの文書を印刷する他のユーザについては、使用ブラウザや設定が予測できないので、その結果を完全に制御することはおそらくできません。

    ユーザインタフェース

    CSS は、コンピューターディスプレイのようなユーザインタフェースを持つデバイスのために、特別なプロパティを持っています。ユーザがそのインタフェースを使っているとき、文書の外見を動的に変更します。

    ユーザインタフェースを持つデバイスに特化したメディアタイプはありません。

    5つの特別なセレクタがあります:

    セレクタ 選択対象
    E:hover ポインターが上にあるすべての E 要素
    E:focus キーボードフォーカスを持つすべての E 要素
    E:active 現在のユーザの行動に関係する E 要素
    E:link ユーザ未訪問の URL へのハイパーリンクのある E 要素
    E:visited ユーザ訪問済みの URL へのハイパーリンクのある E 要素

    注: :visited セレクタで獲得できる情報は Gecko 2.0 で制限されました。詳細については Privacy and the :visited selector をご覧ください。

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

    セレクタ 選択対象
    pointer リンクを示します
    wait プログラムが入力を受けつけられないことを示します
    progress プログラムが動作しているが、入力を受けつけ可能なことを示します
    default デフォルト(通常は矢印)

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

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

    次のルールは、ユーザ操作に対し、動的に変化するようなボタンのスタイルを定義します:

    .green-button {
      background-color:#cec;
      color:#black;
      border:2px outset #cec;
      }
    
    .green-button[disabled] {
      background-color:#cdc;
      color:#777;
      }
    
    .green-button:active {
      border-style: inset;
      }
    

    この wiki はページ内にユーザインタフェースを含められないので、次のボタンはクリックできません。概念を表すための画像です:

    Click Me Click Me Click Me
     
    利用不能 通常 アクティブ

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

    さらに詳しく

    CSS におけるユーザインタフェースについての詳細は、CSS 仕様書の User interface をご覧ください。

    Mozilla のマークアップ言語でのユーザインタフェースの例が、このチュートリアルの第2部、XUL にあります。

    実習: 文書を印刷する

    1. 新規 HTML 文書 doc4.html を作ります。次の内容をコピー&ペーストしてください:
      <!DOCTYPE html>
      <html>
        <head>
          <title>Print sample</title>
          <link rel="stylesheet" href="style4.css">
        </head>
        <body>
          <h1>Section A</h1>
          <p>This is the first section...</p>
          <h1>Section B</h1>
          <p>This is the second section...</p>
          <div id="print-head">
            Heading for paged media
          </div>
          <div id="print-foot">
            Page: 
          </div>
      </body>
      </html>
      
    2. 新規スタイルシート style4.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 */
      
    3. ブラウザで文書を見てみましょう; お使いのブラウザのデフォルトのスタイルが使われています。
    4. 文書を印刷(または印刷プレビュー)してください; スタイルシートは各セクションをページにわけ、各ページにヘッダーとフッターを追加します。お使いのブラウザがカウンターをサポートしていれば、フッターにページ番号を追加します。
      Heading for paged media
      Section A
      This is the first section...
      Page: 1
      Heading for paged media
      Section B
      This is the second section...
      Page: 2
    チャレンジ
    印刷に特化したスタイルのルールを、別の CSS ファイルに移してください。

    リファレンスの @import のページを読み、あなたの style4.css スタイルシートに、新しい印刷用のCSS ファイルをインポートする詳しい方法を見つけてください。

    ポインターが上にあるときに、見出しを青く変えるようにしてください。

    チャレンジの解答を見る。

    さて次は?

    このページに、理解しづらい点や、意見がありましたら Discussion ページに投稿してください。

    これまでに、このチュートリアルのすべてのスタイルルールはファイル内に定義されてきました。ルールとその値は固定されています。次のページでは、プログラミング言語 JavaScript を使った、ルールの動的な変更方法について述べます。

    ドキュメントのタグと貢献者

    Contributors to this page: sosleepy, ethertank, teoli, siokoshou
    最終更新者: teoli,