From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../guide/css/block_formatting_context/index.html | 191 +++++++++ .../web/guide/css/getting_started/boxes/index.html | 330 ++++++++++++++ .../getting_started/challenge_solutions/index.html | 324 ++++++++++++++ .../web/guide/css/getting_started/color/index.html | 348 +++++++++++++++ .../css/getting_started/javascript/index.html | 148 +++++++ .../guide/css/getting_started/layout/index.html | 284 ++++++++++++ .../web/guide/css/getting_started/lists/index.html | 245 +++++++++++ .../guide/css/getting_started/tables/index.html | 477 +++++++++++++++++++++ .../getting_started/xul_user_interfaces/index.html | 303 +++++++++++++ files/ja/web/guide/css/media_queries/index.html | 412 ++++++++++++++++++ 10 files changed, 3062 insertions(+) create mode 100644 files/ja/web/guide/css/block_formatting_context/index.html create mode 100644 files/ja/web/guide/css/getting_started/boxes/index.html create mode 100644 files/ja/web/guide/css/getting_started/challenge_solutions/index.html create mode 100644 files/ja/web/guide/css/getting_started/color/index.html create mode 100644 files/ja/web/guide/css/getting_started/javascript/index.html create mode 100644 files/ja/web/guide/css/getting_started/layout/index.html create mode 100644 files/ja/web/guide/css/getting_started/lists/index.html create mode 100644 files/ja/web/guide/css/getting_started/tables/index.html create mode 100644 files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html create mode 100644 files/ja/web/guide/css/media_queries/index.html (limited to 'files/ja/web/guide/css') diff --git a/files/ja/web/guide/css/block_formatting_context/index.html b/files/ja/web/guide/css/block_formatting_context/index.html new file mode 100644 index 0000000000..6f0f4f7964 --- /dev/null +++ b/files/ja/web/guide/css/block_formatting_context/index.html @@ -0,0 +1,191 @@ +--- +title: ブロック整形コンテキスト +slug: Web/Guide/CSS/Block_formatting_context +tags: + - CSS + - Guide + - Reference + - Web + - ウェブ + - ガイド +translation_of: Web/Guide/CSS/Block_formatting_context +--- +
{{ CSSRef }}
+ +

ブロック整形コンテキスト (block formatting context) は、ウェブページにおける CSS の視覚的なレンダリングの一部です。ブロックボックスのレイアウトが行われ、浮動が他の要素と相互作用する領域です。

+ +

ブロック整形コンテキストは、以下のうちの少なくとも一つから生成されます。

+ + + +

ブロック整形コンテキストは、それを生成する要素の内側にあるすべてのものを含みます。

+ +

ブロック整形コンテキストは、浮動要素の配置設定 ({{ cssxref("float") }} を参照) と解除 ({{ cssxref("clear") }}を参照) にとって重要です。浮動要素の配置設定と解除の規則は、同一のブロック整形コンテキスト内にあるものにだけ適用されます。浮動要素は他のブロック整形コンテキストの内容のレイアウトには影響せず、 clear は同じブロック整形コンテキスト内の以前の浮動要素のみを解除します。マージンの相殺も、同じブロック整形コンテキストに所属するブロック同士でしか発生しません。

+ +

例

+ +

浮動コンテンツとその横のコンテンツの高さを同じにする

+ +
+

いくつかの例を見て、新しいブロック整形コンテキスト (BFC) を生成することによる効果を確認してみましょう。

+ +

以下の例では、 <div> に border が適用されている中に浮動要素があります。その <div> の内容は、浮動要素の横にあります。浮動要素の内容がその横のコンテンツよりも高いので、 <div> の境界は浮動要素を突き抜けてしまいます。フロー内とフローの外の要素のガイドで説明している通り、浮動要素はフローから出るので、 <div> の background および border はコンテンツのみを含みますが、浮動要素は含みません。

+ +

HTML

+ +
<div class="box">
+    <div class="float">I am a floated box!</div>
+    <p>I am content inside the container.</p>
+</div>
+ +

CSS

+ +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

{{EmbedLiveSample("example1", 200, 200)}}

+
+ +
+

overflow: auto; の使用

+ +

新しいブロック整形コンテキスト (BFC) を生成すると、浮動要素を含むようになります。以前からよくある方法は、 overflow: auto を設定するか、初期値である overflow: visible 以外の値を設定するものです。

+ +

CSS

+ + + +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    overflow: auto;
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

{{EmbedLiveSample("With_overflow", 200, 200)}}

+
+ +

overflow: auto を設定することで浮動要素を含む新しい BFC を生成しました。 <div> はレイアウトの中のミニレイアウトになりました。すべての子要素はその中に含まれます。

+ +

overflow を使用して新しい BFC を生成することの問題は、 overflow プロパティがブラウザーにあふれた内容をどのように扱いたいかを伝えるためのものであることです。このプロパティを純粋に使用して BFC を作成すると、不要なスクロールバーやクリップされた影が表示される場合があります。また、この目的で overflow を使用した理由が明らかではない可能性があるため、将来の開発者にとっては読みにくくなる可能性があります。 overflow を使用する場合、コードに説明するためのコメントをすることをお勧めします。

+ +

display: flow-root の使用

+ +
+

A newer value of display lets us create a new BFC without any other potentially problematic side-effects. Using display: flow-root on the containing block creates a new BFC .

+ +

CSS

+ + + +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    display: flow-root
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

{{EmbedLiveSample("flowroot", 200, 200)}}

+
+ +

With display: flow-root; on the <div>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.

+ +

The value name of flow-root makes sense when you understand you are creating something that acts like the root element (<html> element in browser) in terms of how it creates a new context for the flow layout inside it.

+ +
+

Note: display: flow-root; is not supported by Safari.

+
+ +

マージンの相殺

+ +

Creating a new BFC to avoid the margin collapsing between two neighbor div:

+ +

HTML

+ +
<div class="blue"></div>
+<div class="red-outer">
+  <div class="red-inner">red inner</div>
+</div>
+
+ +

CSS

+ +
.blue, .red-inner {
+  height: 50px;
+  margin: 10px 0;
+}
+
+.blue {
+  background: blue;
+}
+
+.red-outer {
+  overflow: hidden;
+  background: red;
+}
+
+ +

{{EmbedLiveSample("Margin_collapsing", 120, 120)}}

+ +

仕様書

+ + + +

関連情報

+ + diff --git a/files/ja/web/guide/css/getting_started/boxes/index.html b/files/ja/web/guide/css/getting_started/boxes/index.html new file mode 100644 index 0000000000..eeb39e5e46 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/boxes/index.html @@ -0,0 +1,330 @@ +--- +title: Boxes +slug: Web/Guide/CSS/Getting_started/Boxes +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Building_blocks +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは CSS Getting Started チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。

