diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/learn/css/first_steps | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/learn/css/first_steps')
6 files changed, 1239 insertions, 0 deletions
diff --git a/files/ja/learn/css/first_steps/getting_started/index.html b/files/ja/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..e11d48443c --- /dev/null +++ b/files/ja/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,263 @@ +--- +title: CSS 入門 +slug: Learn/CSS/First_steps/Getting_started +tags: + - Beginner + - CSS + - Classes + - Elements + - Learn + - Selectors + - Syntax + - state +translation_of: Learn/CSS/First_steps/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> + +<p class="summary">この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">ソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの働き方</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML序論</a>を学んでいること。)</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS 文書と HTML ファイルのリンクのさせかたを理解し、簡単なテキストをスタイリングできるようになる。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_with_some_HTML" name="Starting_with_some_HTML">HTML からはじめよう</h2> + +<p>HTML 文書から始めましょう。あなたのコンピューターのフォルダーに <code>index.html</code> として以下のコードを保存してください。</p> + +<pre class="brush: html notranslate"><!doctype html> +<html lang="ja"> +<head> + <meta charset="utf-8"> + <title>CSS 入門</title> +</head> + +<body> + + <h1>見出し１です</h1> + + <p>これは第一段落の文です。この文には <span>span 要素</span> +と<a href="http://example.com">リンク</a>が含まれます。</p> + + <p>これは第二段落の文です。この文には <em>em 要素</em>が含まれます。</p> + + <ul> + <li>一つ目の項目</li> + <li>二つ目の項目</li> + <li><em>三つ目</em>の項目</li> + </ul> + +</body> + +</html> +</pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。このページにあるコードを書くためにライブコードエディターが用意されています。</p> +</div> + +<h2 id="Adding_CSS_to_our_document" name="Adding_CSS_to_our_document">CSS を加える</h2> + +<p>まず必要なのは、使いたい CSS ルールを HTML 文書に適用させることです。これには一般的に３つの方法がありますが、いまは最も一般的で便利な方法— CSS を {{htmlelement("head")}} 要素の中にリンクする方法を見てみましょう。</p> + +<p>HTML ドキュメントとおなじフォルダーにファイルをつくり、<code>styles.css</code> として保存してください。拡張子 <code>.css</code> となっているのが CSS ファイルです。</p> + +<p><code>styles.css</code> を <code>index.html</code> にリンクさせるには、HTML 文書にある {{htmlelement("head")}} 要素の中につぎのコードを追記してください:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> + +<p>{{htmlelement("link")}} 要素はブラウザーに、スタイルシートがあること、<code>rel</code> 属性を使うこと、<code>href</code> 属性の値でスタイルシートのある場所を伝えます。<code>styles.css</code> に以下のルールを記述すれば、CSS が働くかテストできます。使っているコードエディターでつぎのコードを CSS ファイルに追記してください:</p> + +<pre class="brush: css notranslate">h1 { + color: red; +}</pre> + +<p>HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。CSS の HTML への適用に成功しました！ もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。</p> + +<p>あなたのコンピューターに保存した <code>styles.css</code> を使い続けても良いですし、このチュートリアルの下の方にあるインタラクティブエディターを使い続けることもできます。もし最初のパネルにある CSS が 上にある HTML 文書とリンクされているなら、インタラクティブエディターは動作します。</p> + +<h2 id="Styling_HTML_elements" name="Styling_HTML_elements">HTML 要素をスタイリングする</h2> + +<p>見出しを赤くすることで、HTML 要素に焦点をあてたスタイリングを試しました。<em><strong>要素セレクタ</strong>（</em>HTML の要素名を直接あてはめるセレクタ）に焦点をあてたのです。文書内のすべての段落に焦点をあてるなら、セレクタとして <code>p</code> を使うことができます。すべての段落を緑色にするために次を使います:</p> + +<pre class="brush: css notranslate">p { + color: green; +}</pre> + +<p>セレクタをカンマで区切ることによって、同時に複数のセレクタへ焦点をあてることができます。もしすべての段落とリストすべてを緑にしたければ、CSS のルールセットは次のようになります:</p> + +<pre class="brush: css notranslate">p, li { + color: green; +}</pre> + +<p>下にあるインタラクティブエディターのコードボックスを編集するか、コンピューターに保存された CSS ファイルを編集してこのルールセットを試してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> + +<h2 id="Changing_the_default_behavior_of_elements" name="Changing_the_default_behavior_of_elements">要素の基本的なふるまいを変える</h2> + +<p>よくマークアップされた HTML 文書をみると、かんたんな例でさえ、基本的なスタイリングを加えることでブラウザーが HTML を読みやすくしているかがわかります。見出しは大きく太線になっているし、リストは箇条書きになっています。これはブラウザーがすべてのページにデフォルトで適用されるスタイルシートを含んでいるために起きます。それらがなければ、すべてのテキストがまとまって一緒に実行され、すべてを一からスタイリングしなければなりません。最新のブラウザーはすべて、ほぼ同じ方法をもちいて、デフォルトで HTML コンテンツを表示します。</p> + +<p>ブラウザーが選んだのとは別のスタイリングにしたい事もあるでしょう。これには単純に変更したい HTML 要素をえらび、CSS ルールを変更したい外観に変えるだけで可能です。よい例が <code><ul></code> 要素、つまり順番なしリストです。箇条書きの点がついていますが、もしこれが要らないと思ったら次のようにして削除することができます:</p> + +<pre class="brush: css notranslate">li { + list-style-type: none; +}</pre> + +<p>これをあなたの CSS に加えて試してみてください。</p> + +<p><code>list-style-type</code> プロパティはどんな値がサポートされているか MDN上で調べるのに適したプロパティです。<code><a href="/ja/docs/Web/CSS/list-style-type">list-style-type</a></code> のページをみるとページの上部に違うプロパティ値を試せる対話型の例があります。そしてページの下部には使えるプロパティ値が詳細に説明されています。</p> + +<p>このページをみると、どのようなものに変えられるか見つけられます。プロパティ値 <code>square</code> に変えてみてください。</p> + +<h2 id="Adding_a_class" name="Adding_a_class">クラスを加える</h2> + +<p>これまで、HTML 要素名をもとにしたスタイリングをしてきました。これは、文書内にあるその要素すべてをおなじ見ばえにしたいときには有効です。しかしそんな場合はほとんどないので、ほかを変えずに一部の要素だけを選ぶ方法を知っておく必要があります。もっとも一般的なのが、HTML 要素にクラスを追加し、それに焦点をあてる方法です。</p> + +<p>HTML 文書の 2番目のリストアイテムへ、こんな風に <a href="/ja/docs/Web/HTML/Global_attributes/class">class 属性</a>を加えてください:</p> + +<pre class="brush: html; highlight[3] notranslate"><ul> + <li>Item one</li> + <li class="special">二つ目の項目</li> + <li><em>三つ目</em>の項目</li> +</ul></pre> + +<p>ピリオドから始まるセレクタを作ることで、<code>special</code> クラス に焦点を当てることができます。以下を CSS に加えてください:</p> + +<pre class="brush: css notranslate">.special { + color: orange; + font-weight: bold; +}</pre> + +<p>保存してからブラウザーを更新し結果を見てみましょう。</p> + +<p>ページ上でおなじ見た目にしたいリストアイテムに対して <code>special</code> クラスを適用できます。たとえば、段落内にある<code><span></code> 要素にも同じく、オレンジの太字にしたいかもしれません。これにも <code>class</code> 属性の値として <code>special</code> を加えてみてください。上書き保存後にページを再読み込みして結果を確認してみましょう。</p> + +<p>HTML 要素セレクタに続けてクラスセレクタが記述されているのを時々見るかもしれません:</p> + +<pre class="brush: css notranslate">li.special { + color: orange; + font-weight: bold; +}</pre> + +<p>この構文は、「<code>special</code> クラスをもっている <code>li</code> 要素へ焦点をあてろ」という意味です。もしそうなっていたらもう、<code><span></code> 要素やほかに <code>special</code> クラスにした要素には適用できません。セレクタのリストに次を付け加える必要があります:</p> + +<pre class="brush: css notranslate">li.special, +span.special { + color: orange; + font-weight: bold; +}</pre> + +<p>いくつかのクラスがたくさんの要素に適用され、スタイリングが必要になる度に CSS を編集し続けることを望まないかもしれません。したがって、ある要素だけに特別なルールを作成し、他の要素に適用されないようにする場合を除き、要素をバイパスしてクラスを参照することが最善の場合があります。</p> + +<h2 id="Styling_things_based_on_their_location_in_a_document" name="Styling_things_based_on_their_location_in_a_document">文書内の場所に基づいてスタイリングする</h2> + +<p>文書のどこにあるかで見栄えを変えたい時があります。それを助けるセレクタはいくつかありますが、いまは 2種類だけ見てみましょう。HTML 文書には 2 つの <code><em></code> 要素があります — ひとつは段落の中に、もうひとつはリストアイテムの中に、です。<code><li></code> 要素の中にある <code><em></code> だけを選びたいとき、<strong>ディセンダント・コンビネーター</strong> と呼ばれるセレクタを使うことができます。これは２つの異なるセレクタのあいだにスペースを設けることで設置できます。</p> + +<p>CSS につぎのルールセットを追加してください。</p> + +<pre class="brush: css notranslate">li em { + color: rebeccapurple; +}</pre> + +<p>このセレクタは <code><li></code> 要素の中にある <code><em></code> 要素を選択します。よって HTML 文書の中で、3番目のリストアイテム内にある <code><em></code> 要素はパープルに変わっていますが、段落内にある <code><em></code> 要素は変更されていません。</p> + +<p>HTML ドキュメント内で、見出しの直後に来る段落を見出しとおなじ階層レベルにしたいと思うことがあるかもしれません。このときはセレクタ同士の間に <code>+</code> を入れます（<strong>adjacent sibling combinator</strong>：アジェイセント・シブリング・コンビネーター）。</p> + +<p>いま扱っている CSS につぎのルールセットを追加してみてください:</p> + +<pre class="brush: css notranslate">h1 + p { + font-size: 200%; +}</pre> + +<p>下のライブ例では、上に挙げた２つのルールセットが含まれています。ここに、段落内にある <code>span</code> 要素を赤くするルールセットを追加してください。正しくできれば第一段落の <code>span</code> 要素は赤くなり、最初のリストアイテムは色が変わらないはずです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。ここに挙げたのと、もっとたくさんのセレクタをこのコースの後にある<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">セレクタ</a>の記事で見ていきます。</p> +</div> + +<h2 id="Styling_things_based_on_state" name="Styling_things_based_on_state">状態に基づいてスタイリングする</h2> + +<p>最後にこのチュートリアルで取り上げるのは、状態に基づいてスタイルを設定する方法です。かんたんな例はリンクのスタイリングです。リンクをスタイリングするとき、<code><a href="/ja/docs/Web/HTML/Element/a"><a></a></code> (anchor) 要素に焦点をあてる必要があります。リンクされたページを開いていなかったり、開いた後だったり、マウスの矢印を置いたり（ホバー）、キーボードで選択したり、クリックしたりといったように状態が変わります。こうしたさまざまな状態を CSS で選ぶことができます。— 以下だと、リンクされたページを開く前はピンクに、開いた後は緑になります。</p> + +<pre class="brush: css notranslate">a:link { + color: pink; +} + +a:visited { + color: green; +}</pre> + +<p>ユーザーがリンクの上にマウスの矢印を持っていく（ホバー）とリンクの見た目を変えるようにできます。たとえばつぎのルールセットだと、リンクの下線が消えます:</p> + +<pre class="brush: css notranslate">a:hover { + text-decoration: none; +}</pre> + +<p>下のライブ例では、プロパティ値をいろいろ変えることでさまざまなリンクの状態を試せます。すでに加えられているルールセットをみると、ピンクがとても明るくて読みづらいことがわかります。もっといい色に変えてみましょう。太字に変えられますか？</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> + +<p>リンクをホバーすると下線が消えるようにしていますが、どんな状態でも下線が消えているようにできます。ただし実際のサイトでは、ページを見ている人に、リンクはリンクであることを知らせるのを忘れないようにしてください。下線を残すのは、ユーザーが慣れているように、テキスト内にリンクがあることを伝える重要な手掛かりになります。CSS にふくまれるあらゆるものには、変更によって文章を使いづらくするおそれがあることを強調しておきます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: MDN の記事で、<a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a> についての注意をたびたび目にするでしょう。これについて語る時は、ウェブページがどんな人にも理解でき、使えるものである必要性に言及しています。</p> + +<p>訪問者はマウス付きコンピューター やタッチスクリーン付き電話で見ているかもしれません。あるいはスクリーンリーダーで文章を読んでいることや、大きな文字をつかう必要があることや、キーボードだけを使っていることもあるでしょう。</p> + +<p>プレーンな HTML ドキュメントは一般的にあらゆる人に対してアクセシブルですので、スタイリングするときはアクセシビリティを下げないようにするのが大切です。</p> +</div> + +<h2 id="Combining_selectors_and_combinators" name="Combining_selectors_and_combinators">セレクタとコンビネーターを組み合わせる</h2> + +<p>複数のセレクタとコンビネーターを組み合わせることができます:</p> + +<pre class="brush: css notranslate">/* <article> 要素の内側にある <p> 要素の <span> 要素に焦点を当てるとき */ +article p span { ... } + +/* <h1> 要素の直後に来る <ul> 要素の、そのまた直後に来る <p> 要素に焦点を当てるとき */ +h1 + ul + p { ... }</pre> + +<p>複数の形のセレクタも組み合わせられます。以下のコードを CSS に追加してみてください:</p> + +<pre class="brush: css notranslate">body h1 + p .special { + color: yellow; + background-color: black; + padding: 5px; +}</pre> + +<p>これは <code><body></code> 要素の中にある <code><h1></code> 要素の直後に来た <code><p></code> 要素の中にある <code>special</code> クラスの要素をスタイリングします。</p> + +<p>HTML のうち、スタイルが適用されるのは <code><span class="special"></code> のみです。</p> + +<p>現時点では複雑に思えても心配しなくて大丈夫です。CSS を書いていくうちにすぐに理解できるようになります。</p> + +<h2 id="Wrapping_up" name="Wrapping_up">まとめ</h2> + +<p>このチュートリアルでは、CSS によるドキュメントのスタイル設定の仕方をいくつか見てきました。残りのレッスンでさらに深堀りしていきます。あたなはもうすでに、テキストのスタイリングや要素のさまざまな指定の仕方、さらには MDN ドキュメント内でのプロパティと値の調べ方といったことも理解したはずです。</p> + +<p>次のレッスンでは、CSS の構造を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュールの記事</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></li> +</ol> diff --git a/files/ja/learn/css/first_steps/how_css_is_structured/index.html b/files/ja/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..a9e2ae7130 --- /dev/null +++ b/files/ja/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,530 @@ +--- +title: CSS の全体像 +slug: Learn/CSS/First_steps/How_CSS_is_structured +tags: + - Beginner + - CSS + - HTML + - Learn + - Selectors + - Structure + - comments + - properties + - shorthand + - values + - whitespace +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> + +<p class="summary">CSS の概要と基本的な使い方について理解できたので、今度は CSS の構造をもう少し詳しく見てみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータリテラシー、 <a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、 基本的な <a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>、 HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で学習)、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">基本的な CSS の動作</a></td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS の基本的な構文の構造を詳細に学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Applying_CSS_to_HTML" name="Applying_CSS_to_HTML">CSS を HTML に適用する</h2> + +<p>まず、文書に CSS を適用する方法として、外部スタイルシートを使う方法、内部スタイルシートを使う方法、インラインスタイルを使う方法の3つの方法を見てみましょう。</p> + +<h3 id="External_stylesheet" name="External_stylesheet">外部スタイルシート</h3> + +<p>外部スタイルシートには <code>.css</code> という拡張子を持つ別のファイルに CSS が含まれています。これは、文書に CSS を持ち込む最も一般的で便利な方法です。1つの CSS ファイルを複数のウェブページにリンクして、すべてのウェブページを同じ CSS スタイルシートでスタイル付けすることができます。 <a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a>では、外部のスタイルシートをウェブページにリンクしました。</p> + +<p>HTML の <code><link></code> 要素から外部 CSS スタイルシートを参照しています。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My CSS experiment</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>Hello World!</h1> + <p>This is my first CSS example</p> + </body> +</html></pre> + +<p>CSS ファイルはこのようになります。</p> + +<pre class="brush: css notranslate">h1 { + color: blue; + background-color: yellow; + border: 1px solid black; +} + +p { + color: red; +}</pre> + +<p>{{htmlelement("link")}} 要素の <code>href</code> 属性は、ファイルシステム上のファイルを参照する必要があります。上の例では、 CSS ファイルは HTML 文書と同じフォルダーにありますが、どこか別の場所に配置してパスを調整することもできます。以下に 3 つの例を示します。</p> + +<pre class="brush: html notranslate"><!-- 現在のディレクトリの中の styles というサブディレクトリの中 --> +<link rel="stylesheet" href="styles/style.css"> + +<!-- カレントディレクトリの中にある styles というサブディレクトリの中にある、 general というサブディレクトリの中 --> +<link rel="stylesheet" href="styles/general/style.css"> + +<!-- ひとつ上のレベルのディレクトリに行き、その下にある styles というサブディレクトリの中 --> +<link rel="stylesheet" href="../styles/style.css"></pre> + +<h3 id="Internal_stylesheet" name="Internal_stylesheet">内部スタイルシート</h3> + +<p>内部スタイルシートは、 HTML 文書の中に配置します。内部スタイルシートを作成するには、 CSS を HTML 文書の {{htmlelement("head")}} の中にある {{htmlelement("style")}} 要素の中に入れてください。</p> + +<p>例えば、 HTML はこのようになります。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My CSS experiment</title> + <style> + h1 { + color: blue; + background-color: yellow; + border: 1px solid black; + } + + p { + color: red; + } + </style> + </head> + <body> + <h1>Hello World!</h1> + <p>This is my first CSS example</p> + </body> +</html></pre> + +<p>状況によっては、内部スタイルシートが便利な場合もあります。たとえば、コンテンツ管理システムを使用している場合、外部の CSS ファイルを変更することがブロックされているかもしれません。</p> + +<p>しかし、複数のページを持つサイトでは、内部スタイルシートは効率の悪い作業方法になります。内部スタイルシートを使用して、複数のページに統一された CSS スタイルを適用するには、そのスタイルを使用するすべてのウェブページに内部スタイルシートをコピーしなければなりません。効率性の低下はサイトの保守にも影響します。内部スタイルシートの CSS では、1 つの簡単なスタイル変更でも、複数のウェブページの編集が必要になるリスクがあります。</p> + +<h3 id="Inline_styles" name="Inline_styles">インラインスタイル</h3> + +<p>インラインスタイルは、単一の HTML 要素のみに影響を与える CSS 宣言で、 <code>style</code> 属性の中に記述します。 HTML 文書におけるインラインスタイルの実装は次のようになります。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My CSS experiment</title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> + <p style="color:red;">This is my first CSS example</p> + </body> +</html></pre> + +<p><strong>この方法での CSS の使用は、可能な限り避けてください。</strong>まず、 CSS の実装の中では最も保守の効率が悪いものです。一つのスタイルを変更するために、一つのウェブページ内で複数の編集が必要になるかもしれません。第二に、インライン CSS はプレゼンテーション用のコードを HTML やコンテンツに混ぜてしまうため、すべてが読んだり理解したりしにくいものになってしまいます。コードとコンテンツを分離すれば、ウェブサイトで働くすべての人にとって保守が容易になります。</p> + +<p>インラインスタイルが一般的な状況はいくつかあります。作業環境が非常に制限されている場合は、インラインスタイルの使用に頼らざるを得ないかもしれません。例えば、 CMS では HTML の本文しか編集できない場合があります。また、できるだけ多くのメールクライアントとの互換性を実現するために、 HTML メールでインラインスタイルが多用されているのを見ることもあるでしょう。</p> + +<h2 id="Playing_with_the_CSS_in_this_article" name="Playing_with_the_CSS_in_this_article">CSS を試してみる</h2> + +<p>次の演習では、コンピューターにフォルダーを作成してください。フォルダーには好きな名前をつけてください。以下のテキストをコピーして、フォルダーの中に 2 つのファイルを作成してください。</p> + +<p><strong>index.html:</strong></p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>My CSS experiments</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + + <p>Create your test HTML here</p> + + </body> +</html></pre> + +<p><strong>styles.css:</strong></p> + +<pre class="brush: css notranslate">/* Create your test CSS here */ + +p { + color: red; +}</pre> + +<p>試してみたい CSS を見つけたら、 HTML の <code><body></code> の内容をスタイル付けする HTML に置き換え、テスト用の CSS コードを CSS ファイルに追加してください。</p> + +<p>別の方法として、以下のインタラクティブなエディターを使用することもできます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}</p> + +<p>楽しみながら、先に進んでいきましょう。</p> + +<h2 id="Selectors" name="Selectors">セレクター</h2> + +<p>セレクターは CSS に欠かせない構成要素です。<a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a>のチュートリアルでは、すでにさまざまな種類のセレクターを見てきました。セレクターは、 HTML 文書のなかでスタイルを適用する対象を指定するものです。もし CSS が期待通りにコンテンツに適用されなかったら、セレクターが一致すると思っていた方法で一致していないのかもしれません。</p> + +<p>それぞれの CSS 規則の先頭には、セレクターまたはセレクターのリストを書きます。これによって、ブラウザにどの要素にCSS規則を適用するかを指示します。次のコード例は、いずれも有効なセレクター、またはセレクターのリストです。</p> + +<pre class="brush: css notranslate">h1 +a:link +.manythings +#onething +* +.box p +.box p:first-child +h1, h2, .intro</pre> + +<p>上記のセレクターを使った CSS 規則を作ってみてください。セレクターによってスタイル付けされる HTML を追加します。上記の構文に馴染みのないものがあれば、 MDN を検索してみてください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 次のモジュールの記事 <a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> で、セレクターについてより詳しく学ぶことができます。</p> +</div> + +<h3 id="Specificity" name="Specificity">詳細度</h3> + +<p>2 つのセレクターが同じ HTML 要素を選択するシナリオに遭遇するかもしれません。以下のスタイルシートを考えてみましょう。 <code>p</code> セレクターで段落のテキストを青に設定します。しかし、選択された要素のテキストを赤に設定するクラスもあります。</p> + +<pre class="brush: css notranslate">.special { + color: red; +} + +p { + color: blue; +}</pre> + +<p>HTML 文書の中に <code>special</code> のクラスを持つ段落があるとします。両方の規則が適用されます。どちらのセレクターが優先されるでしょうか？段落のテキストが青と赤のどちらになると思いますか？</p> + +<pre class="brush: html notranslate"><p class="special">What color am I?</p></pre> + +<p>CSS 言語には、競合が発生した場合にどちらのセレクターが強いかを制御するための規則があります。これらの規則は<ruby><strong>カスケード</strong><rp> (</rp><rt>cascade</rt><rp>) </rp></ruby>と<ruby><strong>詳細度</strong><rp> (</rp><rt>specificity</rt><rp>) </rp></ruby>と呼ばれています。以下のコードブロックでは、 <code>p</code> セレクターに対して2つの規則が定義されていますが、段落テキストは青くなります。これは、段落テキストを青に設定する宣言がスタイルシートの後に現れているからです。後のスタイルは、それより前のスタイルシートに現れた競合するスタイルを置き換えます。これが<strong>カスケード</strong>規則です。</p> + +<pre class="brush: css notranslate">p { + color: red; +} + +p { + color: blue; +}</pre> + +<p>しかし、クラスセレクターと要素セレクターの間に競合がある前の例では、クラスが優先され、赤い段落テキストがレンダリングされます。スタイルシートの後方に競合するスタイルが表示されているにもかかわらず、どうしてこのようなことが起こるのでしょうか？クラスは、要素セレクターよりも<strong>詳細度</strong>が高いことになっており、より具体的であると評価されるので、他の競合するスタイル宣言をキャンセルしたのです。</p> + +<p>この実験を自分でやってみましょう。 HTML を追加して、2つの <code>p { ... }</code> 規則をスタイルシートに追加します。次に、最初の <code>p</code> セレクターを <code>.special</code> に変更して、それがスタイルをどのように変えるかを見てみましょう。</p> + +<p>詳細度とカスケードの規則は、最初は複雑に見えるかもしれません。これらの規則は、 CSS に慣れてくると理解しやすくなります。次のモジュールの <a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a> の章では、詳細度の計算方法を含めて詳しく説明しています。</p> + +<p>今のところ、詳細度が存在することを覚えておいてください。スタイルシートの他の何かがより高い詳細度を持っているために、 CSS が期待通りに適用されないことがあります。 1 つの要素に複数の規則が適用される可能性があることを認識することは、この種の問題を解決するための最初のステップです。</p> + +<h2 id="Properties_and_values" name="Properties_and_values">プロパティと値</h2> + +<p>もっとも基本的なレベルでは、 CSS は2つの部品でできています。</p> + +<ul> + <li><strong>プロパティ</strong>: スタイルに関して変更できる何らかの特徴をあらわす、人間が理解できる識別子です。例えば、 {{cssxref("font-size")}}, {{cssxref("width")}}, {{cssxref("background-color")}} などです。</li> + <li><strong>値</strong>: 各プロパティには値が割り当てられています。この値は、プロパティをどのようにスタイル付けするかを示します。</li> +</ul> + +<p>次の例では、一組のプロパティと値を強調表示しています。プロパティ名は <code>color</code> で、値は <code>blue</code> です。</p> + +<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>プロパティが値と組み合わせられているとき、この組み合わせを <ruby><em>CSS 宣言</em><rp> (</rp><rt>CSS declaration</rt><rp>) </rp></ruby>と呼びます。 CSS 宣言は <ruby><em>CSS 宣言ブロック</em><rp> (</rp><rt>CSS Declaration Blocks</rt><rp>) </rp></ruby>の中に入っています。次のコード例では CSS の宣言ブロックを強調しています。</p> + +<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>そして、 CSS 宣言ブロックは<em>セレクター</em>と組になって <em>CSS 規則セット</em> (または <em>CSS 規則</em>) になります。1つは <code>h1</code> セレクター用、もう1つは <code>p</code> セレクター用です。色付きのハイライトは <code>h1</code> 規則を識別します。</p> + +<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>CSS プロパティを特定の値に設定することが、文書のレイアウトとスタイルを定義する主な方法です。 CSS エンジンは、どの宣言がページの各要素に適用されるかを計算します。</p> + +<div class="blockIndicator warning"> +<p><strong>重要:</strong> CSS のプロパティと値は大文字と小文字を区別します。それぞれのプロパティと値の組はコロン (<code>:</code>) で区切られます。</p> +</div> + +<p><strong>以下に挙げたプロパティの様々な値を調べてみてください。それぞれの HTML 要素にスタイルを適用する CSS 規則を書いてみてください。</strong></p> + + + +<ul> + <li><strong>{{cssxref("font-size")}}</strong></li> + <li><strong>{{cssxref("width")}}</strong></li> + <li><strong>{{cssxref("background-color")}}</strong></li> + <li><strong>{{cssxref("color")}}</strong></li> + <li><strong>{{cssxref("border")}}</strong></li> +</ul> + +<div class="warning"> +<p><strong>重要</strong>: プロパティが不明だった場合、または指定されたプロパティの値が妥当ではなかった場合は、宣言が<em>無効</em>なものとして扱われます。ブラウザーの CSS エンジンはこれを完全に無視します。</p> +</div> + +<div class="warning"> +<p><strong>重要</strong>: CSS (および他のウェブ標準) では、言語ごとに綴りに揺れがあったり確実でない場合には、アメリカ綴りを標準とすることが合意されています。例えば、 <code>color</code> は <code>color</code> と綴るべきであり、 <code>colour</code> では動作しません。</p> +</div> + +<h3 id="Functions" name="Functions">関数</h3> + +<p>ほとんどの値は比較的単純なキーワードや数値ですが、関数の形をとる値もあります。例として、<code>calc()</code> 関数があります。これは CSS 内で簡単な数式を行うことができます。</p> + +<div id="calc_example"> +<pre class="brush: html notranslate"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> + +<pre class="brush: css notranslate">.outer { + border: 5px solid black; +} + +.box { + padding: 10px; + width: calc(90% - 30px); + background-color: rebeccapurple; + color: white; +}</pre> +</div> + +<p>これは次のように表示されます。</p> + +<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> + +<p>関数は、関数名と、関数に渡す値を囲む括弧で構成されています。上記の <code>calc()</code> の例では、値は、このボックスの幅を含むブロックの幅の 90% から 30 ピクセルを引いた値と定義しています。計算の結果は、事前に計算して静的な値として入力できるものではありません。</p> + +<p>他の例としては、 {{cssxref("transform")}} のさまざまな値、たとえば <code>rotate()</code> などがあります。</p> + +<div id="transform_example"> +<pre class="brush: html notranslate"><div class="box"></div></pre> + +<pre class="brush: css notranslate">.box { + margin: 30px; + width: 100px; + height: 100px; + background-color: rebeccapurple; + transform: rotate(0.8turn); +}</pre> +</div> + +<p>上記のコードの出力は次のようになります。</p> + +<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> + +<p><strong>以下に挙げたプロパティのそれぞれの値を調べてみましょう。ぞれぞれの HTML 要素にスタイルを適用する CSS 規則を記述してみましょう。</strong></p> + +<ul> + <li><strong>{{cssxref("transform")}}</strong></li> + <li><strong>{{cssxref("background-image")}}、特に gradient の値</strong></li> + <li><strong>{{cssxref("color")}}、特に rgb/rgba/hsl/hsla の値</strong></li> +</ul> + +<h2 id="rules" name="rules">アット規則</h2> + +<p>CSS の<a href="/en-US/docs/Web/CSS/At-rule">アット規則</a> は、 CSS が実行すること、またはそれがどのように動作するべきかの指示を提供します。いくつかのアット規則は、キーワードと値だけのシンプルなものです。例えば、 <code>@import</code> はスタイルシートを別の CSS スタイルシートにインポートします。</p> + +<pre class="brush: css notranslate">@import 'styles2.css';</pre> + +<p>よく目にするであろうアット規則が <code>@media</code> があり、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を作成するために使用されます。メディアクエリは CSS スタイルを提供する条件を使用します。</p> + +<p>以下の例では、スタイルシートは <code><body></code> 要素に既定でピンクの背景を定義しています。しかし、ブラウザーのビューポートが 30em よりも広い場合は、青い背景を定義するメディアクエリが続いています。</p> + +<pre class="brush: css notranslate">body { + background-color: pink; +} + +@media (min-width: 30em) { + body { + background-color: blue; + } +}</pre> + +<p>これ以外のアット規則にも、これからのチュートリアルで遭遇するでしょう。</p> + +<p><strong>ビューポートの幅に基づいてスタイルを変更するメディアクエリを追加できるかどうかを確認してください。ブラウザーウィンドウの幅を変更して結果を確認してみてください。</strong></p> + +<h2 id="Shorthands" name="Shorthands">一括指定</h2> + +<p>{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, {{cssxref("margin")}} のようなプロパティは<ruby><strong>一括指定プロパティ</strong><rp> (</rp><rt>shorthand properties</rt><rp>) </rp></ruby>と呼ばれています。これは一括指定プロパティが複数の値を1行で設定するからです。</p> + +<p>例えば、コードのこの 1 行を見てください。</p> + +<pre class="brush: css notranslate">/* 4 つの値による一括定義、例えば padding や margin + では、値が適用される順序は top, right, bottom, left の順 (top から時計回り) です。 + 他の種類の一括指定もあり、例えば 2 つの値による一括指定を padding/margin に設定すると、 + top/bottom と left/right になります。*/ +padding: 10px 15px 15px 5px;</pre> + +<p>これは以下の 4 行のコードと同等です。</p> + +<pre class="brush: css notranslate">padding-top: 10px; +padding-right: 15px; +padding-bottom: 15px; +padding-left: 5px;</pre> + +<p>次の 1 行を見てください。</p> + +<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> + +<p>以下の 5 行と同等です。</p> + +<pre class="brush: css notranslate">background-color: red; +background-image: url(bg-graphic.png); +background-position: 10px 10px; +background-repeat: repeat-x; +background-attachment: fixed;</pre> + +<p>コースの後半では、他にも多くの一括指定プロパティの例に遭遇します。 MDN の <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>は、あらゆる一括指定プロパティについてのより詳しい情報を得るための良いリソースです。</p> + +<p><strong>自分の CSS の練習でこれらの前述) 使用してみて、それがどのように動作するかをよりよく理解するようにしてください。また、様々な値を使って実験してみてください。</strong></p> + +<div class="blockIndicator warning"> +<p><strong>警告</strong>: CSS の一括指定を使用する際に、省略した値がどのようにリセットされるかはあまり目立たない側面です。 CSS 一括指定で指定されていない値は初期値に戻ります。これは、 CSS 一括指定で省略された値は、<strong>以前に設定された値を上書きしてしまう</strong>可能性があることを意味します。</p> +</div> + +<h2 id="Comments" name="Comments">コメント</h2> + +<p>どんなコーディング作業でもそうですが、 CSS と一緒にコメントを書くのがベストプラクティスです。これは、後で修正や強化のために戻ってきたときに、コードがどのように動作するかを思い出すのに役立ちます。また、他の人がコードを理解するのにも役立ちます。</p> + +<p>CSS のコメントは <code>/*</code> で始まり <code>*/</code> で終わります。以下の例では、コメントはコードのそれぞれの区間のの先頭をマークしています。これは、コードベースが大きくなるにつれて、コードベースを移動するのに役立ちます。このようなコメントの付け方をすると、コードエディターでコメントを検索することで、コードの区間を効率的に見つけることができます。</p> + +<pre class="brush: css notranslate">/* 基本的な要素のスタイル付けを扱う */ +/* -------------------------------------------------------------------------------------------- */ +body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + /* 大きな画面やウィンドウで読みやすいように、グローバルフォントの大きさを + 大きくします。 */ + body { + font-size: 130%; + } +} + +h1 {font-size: 1.5em;} + +/* DOM で入れ子になっている特定の要素を処理します。 */ +/* -------------------------------------------------------------------------------------------- */ +div p, #id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +}</pre> + +<p>コードを「コメントアウト」すると、試験的にコードの区間を一時的に無効にするのにも便利です。以下の例では、 <code>.special</code> の規則はコードを「コメントアウト」することで無効化されています。</p> + +<pre class="brush: css notranslate">/*.special { + color: red; +}*/ + +p { + color: blue; +}</pre> + +<p><strong>CSS にコメントを追加してみましょう。</strong></p> + +<h2 id="White_space" name="White_space">ホワイトスペース</h2> + +<p>ホワイトスペースとは、半角スペース、タブ、改行を意味します。ブラウザーが HTML のホワイトスペースを無視するように、ブラウザーは CSS の中のホワイトスペースを無視します。ホワイトスペースの価値は、読みやすさを向上させるためにあります。</p> + +<p>下の例では、それぞれの宣言 (と規則の先頭/末尾) が個別の行で行われています。これは間違いなく、CSS を書くのに良い方法です。これにより、CSS の保守や理解が容易になります。</p> + +<pre class="brush: css notranslate">body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + body { + font-size: 130%; + } +} + +h1 { + font-size: 1.5em; +} + +div p, +#id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +} +</pre> + +<p id="Very_compact">次の例は、同等の CSS をより圧縮したものです。2つの例は同じように動作しますが、下の例の方が読みにくいでしょう。</p> + +<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +@media (min-width: 70em) { body {font-size: 130%;} } + +h1 {font-size: 1.5em;} + +div p, #id:first-line {background-color: red; border-radius: 3px;} +div p {margin: 0; padding: 1em;} +div p + p {padding-top: 0;} +</pre> + +<p>自分のプロジェクトでは、個人的な好みに応じてコードを書式化します。チームプロジェクトでは、チームやプロジェクトに独自のスタイルガイドがあるかもしれません。</p> + +<div class="blockIndicator warning">。 +<p><strong>重要:</strong> CSS 宣言ではホワイトスペースが値を区切っていますが、<strong>プロパティ名にホワイトスペースが含まれることはありません。</strong></p> +<strong> </strong></div> + +<p><strong>例えば、以下の宣言は正しい CSS です。</strong></p> + + + +<pre class="brush: css notranslate"><strong>margin: 0 auto; +padding-left: 10px;</strong></pre> + +<p><strong>次の例は誤ったCSSです:</strong></p> + +<pre class="brush: css notranslate"><strong>margin: 0auto; +padding- left: 10px;</strong></pre> + +<p><strong><code>0auto</code> という書き方をブラウザは正しい値と解釈してくれません。なぜなら、<code>margin</code> プロパティの値 <code>0</code>、および <code>auto</code> はふたつの別々の値だからです。<code>padding-</code>もまた、ブラウザが認識できる正しいプロパティ名ではありません。</strong></p> + +<p><strong>CSSのプロパティに対する複数の値どうしを区別するためには、最低でも1個以上の空白をあいだにおく必要があります。また、プロパティの名称や値のひとつひとつは、その一部分だけを切り離したりせず続けて書かなければなりません。</strong></p> + +<p><strong><strong>自分のCSSのなかで空白をさまざまに入れてみて、どうすればCSSが正しく機能して、どうすれば機能しなくなるかたしかめてみましょう。</strong></strong></p> + +<h2 id="Whats_next" name="Whats_next"><strong>次のステップ</strong></h2> + +<p><strong>ブラウザがHTMLやCSSを解釈してウェブページに作り替えていくながれを多少なりとも知っておくことは開発の役にたちます。そこで、次の記事 「<a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？」 </a> では、ブラウザがWebページを生成する過程についてみていきましょう。</strong></p> + +<p><strong>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</strong></p> + +<h2 id="In_this_module" name="In_this_module"><strong>このモジュール内</strong></h2> + +<ol> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></strong></li> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></strong></li> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></strong></li> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></strong></li> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></strong></li> +</ol> diff --git a/files/ja/learn/css/first_steps/how_css_works/index.html b/files/ja/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..6044a3c29a --- /dev/null +++ b/files/ja/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,164 @@ +--- +title: CSS はどう働くか？ +slug: Learn/CSS/First_steps/How_CSS_works +tags: + - Beginner + - CSS + - DOM + - Learn +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{LearnSidebar}}<br> + {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<p class="summary">CSS の基本と目的、簡単なスタイルシートの書き方を学んできました。このレッスンでは、ブラウザーが CSS と HTML を実際にウェブページとして表示していくさまを見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>を学習のこと)。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td> + <p>ブラウザーが CSS と HTML を解析する方法、およびブラウザーが解釈できない CSS に遭遇したときに何が起こるかを理解する。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="How_does_CSS_actually_work" name="How_does_CSS_actually_work">CSS は実際にはどう機能するのか？</h2> + +<p><font>ブラウザーがドキュメントを表示するとき、ブラウザーはそのコンテンツをスタイル情報と結合する必要があります。</font><font>以下にリストしたいくつかの段階でドキュメントが処理されます。</font><font>これはブラウザーがウェブページを読み込むときに起こることを単純化したものであり、各ブラウザーで処理は異なるものの、おおよそ何が起こるかを示しています。</font></p> + +<ol> + <li>ブラウザーが HTML をロードします（ネットワークから受信するなど）。</li> + <li>{{Glossary("HTML")}} が {{Glossary("DOM")}} (<em>Document Object Model</em>) に変換されます。DOM はコンピューターのメモリー内のドキュメントです。次のセクションで詳述します。</li> + <li><font>その後ブラウザーは埋め込まれた画像やビデオなどの HTML ドキュメントにリンクされているリソースと CSS を取得します。</font><font>JavaScript はもう少し後に処理されるため、ここでは簡略化のため説明しません。</font></li> + <li><font>ブラウザーは取得した CSS を解析し、要素、クラス、ID などセレクタの種類ごとに分類します。見つけたセレクターに基づいて、DOM のどのノードにどのルールを適用するかを決定し、スタイルを適用します（この中間ステップはレンダーツリーと呼ばれます）。</font></li> + <li>レンダーツリーは、ルール適用後の構造にレイアウトされます。</li> + <li>ページが画面に表示されます（この段階はペイントと呼ばれます）。</li> +</ol> + +<p>簡単に図に表すと次のとおりです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> + +<h2 id="About_the_DOM" name="About_the_DOM">DOM について</h2> + +<p><font><font>DOM にはツリーのような構造があります。</font><font>マークアップの各要素、属性、およびテキスト</font><font>は、ツリー構造の </font></font>{{Glossary("Node/DOM","DOM ノード")}} <font><font>になります。</font><font>ノードは他の DOM ノードとの関係によって定義されます。</font><font>要素は子ノードの親であり、子ノードには兄弟があります。</font></font></p> + +<p><font>DOM は CSS とドキュメントのコンテンツが出会う場所であるため、DOM を理解すると CSS の設計、デバッグ、および保守に役立ちます。</font><font>ブラウザーの開発者ツールによって、どのルールが適用されるかを確認するために、アイテムを選択することで DOM にナビゲートされます。</font></p> + +<h2 id="A_real_DOM_representation" name="A_real_DOM_representation">DOM の実際</h2> + +<p>長く退屈な説明ではなく、例を用いて実際の HTML が DOM に変換される様子を見てみましょう。</p> + +<p>以下のような HTML があります。</p> + +<pre class="brush: html notranslate"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p> +</pre> + +<p><font><font>この場合 DOM では </font></font><code><p></code><font><font> 要素が親ノードです。子には、テキストノードと 3 つの </font></font><code><span></code><font><font> 要素をノードとして</font></font><font><font>持ちます。一方で </font></font><code>SPAN</code><font><font> ノードは親でもあり、テキストノードを子に持ちます。</font></font></p> + +<pre class="notranslate">P +├─ "Let's use:" +├─ SPAN +| └─ "Cascading" +├─ SPAN +| └─ "Style" +└─ SPAN + └─ "Sheets" +</pre> + +<p>ブラウザーは上述の HTML をこのように解釈し、DOM ツリーを以下のようにレンダリングし出力します。</p> + +<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> + +<div class="hidden"> +<pre class="brush: css notranslate">p {margin:0;}</pre> +</div> + +<h2 id="Applying_CSS_to_the_DOM" name="Applying_CSS_to_the_DOM">DOM への CSS 適用</h2> + +<p>ドキュメントに CSS を追加して、スタイルを設定したとします。先ほどと同じ以下の HTML を使います。</p> + +<pre class="brush: html notranslate"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p></pre> + +<p>CSS は以下のものを適用します。</p> + +<pre class="brush: css notranslate">span { + border: 1px solid black; + background-color: lime; +}</pre> + +<p><font><font>ブラウザーは HTML 解析によって DOM を作成したのちに、CSS を解析します。CSS には唯一 </font></font><code>span</code><font><font> セレクターしかないため、ブラウザーは CSS を非常に迅速にソートできます。<br> + 3 つ の </font></font><code><span></code><font><font> </font><font>にそのルールを適用し</font><font>、最終的な視覚的表現を画面にペイントします。</font></font></p> + +<p><font><font>結果、次のとおり出力されます。</font></font></p> + +<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p> + +<p>次のモジュールの <a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a> ではブラウザーの開発者ツールを使用した CSS のデバッグと、ブラウザーが CSS を解釈する方法について詳しく学習します。</p> + +<h2 id="What_happens_if_a_browser_encounters_CSS_it_doesnt_understand" name="What_happens_if_a_browser_encounters_CSS_it_doesnt_understand">ブラウザーが解釈できない CSS に遭遇したらどうなるのか？</h2> + +<p><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">以前のレッスン</a>では、<font>ブラウザーがすべての新しい CSS を実装するわけではないことを述べました。また</font><font>多くの人が最新バージョンのブラウザーを使用しているわけでもありません。</font><font>CSS は常に開発されており、ブラウザーがまだ認識できないような CSS セレクターや宣言に遭遇するとどうなるか疑問に思われるかもしれません。</font><br> + <br> + その答えは何もせず、CSS の次の部分に移動するということです。</p> + +<p><font>ブラウザーがルールを解析しているときに、理解できないプロパティまたは値に遭遇した場合、ブラウザーはそれを無視して次の宣言に進みます。こういうことは、</font><font>プロパティまたは値のスペルが間違っている場合や、プロパティまたは値が新しすぎてブラウザーがまだサポートしていない場合に起こりえます。</font></p> + +<p>同様に、ブラウザーが理解できないセレクターを検出した場合もそのルール全体を無視し、次のルールに進みます。</p> + +<p><font>次の例では、色にイギリス英語のスペルを使用しているため、プロパティが正しくありません（訳注: color を誤って colour としてしまっている）。よって段落は青くなっていません。ただし、他の CSS はすべて適用されています。</font><font>無効な行のみが無視されます。</font></p> + +<div id="Skipping_example"> +<pre class="brush: html notranslate"><p> I want this text to be large, bold and blue.</p></pre> + +<pre class="brush: css notranslate">p { + font-weight: bold; + colour: blue; /* colorプロパティのスペルが正しくありません */ + font-size: 200%; +}</pre> +</div> + +<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> + +<p><font>この動作は非常に有用です。ブラウザが新しい CSS を理解しないとしてもエラーは発生しないということを理解した上で、新しい CSS を拡張機能として使用できるということを意味します。ブラウザーは新しい機能を取得するかしないかのどちらかになります。</font>カスケードが機能する方法と、同じ特定性を持つ2つのルールがある場合、ブラウザはスタイルシートの中で出会った最後の CSS を使うという事実と相まって、新しい CSS をサポートしていないブラウザにも代替案を提供することができます。</p> + +<p><font><font>とりわけ新しいゆえに必ずしもサポートされているというわけではない、という値を使用する場合に有用です。例えば、一部の古いブラウザーは </font></font><code>calc()</code><font><font> をサポート</font><font>して</font><font>いません</font><font>。ボックスに対して予防的にピクセル単位の幅を指定しておき、その後 </font></font><code>calc()</code><font><font> で </font></font><code>100% - 50px</code><font><font> の幅を指定した場合、</font></font><font><font>古いブラウザーは前者（ピクセル指定）を使用し、理解できない </font></font><code>calc()</code><font><font> を無視します。かたや新しいブラウザーはピクセル指定を理解はできるものの、あとに記述された </font></font><code>calc()</code><font><font> の方を採用します</font><font>。</font></font></p> + +<pre class="brush: css notranslate">.box { + width: 500px; + width: calc(100% - 50px); +}</pre> + +<p>以降のレッスンで、さまざまなブラウザーをサポートするための多くの方法を検討していきます。</p> + +<h2 id="And_finally" name="And_finally">最後に</h2> + +<p>このモジュールはほぼ完了です。ただしもうひとつだけやっておいてほしいことがあります。次の記事の<a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a>にて実際のスタイリングをとおして CSS の腕試しをおこないます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の構造化</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></li> +</ol> diff --git a/files/ja/learn/css/first_steps/index.html b/files/ja/learn/css/first_steps/index.html new file mode 100644 index 0000000000..3a7a08cb48 --- /dev/null +++ b/files/ja/learn/css/first_steps/index.html @@ -0,0 +1,53 @@ +--- +title: CSS の第一歩 +slug: Learn/CSS/First_steps +tags: + - Beginner + - CSS + - Landing + - Learn + - Module + - first steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始める前に、次の状態になっておくべきです。</p> + +<ol> + <li>コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった)ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明されている HTML についての基礎知識に慣れ親しんでいること。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことが可能です。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールには、CSS についてすべての基本的なことがらと、いくつかのスキルをテストできる次の記事が含まれています。</p> + +<dl> + <dt><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets; カスケーティングスタイルシート) は見栄えのよいウェブページを作ることができますが、背後ではどのように動いているのでしょうか？この記事では CSS について、簡単なコードの例とこの言語の主要な項目を説明します。</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></dt> + <dd>この記事では、簡単な HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></dt> + <dd>CSS の概要と使用方法の基本について理解できたので、今度は言語自体の構造をもう少し詳しく見てみましょう。ここで説明した概念の多くはすでに目にしています。あとに出てくる概念がわかりにくい場合は、ここに戻って見直してしてください。</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></dt> + <dd>CSS の基本とその目的、そして簡単なスタイルシートの書き方を学びました。このレッスンでは CSS と HTML がブラウザーにどう働いてウェブページにするかを見ていきます。</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></dt> + <dd>過去数回のレッスンで学んだことから、CSS で単純なテキスト文書をフォーマットし、独自のスタイルを追加できることがわかります。この記事ではそれを行う機会を提供します。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt> + <dd>本記事で説明した <em>CSS 入門</em> スキルを確認およびテストするのにちょうどいい Mozilla 基礎コース。セレクター、属性、値などを使った HTML 要素のスタイリングを学べます。</dd> +</dl> diff --git a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html new file mode 100644 index 0000000000..d404a70bbf --- /dev/null +++ b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html @@ -0,0 +1,100 @@ +--- +title: 新しい知識を使う +slug: Learn/CSS/First_steps/Using_your_new_knowledge +tags: + - Beginner + - CSS + - Learn + - Playground +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<p class="summary">先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎コンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基礎知識 HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の入門</a>で学ぶ)、CSS の基礎(このモジュールの残り)</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>いくつかの CSS を試し、知識レベルを確認します</td> + </tr> + </tbody> +</table> + +<h2 id="Lets_play_with_some_CSS" name="Let's_play_with_some_CSS">さあ始めよう</h2> + +<p>下の Live エディタで試すこともできますし、<a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">我々の Github リポジトリ</a>からサンプルファイルをダウンロードして試してみることもできます。ここで使うサンプルはシンプルな一ページの HTML で、頭にはとりあえずシンプルな CSS が埋め込まれています。もしローカルで動かすとき HTML と CSS が一緒になっているのが嫌だったら別々のファイルに分割しても構いません。あるいは、<a href="https://codepen.io/" rel="noopener">CodePen</a> や <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>、<a href="https://glitch.com/" rel="noopener">Glitch </a>といったオンラインエディタを使うこともできます。</p> + +<div class="blockIndicator note"> +<p>注記: もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。</p> +</div> + +<h2 id="Lets_play_with_some_CSS" name="Let's_play_with_some_CSS">CSS を少し試してみよう</h2> + +<p>下のサンプルは、CSS でスタイルされたプロフィールページの例です。ここで使われているプロパティは次の通りです。これらについてはそれぞれリンクから MDN の記事に飛べますので、プロパティの詳細な説明についてはそちらをご参照ください。</p> + +<ul> + <li>{{cssxref("font-family")}}</li> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("text-decoration")}}</li> +</ul> + +<p>下のプロフィールページでは、いろんなセレクタを使ったり、h1要素や h2要素などの装飾要素を使ったりしただけでなく、職業を表す部分ではクラスを定義してデザインを設定しました。</p> + +<p>プロパティの値をいろいろに変えて見た目がどう変わるか試してみましょう。</p> + +<ol> + <li>見出し 1 の文字色をピンクに変えてみましょう。色の指定には <code>hotpink</code> を使うとよいでしょう。</li> + <li>見出し 1 の下に太さ 10px の点線をつけてみましょう。そしてその色を <code>purple</code> にしてみましょう。</li> + <li>見出し 2 の書体をイタリックに変えてみましょう。</li> + <li>連絡先情報の部分で使われている <code>ul</code> 要素の {{cssxref("background-color")}} を <code>#eeeeee</code> にして、{{cssxref("border")}} を太さ 5px の紫の線に変えてみましょう。また、{{cssxref("padding")}} を指定してコンテンツと連絡先情報の部分にスペースが空くように設定しましょう。</li> + <li>リンクの部分にマウスが乗ったとき、リンクが <code>green</code> に変わるように設定しましょう。</li> +</ol> + +<p>完成したら次の画像のようになるはずです。</p> + +<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2019/12/31/17035/da8ff2a04da214e57e18a6ea3ac6832e/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p> + +<p>それから、このページに書かれていない属性をみてみましょう。<a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/Reference">MDN の CSS リファレンス</a> には冒険が待っています!</p> + +<p>ここには間違った回答はないことを覚えていてください — ここではいろいろ試して楽しみながら学びましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> + +<h2 id="Whats_next" name="What's_next">アセスメントとさらなるヘルプ</h2> + +<p>作ったものを見てほしいときや、作業に詰まってしまって質問をしたいとき：</p> + +<ol> + <li>あなたが作ったものを <a href="https://codepen.io/" rel="noopener">CodePen</a> や <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>、<a href="https://glitch.com/" rel="noopener">Glitch</a> などのコード共有サービスに公開してください。</li> + <li>添削の依頼あるいは訊きたいことを <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> に投稿してください。ここに投稿するときには次のことを忘れないようにしてください。 + <ul> + <li>タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。</li> + <li>添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。</li> + <li>どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。</li> + </ul> + </li> +</ol> + +<h2 id="Whats_next" name="What's_next">次のステップ</h2> + +<p>最初のモジュールを修了しました。おめでとうございます。あなたはもう CSS の基本的な部分は理解できたはずです。そして、スタイルシートの挙動が分かるようになったはずです。次のモジュール、<a href="/ja/docs/Learn/CSS/Building_blocks">CSS ブロック構築</a>ではいくつかの重要な部分を深く見ていきましょう。</p> + +<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li> +</ol> diff --git a/files/ja/learn/css/first_steps/what_is_css/index.html b/files/ja/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..0d7d6f3cd3 --- /dev/null +++ b/files/ja/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,129 @@ +--- +title: CSSとは何か？ +slug: Learn/CSS/First_steps/What_is_CSS +tags: + - Beginner + - CSS + - Introduction to CSS + - Learn + - Modules + - Specifications + - Syntax +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> + +<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets；カスケーティングスタイルシート) は見栄えのよいページを作ることができますが、内部ではどう働くのでしょうか？この記事では簡単な構文の例とともに CSS とは何かについて説明し、この言語の重要な用語についても触れます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td> + <p>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML概論</a>を学習のこと)。</p> + </td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS とは何かを学ぶ。</td> + </tr> + </tbody> +</table> + +<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a> では HTML について触れ、文書をどのようにマークアップするかを学びました。この文書はウェブブラウザーで読むことができます。見出しは普通のテキストより大きく見え、段落はあたらしい行に分けられ、それらの間には空白が入ります。リンクはほかのテキストと区別するために色付きで下線が引かれています。これらはブラウザーによるデフォルトのスタイリングです。ページの作者がスタイリングしていなくても読みやすくなるようにブラウザーが HTML に適用するとても基本的なスタイルです。</p> + +<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p> + +<p>しかし、ウェブサイトみんながこのような見た目では退屈でしょう。CSS をつかうとブラウザー内で HTML 要素をどう見せるかはっきりと制御できるようになり、マークアップを好きなように表現できます。</p> + +<h2 id="What_is_CSS_for" name="What_is_CSS_for">CSS の目的</h2> + +<p>前述のように、CSS は文書を（スタイルやレイアウトを）どのように表現するか指定する言語です。</p> + +<p><strong>文書</strong> は普通、マークアップ言語をつかって構造化されたテキストファイルです。{{Glossary("HTML")}} がもっとも一般的な マークアップ言語ですが、{{Glossary("SVG")}} や {{Glossary("XML")}}も出会うことがあります。</p> + +<p>文書を <strong>表現する</strong> とは、それを使いやすいフォームに変換することを意味します。{{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, あるいは {{Glossary("Microsoft Edge","Edge")}} といった{{Glossary("ブラウザー","ブラウザー")}} はコンピューター画面やプロジェクター、あるいはプリンタで印刷される文書が視覚的に表現されるよう設計されています。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ブラウザーは時に{{Glossary("User agent","user agent ユーザーエージェント")}} と呼ばれますが、基本的に人に似せたコンピュータープログラムを意味します。CSS について語る時、ブラウザーは代表的なユーザーエージェントですが、それだけではありません。HTML と CSS 文書を印刷できる PDF に変換するようなユーザーエージェントもあります。</p> +</div> + +<p>CSS は、例えば見出しやリンクの <a href="/ja/docs/Web/CSS/color_value">色</a> や <a href="/ja/docs/Web/CSS/font-size">フォントサイズ</a>の変更といったごく基本的なテキストのスタイリングでもつかえます。例えば、<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">一列のテキストをレイアウトして</a>メインコンテンツ領域と関連情報のためのサイドバーに分けるといった、レイアウト作成に使うこともできます。<a href="/ja/docs/Web/CSS/CSS_Animations">アニメーション</a>のような効果も使えます。それぞれの例はこの段落のリンクをご覧ください。</p> + +<h2 id="CSS_syntax" name="CSS_syntax">CSS の構文</h2> + +<p>CSS はルールベースの言語です。ウェブページ上の特定の要素かグループに適用するスタイリングのルールを定義します。例えば、「ページ上の <code><h1></code> 要素の文字を大きく、赤くしたい」といったようにです。</p> + +<p>これを実現するコードはとても簡単な CSS ルールです:</p> + +<pre class="brush: css">h1 { + color: red; + font-size: 5em; +}</pre> + +<p>ルールは {{Glossary("CSS Selector", "セレクタ")}} から始まります。ここにはこれからスタイリングしようとする HTML 要素を選びます。この例では {{htmlelement("h1")}} を選んでいます。</p> + +<p>つぎに波カッコ <code>{ }</code> を書き、この中に<strong>プロパティ</strong>と<strong>プロパティ値</strong> のペアで作られた <strong>宣言 </strong>を 1 つ以上置きます。それぞれのペアは選んだ要素のプロパティとそれに与えたいプロパティ値を特定します。</p> + +<p>コロン <code>:</code> の前にプロパティを書き、コロンの後にプロパティ値を書きます。CSS {{Glossary("property/CSS","プロパティ")}} は特定されたプロパティによって異なる許容値を持ちます。例えば、<code>color</code> プロパティは様々な <a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Color">color 値</a>を持っています。<code>font-size</code> プロパティもあります。このプロパティは値として様々な <a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">size 単位</a> を持っています。</p> + +<p>CSS スタイルシートはたくさんのルールを含みます。</p> + +<pre class="brush: css">h1 { + color: red; + font-size: 5em; +} + +p { + color: black; +}</pre> + +<p>ほかにどんな値があるか調べる必要があることに気づくでしょう。 MDN のプロパティのページをつかえば、忘れた時やほかにどんな値が使えるか知りたいときにすばやく調べられます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>にすべての CSS プロパティのリストがあります。CSS の機能についてもっとたくさんの情報を見つける必要があるときには、検索エンジンで "mdn <em>css-feature-name</em>" と調べることに慣れても良いでしょう。 例えば、"mdn color" や "mdn font-size" を試してみてください!</p> +</div> + +<h2 id="CSS_Modules" name="CSS_Modules">CSS モジュール</h2> + +<p>CSSを使ってスタイリングできることがたくさんあるので、CSS は <strong>モジュール</strong> にまとめられています。 MDN を探せばこれらモジュールのリファレンスが見つかるでしょうし、多くのページは特定のモジュールで編集されていることがわかります。例えば、その目的やプロパティと機能の違いを見つけるために<a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders">背景と境界</a> モジュールを見ることができます。（後述で） CSS 技術を定義する仕様へのリンクもあります。</p> + +<p>CSS がどのように作られているか、ここではあまり心配する必要はありませんが、もし例えば、特定のプロパティが似たものの中で見つかる可能性があることを知っていれば、情報は見つけやすくなります。</p> + +<p>たとえば、背景と境界モジュールに戻ってみましょう。<code><a href="/ja/docs/Web/CSS/background-color">background-color</a></code> と <code><a href="/ja/docs/Web/CSS/border-color">border-color</a></code> プロパティがこのモジュール内で定義されているのは理にかなっていると思うかもしれませんし、実際そうなっています。</p> + +<h3 id="CSS_Specifications" name="CSS_Specifications">CSS の仕様</h3> + +<p>(HTML, CSS, JavaScript といった) ウェブの標準技術はすべて、仕様 (または単に 「スペック」)とよばれる文書で定義されており、({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, or {{glossary("Khronos")}} といった) 標準化組織によって発行され、技術がどう働くか定義しています。</p> + +<p>CSS は W3C 内の <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> と呼ばれるグループにより開発されました。このグループは、CSS に関心のあるブラウザーベンダーやその他の企業の代表者で構成されています。またメンバー組織とつながらず、独立した声として行動する <em>invited experts</em> もいます。 </p> + +<p>新しい CSS の機能は、CSS ワーキンググループにより開発され、仕様化されています。 特定のブラウザーが実験的に機能を実装させることもありますし、ウェブデザイナーやデベロッパーが要望することもありますし、ワーキンググループ自体が要件を固めることもあります。CSS は絶えず開発されており、新しい機能が利用可能になります。しかし重要なのは、古いウェブサイトが決して壊れてしまわないように、全員が努力していることです。2000年に作られたウェブサイトは限られた CSS 機能しか使えませんが、最新のブラウザーでも見えるようになっているべきなのです。</p> + +<p>CSS の初心者としては、CSS仕様が圧倒的であることに気付くでしょう。これらは、ウェブ開発者が CSS を理解するために読むのではなく、エンジニアがユーザーエージェント機能のサポートを実装するために使用するのを想定しています。経験豊富な開発者の多くは、MDN ドキュメントや他のチュートリアルを参照します。ただし、それらが存在することを知り、使っている CSS やブラウザーによるサポート（以下を参照）、および仕様間の関係を理解することは価値があります。</p> + +<h2 id="Browser_support" name="Browser_support">ブラウザーサポート</h2> + +<p>一度CSS が指定されると、1 つ以上のブラウザーが CSS を実装している場合にのみウェブページの開発に役立ちます。これはコードが CSS ファイルの命令を画面に表示できるように記述されることを意味します。これは <a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS がどう働くか</a>のレッスンで見ることになるでしょう。すべてのブラウザーで同時にある機能が実装されることは通常はありませんし、それゆえ通常、一部のブラウザーでは CSS の一部を使用でき、他のブラウザーでは使用できないというギャップがあります。こういったわけで、どういった機能が実装されているか確認できることは有益です。MDN のそれぞれのページでは、関心のあるプロパティの状態が確認できるので、ウェブサイト上でそれが使えるか見極めることができます。</p> + +<p>以下は CSS の <code><a href="/ja/docs/Web/CSS/font-family">font-family</a></code> プロパティについての互換データです。</p> + +<p>{{Compat("css.properties.font-family")}}</p> + +<h2 id="Whats_next" name="What's_next">次のステップ</h2> + +<p>CSS とは何かについていくらか理解したと思いますので、<a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a> に進みましょう。ここでは自分で CSS を書き始められます。</p> + +<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li> +</ol> |