メディア

これは 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-before, page-break-after, page-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;
  padding: 5px 10px;
  }

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

.green-button:active, .green-button.active {
  border-style: inset;
  }
<table>
 <tbody>
  <tr>
   <td><button class="green-button" disabled>Click me</button></td>
   <td><button class="green-button">Click me</button></td>
   <td><button class="green-button active">Click me</button></td>
  </tr>
  <tr style="line-height:25%;">
   <td>&nbsp;</td>
  </tr>
  <tr style="font-style:italic;">
   <td>disabled</td>
   <td>normal</td>
   <td>active</td>
  </tr>
 </tbody>
</table>

ライブ例

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

さらに詳しく

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

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

実習: 文書を印刷する

メモ: CSS カウンターを使ったページ番号の印刷は Firefox でのみ動作します。仕様書では動作が定義されているか、他のブラウザーで対応するかどうかは不明確です。 issue filed with Chromium を参照してください。

  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 を使った、規則の動的な変更方法について述べます。