+ +

ボックスについて

+ +

ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。

+ +

中央に、要素（element）がその内容を表示するのに必要なスペースがあります。その周りに パディング（padding） があり、その周りに ボーダー（border） があります。その周りには マージン（margin） があって、他要素とその要素を隔てています。

+ + + + + + + + +
+
+

マージン

+ +

ボーダー

+ +
+

パディング

+ +
+

要素

+
+
+
+ +

薄い灰色がレイアウトの部品を示します。

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

要素

+
+
+
+ +

ブラウザではこう見えます。

+
+ +

パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。

+ +

彩色

+ +

パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。

+ + + + + + + + +
+
+

マージン

+ +

ボーダー

+ +
+

パディング

+ +
+

要素

+
+
+
+ +

要素の背景色は緑です。

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

要素

+
+
+
+ +

ブラウザではこう見えます。

+
+ +

ボーダー

+ +

ボーダーを使って、要素を線や枠囲みで装飾できます。

+ +

要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。

+ +

選べるスタイル:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

また、スタイルを none か hidden にして、明示的にボーダーを消したり、色を transparent にして、レイアウトを変えずにボーダーを透明にしたりできます。

+ +

一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。

+ +
+
例
+ +

次のルールは、見出し要素の背景色と上辺のボーダーを定義します:

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+}
+ +

結果は次のようになります:

+ + + + + + + +
+

スタイルつきの見出し

+
+ +

次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:

+ +
img {border: 2px solid #ccc;}
+
+
+ +

結果は次のようになります:

+ + + + + + + + +
画像:Image:Blue-rule.png
+ +

マージンとパディング

+ +

マージンとパディングで要素の位置を調整し、周りに余白を作ります。

+ +

{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。

+ +

幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。

+ +

幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。

+ +

4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left

+ +
+
例
+ +

次のルールは、remark クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。

+ +

パディングで囲むことで、テキストから枠が少し離れます。

+ +

左マージンは段落を他のテキストからインデントします:

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

結果は次のようになります:

+ + + + + + + +
+

ここは通常の段落です。

+ +

ここは remark 用の段落です。

+
+
+ +
+
さらに詳しく
+ +

マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。

+ +

ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。

+ +

望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。

+ +

パディング、マージン、ボーダーについての詳しい情報は、リファレンスの ボックスモデル をご覧ください。

+
+ +

実習: ボーダーの追加

+ +

CSS ファイル style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください:

+ +
h3 {border-top: 1px solid gray;}
+
+ +

前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

ブラウザを更新すると次の結果になります:

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
チャレンジ
+ +

スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

（幅や色を正確に同じにする必要はありません。）

+
+ +

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

+ +

さて次は？

+ +

{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の レイアウト を変えます。

diff --git a/files/ja/web/guide/css/getting_started/challenge_solutions/index.html b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html new file mode 100644 index 0000000000..df62dacd38 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html @@ -0,0 +1,324 @@ +--- +title: Challenge solutions +slug: Web/Guide/CSS/Getting_started/Challenge_solutions +translation_of: Web/Guide/CSS/Getting_started/Challenge_solutions +--- +

このページは、 CSS Getting Started チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。

+

CSS をなぜ用いるか

+

Colors

+
+
+ Challenge
+
+
+
+ Without looking up a reference, find five more color names that work in your stylesheet.
+
+ Solution
+
+ CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.
+
+

どのように CSS は動作するのか

+

DOM inspector

+
+
+ Challenge
+
+ In DOMi, click on a STRONG node. Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.
+
+ Solution
+
+ In the menu above the right-hand pane, choose CSS Rules.  You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.
+
+

接続と継承

+

Inherited styles

+
+
+ Challenge
+
+ Change your stylesheet so that only the red letters are underlined.
+
+ Solution
+
+ Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this: + 
p {color: blue; }
+strong {color: orange; text-decoration: underline;}
+
+
+
+

Later sections of this tutorial describe style rules and declarations in greater detail.

+

セレクター

+

Second paragraph blue

+
+
+ Challenge
+
+ Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters the same color as they are now, but makes all the other text in the second paragraph blue.
+
+ Solution
+
+ Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + 
#second { color: blue; }
+
+ A more specific selector, p#second also works.
+
+

Both paragraphs blue

+
+
+ Challenge
+
+ Now change the rule you have just added (without changing anything else), to make the first paragraph blue too.
+
+ Solution
+
+ Change the selector of the new rule to be a tag selector using p: + 
p { color: blue; }
+
+
+
+

The rules for the other colors all have more specific selectors, so they override the blue of the paragraph.

+

読みやすい CSS

+

Commenting out a rule

+
+
+ Challenge
+
+ Comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red.
+
+ Solution
+
+ One way to do this is to put comment delimiters around the rule for .carrot: + 
/*
+.carrot {
+  color: orange;
+}
+*/
+
+
+
+

文章のスタイル

+

Big initial letters

+
+
+ Challenge
+
+ Without changing anything else, make all six initial letters twice the size in the browser's default serif font.
+
+ Solution
+
+ Add the following style declaration to the strong rule: + 
  font: 200% serif;
+
+ If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden.
+
+

色

+

Three-digit color codes

+
+
+ Challenge
+
+ In your CSS file, change all the color names to 3-digit color codes without affecting the result.
+
+ Solution
+
+ The following values are reasonable approximations of the named colors: + 
strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+
+
+
+

コンテンツ

+

画像の追加

+
+
+ チャレンジ
+
+ 各行の初めに画像を表示するように、スタイルシートに一つルールを追加してください。
+
+ 解答
+
+ 次のルールをスタイルシートに追加します: + 
p:before{
+  content: url("yellow-pin.png");
+}
+
+
+
+

リスト

+

小文字のローマ数字

+
+
+ チャレンジ
+
+ スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください。
+
+ 解答
+
+ lower-roman のリストスタイルを使って、リスト項目に一つルールを定義します: + 
li {
+  list-style: lower-roman;
+}
+
+
+
+

大文字

+
+
+ チャレンジ
+
+ 見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください。
+
+ 解答
+
+ body 要素（見出しの親要素）にはカウンターをリセットするルールを、見出しにはカウンターを表示し増加させるルールを追加します: + 
/* numbered headings */
+body {counter-reset: headnum;}
+h3:before {
+  content: "(" counter(headnum, upper-latin) ") ";
+  counter-increment: headnum;
+}
+
+
+
+
+

ボックス

+

海の境界線

+
+
+ チャレンジ
+
+ スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください。
+
+ 解答
+
+ 次のルールでこの効果を出せます: + 
ul {
+  border: 10px solid lightblue;
+}
+
+
+
+
+

レイアウト

+

デフォルトの画像位置

+
+
+ チャレンジ
+
+ サンプル文書 doc2.html を編集し、次のタグを文書の末尾近く、</BODY> のすぐ前に追加します: <IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> 画像がどこに現れるか、推測してみてください。それからブラウザを更新して、正しかったかどうかを確認してください。
+
+ 解答
+
+ 画像は2番めのリストの右側に現れます。
+ pin_placement.png
+
+

画像位置の固定化

+
+
+ チャレンジ
+
+ スタイルシートにルールを追加して、文書の右上に画像を置くようにしてください。
+
+ 解答
+
+ 次のルールでできます: + 
#fixed-pin  {
+  position:fixed;
+  top: 3px;
+  right: 3px;
+}
+
+
+

表

+

Borders on data cells only

+
+
+ Challenge
+
+ Change the stylesheet to make the table have a green border around only the data cells.
+
+ Solution
+
+ The following rule puts borders around only {{ HTMLElement("td") }} elements that are inside the {{ HTMLElement("tbody") }} element of the table with id=demo-table: + 
#demo-table tbody td {
+  border:1px solid #7a7;
+}
+
+
+
+

メディア

+

Separate print style file

+
+
+ Challenge
+
+ Move the print-specific style rules to a separate CSS file and import them into your style4.css stylesheet.
+
+ Solution
+
+ Cut and paste the lines between /* print only */ and /* end print only */ into a file named style4_print.css. In style4.css, add the following line at the beginning of the file: + 
@import url("style4_print.css") print;
+
+
+
+

Heading hover color

+
+
+ Challenge
+
+ Make the headings turn blue when the mouse pointer is over them.
+
+ Solution
+
+ The following rule achieves the desired result: + 
h1:hover {
+  color: blue;
+}
+
+
+
+

JavaScript

+

Move box to the right

+
+
+ Challenge
+
+ Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards.
+
+ Solution
+
+ Add lines to modify the margin-left property. Be sure to specify it as marginLeft in JavaScript. The following script achieves the desired result: + 
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "#fa4";
+  square.style.marginLeft = "20em";
+  button.setAttribute("disabled", "true");
+  setTimeout(clearDemo, 2000, button);
+}
+
+function clearDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "transparent";
+  square.style.marginLeft = "0em";
+  button.removeAttribute("disabled");
+}
+
+
+
+
diff --git a/files/ja/web/guide/css/getting_started/color/index.html b/files/ja/web/guide/css/getting_started/color/index.html new file mode 100644 index 0000000000..d1f75c2413 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/color/index.html @@ -0,0 +1,348 @@ +--- +title: 色 +slug: Web/Guide/CSS/Getting_started/Color +tags: + - CSS + - 'CSS:Getting_Started' + - Getting_Started +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。

