これは CSS の第一歩チュートリアル第14章で、第1部の最終章です。このチュートリアルの多くのページでは、 CSS プロパティや値と、そのコンテンツを表示する方法を指定するための使い方に焦点を当てていました。
CSS の目的は、コンテンツがどのようにユーザーに表示されるのかを指定することです。この表示には複数の表現形式をとることができます。
例えば、おそらくあなたはこれをディスプレイ付きの端末で読んでいるでしょう。しかし、大画面に映して多くの人に読んでもらいたいと思うこともありますし、印刷したいと思ってう場合もあるでしょう。これらの様々なメディアには、それぞれ異なる特性があります。 CSS はメディアの種類に応じてコンテンツを提示する機能を持っています。
あるメディア種別に特有の規則を定義するには、 {{CSSxRef("@media")}} に続けてメディア種別を記述し、さらに続けて波括弧の中に規則を記述します。
あるウェブサイトの文書に、主要なサイトメニューを含むナビゲーション領域が設けられているとします。
マークアップ言語では、ナビゲーション領域の親要素は id nav-area を持っています ({{HTMLVersionInline(5)}} では、これは id 属性を持つ {{HTMLElement("div")}} 要素での代わりに、{{HTMLElement("nav")}} 要素でマークアップできます)。
文書を印刷するときにはナビゲーション領域は無意味ですから、この CSS (下記) では、文書を印刷する際にはナビゲーション領域を削除します。
@media print {
#nav-area {display: none;}
}
よく知られたメディア種別には次のようなものがあります。
screen |
端末のカラーディスプレイ |
print |
ページ単位に印刷されるメディア |
projection |
プロジェクター |
all |
すべてのメディア (既定値) |
ある規則の集合にメディア種別を定義する方法は、他にもあります。
文書のマークアップ言語によっては、スタイルシートが文書にリンクされたときに、メディア種別を定義できるものがあります。例えば、 HTML では LINK 要素の media 属性を使ってメディア種別を指定することができます。
CSS ではスタイルシートの初めに {{CSSxRef("@import")}} を使って、 URL から他のスタイルシートを読み込むことができ、オプションとしてメディア種別を指定することができます。
これらは、様々なメディア種別のスタイル付け規則を異なるファイルに分離する方法です。
メディア種別の完全な説明は、 CSS 仕様書の Media をご覧ください。
{{CSSxRef("display")}} プロパティのその他の利用例は、このチュートリアルの後で登場する XML データ のページにあります。
CSS には、印刷や、一般のページ付けされたメディアに特有の対応があります。
{{CSSxRef("@page")}} 規則で、ページマージンを設定できます。両面印刷には、マージンを @page:left と @page:right で別々に指定できます。
印刷メディアでは通常、インチ (in) や ポイント (pt = 1/72 inch)、センチメートル (cm) や ミリメートル (mm) など、適切な単位を使います。フォントの大きさにあわせるために em (em) を使ったり、パーセント値 (%) を使ったりするのも同様に適切です。
ページ境界における文書の内容の分割方法を、 {{CSSxRef("page-break-before")}}, {{CSSxRef("page-break-after")}}, {{CSSxRef("page-break-inside")}} プロパティを使って制御することができます。
次の規則はページの四辺の余白を1インチに設定します。
@page {margin: 1in;}
次の規則は、すべての H1 要素が確実に新しいページで始まるようにします。
h1 {page-break-before: always;}
ページ付メディアへの CSS の対応の詳細は、 CSS 仕様書の Paged media をご覧ください。
CSS の他の機能と同様に、印刷はブラウザーの選択とその設定に依存します。例えば、 Mozilla ブラウザーでは、印刷用に既定の余白、ヘッダー、フッターが用意されています。印刷される書式を完全に制御することはできないことを覚えておいてください。印刷時にすべてのユーザーのブラウザーの選択や設定を予測することは不可能です。
CSS は、コンピューターのディスプレイのようなユーザーインターフェイスを持つ端末のために、特別なプロパティを持っています。これらのプロパティは、ユーザーが作業するインターフェイスの近哲の表示方法を動的に変更することができます。
5つの特別なセレクターがあります。
| セレクター | 選択対象 |
E{{CSSxRef(":hover")}} |
ポインターが上にあるすべての E 要素 |
E{{CSSxRef(":focus")}} |
キーボードフォーカスを持つすべての E 要素 |
E{{CSSxRef(":active")}} |
現在のユーザーの行動に関係する E 要素 |
E{{CSSxRef(":link")}} |
ユーザーが未訪問の URL へのハイパーリンクのある E 要素 |
E{{CSSxRef(":visited")}} |
ユーザーが訪問済みの URL へのハイパーリンクのある E 要素 |
注: :visited セレクターで獲得できる情報は {{gecko("2.0")}} で制限されました。詳細についてはプライバシーと :visited セレクターをご覧ください。
{{CSSxRef("cursor")}} プロパティは、ポインターの形を定義します。よく使われる形は以下のとおりです。マウスを以下のリストの項目上に置いて、あなたのブラウザーで実際に使われるポインターの形を見てみてください。
| セレクター | 選択対象 |
pointer |
リンクを示します |
wait |
プログラムが入力を受け付けられないことを示します |
progress |
プログラムが動作しているが、入力が受付可能であることを示します |
default |
既定値 (通常は矢印) |
{{CSSxRef("outline")}} プロパティは、キーボードフォーカスを表すためによく使われる輪郭を作ります。その値は {{CSSxRef("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> </td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>normal</td> <td>active</td> </tr> </tbody> </table>
{{ EmbedLiveSample('User_interfaces', '', '', '', 'Web/Apps/Progressive/Responsive/Media_types') }}
フル機能を持つボタンでは、デフォルトならボタンの周囲に濃い輪郭線を描き、キーボードフォーカスを受けるとボタン表面に点線の輪郭線を描きます。ポインターを上に置いたときのホバー効果も持っているかもしれません。
CSS におけるユーザーインターフェイスについての詳細は、 CSS 仕様書の User interface をご覧ください。
このチュートリアルのパートIIでは、 Mozilla のユーザーインターフェイスのためのマークアップ言語の例があります。注: CSS カウンターを使ったページ番号の印刷は Firefox でのみ動作します。仕様書では動作が定義されているか、他のブラウザーで対応するかどうかは不明確です。 issue filed with Chromium を参照してください。
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>
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 */
|
|
| 印刷に特化したスタイルの規則を、別の CSS ファイルに移してください。
リファレンスの {{CSSxRef("@import")}} のページを読み、あなたの ポインターが上にあるときに、見出しを青く変えるようにしてください。 |
このページに、理解しづらい点や、意見がありましたら Discussion ページに投稿してください。
これまでに、このチュートリアルのすべてのスタイル規則はファイル内に定義されてきました。規則とその値は固定されています。次のページでは、プログラミング言語 JavaScript を使った、規則の動的な変更方法について述べます。