diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
| commit | 6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch) | |
| tree | 890e3e27131be010d82ef957fa68db495006cb0e /files/ja/web/guide/css/getting_started | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2 translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip | |
unslug ja: move
Diffstat (limited to 'files/ja/web/guide/css/getting_started')
6 files changed, 0 insertions, 1838 deletions
diff --git a/files/ja/web/guide/css/getting_started/boxes/index.html b/files/ja/web/guide/css/getting_started/boxes/index.html deleted file mode 100644 index 379b38949d..0000000000 --- a/files/ja/web/guide/css/getting_started/boxes/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Boxes -slug: Web/Guide/CSS/Getting_started/Boxes -tags: - - CSS - - 'CSS:Getting_Started' -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -<div>{{CSSTutorialTOC}}</div> - -<p>{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。</p> - -<h2 class="clearLeft" id="ボックスについて">ボックスについて</h2> - -<p>ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。</p> - -<p>中央に、<em>要素（element）</em>がその内容を表示するのに必要なスペースがあります。その周りに パディング（<em>padding）</em> があり、その周りに <em>ボーダー（border）</em> があります。その周りには <em>マージン（margin）</em> があって、他要素とその要素を隔てています。</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">マージン</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">パディング</p> - - <div style="background-color: #eee;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p> - </div> - </div> - </div> - - <p><em>薄い灰色がレイアウトの部品を示します。</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #fff;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p> - </div> - </div> - </div> - - <p><em>ブラウザではこう見えます。</em></p> - </td> - </tr> - </tbody> -</table> - -<p>パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。</p> - -<h3 id="Coloring" name="Coloring">彩色</h3> - -<p>パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">マージン</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">パディング</p> - - <div style="background-color: #ded;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p> - </div> - </div> - </div> - - <p><em>要素の背景色は緑です。</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #efe;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p> - </div> - </div> - </div> - - <p><em>ブラウザではこう見えます</em>。</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="Borders" name="Borders">ボーダー</h3> - -<p>ボーダーを使って、要素を線や枠囲みで装飾できます。</p> - -<p>要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。</p> - -<p>選べるスタイル:</p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 6em;"> - <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> - </td> - </tr> - <tr> - <td style="width: 6em;"> - <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> - </td> - </tr> - </tbody> -</table> - -<p>また、スタイルを <code>none</code> か <code>hidden</code> にして、明示的にボーダーを消したり、色を <code>transparent</code> にして、レイアウトを変えずにボーダーを透明にしたりできます。</p> - -<p>一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>次のルールは、見出し要素の背景色と上辺のボーダーを定義します:</p> - -<pre class="brush:css">h3 { - border-top: 4px solid #7c7; /* mid green */ - background-color: #efe; /* pale green */ - color: #050; /* dark green */ -}</pre> - -<p>結果は次のようになります:</p> - -<table> - <tbody> - <tr> - <td> - <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">スタイルつきの見出し</p> - </td> - </tr> - </tbody> -</table> - -<p>次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:</p> - -<pre class="brush:css">img {border: 2px solid #ccc;} -</pre> -</div> - -<p>結果は次のようになります:</p> - -<table> - <tbody> - <tr> - <td>画像:</td> - <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" src="/@api/deki/files/47/=Blue-rule.png"></td> - </tr> - </tbody> -</table> - -<h3 id="Margins_and_padding" name="Margins_and_padding">マージンとパディング</h3> - -<p>マージンとパディングで要素の位置を調整し、周りに余白を作ります。</p> - -<p>{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。</p> - -<p>幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。</p> - -<p>幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。</p> - -<p>4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>次のルールは、<code>remark</code> クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。</p> - -<p>パディングで囲むことで、テキストから枠が少し離れます。</p> - -<p>左マージンは段落を他のテキストからインデントします:</p> - -<pre class="brush:css">p.remark { - border: 2px solid red; - padding: 4px; - margin-left: 24px; - } -</pre> - -<p>結果は次のようになります:</p> - -<table> - <tbody> - <tr> - <td> - <p>ここは通常の段落です。</p> - - <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">ここは remark 用の段落です。</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">さらに詳しく</div> - -<p>マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。</p> - -<p>ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。</p> - -<p>望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。</p> - -<p>パディング、マージン、ボーダーについての詳しい情報は、リファレンスの <a href="/ja/docs/CSS/box_model" title="CSS/box model"><span>ボックスモデル</span></a> をご覧ください。</p> -</div> - -<h2 id="Action.3A_Adding_borders" name="Action.3A_Adding_borders">実習: ボーダーの追加</h2> - -<p>CSS ファイル <code>style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください</code>:</p> - -<pre class="brush:css">h3 {border-top: 1px solid gray;} -</pre> - -<p>前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:</p> - -<pre class="brush:css">li { - list-style: lower-roman; - margin-bottom: 8px; - } -</pre> - -<p>ブラウザを更新すると次の結果になります:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">チャレンジ</div> - -<p>スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; padding-left: 1em;"> - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> - -<p>（幅や色を正確に同じにする必要はありません。）</p> -</div> - -<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#Boxes">このチャレンジの解答を見る。</a></p> - -<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> - -<p>{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の <a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a> を変えます。</p> diff --git a/files/ja/web/guide/css/getting_started/color/index.html b/files/ja/web/guide/css/getting_started/color/index.html deleted file mode 100644 index 4d080bc3a4..0000000000 --- a/files/ja/web/guide/css/getting_started/color/index.html +++ /dev/null @@ -1,349 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -<p>この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。</p> - -<p>サンプルスタイルシートに、背景色を指定出来るようになります。</p> - -<p>{{ 英語版章題("Information: Color") }}</p> - -<h3 id=".E8.A7.A3.E8.AA.AC:_.E8.89.B2" name=".E8.A7.A3.E8.AA.AC:_.E8.89.B2">解説: 色</h3> - -<p>このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。</p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>プライマリー</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>セカンダリー</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> - <caption>詳細情報</caption> - <tbody> - <tr> - <td>ブラウザが上記以上の名前付きの色をサポートしている可能性もあります - <table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> - </table> - - <p>拡張された色の名前リストについては、CSS 3 カラーモジュールの <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG 色キーワード</a> を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。</p> - </td> - </tr> - </tbody> -</table> - -<p>より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の<em>16 進数</em> 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p>完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p>これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。</p> - -<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;"> - <caption>Examples</caption> - <tbody> - <tr> - <td>少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。 - <table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>赤から始めます</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>桃色に近づけるため、緑・青を追加</td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td>橙に近づけるため、緑を追加</td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td>暗くするため、全ての色を減らす</td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td>飽和を減らすため、色の値を近づける</td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td>色同士を完全に同じにすると、灰色</td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> - </table> - </td> - </tr> - <tr> - <td>空色のようなパステル調を出すには: - <table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>白から始めます:</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td>他の色の値を少し減らします:</td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> - <caption>More details</caption> - <tbody> - <tr> - <td>色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。 - <p>たとえば、次の色はマロン (濃い赤) になります :</p> - - <div style="width: 24em;"> - <pre> -rgb(128, 0, 0) -</pre> - </div> - - <p><br> - 色指定の詳細については、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">色</a> をご覧ください。</p> - - <p>メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 システム色</a> があります。</p> - </td> - </tr> - </tbody> -</table> - -<p><br> - {{ 英語版章題("Color properties") }}</p> - -<h4 id=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC" name=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC">色のプロパティー</h4> - -<p><code>color</code> プロパティーをすでに利用しました。</p> - -<p>同様に <code>background-color</code> プロパティーを指定することで、要素の背景色を変えることができます。</p> - -<p>背景色には <code>transparent</code> を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。</p> - -<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;"> - <caption>Example</caption> - <tbody> - <tr> - <td>このチュートリアルの <strong>サンプル</strong> ボックスは、このような 淡黄色を背景色にしています。 - <div style="width: 24em;"> - <pre> -background-color: #fffff4; -</pre> - </div> - - <p><strong>より詳細は</strong> のボックスは淡灰色を使っています。</p> - - <div style="width: 24em;"> - <pre> -background-color: #f4f4f4; -</pre> - </div> - </td> - </tr> - </tbody> -</table> - -<p>{{ 英語版章題("Action: Using color codes") }}</p> - -<h3 id=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B" name=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B">試してみましょう: カラーコードを利用する</h3> - -<p>CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)</p> - -<div style="width: 32em;"> -<pre class="eval">/*** 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; - <strong>background-color: #ddf;</strong> - font: 200% serif; - } - -.carrot {color: red;} -.spinach {color: green;} -</pre> -</div> - -<p>ブラウザを再読み込みして結果を見てみましょう。</p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<p> </p> - -<table style="background-color: #ffe; border: 1px solid #36b; padding: 1em; width: 100%;"> - <caption>Challenge</caption> - <tbody> - <tr> - <td>結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。 - <p>(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)</p> - </td> - </tr> - </tbody> -</table> - -<p><br> - {{ 英語版章題("What next?") }}</p> - -<h4 id=".E6.AC.A1.E3.81.AF_.3F" name=".E6.AC.A1.E3.81.AF_.3F">次は ?</h4> - -<p>あなたのサンプルは完全にスタイルと中身に分離されました。</p> - -<p>次のページでは、この完全分離の状態に例外を作る方法を説明します。 <strong><a href="Content">Content</a></strong></p> diff --git a/files/ja/web/guide/css/getting_started/javascript/index.html b/files/ja/web/guide/css/getting_started/javascript/index.html deleted file mode 100644 index fc2fa7a3b4..0000000000 --- a/files/ja/web/guide/css/getting_started/javascript/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -<div> - {{CSSTutorialTOC}}</div> -<p>これは <a href="/ja/docs/CSS/Getting_Started" title="https://developer.mozilla.org/ja/CSS/Getting_Started">CSS チュートリアル</a> 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。</p> -<p>第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。</p> -<p>代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。</p> -<p>前の章（第 1 部）: <a href="/ja/docs/CSS/Getting_Started/Media" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Media">メディア</a><br> - 次の章: <a href="/ja/docs/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/ja/CSS/Getting_Started/SVG_graphics">SVG</a></p> -<h2 id="Information:_JavaScript" name="Information:_JavaScript">JavaScriptについて</h2> -<p>JavaScript は<em>プログラミング言語</em> です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。</p> -<p>JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。</p> -<p>3 つの方法があります:</p> -<ul> - <li>文書内のスタイルシートの一覧を扱う方法—例: スタイルシートの追加、削除、編集</li> - <li>スタイルシート内のルールを扱う方法—例: ルールの追加、削除、編集</li> - <li>DOM 内の 個々の要素を扱う方法—文書のスタイルシートと関係なしに、スタイルシートを編集します</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption> - さらに詳しく</caption> - <tbody> - <tr> - <td>JavaScript, についてのさらに詳しい情報は、この wiki の <a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> のページをご覧ください。</td> - </tr> - </tbody> -</table> -<h2 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">実習: JavaScript の実演</h2> -<p>新規 HTML 文書 <code>doc5.html</code> を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:</p> -<div style="width: 48em;"> - <pre class="brush: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> -</pre> -</div> -<p>新規 CSS ファイル <code>style5.css</code> を作り、次の内容をコピー＆ペーストしてください:</p> -<div style="width: 48em;"> - <pre class="brush:css;">/*** JavaScript demonstration ***/ -#square { - width: 20em; - height: 20em; - border: 2px inset gray; - margin-bottom: 1em; -} - -button { - padding: .5em 2em; -} -</pre> -</div> -<p>新規テキストファイル <code>script5.js</code> を作り、以下の内容をコピー＆ペーストしてください:</p> -<div style="width: 48em;"> - <pre class="brush: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"); -} -</pre> -</div> -<p>ブラウザで HTML 文書を開いて、ボタンを押してください。</p> -<p>この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:</p> -<table> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript sample</strong></p> - </td> - </tr> - <tr> - <td> </td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript sample</strong></p> - </td> - </tr> - <tr> - <td style="background: #fa4;"> </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<div class="note"> - この実演についての<strong>重要な補足</strong>: - <ul> - <li>HTML 文書からは、いつものようにスタイルシートがリンクされ、スクリプトもリンクされています</li> - <li>スクリプトは DOM の個々の要素を扱います。正方形のスタイルを直接編集しています。ボタンのスタイルは属性を変更することで、間接的に編集しています。</li> - <li>JavaScript では、<code>document.getElementById("square")</code> は CSS セレクタ <code>#square</code> と、機能的に同義です。</li> - <li>JavaScript では、<code>backgroundColor</code> は CSSのプロパティ <code>background-color</code> に相当します。JavaScriptでは名前にハイフンを含めることができないので、"キャメルケース" が代わりに使われます。</li> - <li>ブラウザ内蔵の CSS ルールには<br> - <code>button{{mediawiki.external('disabled=\"true\"')}}</code> に対するものがあり、ボタンが使用不可にされるとボタンの外見を変更します。</li> - </ul> -</div> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> - <caption> - チャレンジ</caption> - <tbody> - <tr> - <td>スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。</td> - </tr> - </tbody> -</table> -<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#JavaScript">チャレンジの解答を見る。</a></p> -<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> -<p>このページにわかりづらいところやご意見があれば <a href="/Talk:ja/CSS/Getting_Started/JavaScript" title="Talk:ja/CSS/Getting_Started/JavaScript">Discussion</a> ページに参加してください。</p> -<p>この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: <strong><a href="/ja/docs/CSS/Getting_Started/XBL_bindings" title="CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p> diff --git a/files/ja/web/guide/css/getting_started/layout/index.html b/files/ja/web/guide/css/getting_started/layout/index.html deleted file mode 100644 index e8bd18d944..0000000000 --- a/files/ja/web/guide/css/getting_started/layout/index.html +++ /dev/null @@ -1,285 +0,0 @@ ---- -title: Layout -slug: Web/Guide/CSS/Getting_started/Layout -tags: - - CSS - - 'CSS:Getting_Started' -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -<div> - {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}</div> -<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。</p> -<h2 class="clearLeft" id="レイアウトについて">レイアウトについて</h2> -<p>CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。</p> -<p>多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。</p> -<p>このページでは、あなたが試せるような簡単な技法をいくつか述べます。</p> -<h3 id="Document_structure" name="Document_structure">文書の構造</h3> -<p>文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。</p> -<p>お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。</p> - <p>セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。</p> - <p>この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、<code>id</code> 属性で見分けられます。</p> - <pre class="brush:html;highlight:[2,8]"><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> -</pre> - <p>これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。</p> - <pre class="brush:css">ul, #numbered { - border: 1em solid #69b; - padding-right:1em; -} -</pre> - <p>結果は次のようになります:</p> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="Size_units" name="Size_units">サイズの単位（Size units）</h3> -<p>このチュートリアルではこれまで、サイズを pixels (<code>px</code>) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。</p> -<p>多くの用途で、サイズをパーセンテージか ems (<code>em</code>) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。</p> - <p>右辺のボーダーは ems 単位のサイズで定義されています。</p> - <p>ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div style=""> - 僕の大きさを変えてお願い</div> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - さらに詳しく</div> - <p>その他のデバイスには、これ以外の長さの単位が適しています。</p> - <p>これについては、このチュートリアルの後半のページにもっと情報があります。</p> - <p>すべての利用可能な値と単位の詳細は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> をご覧ください。</p> -</div> -<h3 id="Text_layout" name="Text_layout">テキストのレイアウト</h3> -<p>2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。</p> -<dl> - <dt> - {{cssxref("text-align")}}</dt> - <dd> - 文字寄せを行います。次のうちいずれかの値を使います: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd> - <dt> - {{cssxref("text-indent")}}</dt> - <dd> - 指定した幅でインデントを行います。</dd> -</dl> -<p>これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例: 見出しを中央寄せする</div> - <pre class="brush:css">h3 { - border-top: 1px solid gray; - text-align: center; -} -</pre> - <p>表示結果:</p> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> - </td> - </tr> - </tbody> - </table> - <p>HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。</p> -</div> -<h3 id="Floats" name="Floats">フロート（Floats、浮動体）</h3> -<p>{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。</p> -<p>文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。</p> - <p>見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。</p> - <pre class="brush:css">ul, -#numbered { float: left; } -h3 { clear: left; } -</pre> -</div> -<p>結果は次のようになります:</p> -<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> -<p>（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）</p> -<h3 id="Positioning" name="Positioning">位置取り</h3> -<p>{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。</p> -<p>これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。</p> -<dl> - <dt> - <code>relative</code></dt> - <dd> - 相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。</dd> - <dt> - <code>fixed</code></dt> - <dd> - 固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。</dd> - <dt> - <code>absolute</code></dt> - <dd> - 絶対的。要素は祖先要素の内、直近のポジショニング要素 (<code>position</code> プロパティの値が <code>relative</code>、<code>fixed</code> 、<code>absolute</code> の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には <code>position:relative</code> を用いる事により親要素自身への影響を回避できます。</dd> - <dt> - <code>static</code></dt> - <dd> - 静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。</dd> -</dl> -<p><code>position</code> プロパティ（<code>static</code> を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: <code>top</code> 、 <code>right</code> 、 <code>bottom</code> 、 <code>left</code> 、 <code>width</code> 、 <code>height</code> これにより、要素の現れる場所やおそらくはそのサイズも指定します。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例: 複数の要素を重ねる</div> - <p>2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:</p> - <pre class="brush:html"><div id="parent-div"> - <p id="forward">/</p> - <p id="back">\</p> -</div> -</pre> - <p>スタイルシートで、親要素の <code>position</code> を <code>relative</code> にします。移動量を指定する必要はありません。子要素の <code>position</code> を <code>absolute</code> にします。</p> - <pre class="brush:css">#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; -} -</pre> - <p>結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。</p> - <div style="position: relative; left: .33em; font: bold 300% sans-serif;"> - <p style="position: absolute; margin: 0; top: 0; left: 0; color: blue;">/</p> - <p style="position: absolute; margin: 0; top: 0; left: 0; color: red;">\</p> - </div> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - さらに詳しく</div> - <p>位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: <a href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> と <a href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> にあります。</p> - <p>多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。</p> -</div> -<h2 id="Action.3A_Specifying_layout" name="Action.3A_Specifying_layout">実習: レイアウトの定義</h2> -<ol> - <li>サンプル文書 <code>doc2.html</code> と スタイルシート <code>style2.css</code> を、上の『<a href="#Document_structure" title="#Document structure"><strong>文書の構造</strong></a>』と『<a href="#Floats" title="#Floats"><strong>フロート</strong></a>』の各章にある例を使って変更してください。</li> - <li><a href="#Floats" title="#Floats"><strong>フロート</strong></a> の例にパディングを追加し、右のボーダーからテキストを <code>0.5em</code> 離してください。</li> -</ol> -<div class="tuto_example"> - <div class="tuto_type"> - チャレンジ</div> - <p>サンプル文書 <code>doc2.html</code> を変更して、文書の末尾近く、<code></body> の直前に次のタグを追加します。</code></p> - <pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> -</pre> - <p>もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。</p> - <p><img height="25" src="/@api/deki/files/490/=Yellow-pin.png" style="border: 3px solid #ccc;" width="20"></p> - <p>画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。</p> - <p>スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。</p> - <p>ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。</p> - <div style="position: relative; width: 29.5em; height: 18em;"> - <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </div> - <p style=""> </p> - <div style="position: absolute; top: 2px; right: 0px;"> - <img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div> - </div> - </div> -</div> -<p><a class="button liveSample" href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Layout" title="CSS/Getting_Started/Challenge_solutions#Layout">このチャレンジの解答を見る</a></p> -<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> -<p>{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、<a href="/ja/docs/CSS/Getting_Started/Tables" title="CSS/Getting_Started/Tables">テーブル</a> のスタイルづけに特有のやり方をいくつか述べます。</p> diff --git a/files/ja/web/guide/css/getting_started/lists/index.html b/files/ja/web/guide/css/getting_started/lists/index.html deleted file mode 100644 index 212947f4f6..0000000000 --- a/files/ja/web/guide/css/getting_started/lists/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Lists -slug: Web/Guide/CSS/Getting_started/Lists -tags: - - CSS - - 'CSS:Getting_Started' -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ previousPage("/ja/docs/CSS/Getting_Started/Content", "Content") }} これは <a href="/ja/CSS/Getting_Started" title="ja/CSS/Getting Started">CSS Getting Started</a> チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。</p> -<h2 class="clearLeft" id="リストについて">リストについて</h2> -<p><a href="/ja/docs/CSS/Getting_Started/Content" title="/ja/docs/CSS/Getting_Started/Content">前章</a> のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。</p> -<p>CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。</p> -<p>リストにスタイルを定義するには、{{ cssxref("list-style") }} プロパティを使ってマーカーの種類を指定します。</p> -<p>CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：{{ HTMLElement("li") }}）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：{{ HTMLElement ("ul") }}））。</p> -<h3 id="箇条書きリスト（unordered_list）">箇条書きリスト（unordered list）</h3> -<p><em>箇条書きリスト</em>では、すべてのリスト項目に同じ方法でマーカーがつきます。</p> -<p>CSS には3種類のマーカーがあり、ブラウザは次のように表示します:</p> -<ul style="padding-left: 2em;"> - <li style="list-style-type: disc;"><code>disc</code></li> - <li style="list-style-type: circle;"><code>circle</code></li> - <li style="list-style-type: square;"><code>square</code></li> -</ul> -<p>もしくは、画像の URL を指定できます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>次のルールはリスト項目のクラス別に異なったマーカーを定義します:</p> - <pre class="brush:css">li.open {list-style: circle;} -li.closed {list-style: disc;} -</pre> - <p>リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):</p> - <pre class="brush:css"><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> -</pre> - <p>結果は次のようになるでしょう:</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <ul style="padding-right: 6em;"> - <li style="list-style-type: circle;">Lorem ipsum</li> - <li style="list-style-type: disc;">Dolor sit</li> - <li style="list-style-type: disc;">Amet consectetuer</li> - <li style="list-style-type: circle;">Magna aliquam</li> - <li style="list-style-type: disc;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="番号順リスト（ordered_lists）">番号順リスト（ordered lists）</h3> -<p><em>番号順リスト</em>では、リスト項目は各々違ったマーカーをつけられ、順番を表します。</p> -<p>マーカーの種類を定義するには {{ cssxref("list-style") }} プロパティを使ってください:</p> -<ul style="padding-left: 2em;"> - <li style=""><code>decimal</code></li> - <li style=""><code>lower-roman</code></li> - <li style=""><code>upper-roman</code></li> - <li style=""><code>lower-latin</code></li> - <li style=""><code>upper-latin</code></li> -</ul> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>これは <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: inherit;">info クラスの </span><span style="line-height: inherit;">{{ HTMLElement("ol") }} 要素についてのルールで、項目が大文字のアルファベット</span><span style="line-height: inherit;">で識別されます。</span></p> - <pre class="brush:css">ol.info {list-style: upper-latin;} -</pre> - <p>リスト内の {{ HTMLElement("li") }} 要素はこのスタイルを継承します:</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <ul> - <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - さらに詳しく</div> - <p>{{ cssxref("list-style") }} は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス {{ cssxref("list-style") }} をご覧ください。</p> - <p>箇条書きリスト ({{ HTMLElement("ul") }}) や番号リスト ({{ HTMLElement("ol") }}) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば {{ HTMLElement("ul") }} に番号リストを表示させたり、{{ HTMLElement("ol") }} に箇条書きリストを表示させたりもできます。</p> - <p>リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。</p> -</div> -<h3 id="カウンター">カウンター</h3> -<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> - <p><strong>注: </strong> 一部のブラウザーはカウンターをサポートしていません。<a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site</a> の <a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: inherit;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: inherit;"> ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの </span><a href="/ja/CSS_Reference" style="line-height: inherit;" title="https://developer.mozilla.org/ja/CSS_Reference">CSS Reference</a><span style="line-height: inherit;"> の各ページにもブラウザ実装状況の表があります。</span></p> -</div> -<p>カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。</p> -<p>通し番号を定義するには、独自に名前をつけた <em>counter</em> が必要です。</p> -<p>カウントが開始されるより前の要素のいずれかで、{{ cssxref("counter-reset") }} プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。</p> -<p>番号が増える要素の各々に {{ cssxref("counter-increment") }} プロパティとカウンター名を使ってください。</p> -<p>カウンターを表示するには、セレクタに {{ cssxref(":before") }} または {{ cssxref(":after") }} を追加し、<code>content</code> プロパティを使います（前のページ <strong><a href="/ja/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">コンテンツ</a></strong> で行った要領です）。</p> -<p><code>content</code> プロパティの値として、<code>counter()</code> とカウンター名を記述します。オプションとして種類を記述します。種類は上の <strong>番号順リスト</strong> の欄にあるものと同じです。</p> -<p>通常、カウンターを表示する要素もまたカウンターを増やします。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>次のルールは <code>numbered</code> クラスを持つ <span style="line-height: inherit;">{{ HTMLElement("h3") }} 要素が現れるたびにカウンターを初期化します:</span></p> - <pre class="brush:css">h3.numbered {counter-reset: mynum;} -</pre> - <p> </p> - <p>次のルールは<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">numbered クラスを持つ </code><span style="line-height: inherit;">{{ HTMLELement("p") }} 要素が現れるたびにカウンターを表示し、番号を増やします:</span></p> - <pre class="brush:css">p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold;} -</pre> - <p>結果は次のようになります:</p> - <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> - <tbody> - <tr> - <td><strong>Heading</strong><br> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - さらに詳しく</div> - <p>読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。</p> - <p>カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。</p> - <p>もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> をご覧ください。</p> -</div> -<h2 id="実習_スタイルづけされたリスト">実習: スタイルづけされたリスト</h2> -<p>新しいHTML文書、<code>doc2.html</code> を作成してください。次の内容をコピー＆ペーストします:</p> -<pre class="brush: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> -</pre> -<p>新しいスタイルシート、<code>style2.css を作成してください。次の内容をコピー＆ペーストします</code>:</p> -<pre class="brush:css;">/* numbered paragraphs */ -h3.numbered {counter-reset: mynum;} - -p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold; -} -</pre> -<p>レイアウトやコメントが気に入らなければ変えてください。</p> -<p>ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:</p> -<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> -<div class="tuto_example"> - <div class="tuto_type"> - チャレンジ</div> - <p>スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:</p> - <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </td> - </tr> - </tbody> - </table> - <p> </p> - <p>次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:</p> - <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> - <p><strong>. . .</strong></p> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> - </table> -</div> -<p><a href="/ja/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">チャレンジの解答を見る。</a></p> -<h2 id="さて次は？">さて次は？</h2> -<p>{{ nextPage("/ja/docs/CSS/Getting_Started/Boxes", "ボックス") }} 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である <a href="/ja/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">ボックス（boxes）</a>を CSS で扱う方法について述べます。</p> diff --git a/files/ja/web/guide/css/getting_started/tables/index.html b/files/ja/web/guide/css/getting_started/tables/index.html deleted file mode 100644 index 1f0905d1ec..0000000000 --- a/files/ja/web/guide/css/getting_started/tables/index.html +++ /dev/null @@ -1,478 +0,0 @@ ---- -title: Tables -slug: Web/Guide/CSS/Getting_started/Tables -tags: - - CSS - - 'CSS:Getting_Started' -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -<div> - {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}</div> -<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。</p> -<h2 class="clearLeft" id="Information.3A_Tables" name="Information.3A_Tables">表（テーブル）について</h2> -<p>テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。</p> -<p>文書を設計する際には、テーブルを細かな情報同士の <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">関係性</a> を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。</p> -<p>精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（<strong><a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a></strong>）のほうが適しています。</p> -<h3 id="Table_structure" name="Table_structure">テーブルの構造</h3> -<p>テーブルでは、情報の一つ一つが <em>セル（cell）</em> に入れて表示されます。</p> -<p>ページを横切るように並ぶセルが、 行（<em>row</em>）を作ります。</p> -<p>テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、<em>ヘッダー（header）</em>です。テーブルの終わりにある特殊な行グループが、<em>フッター（footer）</em>です。テーブルの中心的な行が <em>ボディ（body）</em>で、これも、グループに入っているかもしれません。</p> -<p>ページ下方に向けて並ぶセルは<em>列（column）</em>を作りますが、CSS のテーブルでは、列の用途には制限があります。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p><a href="/ja/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors">Selectors</a> ページの <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">Selectors based on relationships</a> の表には、行が 5 つ、セルが 10 個あります。</p> - <p>最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。</p> - <p>列は 2 つあります。</p> -</div> -<p>このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に <em>伸びた（span）</em>複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。</p> -<h3 id="Borders" name="Borders">ボーダー</h3> -<p>セルにはマージンがありません。</p> -<p>セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを <code>collapse</code> にすると、間隔を完全に取り除くことができます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>テーブルが 3 つあります。</p> - <p>左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:<br> - （表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p> - <table style="border: 2px outset #36b ; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border-collapse: separate;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 2em;"> - <table style="border-collapse: separate;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="Captions" name="Captions">キャプション</h3> -<p>{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。</p> -<p>底部に移動させるには、{{cssxref("caption-side")}} プロパティを <code>bottom</code> にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。</p> -<p>キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>このテーブルは底部にキャプションがあります</p> - <p>（表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p> - <pre class="brush: css">#demo-table > caption { - caption-side: bottom; - font-style: italic; - text-align: right; -} -</pre> - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table> - <caption> - Suits</caption> - <tbody> - <tr> - <td> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid gray; text-align: center;">Clubs</td> - <td style="border: 1px solid gray; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid gray; text-align: center;">Diamonds</td> - <td style="border: 1px solid gray; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="Empty_cells" name="Empty_cells">空のセル</h3> -<p>テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。</p> -<p>隠すには <code>empty-cells: hide;</code> と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。</p> - <p>左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border-collapse: separate; background-color: #dfd;"> - <tbody> - <tr> - <td style="border: 1px solid #555; background-color: #eee;"> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="border-collapse: separate; background-color: #dfd;"> - <tbody> - <tr> - <td> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - 詳細</div> - <p>テーブルについての詳しい情報は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> をご覧ください。</p> - <p>そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。</p> -</div> -<h2 id="Action.3A_Styling_a_table" name="Action.3A_Styling_a_table">実習: テーブルのスタイルづけ</h2> -<ol> - <li>新しい HTML 文書 <code>doc3.html</code> を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください: - <div style="height: 36em; overflow: auto;"> - <pre class="brush: 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> -</pre> - </div> - </li> - <li>新しいスタイルシート <code>style3.css</code> を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します: - <pre class="brush: 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; -} -</pre> - </li> - <li>文書をブラウザで開きます。次の内容に似たものになるでしょう: - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </li> - <li>表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです: - <ul> - <li>キャプションはテーブルのボーダーより外側に置かれています。</li> - <li>もしオプションでフォントの最小値を設定していれば、 km<sup>2</sup> の上付き文字に影響します。</li> - <li>空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。</li> - <li>コロンはスタイルシートで追加しています。</li> - </ul> - </li> -</ol> -<div class="tuto_example"> - <div class="tuto_type"> - チャレンジ</div> - <p>スタイルシートを、テーブルが次のようになるように変えてください:</p> - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> - </div> - </td> - </tr> - </tbody> - </table> -</div> -<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Tables" title="CSS/Getting started/Challenge solutions#Tables">チャレンジの解答を見る。</a></p> -<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> -<p>{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> をご覧ください。</p> -<p>次のページでは、CSS スタイルシートの目的と構造を<a href="/ja/docs/CSS/Getting_Started/Media" title="CSS/Getting_Started/Media">もう一度見ていきます</a>。</p> |