+ +

サンプルスタイルシートに、背景色を指定出来るようになります。

+ +

{{ 英語版章題("Information: Color") }}

+ +

解説: 色

+ +

このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
プライマリーred lime blue 
セカンダリーyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+ +

 

+ + + + + + + + +
詳細情報
ブラウザが上記以上の名前付きの色をサポートしている可能性もあります + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

拡張された色の名前リストについては、CSS 3 カラーモジュールの SVG 色キーワード を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。

+
+ +

より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の16 進数 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
+ +

完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
+ +

これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。

+ + + + + + + + + + + +
Examples
少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
赤から始めます #f00
桃色に近づけるため、緑・青を追加 #f77
橙に近づけるため、緑を追加 #fa7
暗くするため、全ての色を減らす #c74
飽和を減らすため、色の値を近づける #c98
色同士を完全に同じにすると、灰色 #ccc
+
空色のようなパステル調を出すには: + + + + + + + + + + + + + +
白から始めます: #fff
他の色の値を少し減らします: #eef
+
+ +

 

+ + + + + + + + +
More details
色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。 +

たとえば、次の色はマロン (濃い赤) になります :

+ +
+ 
+rgb(128, 0, 0)
+
+
+ +


+ 色指定の詳細については、CSS 仕様書の 色 をご覧ください。

+ +

メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の CSS2 システム色 があります。

+
+ +


+ {{ 英語版章題("Color properties") }}

+ +

色のプロパティー

+ +

color プロパティーをすでに利用しました。

+ +

同様に background-color プロパティーを指定することで、要素の背景色を変えることができます。

+ +

背景色には transparent を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。

+ + + + + + + + +
Example
このチュートリアルの サンプル ボックスは、このような 淡黄色を背景色にしています。 +
+ 
+background-color: #fffff4;
+
+
+ +

より詳細は のボックスは淡灰色を使っています。

+ +
+ 
+background-color: #f4f4f4;
+
+
+
+ +

{{ 英語版章題("Action: Using color codes") }}

+ +

試してみましょう: カラーコードを利用する

+ +

CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)

+ +
+
/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+
+
+ +

ブラウザを再読み込みして結果を見てみましょう。

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

 

+ + + + + + + + +
Challenge
結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。 +

(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)

+
+ +


+ {{ 英語版章題("What next?") }}

+ +

次は ?

+ +

あなたのサンプルは完全にスタイルと中身に分離されました。

+ +

次のページでは、この完全分離の状態に例外を作る方法を説明します。 Content

diff --git a/files/ja/web/guide/css/getting_started/javascript/index.html b/files/ja/web/guide/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..9f8cf9b250 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/javascript/index.html @@ -0,0 +1,148 @@ +--- +title: JavaScript and CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +
+ {{CSSTutorialTOC}}
+

これは CSS チュートリアル 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。

+

第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。

+

代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。

+

前の章（第 1 部）: メディア
+ 次の章: SVG

+

JavaScriptについて

+

JavaScript はプログラミング言語 です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。

+

JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。

+

3 つの方法があります:

+ + + + + + + + +
+ さらに詳しく
JavaScript, についてのさらに詳しい情報は、この wiki の JavaScript のページをご覧ください。
+

実習: JavaScript の実演

+

新規 HTML 文書 doc5.html を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:

+
+ 
<!DOCTYPE html>
+<html>
+
+<head>
+<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
+<link rel="stylesheet" type="text/css" href="style5.css" />
+<script type="text/javascript" src="script5.js"></script>
+</head>
+
+<body>
+<h1>JavaScript sample</h1>
+
+<div id="square"></div>
+
+<button type="button" onclick="doDemo(this);">Click Me</button>
+
+</body>
+</html>
+
+
+

