Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

これは 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;
  }

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

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

タグ: 
 このページの貢献者: teoli, siokoshou, ethertank, sosleepy
 最終更新者: teoli,