新規 CSS ファイル style5.css を作り、次の内容をコピー＆ペーストしてください:

+
+ 
/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+}
+
+button {
+  padding: .5em 2em;
+}
+
+
+

新規テキストファイル script5.js を作り、以下の内容をコピー＆ペーストしてください:

+
+ 
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "#fa4";
+  button.setAttribute("disabled", "true");
+  setTimeout(clearDemo, 2000, button);
+}
+
+function clearDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "transparent";
+  button.removeAttribute("disabled");
+}
+
+
+

ブラウザで HTML 文書を開いて、ボタンを押してください。

+

この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:

+ + + + + + + +
+ + + + + + + + + +
+

JavaScript sample

+
 
+ 		+ + + + + + + + + +
+

JavaScript sample

+
 
+
+
+ この実演についての重要な補足: + +
+ + + + + + + +
+ チャレンジ
スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。
+

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

+

さて次は？

+

このページにわかりづらいところやご意見があれば Discussion ページに参加してください。

+

この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: XBL bindings

diff --git a/files/ja/web/guide/css/getting_started/layout/index.html b/files/ja/web/guide/css/getting_started/layout/index.html new file mode 100644 index 0000000000..5f75322d74 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/layout/index.html @@ -0,0 +1,284 @@ +--- +title: Layout +slug: Web/Guide/CSS/Getting_started/Layout +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/CSS_layout +--- +
+ {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}
+

これは CSS Getting Started チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。

+

レイアウトについて

+

CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。

+

多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。

+

このページでは、あなたが試せるような簡単な技法をいくつか述べます。

+

文書の構造

+

文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。

+

お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。

+
+
+ 例
+

サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。

+

セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。

+

この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、id 属性で見分けられます。

+ 
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+

これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。

+ 
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+

結果は次のようになります:

+ + + + + + +
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+

サイズの単位（Size units）

+

このチュートリアルではこれまで、サイズを pixels (px) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。

+

多くの用途で、サイズをパーセンテージか ems (em) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。

+
+
+ 例
+

次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。

+

右辺のボーダーは ems 単位のサイズで定義されています。

+

ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:

+ + + + + + +
+
+ 僕の大きさを変えてお願い
+
+
+
+
+ さらに詳しく
+

その他のデバイスには、これ以外の長さの単位が適しています。

+

これについては、このチュートリアルの後半のページにもっと情報があります。

+

すべての利用可能な値と単位の詳細は、CSS 仕様書の Values をご覧ください。

+
+

テキストのレイアウト

+

2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。

+
+
+ {{cssxref("text-align")}}
+
+ 文字寄せを行います。次のうちいずれかの値を使います: left, right, center, justify
+
+ {{cssxref("text-indent")}}
+
+ 指定した幅でインデントを行います。
+
+

これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。

+
+
+ 例: 見出しを中央寄せする
+ 
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+

表示結果:

+ + + + + + +
+

(A) The oceans

+
+

HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。

+
+

フロート（Floats、浮動体）

+

{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。

+

文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。

+
+
+ 例
+

サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。

+

見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。

+ 
ul,
+#numbered { float: left; }
+h3 { clear: left; }
+
+
+

結果は次のようになります:

+ + + + + + +
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+

（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）

+

位置取り

+

{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。

+

これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。

+
+
+ relative
+
+ 相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。
+
+ fixed
+
+ 固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。
+
+ absolute
+
+ 絶対的。要素は祖先要素の内、直近のポジショニング要素 (position プロパティの値が relative、fixed 、absolute の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には position:relative を用いる事により親要素自身への影響を回避できます。
+
+ static
+
+ 静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。
+
+

position プロパティ（static を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: top 、 right 、 bottom 、 left 、 width 、 height これにより、要素の現れる場所やおそらくはそのサイズも指定します。

+
+
+ 例: 複数の要素を重ねる
+

2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:

+ 
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+

スタイルシートで、親要素の position を relative にします。移動量を指定する必要はありません。子要素の position を absolute にします。

+ 
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin: 0; /* 要素の周囲のマージンを 0 に */
+  top: 0; /* 上部からの距離 */
+  left: 0; /*  左部からの距離 */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+

結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。

+
+

/

+

\

+
+ + + + + + +
 
+
+
+
+ さらに詳しく
+

位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: Visual formatting model と Visual formatting model details にあります。

+

多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。

+
+

実習: レイアウトの定義

+
    +
  1. サンプル文書 doc2.html と スタイルシート style2.css を、上の『文書の構造』と『フロート』の各章にある例を使って変更してください。
    2. +
  2. フロート の例にパディングを追加し、右のボーダーからテキストを 0.5em 離してください。
    3. +
+
+
+ チャレンジ
+

サンプル文書 doc2.html を変更して、文書の末尾近く、</body> の直前に次のタグを追加します。

+ 
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+

もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。

+

+

画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。

+

スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。

+

ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。

+
+
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+

 

+
+ Yellow map pin
+
+
+
+

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

+

さて次は？

+

{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、テーブル のスタイルづけに特有のやり方をいくつか述べます。

diff --git a/files/ja/web/guide/css/getting_started/lists/index.html b/files/ja/web/guide/css/getting_started/lists/index.html new file mode 100644 index 0000000000..ecea2636d7 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/lists/index.html @@ -0,0 +1,245 @@ +--- +title: Lists +slug: Web/Guide/CSS/Getting_started/Lists +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +

{{ CSSTutorialTOC() }}

+

{{ previousPage("/ja/docs/CSS/Getting_Started/Content", "Content") }} これは CSS Getting Started チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。

+

リストについて

+

前章 のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。

+

CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。

+

リストにスタイルを定義するには、{{ cssxref("list-style") }} プロパティを使ってマーカーの種類を指定します。

+

CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：{{ HTMLElement("li") }}）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：{{ HTMLElement ("ul") }}））。

+

箇条書きリスト（unordered list）

+

箇条書きリストでは、すべてのリスト項目に同じ方法でマーカーがつきます。

+

CSS には3種類のマーカーがあり、ブラウザは次のように表示します:

+ +

もしくは、画像の URL を指定できます。

+
+
+ 例
+

次のルールはリスト項目のクラス別に異なったマーカーを定義します:

+ 
li.open {list-style: circle;}
+li.closed {list-style: disc;}
+
+

リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):

+ 
<ul>
+  <li class="open">Lorem ipsum</li>
+  <li class="closed">Dolor sit</li>
+  <li class="closed">Amet consectetuer</li>
+  <li class="open">Magna aliquam</li>
+  <li class="closed">Autem veleum</li>
+</ul>
+
+

結果は次のようになるでしょう:

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+

番号順リスト（ordered lists）

+

番号順リストでは、リスト項目は各々違ったマーカーをつけられ、順番を表します。

+

マーカーの種類を定義するには {{ cssxref("list-style") }} プロパティを使ってください:

+ +
+
+ 例
+

これは info クラスの {{ HTMLElement("ol") }} 要素についてのルールで、項目が大文字のアルファベットで識別されます。

+ 
ol.info {list-style: upper-latin;}
+
+

リスト内の {{ HTMLElement("li") }} 要素はこのスタイルを継承します:

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+
+
+ さらに詳しく
+

{{ cssxref("list-style") }} は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス {{ cssxref("list-style") }} をご覧ください。

+

箇条書きリスト ({{ HTMLElement("ul") }}) や番号リスト ({{ HTMLElement("ol") }}) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば {{ HTMLElement("ul") }} に番号リストを表示させたり、{{ HTMLElement("ol") }} に箇条書きリストを表示させたりもできます。

+

リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。

+
+

カウンター

+
+

注:  一部のブラウザーはカウンターをサポートしていません。Quirks Mode site の CSS contents and browser compatibility ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの CSS Reference の各ページにもブラウザ実装状況の表があります。

+
+

カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。

+

通し番号を定義するには、独自に名前をつけた counter が必要です。

+

カウントが開始されるより前の要素のいずれかで、{{ cssxref("counter-reset") }} プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。

+

番号が増える要素の各々に {{ cssxref("counter-increment") }} プロパティとカウンター名を使ってください。

+

カウンターを表示するには、セレクタに {{ cssxref(":before") }} または {{ cssxref(":after") }} を追加し、content プロパティを使います（前のページ コンテンツ で行った要領です）。

+

content プロパティの値として、counter() とカウンター名を記述します。オプションとして種類を記述します。種類は上の 番号順リスト の欄にあるものと同じです。

+

通常、カウンターを表示する要素もまたカウンターを増やします。

+
+
+ 例
+

次のルールは numbered クラスを持つ {{ HTMLElement("h3") }} 要素が現れるたびにカウンターを初期化します:

+ 
h3.numbered {counter-reset: mynum;}
+
+

 

+

次のルールは numbered クラスを持つ {{ HTMLELement("p") }} 要素が現れるたびにカウンターを表示し、番号を増やします:

+ 
p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+

結果は次のようになります:

+ + + + + + +
Heading
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+
+ さらに詳しく
+

読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。

+

カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。

+

もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の Automatic counters and numbering をご覧ください。

+
+

実習: スタイルづけされたリスト

+

新しいHTML文書、doc2.html を作成してください。次の内容をコピー＆ペーストします:

+
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+

新しいスタイルシート、style2.css を作成してください。次の内容をコピー＆ペーストします:

+
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+

レイアウトやコメントが気に入らなければ変えてください。

+

ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:

+ + + + + + +
+

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+

Numbered paragraphs

+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+ チャレンジ
+

スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:

+ + + + + + +
+

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

 

+

次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:

+ + + + + + +
+

(A) The oceans

+

. . .

+

(B) Numbered paragraphs

+

. . .

+
+
+

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

+

さて次は？

+

{{ nextPage("/ja/docs/CSS/Getting_Started/Boxes", "ボックス") }} 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である ボックス（boxes）を CSS で扱う方法について述べます。

diff --git a/files/ja/web/guide/css/getting_started/tables/index.html b/files/ja/web/guide/css/getting_started/tables/index.html new file mode 100644 index 0000000000..0fb13e5828 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/tables/index.html @@ -0,0 +1,477 @@ +--- +title: Tables +slug: Web/Guide/CSS/Getting_started/Tables +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +
+ {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}
+

これは CSS Getting Started チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。

+

表（テーブル）について

+

テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。

+

文書を設計する際には、テーブルを細かな情報同士の 関係性 を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。

+

精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（レイアウト）のほうが適しています。

+

テーブルの構造

+

テーブルでは、情報の一つ一つが セル（cell） に入れて表示されます。

+

ページを横切るように並ぶセルが、 行（row）を作ります。

+

テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、ヘッダー（header）です。テーブルの終わりにある特殊な行グループが、フッター（footer）です。テーブルの中心的な行が ボディ（body）で、これも、グループに入っているかもしれません。

+

ページ下方に向けて並ぶセルは列（column）を作りますが、CSS のテーブルでは、列の用途には制限があります。

+
+
+ 例
+

Selectors ページの Selectors based on relationships の表には、行が 5 つ、セルが 10 個あります。

+

最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。

+

列は 2 つあります。

+
+

このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に 伸びた（span）複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。

+

ボーダー

+

セルにはマージンがありません。

+

セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを collapse にすると、間隔を完全に取り除くことができます。

+
+
+ 例
+

テーブルが 3 つあります。

+

左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:
+ （表示例は、この wiki の制限により、正しく表示されていないかもしれません）

+ + + + + + + + +
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+

キャプション

+

{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。

+

底部に移動させるには、{{cssxref("caption-side")}} プロパティを bottom にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。

+

キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。

+
+
+ 例
+

このテーブルは底部にキャプションがあります

+

（表示例は、この wiki の制限により、正しく表示されていないかもしれません）

+ 
#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+
+ + + + + + +
+ + + + + + + +
+ Suits
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+
+

空のセル

+

テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。

+

隠すには empty-cells: hide; と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。

+
+
+ 例
+

次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。

+

左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:

+ + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+
+
+ 詳細
+

テーブルについての詳しい情報は、CSS 仕様書の Tables をご覧ください。

+

そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。

+
+

実習: テーブルのスタイルづけ

+
    +
  1. 新しい HTML 文書 doc3.html を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください: +
    + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample document 3</title>
+    <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <table id="demo-table">
+      <caption>Oceans</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Area</th>
+          <th>Mean depth</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>million km<sup>2</sup></th>
+          <th>m</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Arctic</th>
+          <td>13,000</td>
+          <td>1,200</td>
+        </tr>
+        <tr>
+          <th>Atlantic</th>
+          <td>87,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Pacific</th>
+          <td>180,000</td>
+          <td>4,000</td>
+        </tr>
+        <tr>
+          <th>Indian</th>
+          <td>75,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Southern</th>
+          <td>20,000</td>
+          <td>4,500</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>Total</th>
+          <td>361,000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Mean</th>
+          <td>72,000</td>
+          <td>3,800</td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
+
    +
    +
    2. +
  2. 新しいスタイルシート style3.css を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します: + 
    /*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table > tfoot td {
+  background-color: #cee;
+}
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+
    +
    3. +
  3. 文書をブラウザで開きます。次の内容に似たものになるでしょう: + + + + + + +
    +
    +

    Oceans

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     AreaMean depth
     million km2m
    Arctic:13,0001,200
    Atlantic:87,0003,900
    Pacific:180,0004,000
    Indian:75,0003,900
    Southern:20,0004,500
    Total:361,000 
    Mean:72,0003,800
    +
    +
    +
    +
    4. +
  4. 表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです: +
      +
    • キャプションはテーブルのボーダーより外側に置かれています。
      • +
    • もしオプションでフォントの最小値を設定していれば、 km2 の上付き文字に影響します。
      • +
    • 空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。
      • +
    • コロンはスタイルシートで追加しています。
      • +
    +
    5. +
+
+
+ チャレンジ
+

スタイルシートを、テーブルが次のようになるように変えてください:

+ + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+

Oceans

+
+
+
+

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

+

さて次は？

+

{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の Full property table をご覧ください。

+

次のページでは、CSS スタイルシートの目的と構造をもう一度見ていきます。

diff --git a/files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html b/files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html new file mode 100644 index 0000000000..035c65e106 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html @@ -0,0 +1,303 @@ +--- +title: XUL ユーザ インターフェース +slug: Web/Guide/CSS/Getting_started/XUL_user_interfaces +translation_of: Archive/Beginner_tutorials/XUL_user_interfaces +--- +

{{ CSSTutorialTOC() }}

+

このページでは、ユーザ インターフェースを作成する言語を解説します。これは Mozilla 特有の言語です。

+

簡単なデモを作り、Mozilla ブラウザで実行してみましょう。

+

ユーザ インターフェース

+

HTML ではユーザ インターフェースをある程度サポートしていますが、スタンドアローンのアプリケーションを作成するのに必要な機能は十分に備わっていません。

+

Mozilla は、ユーザ インターフェイス作成用の言語 XUL (XML ユーザ インタフェース言語、"ズール" と読まれることが多い) を開発し、HTML の制約を解消しました。

+

XUL では、よく使われるユーザ インターフェースの機能が最初から組み込まれています。例えば、ダイアログやウイザードといった特殊なウィンドウ、ステータス バー、メニュー、ツール バーなどです。ブラウザーさえも組み込まれています。

+

XUL をこのチュートリアルで紹介されてきた CSS スタイル、JavaScript コードや XBL バインディングと組み合わせて使うと、高度な専用機能を部品から作成することができます。

+

他の XML ベースの言語と同じように、XUL でも CSS スタイルシートを使用します。

+ + + + + + + +
+ さらに詳しく
XUL ユーザー インターフェースの詳細は、この wiki の XUL ページをご覧下さい。
+

実例: XUL デモ

+

XUL ドキュメント ファイルをプレーン テキスト ファイル (doc7.xul) で新規作成します。下記の内容を一番下までスクロールし、すべての行をコピー & ペーストしてください。

+
+ 
<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="style7.css"?>
+<!DOCTYPE window>
+
+<window
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  title="CSS Getting Started - XUL demonstration"
+  onload="init();">
+
+<script type="application/javascript" src="script7.js"/>
+
+<label class="head-1" value="XUL demonstration"/>
+
+<vbox>
+
+  <groupbox class="demo-group">
+    <caption label="Day of week calculator"/>
+    <grid>
+      <columns>
+        <column/>
+        <column/>
+        </columns>
+      <rows>
+        <row>
+          <label class="text-prompt" value="Date:"
+            accesskey="D" control="date-text"/>
+          <textbox id="date-text" type="timed"
+            timeout="750" oncommand="refresh();"/>
+          </row>
+        <row>
+          <label value="Day:"/>
+          <hbox id="day-box">
+            <label class="day" value="Sunday" disabled="true"/>
+            <label class="day" value="Monday" disabled="true"/>
+            <label class="day" value="Tuesday" disabled="true"/>
+            <label class="day" value="Wednesday" disabled="true"/>
+            <label class="day" value="Thursday" disabled="true"/>
+            <label class="day" value="Friday" disabled="true"/>
+            <label class="day" value="Saturday" disabled="true"/>
+            </hbox>
+          </row>
+        </rows>
+      </grid>
+    <hbox class="buttons">
+      <button id="clear" label="Clear" accesskey="C"
+        oncommand="clearDate();"/>
+      <button id="today" label="Today" accesskey="T"
+        oncommand="setToday();"/>
+      </hbox>
+    </groupbox>
+
+  <statusbar>
+    <statusbarpanel id="status"/>
+    </statusbar>
+
+</vbox>
+
+</window>
+
+
+

次に、CSS ファイルを style7.css として新規作成します。下記の内容を一番下までスクロールし、すべての行をコピー & ペーストしてください。

+
+ 
/*** XUL demonstration ***/
+window {
+  -moz-box-align: start;
+  background-color: -moz-dialog;
+  font: -moz-dialog;
+  padding: 2em;
+  }
+
+.head-1 {
+  font-weight: bold;
+  font-size: 200%;
+  padding-left: 5px;
+  }
+
+
+/* the group box */
+.demo-group {
+  padding: 1em;
+  }
+
+.demo-group grid {
+  margin-bottom: 1em;
+  }
+
+.demo-group column {
+  margin-right: .5em;
+  }
+
+.demo-group row {
+  margin-bottom: .5em;
+  }
+
+.demo-group .buttons {
+  -moz-box-pack: end;
+  }
+
+
+/* the day-of-week labels */
+.day {
+  margin-left: 1em;
+  }
+
+.day[disabled] {
+  color: #777;
+  }
+
+.day:first-child {
+  margin-left: 4px;
+  }
+
+
+/* the left column labels */
+.text-prompt {
+  padding-top: .25em;
+  }
+
+
+/* the date input box */
+#date-text {
+  max-width: 8em;
+  }
+
+
+/* the status bar */
+statusbar {
+  width: 100%;
+  border: 1px inset -moz-dialog;
+  margin: 4px;
+  padding: 0px 4px;
+  }
+
+#status {
+  padding: 4px;
+  }
+
+#status[warning] {
+  color: red;
+  }
+
+
+

テキストファイルを script7.js として新規作成します。下記の内容を一番下までスクロールし、すべての行をコピー & ペーストしてください。

+
+ 
// XUL demonstration
+
+var dateBox, dayBox, currentDay, status; // elements
+
+// called by window onLoad
+function init() {
+  dateBox = document.getElementById("date-text")
+  dayBox = document.getElementById("day-box")
+  status = document.getElementById("status")
+  setToday();
+  }
+
+// called by Clear button
+function clearDate() {
+  dateBox.value = ""
+  refresh()
+  }
+
+// called by Today button
+function setToday() {
+  var d = new Date()
+  dateBox.value = (d.getMonth() + 1)
+    + "/" + d.getDate()
+    + "/" + d.getFullYear()
+  refresh()
+  }
+
+// called by Date textbox
+function refresh() {
+  var d = dateBox.value
+  var theDate = null
+
+  showStatus(null)
+  if (d != "") {
+    try {
+      var a = d.split("/")
+      var theDate = new Date(a[2], a[0] - 1, a[1])
+      showStatus(theDate)
+      }
+    catch (ex) {}
+    }
+  setDay(theDate)
+  }
+
+// internal
+function setDay(aDate) {
+  if (currentDay) currentDay.setAttribute("disabled", "true")
+  if (aDate == null) currentDay = null
+  else {
+    var d = aDate.getDay()
+    currentDay = dayBox.firstChild
+    while (d-- > 0) currentDay = currentDay.nextSibling
+    currentDay.removeAttribute("disabled")
+    }
+  dateBox.focus();
+  }
+
+function showStatus(aDate) {
+  if (aDate == null) {
+    status.removeAttribute("warning")
+    status.setAttribute("label", "")
+    }
+  else if (aDate === false || isNaN(aDate.getTime())) {
+    status.setAttribute("warning", "true")
+    status.setAttribute("label", "Date is not valid")
+    }
+  else {
+    status.removeAttribute("warning")
+    status.setAttribute("label", aDate.toLocaleDateString())
+    }
+  }
+
+
+

ここでは、ブラウザーのデフォルト テーマを使用してください。デモの結果が筆者の意図した通りになるようにするためです。もし他のテーマを使ってしまうと、ユーザー インターフェースの スタイルが違ったものになり、デモが変わった結果になるかもしれません。

+

Mozilla ブラウザーで XUL ドキュメントを開きインターフェースを使ってみてください。

+

この wiki は XUL とページ内 JavaScript に対応していないので、ここではデモをお見せできませんが下のようになるはずです。

+ + + + + + +
+

XUL demonstration

+
+

Day of week calculator

+ + + + + + + + + + + + + + + +
Date:6/27/2005
Day:Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday
  +
+

Clear Today

+
+
+
+
+

June 27, 2005

+
+
+

このデモで注目すべき点は下記の通りです。

+ +

ドキュメントのスタイ-ルシートをよく見て、その中のルールをすべて理解しているか確認してください。もし分からないものがあったらコメント アウトして、ブラウザーでリロードしてください。するとそのルールが無効になることで、どのような変化があるかが分かります。

+ + + + + + + +
+ チャレンジ
Use the DOM Inspector tool to examine the Date textbox. It is made up of other elements that are generated by its XBL binding. +

Discover the class of its html:input element. This is the element that actually receives user input.

+

Using this knowledge, add a rule to the stylesheet that makes the background of the Date box pale blue when it has keyboard focus (but white when keyboard focus is somewhere else).

+
+

What next?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

In this demonstration, you see the standard rectangular shapes that are common to most user interfaces. Mozilla also supports a specialized graphics language for creating shapes, using CSS stylesheets to specify the style. The next page demonstrates this: SVG and CSS.

diff --git a/files/ja/web/guide/css/media_queries/index.html b/files/ja/web/guide/css/media_queries/index.html new file mode 100644 index 0000000000..961536b070 --- /dev/null +++ b/files/ja/web/guide/css/media_queries/index.html @@ -0,0 +1,412 @@ +--- +title: メディアクエリ +slug: Web/Guide/CSS/Media_queries +tags: + - CSS + - CSS Reference +--- +

{{ gecko_minversion_header("1.9.1") }}

+ +

CSS 3 ではメディア依存のスタイルシートのサポートが強化され、よりメディアの特性に適したスタイルシートを適用できます。メディアクエリは、メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定 (limits the style sheets' scope) する一つ以上の式からなります。メディア特性には、メディアの幅と高さ、色数などがあります。メディアクエリにより、コンテンツそのものを変更せずに、出力デバイスに合わせてコンテンツを表現することができます。

+ +

構文

+ +

メディアクエリは、メディアタイプと、メディア特性を必要とする一つ以上の式からなります。この式の結果は、true または false になります。クエリの結果は、ドキュメントが表示されるデバイスの種類がメディアクエリで指定されたメディアタイプにマッチし、さらにメディアクエリのすべての式が true のとき、true になります。

+ +

論理演算子

+ +

論理演算子を使用して複雑なメディアクエリを記述できます。論理演算子には、not および and, only があります。

+ +

また、複数のメディアクエリをカンマ区切りのリスト形式で併記することもできます。リスト内のいずれかのメディアクエリが true であれば、関連付けられたスタイルシートが適用されます。これは論理演算子の "or" と等価です。

+ +

not キーワードは、クエリの結果を否定します。例えば、"all and (not color)" のクエリは、モノクロデバイスではメディアタイプに関係なく true になります。

+ +

only キーワードは、メディアクエリに対応していない古いブラウザからスタイルシートを隠します:

+ +
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+
+ +

擬似 BNF (この表記を好む方のために)

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

メディアクエリは大文字と小文字を区別しません。メディアクエリに書かれた未知のメディアタイプは常に false になります。

+ +
注記: 式 (expression) の前後には括弧が必要です。括弧を書かないとエラーになります。
+ +

メディア特性

+ +

ほとんどのメディア特性には、特性が式の値 "以上" または "以下" であることを明示的に制約する "min-" または "max-" 前置詞を付けられます。これは、HTML や XML に干渉する "<" および ">" 記号の使用を避けるためのものです。値を指定せずにメディア特性を使用した場合、特性の値が 0 でなくても、式の結果は true になります。

+ +
注記: メディア特性がブラウザを実行中のデバイスに適用されない場合、メディア特性に記述された式の値は常に false になります。例えば、音声デバイスに対するアスペクト比の問い合わせは常に false になります。
+ +

color

+ +

値: {{cssxref("<color>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスのカラーコンポーネントあたりのビット数を指示します。デバイスがカラー表示可能なものでない場合、この値は 0 になります。

+ +
注記: カラーコンポーネントがカラーコンポーネントごとに異なるビット数を持つ場合、最も小さな数値が使用されます。例えば、ディスプレイが、青は 5 ビット、赤と緑は 6 ビットのカラーコンポーネントで構成されている場合、デバイスはカラーコンポーネントあたり 5 ビット使用するものとみなされ、color テーブルではビット数の最小値が使用されます。
+ +

例

+ +

すべてのカラー表示可能なデバイスにスタイルシートを適用するには:

+ +
@media all and (color) { ... }
+
+ +

カラーコンポーネントあたり最低 4 ビットのデバイスにスタイルシートを適用するには:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスのカラー検索テーブルのエントリ数を指示します。

+ +

例

+ +

インデックス化されたカラーを使用するすべてのデバイスにスタイルシートを適用するよう指示するには:

+ +
@media all and (color-index) { ... }
+
+ +

最低 256 色を持つインデックス化されたカラーデバイスにスタイルシートを適用するには:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

値: 整数 / 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの対象とする表示領域のアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。

+ +

例

+ +

以下は、表示領域が、その高さよりも幅が広い場合に使用される、特別なスタイルシートを選択します。

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

これは、アスペクト比が 1:1 以上の場合のスタイルを選択します。

+ +

device-aspect-ratio

+ +

値: 整数 / 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスのアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。

+ +

例

+ +

以下は、ワイドスクリーンディスプレイに使用する特別なスタイルシートを選択します。

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

これは、アスペクト比が 16:9 または 16:10 の場合のスタイルを選択します。

+ +

device-height

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの高さを記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。

+ +

例

+ +

幅 800 ピクセル未満のスクリーンに表示されるドキュメントにスタイルシートを適用するには:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+
+ +

device-width

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの幅を記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。

+ +

grid

+ +

値: 整数
+ メディア: all
+ min/max 前置詞の使用: 不可

+ +

出力デバイスがグリッドデバイスとビットマップデバイスのどちらなのかを決定します。デバイスがグリッドベース (tty ターミナルや電話機のディスプレイなど表示部が一行ずつ) の場合、値は 1 になります。ビットマップデバイスの場合は 0 になります。

+ +
注記: Gecko (および Firefox) は現在グリッドデバイスに対応していないため、このメディア特性はサポートされていません。
+ +

例

+ +

ディスプレイの表示幅が 15 文字以下の handheld デバイスにスタイルを適用するには:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
注記: "em" 単位はグリッドデバイスで特別な意味を持ちます。"em" 単位の正確な幅を特定することができないため、1em はグリッドセル一つ分の幅と高さであると仮定されます。
+ +

height

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

height メディア特性には、出力デバイスの描画域の高さを記述します (viewport の高さやプリンタのページ印刷領域の高さなど)。

+ +
注記: ユーザがウィンドウの大きさを変更すると、width や height メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。
+ +

monochrome

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 可

+ +

モノクロ (グレースケール) デバイス上のピクセルあたりのビット数を指示します。デバイスがモノクローム表示でない場合、デバイスの値は 0 になります。

+ +

例

+ +

すべてのモノクロデバイスにスタイルシートを適用するには:

+ +
@media all and (monochrome) { ... }
+
+ +

ピクセルあたり最低 8 ビットのモノクロデバイスにスタイルシートを適用するには:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

値: landscape | portrait
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスが横置き (landscape: 高さより幅が広い表示) と縦置き (portrait: 幅より高さが高い表示) のどちらのモードなのかを指示します。

+ +

例

+ +

縦置き方向のときにだけスタイルシートを適用するには:

+ +
@media all and (orientation: portrait) { ... }
+ +

resolution

+ +

値: {{cssxref("<resolution>")}}
+ メディア: {{cssxref("Media/Bitmap", "bitmap")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの解像度 (ピクセル密度) を指示します。解像度は、1 インチあたりのドット数 (dpi) または 1 センチメートルあたりのドット数 (dpcm) で指定されます。

+ +

例

+ +

解像度が最低 300 dpi のデバイスにスタイルシートを適用するには:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

scan

+ +

値: progressive | interlace
+ メディア: {{cssxref("Media/TV", "tv")}}
+ min/max 前置詞の使用: 不可

+ +

テレビ出力デバイスの走査方式を記述します。

+ +
注記: Gecko (および Firefox) は現在 tv メディアタイプをサポートしていないため、このメディア特性も同様にサポートされていません。
+ +

例

+ +

プログレッシブ方式で走査するテレビにだけスタイルシートを適用するには:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

width メディア特性には、出力デバイスの描画域の幅を記述します (viewport の幅やプリンタのページ印刷領域の幅など)。

+ +
注記: ユーザがウィンドウの大きさを変更すると、width や height メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。
+ +

例

+ +

幅 20 em 以上の handheld デバイスまたは screen デバイスにスタイルシートを指定したいときは:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

次のメディアクエリは、印刷された幅が 8.5 インチ以上のメディアに適用されるスタイルシートを指定します:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

次のメディアクエリは、viewport の幅が 500 ピクセルから 800 ピクセルの場合に使用されるスタイルシートを指定します:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Mozilla 独自のメディア特性

+ +

{{ gecko_minversion_header("1.9.2") }}

+ +

Mozilla はいくつかの Gecko 独自のメディア特性を提供しています。これらの一部は公式のメディア特性として提案される予定です。

+ +

-moz-images-in-menus

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

メニューに画像が表示できるデバイスの場合、この値は 1 になります。そうでない場合は 0 になります。これは、{{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS 擬似クラスに相当します。

+ +

-moz-mac-graphite-theme

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

Mac OS X で、ユーザがデバイスのアピアランスを "Graphite" に設定している場合、この値は 1 になります。ユーザが標準の青色のアピアランスを使用しているか Mac OS X でない場合、この値は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS 擬似クラスに相当します。

+ +

-moz-maemo-classic

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが Maemo でオリジナルのテーマを使用している場合、この値は 1 になります。新しい Fremantle テーマを使用している場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-end-backward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-end-forward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-start-backward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-start-forward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-thumb-proportional

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、スクロールバーのトンボのサイズを変化させる (ドキュメント全体に対する表示部分の割り合いによる) 場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS 擬似クラスに相当します。

+ +

-moz-touch-enabled

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスが (タッチスクリーンの) タッチイベントをサポートしている場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS 擬似クラスに相当します。

+ +

例

+ +

例えば、ユーザがタッチスクリーンデバイスで操作している場合に、指で押しやすくするため、ボタンを大きめに描画することが考えられます。

+ +

-moz-windows-classic

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが Windows でテーマを適用していない (uxtheme を使用する代わりにクラシックモードで使用している) 場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(windows-classic)") }} CSS 擬似クラスに相当します。

+ +

-moz-windows-compositor

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが Windows で DWM compositor を使用している場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS 擬似クラスに相当します。

+ +

-moz-windows-default-theme

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが現在 Windows の既定のテーマ (Luna, Royale, Zune または Vista Basic, Vista Advanced, Aero Glass を含む Aero) の一つを使用している場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS 擬似クラスに相当します。

+ +

参照

+ + -- cgit v1.2.3-54-g00ecf