diff options
Diffstat (limited to 'files/ja/learn/css/building_blocks')
18 files changed, 4517 insertions, 0 deletions
diff --git a/files/ja/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.html new file mode 100644 index 0000000000..650851a8a3 --- /dev/null +++ b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.html @@ -0,0 +1,426 @@ +--- +title: ボックスの高度なエフェクト +slug: Learn/CSS/Building_blocks/Advanced_styling_effects +tags: + - Article + - Beginner + - Blend modes + - Boxes + - CSS + - CodingScripting + - Filters + - Styling + - box shadows + - effects +translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary"><span class="seoSummary">この記事はトリックの箱として機能し、ボックスの影、ブレンドモード、フィルタのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基礎（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>ボックスの高度なエフェクトの使用方法についてのアイデアを得ることと、CSS 言語に登場しているいくつかの新生のスタイル設定ツールについて知ること。</td> + </tr> + </tbody> +</table> + +<h2 id="Box_shadows" name="Box_shadows">ボックスの影</h2> + +<p><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>のモジュールに戻って、{{cssxref("text-shadow")}} プロパティを見てみましょう。 これにより、要素のテキストに1つ以上のドロップシャドウを適用できます。 ボックスにも同等のプロパティがあります — {{cssxref("box-shadow")}} を使用すると、実際の要素ボックスに1つ以上のドロップシャドウを適用できます。 テキストの影と同様に、ボックスの影はブラウザー間で非常によくサポートされていますが、IE9 以降のみです。 古いバージョンの IE を使用しているユーザーは、影なしで対処するしかないかもしれないので、コンテンツがそれらなしで判読可能であることを確かめるためにデザインをテストするだけです。</p> + +<p>このセクションの例は <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">ソースコード</a>も参照）。</p> + +<h3 id="A_simple_box_shadow" name="A_simple_box_shadow">簡単なボックスの影</h3> + +<p>物事を始めるための簡単な例を見てみましょう。 まず、いくつかの HTML です。</p> + +<pre class="brush: html"><article class="simple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> + +<p>そして、CSS です。</p> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.simple { + box-shadow: 5px 5px 5px rgba(0,0,0,0.7); +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('A_simple_box_shadow', '100%', 100) }}</p> + +<p><code>box-shadow</code> プロパティ値に次の4つの項目があることがわかります。</p> + +<ol> + <li>最初の長さの値は<strong>水平オフセット</strong>（horizontal offset）です — 影が元のボックスから右へオフセットした距離です（値が負の場合は左）。</li> + <li>2番目の長さの値は<strong>垂直オフセット</strong>（vertical offset）です — 影が元のボックスから下方向へオフセットした距離です（値が負の場合は上方向）。</li> + <li>3番目の長さの値は、<strong>ぼかし半径</strong>（blur radius）です — 影に適用されるぼかしの量です。</li> + <li>色の値は、影の<strong>基本色</strong>（base color）です。</li> +</ol> + +<p>これらの値を定義するために必要な長さと色の単位を使用できます。</p> + +<h3 id="Multiple_box_shadows" name="Multiple_box_shadows">複数のボックスの影</h3> + +<p>次のように、1つの <code>box-shadow</code> の宣言で、複数のボックスの影をコンマで区切って指定することもできます。</p> + +<div class="hidden"> +<pre class="brush: html"><article class="multiple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> +</div> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.multiple { + box-shadow: 1px 1px 1px black, + 2px 2px 1px black, + 3px 3px 1px red, + 4px 4px 1px red, + 5px 5px 1px black, + 6px 6px 1px black; +}</pre> + +<p>そして、この結果を得ます。</p> + +<p>{{ EmbedLiveSample('Multiple_box_shadows', '100%', 100) }}</p> + +<p>ここでは、複数の色付きレイヤーを持つ凸型のボックスを作成することで楽しいことができましたが、例えば複数の光源に基づいて影を付けてよりリアルな外観を作成するなど、好きな方法で使用できます。</p> + +<h3 id="Other_box_shadow_features" name="Other_box_shadow_features">その他のボックスの影の機能</h3> + +<p>{{cssxref("text-shadow")}} とは異なり、{{cssxref("box-shadow")}} には <code>inset</code> キーワードがあります — これを影の宣言の最初に置くと、外側の影ではなく内側の影になります。 見て理解してもらいましょう。</p> + +<p>まず、この例では一部異なる HTML を使用します。</p> + +<pre class="brush: html"><button>Press me!</button></pre> + +<pre class="brush: css">button { + width: 150px; + font-size: 1.1rem; + line-height: 2; + border-radius: 10px; + border: none; + background-image: linear-gradient(to bottom right, #777, #ddd); + box-shadow: 1px 1px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +} + +button:focus, button:hover { + background-image: linear-gradient(to bottom right, #888, #eee); +} + +button:active { + box-shadow: inset 2px 2px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('Other_box_shadow_features', '100%', 70) }}</p> + +<p>ここでは、フォーカス/ホバー/アクティブ状態と共にボタンの装飾を設定しました。 このボタンには、デフォルトで単純な黒いボックスの影が設定されています。 さらに、1つは明るく、もう1つは暗い、2つの内側の影を、ボタンに素晴らしい陰影エフェクトを与えるためにボタンの反対側の角に置きます。</p> + +<p>ボタンが押されたとき、アクティブ状態は最初のボックスの影を非常に暗い内側の影と交換し、押されているボタンの外観を与えます。</p> + +<div class="note"> +<p><strong>注</strong>: <code>box-shadow</code> 値に設定できる別の項目があります — 色の値の直前に別の長さの値をオプションで設定できるのが、<strong>広がり半径</strong>（spread radius）です。 設定すると、影が元のボックスよりも大きくなります。 あまり一般的ではありませんが、言及する価値があります。</p> +</div> + +<h2 id="Filters" name="Filters">フィルタ</h2> + +<p>CSS フィルタは、Photoshop のようなグラフィックパッケージのレイヤーにフィルタを適用するのと同じ方法で、要素にフィルタを適用する方法を提供します。 利用可能ないくつかの異なるオプションがあり、{{cssxref("filter")}} のリファレンスページでそれらすべてについて詳しく読むことができます。 このセクションでは、構文について説明し、結果がどれほど楽しいものになるかを説明します。</p> + +<p>基本的に、フィルタは任意の要素、ブロック、インラインに適用することができます — あなたは単に <code>filter</code> プロパティを使い、それに特定のフィルタ関数の値を与えるだけです。 利用可能なフィルタオプションの中には他の CSS 機能と非常によく似た機能を持つものがあります。 例えば、<code>drop-shadow()</code> は非常によく似た方法で機能し、{{cssxref("box-shadow")}} や {{cssxref("text-shadow")}} と同じエフェクトをもたらします。 しかし、フィルタに関して本当に素晴らしいことは、ボックス自体を1つの大きな塊としてではなく、ボックス内のコンテンツの正確な形状に作用することです。 それは常に望んだものではないかもしれませんが、もっときれいに見えます。 簡単な例を使用して、意味を説明しましょう。</p> + +<p>まず、いくつかの簡単な HTML です。</p> + +<pre class="brush: html"><p class="filter">Filter</p> + +<p class="box-shadow">Box shadow</p> +</pre> + +<p>そして今、いくつかの CSS はドロップシャドウをそれぞれに適用します。</p> + +<pre class="brush: css">p { + margin: 1rem auto; + padding: 20px; + width: 100px; + border: 5px dashed red; +} + +.filter { + -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); + filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); +} + +.box-shadow { + box-shadow: 5px 5px 1px rgba(0,0,0,0.7); +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('Filters', '100%', 200) }}</p> + +<p>ご覧のとおり、フィルタのドロップシャドウは、テキストの正確な形と境界線の破線に従います。 ボックスの影はボックスの四角形にちょうど従っています。</p> + +<p>その他注意すべきこと。</p> + +<ul> + <li>フィルタは非常に新しく、Microsoft Edge を含む最近のほとんどのブラウザーでサポートされていますが、Internet Explorer ではまったくサポートされていません。 デザインにフィルタを使用する場合は、コンテンツがフィルタなしで使用可能であることを確認する必要があります。</li> + <li><code>-webkit-</code> 接頭辞が付いたバージョンの <code>filter</code> プロパティが含まれていることがわかります。 これは{{glossary("Vendor Prefix","ベンダー接頭辞")}}と呼ばれ、新しい機能の実装を完了する前にブラウザーによって使用され、その機能をサポートし、接頭辞の付かないバージョンと衝突せずにその機能を試すことができます。 ベンダー接頭辞はウェブ開発者によって使われることを意図していませんが、実験的な機能が本当に望まれるならば本番ページで使われることもあります。 この場合、現在のところ Chrome / Safari / Opera のサポートには <code>-webkit-</code> バージョンのプロパティが必要ですが、Edge と Firefox は最後の接頭辞の付かないバージョンを使用します。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: コードで接頭辞を使用する場合は、接頭辞が必要なバージョンと接頭辞の付かないバージョンを必ずすべて含めてください。 そうすれば、可能な限り最大数のブラウザーでこの機能を使用できるようになり、後でブラウザーが接頭辞をなくすときに接頭辞の付かないバージョンも使用できます。 また、これらの実験的な機能は変更される可能性があるため、コードが壊れる可能性があります。 接頭辞が削除されるまで、これらの機能を試してみることが本当に最善です。</p> +</div> + +<p>その他のフィルタの例が <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">ソースコード</a>も参照）。</p> + +<h2 id="Blend_modes" name="Blend_modes">ブレンドモード</h2> + +<p>CSS ブレンドモードでは、2つの要素が重なるときにブレンドエフェクトを指定する要素にブレンドモードを追加できます — 各ピクセルに表示される最終的な色は、元のピクセル色とその下のレイヤーにあるピクセル色を組み合わせた結果になります。 ブレンドモードは、Photoshop のようなグラフィックアプリケーションのユーザーにとっては非常によく知られています。</p> + +<p>CSS でブレンドモードを使用する次の2つのプロパティがあります。</p> + +<ul> + <li>{{cssxref("background-blend-mode")}} は、単一の要素に設定された複数の背景画像と色をブレンドします。</li> + <li>{{cssxref("mix-blend-mode")}} は、設定されている要素と、それが重なっている要素をブレンドします — 背景とコンテンツの両方です。</li> +</ul> + +<p>こちらの <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> サンプルページ（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">ソースコード</a>を参照）、および {{cssxref("<blend-mode>")}} リファレンスページには、ここに掲載されている以外にもたくさんの例があります。</p> + +<div class="note"> +<p><strong>注</strong>: ブレンドモードもまた非常に新しいもので、フィルタよりもサポートが多少劣ります。 Edge にはまだサポートがありませんし、Safari はブレンドモードオプションのいくつかをサポートするだけです。</p> +</div> + +<h3 id="background-blend-mode" name="background-blend-mode">background-blend-mode</h3> + +<p>ここでも、これをよりよく理解できるように、いくつかの例を見てみましょう。 まず、{{cssxref("background-blend-mode")}} です — ここでは次のいくつかの簡単な {{htmlelement("div")}} を示すことで、オリジナルとブレンドバージョンを比較できます。</p> + +<pre class="brush: html"><div> +</div> +<div class="multiply"> +</div></pre> + +<p>次にいくつかの CSS です — <code><div></code> に1つの背景画像と緑色の背景色を追加しています。</p> + +<pre class="brush: css">div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +.multiply { + background-blend-mode: multiply; +}</pre> + +<p>結果はこれです — 左側にオリジナル、右側に乗算ブレンドモードがあります。</p> + +<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p> + +<h3 id="mix-blend-mode" name="mix-blend-mode">mix-blend-mode</h3> + +<p>それでは、{{cssxref("mix-blend-mode")}} を見てみましょう。 ここでは上と同様の2つの <code><div></code> を提示しますが、要素がどのようにブレンドされるかを示すために、それぞれが紫色の背景を持つ単純な <code><div></code> の上に乗っています。</p> + +<pre class="brush: html"><article> + No mix blend mode + <div> + + </div> + <div> + </div> +</article> + +<article> + Multiply mix + <div class="multiply-mix"> + + </div> + <div> + </div> +</article></pre> + +<p>次がこれをスタイルする CSS です。</p> + +<pre class="brush: css">article { + width: 280px; + height: 180px; + margin: 10px; + position: relative; + display: inline-block; +} + +div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; +} + +article div:first-child { + position: absolute; + top: 10px; + left: 0; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +article div:last-child { + background-color: purple; + position: absolute; + bottom: -10px; + right: 0; + z-index: -1; +} + +.multiply-mix { + mix-blend-mode: multiply; +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p> + +<p>ここでは、乗算混合（multiply mix）ブレンドが2つの背景画像だけでなく、その下の <code><div></code> からの色もブレンドしていることがわかります。</p> + +<div class="note"> +<p><strong>注</strong>: {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} など、上記のレイアウトプロパティの一部を理解していなくても心配しないでください。 これらについては、<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>のモジュールで詳しく説明します。</p> +</div> + +<h2 id="-webkit-background-clip_text" name="-webkit-background-clip_text">-webkit-background-clip: text</h2> + +<p>先に進む前に、簡単に言及しておきたいと思うもう1つの新生機能は、{{cssxref("background-clip")}} の <code>text</code> 値です（現在 Chrome、Safari、Opera でサポートされており、Firefox で実装されています）。 独自の <code>-webkit-text-fill-color: transparent;</code> 機能とともに使用すると、背景画像を要素のテキストの形に切り取ることができ、いくつかの素晴らしいエフェクトをもたらします。 これは公式の標準ではありませんが、普及しており、開発者によってかなり広く使用されているため、複数のブラウザーにわたって実装されています。 このコンテキストで使用すると、Webkit / Chrome 以外のブラウザーでも、両方のプロパティに <code>-webkit-</code> ベンダー接頭辞が必要になります。</p> + +<pre class="brush: css">.text-clip { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +}</pre> + +<p>では、なぜ他のブラウザーが <code>-webkit-</code> 接頭辞を実装したのでしょうか？ 主にブラウザーの互換性のためにです — 非常に多くのウェブ開発者が <code>-webkit-</code> 接頭辞を使用してウェブサイトを実装し始めているため、実際には標準に従っているのに、他のブラウザーでは壊れているように見え始めました。 そこで彼らはそのような機能をいくつか実装することを余儀なくされました。 これはあなたの仕事で標準的でなく接頭辞の付いた CSS 機能を使用する危険性を浮き彫りにします — それらはブラウザーの互換性の問題を引き起こすだけでなく、変更される可能性もあるため、コードはいつでも壊れる可能性があります。 標準に固執するほうがはるかに良いです。</p> + +<p>本番環境でこのような機能を使用したい場合は、ブラウザー間で徹底的なテストを行い、機能が機能しない場合でもサイトが引き続き使用可能であることを確認してください。</p> + +<div class="note"> +<p><strong>注</strong>: 完全な <code>-webkit-background-clip: text</code> のコードの例については、<a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> を参照してください（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">ソースコード</a>も参照）。</p> +</div> + +<h2 id="Active_learning_experiment_with_some_effects" name="Active_learning_experiment_with_some_effects">能動的学習: いくつかのエフェクトを用いた実験</h2> + +<p>今度は、あなたの番です。 この能動的学習のために、下に提供されているコードを使用して、上で読んだエフェクトのいくつかを試してみてください。</p> + +<p>間違えた場合は、<em>Reset</em> ボタンを使用して例をいつでもリセットできます。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> +</div></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { + width: 280px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background-color: red; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px, + linear-gradient(to bottom right, #f33, #a33); +} </textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事が楽しかったことを願っています — ぴかぴかのおもちゃで遊ぶのは概してそうで、最先端のブラウザーで、どのような種類のツールが使用可能になりつつあるのかを見るのはいつも面白いです。 <a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>の記事の終わりに到達したので、次に私たちの評価であなたのボックスの装飾のスキルをテストします。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> + +<p> </p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap">ボックスモデルの復習</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">境界線</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表の装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">ボックスの高度なエフェクト</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..d2e65370cd --- /dev/null +++ b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,338 @@ +--- +title: 背景と枠線 +slug: Learn/CSS/Building_blocks/Backgrounds_and_borders +tags: + - Background + - Beginner + - CSS + - Image + - Learn + - Position + - borders + - color +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> + +<div></div> + +<p>このレッスンでは、CSS の背景・枠線モジュールの機能を使ったクリエイティブな表現方法をいくつか見ていきます。グラデーション、背景画像、角の丸めを加えることを通じて、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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ボックスの背景と枠線をスタイルする方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Styling_backgrounds_in_CSS" name="Styling_backgrounds_in_CSS">CSS による背景の設定</h2> + +<p>CSSの {{cssxref("background")}} プロパティは、このレッスンで説明する多くの個別指定プロパティ(<strong>longhand property</strong>)を一度に指定する一括指定プロパティ(<strong>shorthand property</strong>)です。スタイルシートで複雑な背景プロパティを見かけると、一度に多くの値を渡していて理解するのが少し難しく感じるかもしれません。</p> + +<pre class="brush: css notranslate"><code>.box { + background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, rebeccapurple; +} </code> +</pre> + +<p>一括指定の仕方については後ほど改めて扱います。まずは背景に対してCSSで何ができるのかを知るために、ひとつひとつのプロパティを見ていきましょう。</p> + +<h3 id="Background_colors" name="Background_colors">背景色</h3> + +<p> {{cssxref("background-color")}} プロパティは、要素の背景色を定義します。このプロパティは、有効な<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a>値を受け入れます。<code>background-color</code>は、要素の <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model#Parts_of_a_box"><strong>Content box</strong>, <strong>Padding box</strong></a> の範囲でコンテンツの下に広がります。</p> + +<p>次の例では、さまざまな色の値値を使用して、ボックス(<code>.box</code>)、見出し(<code>h2</code>)、および {{htmlelement("span")}} 要素に背景色を指定しています。</p> + +<p><strong>利用可能な <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/color_value"><color></a> を使ってみましょう。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 600)}}</p> + +<h3 id="Background_images" name="Background_images">背景画像</h3> + +<p> {{cssxref("background-image")}} プロパティは、要素の背景に表示する画像を指定します。次の例には、2個のボックスがあります。片方のボックスでは背景画像がボックスより大きく、他方のボックスの背景画像は小さな星の画像です。</p> + +<p>この例は、背景画像に関する2つのことを示しています。<br> + デフォルトでは、大きな画像はボックスに収まるように縮小されず、一部分のみが表示されます。いっぽう、小さな画像はボックスの内側いっぱいまで繰り返されます。この場合、実際の画像は星1個のみです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}</p> + +<p>背景画像と背景色を同時に指定すると、背景色より手前に背景画像が表示されます。上記の例に<code>background-color</code>プロパティを追加して、動作を確認してみましょう。</p> + +<h4 id="Controlling_background-repeat" name="Controlling_background-repeat">背景画像の繰り返しの指定</h4> + +<p> {{cssxref("background-repeat")}} プロパティは、画像の繰り返し表示の動作を制御するために使用されます。使用可能な値には次のものがあります:</p> + +<ul> + <li><code>no-repeat</code> — 背景画像が繰り返されるのを完全に防ぎます。</li> + <li><code>repeat-x</code> — 水平方向に繰り返します。</li> + <li><code>repeat-y</code> — 垂直方向に繰り返します。</li> + <li><code>repeat</code> — デフォルト; 両方の方向に繰り返します</li> +</ul> + +<p><strong>以下の例でこれらの値を試してみましょう。値を<code>no-repeat</code>に設定したため、星が1つだけ表示されます。異なる値(<code>repeat-x</code>や<code>repeat-y</code>)に変えてみて、その効果を確認してみましょう。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p> + +<h4 id="Sizing_the_background_image" name="Sizing_the_background_image">背景画像のサイズ指定</h4> + +<p>先ほどの例では、背景を設定したい要素より画像のほうが大きいため画像の一部しか表示されませんでした。 {{cssxref("background-size")}} プロパティを使用して、背景内に収まるように画像のサイズを調整できます。</p> + +<p><code>background-size</code>プロパティは、<a href="/ja/docs/Web/CSS/length"><length></a> または <a href="/ja/docs/Web/CSS/percentage"><percentage></a> の値をとることができます。</p> + +<p>また、次のキーワードを使うこともできます：</p> + +<ul> + <li><code>cover</code> —ブラウザは、アスペクト比を維持したままボックスの領域を完全に覆うように画像の大きさを調整します。<br> + この場合、画像の一部が箱の外に出る可能性があります。</li> + <li><code>contain</code> —ブラウザは、画像がボックス内にちょうど収まるように画像の大きさを調整します。<br> + この場合、画像とボックスのアスペクト比が異なる場合、画像の左右または上下に隙間ができる可能性があります。</li> +</ul> + +<p>次の例では、<strong><length></strong>値を使用して先ほどの大きな画像がボックス内におさまる大きさに変更しました。結果として、画像が歪んでいることがわかります。</p> + +<p>以下を試してみましょう。</p> + +<ul> + <li>背景のサイズをあらわす<strong><length></strong>値を変更します。</li> + <li><strong><length></strong>値を削除し、<code>background-size: cover</code>や<code>background-size: contain</code>を使うとどうなるかを確認します。</li> + <li>画像がボックスより小さい場合は、<code>background-repeat</code>の値を変更して画像を繰り返すことができます。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 750)}}</p> + +<h4 id="Positioning_the_background_image" name="Positioning_the_background_image">背景画像の位置の指定</h4> + +<p> {{cssxref("background-position")}} プロパティを適用すると、そのボックス上で背景画像を表示する位置を選択できます。このプロパティでは、ボックスの左上隅を<code>(0, 0)</code>として、水平方向の座標軸(<strong>horisontal axis</strong>)を<code>x</code>軸(<strong><code>x</code> axis</strong>, 複数形はaxes）、垂直方向の座標軸(<strong>vertical axis</strong>)を<code>y</code>軸(<strong><code>y</code> axis</strong>)とする座標系にそって画像を配置します。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: デフォルトの<code>background-position</code>の値は<code>(0, 0)</code>です。</p> +</div> + +<p>最も一般的な<code>background-position</code>の値は、2個の値をとります—水平方向、垂直方向の順で値を指定します。</p> + +<p><code>top</code>や<code>right</code>などのキーワードを使用できます (詳しくは{{cssxref("background-image")}}ページを参照):</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top center; +} </code> +</pre> + +<p>そして、 <a href="/ja/docs/Web/CSS/length"><length></a>および<a href="/ja/docs/Web/CSS/percentage"><percentage></a>を使用できます:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: 20px 10%; +} </code> +</pre> + +<p>次のように、キーワードの値を<length>や<percentage>の値と混在させてもかまいません。</p> + +<pre class="brush: css notranslate">.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px; +}</pre> + +<p>最後に、4つの値をとる構文を使って、ボックスのいずれかの端からの距離を示すこともできます。この場合の長さは、その直前の値で指定した位置からの距離（オフセット, <strong>offset</strong>）です。下のCSSでは、背景を上(<code>top</code>)から<code>20px</code>、右(<code>right</code>)から<code>10px</code>に配置しています。</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px right 10px; +} </code></pre> + +<p><strong>次の例を使い、プロパティの値を変えてボックス内で星を動かしてみましょう。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>background-position</code> は {{cssxref("background-position-x")}} および {{cssxref("background-position-y")}} の一括指定プロパティで、それぞれの座標軸の方向の位置を個別に設定できます。</p> +</div> + +<h3 id="Gradient_backgrounds" name="Gradient_backgrounds">グラデーション背景</h3> + +<p>グラデーション(<strong>gradient</strong>, <strong><ruby>勾配<rp>(</rp><rt>こうばい</rt><rp>)</rp> </ruby></strong>)は、背景に使用する場合には画像と同じようにふるまいます。グラデーションは{{cssxref("background-image")}}プロパティを使用して設定されます。</p> + +<p><a href="/ja/docs/Web/CSS/gradient"><gradient></a>データ型のMDNページで、さまざまな種類のグラデーションとそれらを使ってできることについて詳しく読むことができます。Webで数多く提供されているCSSグラデーションジェネレーター(例えば "<cite><a href="https://cssgradient.io/">CSS Gradient</a></cite>")を使用して、グラデーションを楽しく試せます。このWebサービスでは、グラデーションを作成したのち、グラデーションを生成するソースコードをコピー&ペーストできます。</p> + +<p>以下の例でいろいろなグラデーションを試してみましょう。 1つめのボックスには、ボックス全体に広がる線形グラデーション(linear gradient)を指定しています。2つめのボックスには、サイズを設定して(そのために繰り返されている)放射状グラデーション(radial gradinet)を指定しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 600)}}</p> + +<h3 id="Multiple_background_images" name="Multiple_background_images">複数の背景画像</h3> + +<p><code>background-image</code>プロパティにコンマ区切りで複数の画像を指定することで、複数の背景画像を使用することもできます。</p> + +<p>これを行うと、背景画像が互いに重なり合う可能性があります。背景は、最後に指定したものが一番下に置かれ、先のものが順に上に重ねられます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: グラデーションを通常の背景画像と同じように重ね合わせることができます。</p> +</div> + +<p>他の<code>background-*</code>プロパティも、<code>background-image</code>と同じ方法でコンマ区切りの値を持つことができます:</p> + +<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +background-repeat: no-repeat, repeat-x, repeat; +background-position: 10px 20px, top right;</pre> + +<p>プロパティに指定した複数のプロパティ値は、他のプロパティの同じ位置にある値と対応します。上の例で、<code>image1</code>の<code>background-repeat</code>値は<code>no-repeat</code>です。では、プロパティごとに値の個数が異なるとどうなるでしょうか？答えは、個数が少ない値が繰り返し使われる、ということです。上の例では、4つの背景画像がありますが、2つの <code>background-position</code> の値しかありません。最初の2つの位置の値は対応する位置の画像に適用され、その後は繰り返されます。つまり、<code>image3</code>には1番目、<code>image4</code>には2番目の値がふたたび使われます。</p> + +<p><strong>実際に試してみましょう。以下の例には2つの画像があります。重ね合わせの順序を確かめるために、どの背景画像を先にするかを変えてみてください。また、他のプロパティを操作して、位置、サイズ、繰り返し方法を変えてみてください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 500)}}</p> + +<h3 id="Background_attachment" name="Background_attachment">スクロール時の背景画像の固定</h3> + +<p>背景に使用できるもうひとつのオプションは、コンテンツがスクロールするときのスクロール方法を指定することです。これは, {{cssxref("background-attachment")}} プロパティを使用して制御され、次の値を取ることができます:</p> + +<ul> + <li><code>scroll</code>: ページ全体のスクロールに応じて要素の背景を移動します。要素のコンテンツがスクロールされた場合には、背景は移動しません。<br> + 実際には背景はページ上の同じ位置に固定されているため、ページがスクロールするとスクロールします。</li> + <li><code>fixed</code>: 要素の背景をビューポート(viewport)に固定します。ページや要素のコンテンツがスクロールされても移動せず、画面上の同じ位置にとどまります。</li> + <li><code>local</code>: 要素の背景をその要素自身に対して固定します。要素のコンテンツをスクロールした場合にもそれにあわせて背景が移動します。<br> + <code>local</code>値は、多くの場合に<code>scroll</code>値の挙動が期待どおりではないことから新しく追加されました（他の値はInternet Explorer 4以降でサポートされますが、<code>local</code>はIE 9以降のみでサポートされます）。</li> +</ul> + +<p> {{cssxref("background-attachment")}} プロパティはスクロールするコンテンツがある場合にのみ効果があります。3つの値の違いを示す<a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">デモ（background-attachment.html）</a>を作成したのでご覧ください（<a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">ソースコード</a>も公開しています）。</p> + +<h3 id="Using_the_background_shorthand_property" name="Using_the_background_shorthand_property">背景に関する指定をまとめておこなう</h3> + +<p>このレッスンの冒頭で、 {{cssxref("background")}} プロパティを使って背景が指定されている場合についてふれました。この一括指定プロパティを使うと、複数のプロパティを一度に設定できます。</p> + +<p>複数の背景を使用する場合は、最初の背景に対するプロパティをすべて指定してから、カンマで区切って次の背景を追加します。以下の例では、サイズと位置を伴った<a href="#Gradient_backgrounds">グラデーション</a>、<code>no-repeat</code>と位置指定を伴った<a href="#Background_images">背景画像</a>、最後に<a href="#Background_colors">背景色</a>を指定しています。</p> + +<p>背景画像に関する一括指定を書くとき、いくつかのルールを守る必要があります。例えば：</p> + +<ul> + <li> <code>background-color</code> は最後のコンマの後にのみ指定できます。</li> + <li><code>background-size</code>の値は、<code>center / 80％</code>のように、<code>background-position</code>の値の直後に<code>/</code>文字を挟んだ位置でのみ使うことができます。</li> +</ul> + +<p>すべての注意点を確認するには、 {{cssxref("background")}} のMDNページをご覧ください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 700)}}</p> + +<h3 id="Accessibility_considerations_with_backgrounds" name="Accessibility_considerations_with_backgrounds">アクセシビリティの観点での注意点</h3> + +<p>テキストを背景画像や背景色の上に配置する際には、閲覧者がテキストを読み取れるだけの十分なコントラストを確保するよう注意する必要があります。画像の上にテキストを配置する場合は、画像が読み込まれない場合でもテキストが読み取れるような背景色も指定する必要があります。</p> + +<p>スクリーンリーダーは背景画像を解析できないため、画像は装飾としての役割のみを担うべきです。重要なコンテンツはすべてHTMLページのなかで表現するべきで、背景画像のなかに含めるべきではありません。</p> + +<h2 id="Borders" name="Borders">枠線</h2> + +<p>ボックスモデルについて学習するとき、枠線(border)がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、枠線をクリエイティブに活用する方法を見ていきます。</p> + +<p>通常、CSSで要素に枠線を追加するときは、CSSの1行で枠線の色、幅、スタイルを指定する一括指定プロパティを使います。</p> + +<p> {{cssxref("border")}}:を使用して、ボックスの4辺すべてに枠線を設定できます。</p> + +<pre class="brush: css notranslate"><code>.box { + border: 1px solid black; +} </code></pre> + +<p>または、次のように、ボックスの1つの辺を対象にすることができます。:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top: 1px solid black; +} </code></pre> + +<p>一括指定で指定した個々のプロパティは次のとおりです：</p> + +<pre class="brush: css notranslate"><code>.box { + border-width: 1px; + border-style: solid; + border-color: black; +} </code></pre> + +<p>一辺ごとの個別指定については次のようになります：</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: top, right, bottom, leftの各方向の枠線を指定するプロパティには、HTML文書の書字モード（writing mode）と結びついた<em>論理</em>プロパティ（<em>logical</em> property）が割り当てられています（書字モードは、左から右、右から左、上から下といったテキストの方向を制御するものです）。次のレッスンでは、さまざまなテキストの方向の処理について説明します。</p> +</div> + +<p>枠線にはさまざまなスタイルを指定できます。以下の例では、ボックスの4辺にそれぞれ異なる枠線スタイルを使用しています。枠線の色、幅、スタイルを試して、枠線の動作を確認しましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 700)}}</p> + +<h3 id="Rounded_corners" name="Rounded_corners">角の丸み</h3> + +<p>{{cssxref("border-radius")}}一括指定プロパティと、各々の角に対応した個別指定プロパティを使用して、ボックスの角の丸みを実現できます。各プロパティは2個の<length>または<percentage>を値として使用できます。最初の値は水平方向の半径(radius)を定義し、2番目の値は垂直方向の半径を定義します。多くの場合、1つの値のみを指定して両方向に適用します。</p> + +<p>例えば、ボックスの4つの角すべてに半径 10px の丸みを持たせるには:</p> + +<pre class="brush: css notranslate"><code>.box { + border-radius: 10px; +} </code></pre> + +<p>または、右上角の水平方向の半径を1em、垂直方向の半径を 10％ にするには:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-right-radius: 1em 10%; +} </code></pre> + +<p>以下の例では、はじめに4つの角すべてについて角の丸みを設定したのち、右上角を他と異なる値に変更しました。値を変えて試してみましょう。使用できる構文は{{cssxref("border-radius")}} プロパティのページを見て確認してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 650)}}</p> + +<h2 id="Playing_with_backgrounds_and_borders" name="Playing_with_backgrounds_and_borders">背景と枠線を試す</h2> + +<p>学んだ知識を試すために、背景と枠線を使って次のものを作成してみてください。コード例を出発点として使ってください:</p> + +<ol> + <li>ボックスに幅が5pxの黒い実線の境界線を付け、角に半径が10pxの丸みをつけてください。</li> + <li>背景画像を追加し（URL <code>balloons.jpg</code>を使用）、ボックスを覆うようにサイズを変更してください。</li> + <li><code><h2></code>に半透明の黒い背景色を指定し、テキストを白にしてください。</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%',650)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">ここで正解を確認できます</a>が、まずは自分の力で解答してみてください！</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このレッスンではかなり多くのことを説明してきましたが、そのなかで背景や枠線をボックスに追加する方法がたくさんあることがわかりました。これまでに説明した機能について詳しく知りたくなったら、各プロパティのMDNページに目を通してみましょう。これらのページには知識を活用したり強化したりするための使用例が書かれています。</p> + +<p>次のレッスンでは、ドキュメントの書字モードがCSSとどのように相互作用するかを説明します。テキストが左から右以外の方向に流れる場合に何が起こるのでしょうか？</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..a385a103b6 --- /dev/null +++ b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,339 @@ +--- +title: カスケードと継承 +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance +tags: + - Beginner + - CSS + - Cascade + - Inheritance + - Learn + - rules + - source order + - specificity +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念（カスケード・詳細度・継承）の理解を深めていくことです。</p> + +<p>このレッスンは他の記事よりも収穫が少なく座学っぽく感じるかもしれませんが、本記事の内容を理解しておくことで今後に役立ちます。このセクションを注意深く読み、次に進む前に概念をよく理解することをお勧めします。</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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>カスケードと詳細度、および CSS の継承の仕組みについて学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Conflicting_rules" name="Conflicting_rules">競合するルール</h2> + +<p>CSS は <strong>Cascading Style Sheets</strong> の略で、最初の単語であるカスケード (<em>cascading</em>) を理解することは非常に重要です。カスケードのふるまいは、CSS を理解するための鍵となりえます。</p> + +<p>プロジェクトに取り組んでいるとき、要素に適用されているはずの CSS が機能していないと感じることがあります。それは大抵の場合、同じ要素に適用される可能性のある 2 つ のルールを作ってしまったことに由来します。<strong><font><font>カスケード</font></font></strong>および、それと密接に関連する<strong><font><font>詳細度</font></font></strong>の概念は、そのような競合が存在する際のメカニズムです。実際に要素をスタイリングしているルールがどれなのかは期待と異なる場合があるため、このメカニズムを理解しておく必要があります。</p> + +<p>このほかに重要なのは<strong>継承</strong>という概念です。一部の CSS プロパティは親要素の値をデフォルトで継承し、一方で継承しないものもあります。これにより、予期しない動作が発生する可能性もあります。</p> + +<p>まず重要なものを簡単に見てみましょう。それぞれ順に追っていって CSS でどのように相互作用するかを見ていきます。これらはトリッキーな概念のように見えるかもしれませんが、CSSを書く練習を積んでいくと、その動作は明らかになってくるでしょう。</p> + +<h3 id="The_cascade" name="The_cascade">カスケード</h3> + +<p><font><font>スタイルシートの</font></font><strong><font><font>カスケード</font></font></strong><font><font>に</font></font><font><font>ついて</font></font><font><font>、とてもシンプルに考えるなら CSS ルールの順序が重要であることを意味します。等しい詳細度を持つ 2 つ のルールが適用される場合、CSS の最後に来るものが使用されます。</font></font></p> + +<p>以下の例では、 <code>h1</code> に対して 2 つ のルールがあります。この <code>h1</code> は最終的に青色になります。これらのルールは個別のセレクターを持つため同じ詳細度であるので、ソースで最後にきている方が採用されています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}}</p> + +<h3 id="Specificity" name="Specificity">詳細度</h3> + +<p>詳細度とは、複数のルールに異なるセレクターがある場合にブラウザーがどのルールを適用するかを決定する方法ですが、同じ要素に適用することもできます。基本的に、セレクターの選択がどの程度具体的になるかの尺度です。</p> + +<ul> + <li>要素セレクターはそれほど具体的ではありません。ページに表示されるそのタイプのすべての要素を選択するため、スコアが低くなります。</li> + <li>クラスセレクターはより具体的です。ページ上の特定の <code>class</code> 属性値を持つ要素のみを選択するため、スコアはより高くなります。</li> +</ul> + +<p>例を見てみましょう。以下に <code>h1</code> に適用できる 2 つ のルールを再度示します。この <code>h1</code> は最終的には赤色になります。クラスセレクターはルールにより高い詳細度を与えるため、要素セレクターを使用したルールがソースの順序でさらに下の方にあっても適用されます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}}</p> + +<p>詳細度スコアリングなどについては、あとで説明します。</p> + +<h3 id="Inheritance" name="Inheritance">継承</h3> + +<p>ここでは継承についても理解する必要があります。親要素に設定された CSS プロパティ値には、子要素に継承されるものとそうでないものがあります。</p> + +<p>例えば、要素に <code>color</code> と <code>font-family</code> を設定すると、異なる色とフォントの値を直接適用しない限り、その中のすべての要素もその色とフォントでスタイルされます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}}</p> + +<p>いくつかのプロパティは継承されません。例えば、要素に {{cssxref("width")}} 50% と設定した場合、すべての子孫要素は親の幅の 50% の幅を取得しません。もしそんなことになるのら CSS を使うととてもイライラするでしょう。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: MDN の CSS プロパティリファレンスページには、仕様書セクションの下部に技術情報ボックスがあるのが通例です。このボックスには、そのプロパティに関する多数のデータポイント（継承されているかどうかなど）が一覧表示されます。例として <a href="/ja/docs/Web/CSS/color#Specifications">color プロパティの仕様書セクション</a> を参照してください。</p> +</div> + +<h2 id="Understanding_how_the_concepts_work_together" name="Understanding_how_the_concepts_work_together">これらの概念がどう連携するか理解する</h2> + +<p>これら 3 つ の概念は、どの CSS をどの要素に適用するかを一緒に制御します。以下のセクションでは、それらがどのように連携するかを見ていきます。少し複雑に見えることもありますが、CSS を使いこなせば覚えやすくなり、忘れた場合はいつでも調べることができます。経験豊富な開発者でさえ、すべてを詳しく覚えているわけではありません。</p> + +<h2 id="Understanding_inheritance" name="Understanding_inheritance">継承を理解する</h2> + +<p>継承から始めます。次の例では {{HTMLElement("ul")}} があり、内部にさらに 2 つ のレベルの順序なしリストがネストされています。外側の <code><ul></code> に境界線、パディング、および文字色が指定されています。</p> + +<p>文字色については直接の子だけでなく、間接の子にも適用されています。つまり直接の子である <code><li></code> 、それに最初のネストされたリスト内のものにも適用されています。そして 2番目 にネストされたリストに <code>special</code> クラスを追加し、別の色が適用されています。これは子に継承します。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}}</p> + +<p>幅（上述したとおり）、マージン、パディング、境界線などは継承されません。境界線がリストの子に継承される場合、すべてのリストとリストアイテムは境界線を表示してしまいます。おそらく、それは欲しい効果ではないはずです。</p> + +<p>デフォルトで継承されるプロパティとそうでないものは、主に常識に基づいているのです。</p> + +<h3 id="Controlling_inheritance" name="Controlling_inheritance">継承の制御</h3> + +<p>CSS は、継承を制御するための 4 つ の特別なユニバーサルプロパティ値 <em>(universal property values)</em> を提供します。すべての CSS プロパティはこれらの値を受け入れます。</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>選択した要素に適用されるプロパティ値を、その親要素と同じものに設定します。これは「継承を有効にする」ことを意味します。</dd> + <dt>{{cssxref("initial")}}</dt> + <dd><font><font>選択された要素に適用されるプロパティ値を、ブラウザーのデフォルトスタイルシートでその要素に設定されているものと同じ値に設定します。</font><font>ブラウザーのデフォルトのスタイルシートで値が設定されておらず、かつ、そのプロパティが自然に継承される場合は </font></font><code>inherit</code><font><font> が代わりにプロパティ値として設定され</font><font>ます。</font></font></dd> + <dt>{{cssxref("unset")}}</dt> + <dd>プロパティを自然な値にリセットします。つまり、プロパティが自然に継承される場合は <code>inherit</code> のように動作し、そうでない場合は <code>initial</code> のように動作します。</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 新しい値で {{cssxref("revert")}} もありますが、これはブラウザーのサポートが制限されます。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: それらの動作の詳細については <a href="/ja/docs/Web/CSS/Cascade">CSS カスケード入門</a>の <a href="/ja/docs/Web/CSS/Cascade#Origin_of_CSS_declarations">CSS 宣言のオリジン</a>を参照してください。</p> +</div> + +<p>リンクのリストを見て、ユニバーサル値 <em>(universal values)</em> がどのように機能するかを調べることができます。以下のライブサンプルでは、CSS に変更を加えて何が起こるかを確認できます。HTML と CSS を理解するには、実際にコードを試すのが最善の方法です。</p> + +<p>以下を試してみてください。</p> + +<ol> + <li><font><font>2番目 のリストアイテムには、</font></font><code>my-class-1</code><font><font> が適用されています。これは、内部にネストされた </font></font><code><a></code><font><font> 要素に色を継承します。</font><font>ルールを削除すると、リンクの色はどのように変わるでしょうか？</font></font></li> + <li>なぜ 3番目 と 4番目 のリンクがその色であるのか理解できていますか？そうでない場合は、上述しているそれぞれの値の説明を確認してください。</li> + <li>例えば <code>a { color: red; }</code> というように <code><a></code> 要素に新しい色を定義すると、どのリンクの色が変わるでしょうか？</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}}</p> + +<h3 id="Resetting_all_property_values" name="Resetting_all_property_values">すべてのプロパティ値のリセット</h3> + +<p><font><font>CSS の一括指定プロパティ </font></font><code>all</code><font><font> を使用して、これらの継承値の 1 つ を（ほぼ）すべてのプロパティに一度に適用できます。その値として、いずれかの継承値 (</font></font><code>inherit</code><font><font>、</font></font><code>initial</code><font><font>、</font></font><code>unset</code><font><font>、または </font></font><code>revert</code><font><font>) を指定できます。新しく変更を開始する際、既知の開始点に戻ることができるように、変更されたスタイルを元に戻す便利な方法です。</font></font></p> + +<p><font><font>以下の例では 2 つ のブロック引用要素 <em>(blockquote)</em> があります。最初のスタイルは blockquote 要素自体に適用され、2 つ目には </font></font><code>all</code><font><font> に </font></font><code>unset</code><font><font> をセットするようにblockquote に適用されるクラスがあります。</font></font></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}}</p> + +<p><code>all</code> の値を他の有効な値に設定してみて、違いを観察してみてください。</p> + +<h2 id="Understanding_the_cascade" name="Understanding_the_cascade">カスケードを理解する</h2> + +<p><font>HTML 構造に深くネストされた段落が body の CSS と同じ色である理由がわかりました。また導入レッスンではドキュメントの任意の時点で CSS を変更する方法がわかりました（CSS を要素自体に割り当てたり、クラスを作成したり）。そしてここからは、スタイルを設定できるものが複数ある場合に、カスケードがどのようにして CSS ルールを適用していくかを見ていきます。</font></p> + +<p><font>考慮すべき 3 つ の要因がありますが、ここでは重要度の高い順にリストしています。</font><font>前にあるものは、後のものを無効にします。</font></p> + +<ol> + <li>重要性 <em>(Importance)</em></li> + <li>詳細度 <em>(Specificity)</em></li> + <li>ソースオーダー <em>(Source order)</em></li> +</ol> + +<p>これらを下から順に、ブラウザーがどうやって CSS を適用しているのかを見ていきましょう。</p> + +<h3 id="Source_order" name="Source_order">ソースオーダー</h3> + +<p><font>カスケードにおいてソースオーダーがどう重要であるかは、すでに見てきました。</font><font>重みがまったく同じであるルールが複数ある場合、CSS の最後にあるルールが優先されるというものです。</font><font>後にあるものが前のものに勝ち、要素のスタイルを上書きしていく規則のようなものと考えることができます。</font></p> + +<h3 id="Specificity_2" name="Specificity_2">詳細度</h3> + +<p>ソースオーダーが重要であるということがわかりました。ある時には、より後ろにあるルールが適用されるはずなのに、競合関係にある前方のものの方が適用されるという状況に出会います。それは前方にあるルールの方が<strong>より高い詳細度</strong>を持っているためです。より具体的であり、要素をスタイリングするべきものとしてブラウザーによって選択されたのです。</p> + +<p>このレッスンで前述したように、クラスセレクターは要素セレクターよりも重みがあるため、クラスで定義されたプロパティは、要素指定されたプロパティをオーバーライドします。</p> + +<p>ここで特筆すべきは、セレクターとそれによって適用されるルールについて注目しているのですが、上書きされるのはルール全体ではなく同じプロパティのみであるということです。</p> + +<p>この振る舞いは CSS での反復を避けるのに役立ちます。一般的な方法としては、要素に基本スタイルを定義したあと、違いがでるようにクラスを作成することです。例えば、次のスタイルシートではレベル 2 見出し <em>(h2)</em> の基本スタイルを定義し、プロパティと値の一部のみを変更するクラスを作成しました。最初に定義された値はすべての見出しに適用され、その後、より具体的な値がクラスありのものに適用されます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}}</p> + +<p><font>ブラウザーが詳細度を計算する方法を見てみましょう。要素セレクターの詳細度は低く、クラスで上書きできることはすでにわかったはずです。基本的に、セレクターの重みはポイント単位の値で与えられ、これらを合計して特定セレクターの重みが与えられて、他の一致するものと相対して評価することができます。</font></p> + +<p>セレクターが持つ詳細度の量は、4 つ の異なる値（またはコンポーネント）を使用して測定されます。これは、1,000、100、10、1 のそれぞれの位として考えることができます。</p> + +<ol> + <li><strong>「1,000」 </strong>宣言が {{htmlattrxref("style")}} 属性（別名、インラインスタイル）内にある場合、これがスコアされます。このような宣言にはセレクターがないため、その詳細度は常にシンプルに 1,000 です。</li> + <li><strong>「100」 </strong>全体のセレクターの内部にある ID セレクターは、これがスコアされます。</li> + <li><strong>「10」 </strong>全体のセレクターの内部にあるクラスセレクター・属性セレクター・擬似クラスは、これがスコアされます。</li> + <li><strong>「1」 </strong>全体のセレクターの内部にある要素セレクターまたは疑似要素には、これがスコアされます。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <font><font>ユニバーサルセレクタ (</font></font><code>*</code><font><font>)、コンビネータ (</font></font><code>+</code><font><font>、</font></font><code>></code><font><font>、</font></font><code>~</code><font><font>、' ') 、及び否定擬似クラス（</font></font><code>:not</code><font><font>）は詳細度に影響を及ぼしません。</font></font></p> +</div> + +<p><font><font>次の表でわかりやすいいくつかの例を示します。</font><font>これらを試してみて、なぜ詳細度が与えられるのかをしっかり理解してください。</font><font>セレクターについてはまだ詳しく説明していませんが、MDN の </font></font><a href="/ja/docs/Web/CSS/CSS_Selectors"><font><font>CSS セレクター</font></font></a><font><font>で詳細を参照することができます。</font></font></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクター</th> + <th scope="col">1,000</th> + <th scope="col">100</th> + <th scope="col">10</th> + <th scope="col">1</th> + <th scope="col">詳細度の合計</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="en-US"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>セレクターなし、要素の {{htmlattrxref("style")}} 属性にルールがある。</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>先に進む前に、実例を見てみましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}}</p> + +<p><font>何が起こっているのでしょうか？まず、この例の最初の 7 つ のルールにのみ関心があり、お気づきのように、各ルールの前に詳細度の値をコメントしてあります。</font></p> + +<ul> + <li>最初の 2 つ のセレクターはリンクの背景色について競合しています。2番目 のセレクターには ID セレクター があるのでそれが優先され青になります。詳細度は 101 対 201 でした。</li> + <li><font>3番目 と 4番目 のセレクターはリンクテキストの色について競合しています。2番目 のセレクターは 1 つ は要素セレクターの代わりに</font><font>クラスセレクターが使われているため、白が適用されます。詳細度は 104 対 113 でした。</font></li> + <li><font>セレクター 5〜7 は、リンクホバー時の境界線について競合しています。セレクター6 は 5 に対して要素セレクターが 1 つ少ないため、詳細度 23 対 24 で負けています。一方で、セレクター7 は 5 と 6 の両方に勝っています。サブセレクターの数は 5 と同じですが、クラスセレクターの要素が使われているためです。詳細度は 24 対 23 対 33 でした。</font></li> +</ul> + +<div class="note"> +<p><strong>注</strong>: <font><font>これは理解しやすくするためのざっくりとした一例に過ぎません。</font><font>実際には、セレクタータイプごとにはそれぞれレベルの詳細度があり、より低い詳細度レベルのセレクターによって上書きすることはできません。</font><font>例えば </font></font><em><font><font>100万 の</font></font></em><strong><font><font>クラス</font></font></strong><font><font>セレクターを組み合わせても、</font></font><em><font><font>1 つ の</font></font></em> <strong><font><font>ID </font></font></strong><font><font>セレクターの</font><font>ルールを上書きすることはできません</font><font>。</font></font></p> + +<p><font>詳細度を評価するためのより正確な方法は、詳細度を高レベルから開始し必要に応じて低レベルにしていくことです。高い方の詳細度</font><font>のセレクタースコアが同点の場合にのみ、低レベルを評価することになります。</font><font>同点でない場合、より高い詳細度レベルを上書きできないため、より低い詳細度レベルのセレクターを無視できます。</font></p> +</div> + +<h3 id="!important" name="!important">!important</h3> + +<p><font><font>ここまで見てきた計算を無効にする特別な CSS があります。使用には十分注意してください </font></font><code>!important</code><font><font>というものです。</font></font><font><font>これは特定のプロパティと値を最も重要であると指定するもので、カスケードの通常のルールを上書きします。</font></font></p> + +<p>例を見てみましょう。2 つの段落があり、そのうちの 1 つ には ID がついています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}}</p> + +<p>何が起きているのかを見てみましょう。理解しにくい場合は、いくつかのプロパティを削除しながら、どうなるか見てみてください。</p> + +<ol> + <li><font><font>3番目のルールでは </font></font>{{cssxref("color")}} と {{cssxref("padding")}} <font><font>が適用されていますが、</font></font>{{cssxref("background-color")}} は<font><font>適用されて</font></font><font><font>いない</font><font>ことようです</font><font>。</font><font>なぜでしょうか？</font><font>ソースオーダーの後の方は、普通は前の方のルールをオーバーライドするため、その観点では 3 つ すべてが適用されるはずです。</font></font></li> + <li><font><font>とはいえ、クラスセレクターは要素セレクターよりも詳細度が高いため前者のルールが優先されます</font></font><font><font>。</font></font></li> + <li><font><font>両方の要素には </font></font><code>better</code><font><font> という </font></font>{{htmlattrxref("class")}} <font><font>が</font></font><font><font>ありますが、2番目 の</font><font>要素には </font></font><code>winning</code><font><font> という </font></font>{{htmlattrxref("id")}} もありま<font><font>す。ID はクラスよりも<strong>より高い詳細度</strong>があるため（ページ上では ID を持つ要素は一意に 1 つ しか置けないのに対し、同じクラスを持つ多くの要素がありえるため、ID セレクターの方が<strong>非常に限定的</strong>になります）、2番目の要素には赤い背景色と 1 ピクセルの黒い境界線が適用され、最初の要素についてはクラスで指定されたように灰色の背景色となり、境界線は消えます。</font></font></li> + <li><font><font>2番目 の要素は赤い背景が適用されていま</font></font><font><font>すが</font><font>、あるはずの境界線はありません</font><font>。</font><font>なぜでしょうか？ </font></font><font><font>2番目 のルールでは </font></font><code>border: none</code><font><font> のあとに </font></font><code>!important</code><font><font> と宣言されており、高い詳細度であるはずの ID よりも重要なものとして扱われているためです。</font></font></li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <font><font>この </font></font><code>!important</code><font><font> 宣言をオーバーライドする唯一の方法</font><font>は、ソースオーダーの後半で同じ詳細度を持つように</font><em><font> </font></em></font><code>!important</code><font><font> 宣言するか</font><font>、またはより高い詳細度を持つ</font><font>宣言に</font><font>含める</font><font>ことです。</font></font></p> +</div> + +<p><code>!important</code><font><font> を知っていると便利です。他人のコードでも見かけることがあるからです。</font></font><strong><font><font>ただし絶対に必要な場合を除きあまり使用しないことを強くお勧めします。</font></font></strong> <code>!important</code><font><font> はカスケードの普通の挙動とは異なってしまうため、特に大きなスタイルシートで CSS に関わるデバッグが非常に困難になるためです。</font></font></p> + +<p><font>使用しなければならない状況の 1 つ としては、コアにある CSS モジュールを編集できない CMS で作業している等で、他の方法では難しい場合にスタイルを実際にオーバーライドしたい場合等があります。</font><font>でも本当に、回避できる場合は使用しないでください。</font></p> + +<h2 id="The_effect_of_CSS_location" name="The_effect_of_CSS_location">CSS ロケーションの効果</h2> + +<p>最後に、CSS 宣言の重要性は指定されたスタイルシートに依存することにも注意してください。ユーザーは、カスタムスタイルシートを設定して、開発者のスタイルをオーバーライドできます。例えば、視覚障害を持っているユーザーが閲覧するすべてのウェブページのフォントサイズを通常の 2倍 に設定して読みやすくするといったこともあります。</p> + +<h2 id="To_summarize" name="To_summarize">要約</h2> + +<p>競合する宣言は次の順序で適用され、後の方がそれより前のものを上書きします。</p> + +<ol> + <li>ユーザーエージェントのスタイルシートの宣言。例えば、他のスタイルが設定されていない場合に使用されるブラウザー標準のスタイルなど。</li> + <li>ユーザースタイルシートの通常の宣言 (ユーザーが設定したカスタムスタイル)</li> + <li>作者のスタイルシートでの通常の宣言 (私たちウェブ開発者によって設定されたスタイルのことです)</li> + <li>作者のスタイルシートの重要 <em>(important)</em> な宣言</li> + <li>ユーザーのスタイルシートの重要 <em>(important)</em> な宣言</li> +</ol> + +<p><font><font>ウェブ開発者のスタイルシートがユーザー</font></font>の<font><font>それを上書きするのは理にかなっているので設計を意図どおりに保つことができますが、前述したとおり、ユーザーがウェブ開発者スタイルをオーバーライドする正当な理由がある場合もあります。それは </font></font><code>!important</code><font><font> ルールを使用する</font><font>ことで実現でき</font><font>ます。</font></font></p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事で多くを網羅しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているかを検証するテストがあります — <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>を見てください。</p> + +<h2 id="Whats_next" name="Whats_next">次のステップ</h2> + +<p>この記事の大部分を理解したのなら、よいでしょう。CSS の基本的な仕組みに慣れてきたということです。次に、セレクターについて詳しく見ていきます。</p> + +<p>カスケード・詳細度・継承を完全に理解していなくても心配する必要はありません。このコースでこれまで取り上げてきたなかで、間違いなく最も複雑なことであり、プロのウェブ開発者でさえもたまに扱いにくく感じるものです。このコースを続行していくなかで、この記事にときどき戻り、それについて考え続けることをお勧めします。</p> + +<p>スタイルが期待どおりに適用されないという奇妙な問題に出くわした場合は、この記事を参照してください。詳細度の問題である可能性があります。</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/debugging_css/index.html b/files/ja/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..77abbd982c --- /dev/null +++ b/files/ja/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,206 @@ +--- +title: CSS のデバッグ +slug: Learn/CSS/Building_blocks/Debugging_CSS +tags: + - Beginner + - CSS + - DOM + - Debugging + - DevTools + - Learn + - source +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> + +<p>CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。セレクターは合っているはずなのに何も起こらなかったり、ボックスのサイズが期待したどおりにならなかったりなどです。この記事では 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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ブラウザーの開発ツールの基本と、 CSS の簡単な検査と編集の方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="How_to_access_browser_DevTools" name="How_to_access_browser_DevTools">ブラウザーの開発ツールの使い方</h2> + +<p>「<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツールとは」</a>という記事は、さまざまなブラウザーやプラットフォームでツールにアクセスする方法を説明する最新のガイドです。ほとんどの場合、特定のブラウザで開発することを選択し、そのブラウザに含まれるツールに最も慣れ親しむことになるかもしれませんが、他のブラウザでのアクセス方法を知っておく価値はあります。これは、複数のブラウザ間で異なるレンダリングが表示されている場合に役立ちます。</p> + +<p>また、DevToolsを作成するときに、ブラウザーがさまざまな領域に焦点を合わせていることもわかります。例えば、Firefoxには、CSSレイアウトを視覚的に操作するための優れたツールがいくつかあり、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">グリッドレイアウト</a>、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">フレックスボックス</a>、および<a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">シェイプ</a>を検査および編集できます。ただし、ページ上の要素に適用されているプロパティや値を検査したり、エディタから変更を加えたりするためのツールなど、基本的なツールはすべての異なるブラウザに共通しています。</p> + +<p>このレッスンでは、CSSを操作するためのFirefox DevToolsの便利な機能をいくつか見ていきます。そのために<a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">、サンプルファイル</a>を使用します。続けたい場合は、新しいタブでこれを読み込み、上のリンク先の記事で説明したようにDevToolsを開きます。</p> + +<h2 id="The_DOM_versus_view_source" name="The_DOM_versus_view_source">DOM とソース表示の違い</h2> + +<p>DevTools を初めて使用する人が困るのは、Web ページの<a href="https://wiki.developer.mozilla.org/ja/docs/Tools/View_source">ソースを表示</a>したとき、またはサーバーに配置した HTML ファイルを見たときに表示されるものと、DevTools の <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a>に表示されるものが異なることです。「ソースの表示」で表示されるものとほぼ同じように見えますが、いくつかの違いがあります。</p> + +<p>レンダリングされた DOM では、ブラウザはあなたのために書き方の悪い HTML を修正しているかもしれません。例えば <code><h2></code> を開いて <code><h3></code> で閉じるといったように、要素を誤って閉じてしまった場合、ブラウザはあなたが何をしようとしていたのかを理解し、DOM の HTML は開いていた <code><h2></code> を正しく <code><h2></code> で閉じるようになります。ブラウザはすべての HTML を正規化し、DOM は JavaScript によって行われた変更も表示します。</p> + +<p>これと比較して、ソースの表示は、サーバーに保存されている HTML ソース コードにすぎません。DevTools の <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML ツリー</a>には、ブラウザが任意の時点でレンダリングしている内容が正確に表示されるため、実際に何が起こっているのかを知ることができます。</p> + +<h2 id="Inspecting_the_applied_CSS" name="Inspecting_the_applied_CSS">適用された CSS の調査</h2> + +<p>ページ上の要素を選択するには、右クリックまたは Ctrl キーを押しながらクリックして [検査] を選択するか、または DevTools ディスプレイの左側にある HTML ツリーから選択します。<code>box1</code> のクラスを持つ要素を選択してみてください。これは、ページ上の最初の要素で、周囲に枠線で囲まれたボックスが描かれています。</p> + +<p><img alt="DevToolsを開いたこのチュートリアルのサンプルページ。" src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> + +<p>HTMLの右側にある<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a>を見ると、その要素に適用されているCSSのプロパティと値を見ることができるはずです。box1 クラスに直接適用されているルールと、box の先祖から継承されている CSS、この場合は <body> に適用されている CSS が表示されています。これは、予想していなかったCSSが適用されている場合に便利です。おそらくそれは親要素から継承されているもので、この要素のコンテキストでそれを上書きするルールを追加する必要があるでしょう。</p> + +<p>また、速記プロパティを展開する機能も便利です。この例では、<code>margin</code> の短縮形を使用しています。</p> + +<p><strong>小さな矢印をクリックしてビューを展開すると、さまざまなロングハンドプロパティとその値が表示されます。</strong></p> + +<p><strong>パネルがアクティブになっているときは、ルールビューの値のオンオフを切り替えることができます。マウスをかざすとチェックボックスが表示されます。<code>border-radius</code> などのルールのチェックボックスのチェックを外すと、CSS は適用されなくなります。</strong></p> + +<p>これを使って A / B 比較を行い、ルールを適用した方が良く見えるかどうかを判断したり、デバッグの手助けをしたりすることができます。例えば、レイアウトがおかしくなり、どのプロパティが問題の原因になっているのかを調べたい場合などです。</p> + +<h2 id="Editing_values" name="Editing_values">値の変更</h2> + +<p>プロパティのオン/オフに加えて、それらの値を編集できます。おそらく、別の色の方が見栄えが良いかどうかを確認したい、または何かのサイズを微調整したいですか。 DevToolsを使用すると、スタイルシートを編集してページを再ロードする時間を大幅に節約できます。</p> + +<p><strong><code>box1</code> を選択した状態で、境界線に適用された色を示すスウォッチ (小さな色付きの円) をクリックします。カラーピッカーが開き、いくつかの異なる色を試すことができます。同様の方法で、ボーダーの幅やスタイルを変更することができます。</strong></p> + +<p><img alt="カラーピッカーを開いたDevToolsスタイルパネル。" src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> + +<h2 id="Adding_a_new_property" name="Adding_a_new_property">新しいプロパティの追加</h2> + +<p>DevToolsを使ってプロパティを追加することができます。おそらく、<code><body></code> 要素のフォント サイズを継承せず、ボックスに独自のサイズを設定したいことに気がついたのではないでしょうか？これは、CSS ファイルに追加する前に DevTools で試すことができます。</p> + +<p><strong>ルールの閉じ中括弧をクリックすると、ルールへの新しい宣言の入力が開始され、その時点で新しいプロパティの入力を開始することができます。<code>font-size</code> を選択したら、試したい値を入力します。また、[+] ボタンをクリックして同じセレクタで追加ルールを追加し、そこに新しいルールを追加することもできます。</strong></p> + +<p><img alt="DevToolsパネル、新しいプロパティをルールに追加し、フォントのオートコンプリートを開く" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>：ルールビューには他にも便利な機能があります。<strong>たとえば</strong>、無効な値の宣言には<strong>取り消し線が引か</strong>れています。詳しくは<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">、CSSの確認と編集を</a>ご覧ください。</p> +</div> + +<h2 id="Understanding_the_box_model" name="Understanding_the_box_model">ボックスモデルについて</h2> + +<p>前のレッスンでは<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">、ボックスモデル</a>について説明しまし<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">た</a>。また、指定したサイズに基づいて要素のサイズの計算方法を変更する代替のボックスモデルと、パディングおよび境界線があることを説明しました。DevToolsは、要素のサイズの計算方法を理解するのに役立ちます。</p> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Layout_view">レイアウトビュー</a>では、選択した要素上のボックス・モデルのダイアグラムと、要素のレイアウト方法を変更するプロパティと値の説明が表示されます。これには、要素で明示的に使用していないが初期値が設定されているプロパティの説明も含まれます。</p> + +<p>このパネルでは、詳細なプロパティの 1 つに <code>box-sizing</code> プロパティがあり、これは要素が使用するボックスモデルを制御します。</p> + +<p><code>box1</code> と <code>box2</code> のクラスを持つ 2 つのボックスを比較してみましょう。どちらも同じ幅 (400px) が適用されていますが、<code>box1</code> の方が視覚的には広くなっています。レイアウトパネルを見ると、<code>content-box</code> を使用していることがわかります。これは、要素に与えたサイズを受け取り、パディングとボーダーの幅を追加する値です。</p> + +<p><code>box2</code> のクラスを持つ要素は <code>border-box</code> を使用しているので、ここでは要素に与えたサイズからパディングとボーダーが差し引かれています。つまり、ページ上でボックスが占めるスペースは、あなたが指定したサイズ（この例では <code>width: 400px</code>）と同じになります。</p> + +<p><img alt="DevToolsのレイアウトセクション" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>：詳細については<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">、ボックスモデルの調査と検査を</a>ご覧ください。</p> +</div> + +<h2 id="Solving_specificity_issues" name="Solving_specificity_issues">詳細度に関する問題の解決</h2> + +<p>開発中に、特に既存のサイトのCSSを編集する必要があるときに、いくつかのCSSを適用させるのに苦労することがあります。何をしても要素がCSSを適用してくれないのです。このような場合、一般的には、より具体的なセレクタが変更を上書きしていることが考えられますが、ここではDevToolsを使用することで解決することができます。</p> + +<p>この例のファイルでは、<code><em></code> 要素に包まれた2つの単語があります。1つはオレンジ色で、もう1つはホットピンク色で表示されています。CSSでは、以下のようにしています。</p> + +<pre class="brush: css notranslate">em { + color: hotpink; + font-weight: bold; +}</pre> + +<p>しかし、スタイルシートの上には <code>.special</code> セレクタ―を持つルールがあります。</p> + +<pre class="brush: css notranslate">.special { + color: orange; +}</pre> + +<p><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a>のレッスンで特異性について説明したことを思い出していただけると思いますが、クラス セレクタは要素セレクタよりも特異性が高いため、この値が適用されます。特に情報が巨大なスタイルシートのどこかに埋もれている場合は、DevToolsを使用することで、このような問題を見つけることができます。</p> + +<p><code>.special</code> のクラスを持つ <code><em></code> を検査すると、DevToolsがオレンジ色が適用されていることを示し、また、emに適用されている <code>color</code> プロパティが取り消されていることを示しています。これで、クラスが要素セレクタをオーバーライドしていることがわかります。</p> + +<p><img alt="emを選択し、DevToolsを見て、何が色を上書きしているかを確認します。" src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> + +<h2 id="Find_out_more_about_the_Firefox_DevTools" name="Find_out_more_about_the_Firefox_DevTools">Firefoxの開発ツールについて</h2> + +<p>MDNには、Firefox DevToolsに関する多くの情報があります。<a href="/ja/docs/Tools">DevTools</a>のメイン<a href="/ja/docs/Tools">セクションを</a>ご覧ください<a href="/ja/docs/Tools/Page_Inspector#How_to">。</a>このレッスンで簡単に説明した内容の詳細については、<a href="/ja/docs/Tools/Page_Inspector#How_to">ハウツーガイドを</a>ご覧ください。</p> + +<h2 id="Debugging_problems_in_CSS" name="Debugging_problems_in_CSS">CSS 不具合のデバッグ</h2> + +<p>CSSの問題を解決する場合、DevToolsは非常に役立ちます。CSSが期待どおりに動作しない状況に陥った場合、どのように解決すればよいでしょうか。次の手順が役立ちます。</p> + +<h3 id="Take_a_step_back_from_the_problem" name="Take_a_step_back_from_the_problem">問題から一歩離れてみる</h3> + +<p>コーディングの問題はどんなものでもイライラすることがありますが、特に CSS の問題は、解決策を見つけるのに役立つようなエラーメッセージをオンラインで検索しても出てこないことが多いので、イライラします。イライラしてきたら、しばらく問題から離れてみましょう。散歩に行ったり、飲み物を飲んだり、同僚とおしゃべりしたり、しばらく他のことに取り組んでみましょう。問題を考えるのをやめれば、魔法のように解決策が現れることもありますし、そうでなくても、スッキリした気分の時に取り組むと、ずっと楽になります。</p> + +<h3 id="Do_you_have_valid_HTML_and_CSS" name="Do_you_have_valid_HTML_and_CSS">HTML と CSS が正しく記述されていますか？</h3> + +<p>ブラウザーはCSSとHTMLが正しく記述されていることを期待しますが、ブラウザーは非常に寛容であり、マークアップまたはスタイルシートにエラーがある場合でも、最善を尽くしてWebページを表示します。コードに誤りがある場合、ブラウザはあなたが何を意味するのかを推測する必要があり、それはあなたが考えていたものとは異なる決定をするかもしれません。さらに、2つの異なるブラウザーが2つの異なる方法で問題に対処する場合があります。したがって、適切な最初のステップは、HTMLおよびCSSをバリデーターで実行し、エラーを見つけて修正することです。</p> + +<ul> + <li><a href="https://jigsaw.w3.org/css-validator/">CSSバリデーター</a></li> + <li><a href="https://validator.w3.org/">HTMLバリデーター</a></li> +</ul> + +<h3 id="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in" name="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in">プロパティと値は対象ブラウザーでサポートされていますか？</h3> + +<p>ブラウザは、理解できないCSSを単に無視します。使用しているプロパティまたは値が、テストしているブラウザーでサポートされていない場合、何も壊れませんが、そのCSSは適用されません。DevToolsは一般的に、サポートされていないプロパティと値を何らかの方法で強調表示します。下のスクリーンショットでは、ブラウザは {{cssxref("grid-template-columns")}} のサブグリッド値をサポートしていません。</p> + +<p><img alt="grid-template-columns：サブグリッド値がサポートされていないため、サブグリッドに線を引いたブラウザDevToolsの画像。" src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> + +<p>また、MDNの各プロパティページの下部にあるブラウザの互換性の表を見ることもできます。これらの表は、そのプロパティのブラウザのサポート状況を示しており、そのプロパティの一部の使用法がサポートされていて、他の使用法がサポートされていない場合は分類されていることが多いです。以下の表は {{cssxref("shape-outside")}} プロパティの互換性データを示しています。</p> + +<p>{{compat("css.shape-outside")}}</p> + +<h3 id="Is_something_else_overriding_your_CSS" name="Is_something_else_overriding_your_CSS">どこかで CSS が上書きされていませんか？</h3> + +<p>ここで、特異性について学んだ情報が非常に役に立つでしょう。自分が行おうとしていることをより具体的にオーバーライドしているものがある場合、何が何だかわからないという非常にイライラするゲームに突入してしまうことがあります。しかし、上記のように、DevTools を使用すると、どのような CSS が適用されているかが表示されるので、新しいセレクタをオーバーライドするのに十分なほど具体的なものにする方法を見つけることができます。</p> + +<h3 id="Make_a_reduced_test_case_of_the_problem" name="Make_a_reduced_test_case_of_the_problem">問題の縮小テストケースを作成する</h3> + +<p>上記の手順で問題が解決されない場合は、もう少し調査する必要があります。この時点での最善の方法は、縮小テストケースとして知られているものを作成することです。問題を減らす」ことができるということは、非常に有用なスキルです。自分のコードや同僚のコードの問題を見つけるのに役立ちますし、バグを報告したり、より効果的に助けを求めたりすることができるようになります。</p> + +<p>縮小テストケースとは、関連のない周囲のコンテンツやスタイリングを削除して、可能な限りシンプルな方法で問題を示すコード例のことです。これは、問題のあるコードをレイアウトから取り出して、そのコードや機能だけを示す小さな例を作ることを意味することが多いでしょう。</p> + +<p>縮小されたテストケースを作成するには：</p> + +<ol> + <li>マークアップが動的に生成される場合—例えば、CMSを介して—問題を示す出力の静的バージョンを作成します。<a href="https://codepen.io/">CodePen</a>などのコード共有サイトは、オンラインでアクセスでき、同僚と簡単に共有できるため、テストケースを減らすのに役立ちます。まず、ページで[ソースの表示]を実行し、HTMLをCodePenにコピーしてから、関連するCSSとJavaScriptを取得して、それも含めます。その後、問題がまだ明らかかどうかを確認できます。</li> + <li>JavaScriptを削除しても問題が解決しない場合は、JavaScriptを含めないでください。JavaScriptを削除<em>し</em>ても問題が解決しない場合は、できるだけ多くのJavaScriptを削除して、問題の原因はすべて残してください。</li> + <li>問題の原因となっていないHTMLを削除します。コンポーネントまたはレイアウトの主要な要素を削除します。繰り返しになりますが、まだ問題を示している最小限のコードになるようにしてください。</li> + <li>問題に影響を与えないCSSをすべて削除します。</li> +</ol> + +<p>その過程で、何が問題を引き起こしているのかを発見したり、特定の何かを取り除くことで、 <span>少なくとも問題のオン/オフを切り替えることができ</span>るようになるかもしれません。あなたが物事を発見したときに、あなたのコードにいくつかのコメントを追加する価値はあります。助けを求める必要がある場合は、それがあなたがすでに試したものを助けてくれる人に伝えてくれます。<span>これにより、考えられる問題や回避策を検索するのに十分な情報が得られる場合があります。</span></p> + +<p>問題を解決するのにまだ苦労している場合は、テストケースを減らすことで、フォーラムに投稿したり、同僚に見せたりして、助けを求めることができます。助けを求める前に、問題を軽減し、どこで問題が発生しているかを正確に特定する作業を行ったことを示すことができれば、助けを得る可能性が高くなります。経験豊富な開発者であれば、問題を迅速に発見して正しい方向に導くことができるかもしれませんが、そうでない場合でも、テストケースを縮小したことで、開発者はすばやく確認することができ、少なくとも何らかの助けを提供できるようになるでしょう。</p> + +<p>問題が実際にブラウザーのバグである場合、テストケースの縮小を使用して、関連するブラウザーベンダーにバグレポートを提出することもできます（例：Mozillaの<a href="https://bugzilla.mozilla.org">bugzillaサイト</a>）。</p> + +<p>CSS を使いこなせるようになると、問題を発見するのが早くなることに気づくでしょう。しかし、最も経験豊富な人でも、「一体何が起こっているのか」と疑問に思うことがあります。体系的なアプローチをとり、テストケースを減らし、他の人に問題を説明すると、通常、修正が見つかります。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">共役</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html new file mode 100644 index 0000000000..d3a5c98298 --- /dev/null +++ b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,153 @@ +--- +title: テキスト方向の操作 +slug: Learn/CSS/Building_blocks/Handling_different_text_directions +tags: + - Beginner + - CSS + - Learn + - logical properties + - writing modes +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> + +<p>CSSの学習でこれまでに遭遇したプロパティと値の多くは、画面の物理的な大きさに関係しています。たとえば、ボックスの上下左右にborderを作成します。これらの物理的大きさは、水平に表示されるコンテンツに非常にきちんとマッピングされ、デフォルトでは、ウェブは右から左への言語（アラビア語など）よりも左から右への言語（英語やフランス語など）をサポートする傾向があります。</p> + +<p>しかし近年、CSSは、右から左へのコンテンツや上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな方向性をより適切にサポートするために進化しました。これらのさまざまな方向性は<strong>書き込みモード</strong>と呼ばれます。学習を進めてレイアウトの操作を開始すると、書き込みモードを理解することが非常に役立ちます。そのため、これらのモードを紹介します。</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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>最新の CSS の "writing modes" の重要性を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="What_are_writing_modes" name="What_are_writing_modes">書き込みモードとは？</h2> + +<p>CSSの書き込みモードは、テキストが水平方向または垂直方向のどちらで実行されているかを示します。{{cssxref("writing-mode")}} プロパティにより、ある書き込みモードから別の書き込みモードに切り替えることができます。これを行うために縦書きモードを使用する言語で作業する必要はありません。また、創造的な目的のためにレイアウトの一部の書き込みモードを変更することもできます。<br> + <br> + 次の例では、<code>writing-mode: vertical-rl</code>を使用して見出しを表示しています。これで、テキストが垂直方向に実行されます。縦書きテキストはグラフィックデザインでは一般的であり、Webデザインにより興味深い外観を追加する方法になります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> + +<p><code><a href="/ja/docs/Web/CSS/writing-mode">writing-mode</a></code> プロパティの3つの可能な値は次のとおりです:</p> + +<ul> + <li><code>horizontal-tb</code>: 上から下へのブロックの流れの方向。文は水平に実行されます。</li> + <li><code>vertical-rl</code>: 右から左へのブロックの流れの方向。文は垂直に実行されます。</li> + <li><code>vertical-lr</code>: 左から右へのブロックの流れの方向。文は垂直に実行されます。</li> +</ul> + +<p>したがって、<code>writing-mode</code>プロパティは、実際には、ページにブロックレベルの要素が表示される方向（上から下、右から左、または左から右）を設定します。これにより、文章内のテキストの流れが決まります。</p> + +<h2 id="Writing_modes_and_block_and_inline_layout" name="Writing_modes_and_block_and_inline_layout">"writing modes" と ブロックレイアウトとインラインレイアウト</h2> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model">ブロックとインラインのレイアウト</a>、およびいくつかの要素がブロック要素として表示され、他の要素がインライン要素として表示されるという事実についてはすでに説明しました。上で説明したように、ブロックとインラインは、物理的な画面ではなく、ドキュメントの書き込みモードに関連付けられています。英語などのテキストを水平方向に表示する書き込みモードを使用している場合、ブロックはページの上から下にのみ表示されます。</p> + +<p>例を見れば、これはより明確になります。この次の例では、見出しと段落を含む2つのボックスがあります。 1つ目は、<code>writing-mode: horizontal-tb</code>を使用します。これは、水平にページの上部から下部に向かって書き込まれる書き込みモードです。 2番目は<code>writing-mode: vertical-rl</code>を使用します;これは、垂直に右から左に書き込まれる書き込みモードです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> + +<p>書き込みモードを切り替えると、ブロックの方向とインラインの方向が変更されます。 <code>horizontal-tb</code>書き込みモードでは、ブロックの方向は上から下に向かっています。 <code>vertical-rl</code>書き込みモードでは、ブロックの方向は右から左に水平に実行されます。したがって、<strong>block dimension</strong> は常に、使用中の書き込みモードでページにブロックが表示される方向です。 <strong>inline dimension</strong>は、常に文が流れる方向です。</p> + +<p>この図は、横書きモードでの2つのdimensionsを示しています。<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p> + +<p>この図は、縦書きモードの2つのdimensionsを示しています。</p> + +<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p> + +<p>CSSレイアウト、特に新しいレイアウトメソッドを検討し始めると、このブロックとインラインの考え方が非常に重要になります。後で再検討します。</p> + +<h3 id="Direction" name="Direction">方向</h3> + +<p>書き込みモードに加えて、テキストの方向もあります。上記のように、アラビア語などの一部の言語は水平に書かれていますが、右から左に書かれています。これは、創造的な意味で使用する可能性のあるものではありません。単に右側に何かを並べたい場合は、他の方法もありますが、CSSの性質の一部としてこれを理解することが重要です。 Webは、左から右に表示される言語専用ではありません！<br> + <br> + 書き込みモードとテキストの方向が変更される可能性があるため、新しいCSSレイアウトメソッドは、左右、上下を参照しません。代わりに、インラインとブロックのこのアイデアとともに、開始と終了について話します。心配する必要はありませんが、レイアウトを見始めるときにはこれらのアイデアに留意してください。 CSSを理解する上で非常に役立ちます。</p> + +<h2 id="Logical_properties_and_values" name="Logical_properties_and_values">論理プロパティと値</h2> + +<p>ただし、学習のこの時点で書き込みモードと方向を記述することについて説明する理由は、私たちはすでに、画面の物理的な大きさに関連付けられた多くのプロパティを見ており、横書きモードのときに最も意味があるという事実のためです</p> + +<p>2つのボックスをもう一度見てみましょう。1つは <code>horizontal-tb</code> の書き込みモード、もう1つは <code>vertical-rl</code>です。これらの両方のボックスに {{cssxref("width")}} を指定しました。ボックスが縦書きモードでも width があるため、テキストがオーバーフローすることがわかります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> + +<p>このシナリオで本当に必要なのは、書き込みモードに合わせて基本的にheightとwidthを入れ替えることです。縦書きモードのときは、横書きモードの場合と同じように、ボックスをブロックのディメンションで拡大したいです。<br> + <br> + これを簡単にするために、CSSは最近マッピングされたプロパティのセットを開発しました。これらは本質的に、物理的なプロパティ（<code>width</code> や <code>height</code> など）を<strong>論理的な</strong>、または<strong>フローに関連する</strong>バージョンに置き換えます。<br> + <br> + 横書きモードで<code>width</code>にマップされるプロパティは{{cssxref("inline-size")}} と呼ばれます。これはインラインディメンションのサイズを参照します。<code>height</code>のプロパティの名前は{{cssxref("block-size")}} で、ブロックディメンションのサイズです。<code>width</code>を<code>inline-size</code>に置き換えた以下の例で、これがどのように機能するかを見ることができます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p> + +<h3 id="Logical_margin_border_and_padding_properties" name="Logical_margin_border_and_padding_properties">論理マージン、ボーダー、パディングのプロパティ</h3> + +<p>最後の2つのレッスンでは、CSSのボックスモデルとCSSのボーダーについて学びました。マージン、ボーダー、およびパディングのプロパティには{{cssxref("margin-top")}}, {{cssxref("padding-left")}}, および {{cssxref("border-bottom")}} があります。widthとheightのマッピングと同じ方法で、これらのプロパティのマッピングがあります。<br> + <br> + <code>margin-top</code>プロパティは{{cssxref("margin-block-start")}}にマップされます—これは常にブロックディメンションの先頭のマージンを参照します。<br> + <br> + {{cssxref("padding-left")}}プロパティは、インライン方向の開始に適用されるパディングである{{cssxref("padding-inline-start")}}にマップされます。これは、その書き込みモードで文章が始まる場所です。 {{cssxref("border-bottom")}} プロパティは、{{cssxref("border-block-end")}}にマップされます。これは、ブロックディメンションの最後のボーダーです。<br> + <br> + 以下の物理的特性と論理的特性の比較を見ることができます。<br> + <br> + <strong><code>.box</code>の<code>writing-mode</code>プロパティを<code>vertical-rl</code>に切り替えてボックスの書き込みモードを変更すると、物理プロパティが物理方向にどのように関連付けられているかがわかりますが、論理プロパティは書き込みモードで切り替わります。<br> + <br> + また、 {{htmlelement("h2")}} には黒い <code>border-bottom</code>があることがわかります。両方のライティングモードで、下の境界線が常にテキストの下に来るようにする方法を見つけられますか？</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> + +<p>個々のボーダーロングハンドをすべて考慮すると、膨大な数のプロパティがあり、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Logical_Properties">論理プロパティと値</a>のMDNページですべてのマッピングプロパティを確認できます。</p> + +<h3 id="Logical_values" name="Logical_values">論理値</h3> + +<p>これまで、論理プロパティ名について見てきました。また、<code>top</code>, <code>right</code>, <code>bottom</code>, および <code>left</code>の物理値をとるプロパティもあります。これらの値には、論理値（<code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, および <code>inline-start</code>）へのマッピングもあります。<br> + <br> + たとえば、画像を左にフロートさせて、画像の周りにテキストを折り返すことができます。以下の例に示すように、<code>left</code>を<code>inline-start</code>に置き換えることができます。<br> + <br> + <strong>この例の書き込みモードを<code>vertical-rl</code>に変更して、画像がどうなるかを確認します。 <code>inline-start</code>を<code>inline-end</code>に変更して、フロートを変更します。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p> + +<p>ここでは、書き込みモードが何であってもマージンが正しい場所にあることを保証するために、論理マージン値も使用しています。</p> + +<h3 id="Should_you_use_physical_or_logical_properties" name="Should_you_use_physical_or_logical_properties">物理的または論理的なプロパティを使うべきか？</h3> + +<p>論理的なプロパティと値は、物理的に同等のものよりも新しいため、ブラウザにはごく最近実装されました。 MDNの任意のプロパティページをチェックして、ブラウザーサポートがどの程度前にサポートしているかを確認できます。複数の書き込みモードを使用していない場合は、現時点では物理バージョンを使用することをお勧めします。ただし、フレックスボックスやグリッドなどのレイアウトメソッドの処理を開始すると、多くの人が理にかなっているため、最終的にはほとんどの場合、人々は論理バージョンに移行することを期待しています。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このレッスンで説明する概念は、CSSでますます重要になっています。ブロックとインラインの方向、および書き込みモードの変更に伴うテキストフローの変化を理解することは、今後非常に役立ちます。水平モード以外の書き込みモードを使用しない場合でも、CSSを理解するのに役立ちます。<br> + <br> + 次のモジュールでは、CSSのオーバーフローについて詳しく見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/images_media_form_elements/index.html b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html new file mode 100644 index 0000000000..f21577f7d5 --- /dev/null +++ b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html @@ -0,0 +1,201 @@ +--- +title: 画像・メディア・フォーム要素 +slug: Learn/CSS/Building_blocks/Images_media_form_elements +tags: + - Beginner + - CSS + - Forms + - Images + - Learn + - Media + - replaced content +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> + +<p>このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS でスタイルを設定したときに一部の要素が異常に動作することを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Replaced_elements" name="Replaced_elements">置換要素</h2> + +<p>画像とビデオは、<strong><a href="/ja/docs/Web/CSS/Replaced_element">置き換えられた要素</a></strong>として説明されています。これは、CSSがこれらの要素の内部レイアウトに影響を与えることはできず、他の要素の中でのページ上の位置のみに影響を与えることを意味します。ただし、後で説明するように、CSSが画像に対して様々なことができます。</p> + +<p>画像や動画などの特定の置換された要素は、アスペクト比を持つものとしても記述されています。これは、水平方向 (x) と垂直方向 (y) の両方の寸法を持ち、デフォルトではファイルの本質的な寸法を使って表示されることを意味します。</p> + +<h2 id="Sizing_images" name="Sizing_images">画像サイズ</h2> + +<p>これらのレッスンを受けてすでにお分かりのように、CSSではすべてのものがボックスを生成します。画像ファイルの固有の寸法よりも小さいか大きいサイズの画像をボックス内に配置すると、ボックスよりも小さく表示されるか、ボックスをオーバーフローさせてしまいます。オーバーフローで何が起こるかについて決定を下す必要があります。</p> + +<p>以下の例では、2つのボックスがあり、どちらもサイズは200ピクセルです。</p> + +<ul> + <li>1つは200ピクセル未満の画像を含んでいます。これはボックスよりも小さく、それを埋めるために引き伸ばしません。</li> + <li>もう1つは200ピクセルより大きく、ボックスをオーバーフローします。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> + +<p>では、オーバーフローの問題について何ができるでしょうか？</p> + +<p><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">前のレッスン</a>で学んだように、一般的な手法は、画像の {{cssxref("max-width")}} を100％にすることです。これにより、画像のサイズはボックスよりも小さくなりますが、大きくはなりません。この手法は、<code><a href="/ja/docs/Web/HTML/Element/video"><video></a></code>や <code><a href="/ja/docs/Web/HTML/Element/iframe"><iframe></a></code> などの他の置換された要素でも機能します。</p> + +<p><strong>上記の例 <code>max-width: 100%</code> の <code><img></code> 要素に追加してみてください。小さい画像は変更されないままですが、大きい画像はボックスに収まるように小さくなります。</strong></p> + +<p>コンテナー内のイメージについて他の選択を行うことができます。例えば、ボックスを完全に覆うように画像のサイズを変更したい場合があります。</p> + +<p>ここでは、{{cssxref("object-fit")}} プロパティが役立ちます。<code>object-fit</code> 置き換えられた要素を使用する場合、さまざまな方法でボックスに合うようにサイズを変更できます。</p> + +<p>以下では、値 <code>cover</code> を使用して画像を縮小し、アスペクト比を維持してボックスをきれいに埋めます。アスペクト比が維持されているため、画像の一部がボックスでトリミングされます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> + +<p><code>contain</code> を値として使用する場合、ボックス内に収まるほど小さくなるまで画像が縮小されます。これは、ボックスと同じアスペクト比ではない場合、「レターボックス」になります。</p> + +<p><code>fill</code> を試すこともできます 。これは、ボックスを塗りつぶしますが、アスペクト比を維持しません。</p> + +<h2 id="Replaced_elements_in_layout" name="Replaced_elements_in_layout">レイアウト内の置換要素</h2> + +<p>置換された要素にさまざまなCSSレイアウト手法を使用すると、他の要素とは動作が少し異なる場合があります。 たとえば、フレックスまたはグリッドレイアウトでは、要素はデフォルトで領域全体に拡大されます。 画像は伸縮せず、代わりにグリッド領域またはフレックスコンテナーの始点に揃えられます。</p> + +<p>次の例では、2列2行のグリッドコンテナーがあり、4つのアイテムが含まれています。すべての <code><div></code> 要素には背景色があり、行と列に合わせて伸縮します。ただし、画像は引き伸ばされません。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> + +<p>これらのレッスンを順番に実行している場合は、まだレイアウトを確認していない可能性があります。置き換えられた要素は、グリッドまたはフレックスレイアウトの一部になると、基本的にレイアウトによって不自然に引き伸ばされないようにするために、異なるデフォルトの動作になることに注意してください。</p> + +<p>画像を強制的に引き伸ばして、グリッドセルを塗りつぶすには、次のような操作を行う必要があります。</p> + +<pre class="brush: css notranslate">img { + width: 100%; + height: 100%; +}</pre> + +<p>ただし、これは画像を引き伸ばすため、おそらく望んでいることではありません。</p> + +<h2 id="Form_elements" name="Form_elements">フォーム要素</h2> + +<p>CSSでのスタイル設定に関しては、フォーム要素はトリッキーな問題であり、<a href="/ja/docs/Learn/HTML/Forms">HTMLフォームモジュール</a>には、フォーム要素のスタイル設定に関する詳細なガイドが含まれていますが、ここでは完全には再現しません。記事のこのセクションでは、強調すべきいくつかの重要な点があります。</p> + +<p>多くのフォームコントロールは <code><a href="/ja/docs/Web/HTML/Element/input"><input></a></code> 要素によってページに追加されます。これは、テキスト入力などの単純なフォームフィールドから、色や日付の選択などのHTML5で追加されたより複雑なフィールドまでを定義します。の <code><textarea></code> などの追加要素や、<code><fieldset></code> や <code><legend></code> などのフォームの一部を格納したりラベルを貼ったりするために使われる要素もあります。</p> + +<p>HTML5には、Web開発者が必須フィールド、さらには入力する必要があるコンテンツのタイプを指定できるようにする属性も含まれています。ユーザーが予期しない何かを入力したり、必須フィールドを空白のままにしたりすると、ブラウザにエラーメッセージが表示されることがあります。 ブラウザによって、このようなアイテムのスタイリングやカスタマイズがどの程度可能なのかについては一貫性がありません。</p> + +<h3 id="Styling_text_input_elements" name="Styling_text_input_elements">テキスト入力欄のスタイル</h3> + +<p><code><input type="text"></code>、<code><input type="email"></code>、<code><textarea></code> 要素などのテキスト入力を可能にする要素は、スタイルを整えるのが非常に簡単で、ページ上の他のボックスと同じように振る舞う傾向があります。しかし、これらの要素のデフォルトのスタイルは、ユーザーがサイトを訪問する際に使用するオペレーティングシステムやブラウザによって異なります。</p> + +<p>以下の例では、CSSを使用していくつかのテキスト入力にスタイルを設定しています。境界線、マージン、パディングなどがすべて期待どおりに適用されていることがわかります。属性セレクターを使用して、さまざまな入力タイプをターゲットにしています。ボーダーを調整し、フィールドに背景色を追加し、フォントとパディングを変更して、このフォームの外観を変更してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> + +<div class="blockIndicator warning"> +<p><strong>重要</strong>：フォーム要素のスタイルを変更するときは、ユーザーがフォーム要素であることをユーザーに明確に伝えるように注意する必要があります。周囲のコンテンツとほとんど見分けがつかない境界線や背景のないフォーム入力を作成することもできますが、これにより認識や入力が非常に難しくなります。</p> +</div> + +<p>このコースのHTMLパートの<a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームスタイリング</a>に関するレッスンで説明したように、より複雑な入力タイプの多くはオペレーティングシステムによってレンダリングされ、スタイリングにアクセスできません。そのため、フォームは訪問者によってかなり違って見えることを常に想定し、複雑なフォームをいくつかのブラウザでテストする必要があります。</p> + +<h3 id="Inheritance_and_form_elements" name="Inheritance_and_form_elements">継承とフォーム要素</h3> + +<p>一部のブラウザでは、フォーム要素はデフォルトではフォントのスタイルを継承しません。そのため、フォームのフィールドがボディや親要素で定義されたフォントを使用するようにしたい場合は、CSSにこのルールを追加する必要があります。</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family : inherit; + font-size : 100%; +} </code></pre> + +<h3 id="Form_elements_and_box-sizing" name="Form_elements_and_box-sizing">フォーム要素と box-sizing</h3> + +<p>ブラウザー間で、フォーム要素は、さまざまなウィジェットに対してさまざまなボックスサイズ設定ルールを使用します。<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデルのレッスンで</a><code>box-sizing</code> プロパティについて学習しました。フォームのスタイル設定時にこの知識を使用して、フォーム要素に幅と高さを設定するときに一貫したエクスペリエンスを確保できます。</p> + +<p>一貫性を保つために、すべての要素でマージンとパディングに <code>0</code> を設定し、特定のコントロールをスタイリングするときにこれらを追加することをお勧めします</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + box-sizing: border-box; + padding: 0; + margin: 0; +}</code></pre> + +<h3 id="Other_useful_settings" name="Other_useful_settings">その他の便利な設定</h3> + +<p>上記のルールに加えて、スクロールバーが不要な場合にIEがスクロールバーを表示しないよう <code>overflow: auto</code> に <code><textarea></code>sを設定する必要があります。</p> + +<pre class="brush: css notranslate">textarea { + overflow: auto; +}</pre> + +<h3 id="Putting_it_all_together_into_a_reset" name="Putting_it_all_together_into_a_reset">リセット処理としてまとめる</h3> + +<p>最後のステップとして、上記で説明したさまざまなプロパティを次の「フォームリセット」にラップして、作業の一貫性のあるベースを提供できます。これには、最後の3つのセクションで言及したすべてのアイテムが含まれます。</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + padding: 0; margin: 0; +} + +textarea { + overflow: auto; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>：正規化スタイルシートは、すべてのプロジェクトで使用する一連のベースラインスタイルを作成するために、多くの開発者によって使用されています。通常、これらは上記で説明したものと同様のことを行います。CSSで独自の作業を行う前に、ブラウザー間で異なるものがすべて一貫したデフォルトに設定されていることを確認してください。ブラウザは通常、以前より一貫性があるため、以前ほど重要ではありません。ただし、1つの例を見てみたい場合は、<a href="http://necolas.github.io/normalize.css/">Normalize.cssを</a>チェックしてください<a href="http://necolas.github.io/normalize.css/">。Normalize.css</a>は、多くのプロジェクトでベースとして使用されている非常に人気のあるスタイルシートです。</p> +</div> + +<p>フォームのスタイル設定の詳細については、これらのガイドのHTMLセクションにある2つの記事をご覧ください。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTMLフォームのスタイル</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTMLフォームの高度なスタイル</a></li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このレッスンでは、CSSで画像、メディア、およびその他の異常な要素を操作するときに発生するいくつかの違いを強調しました。次の記事では、HTMLテーブルをスタイルする必要がある場合に役立ついくつかのヒントについて説明します。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/index.html b/files/ja/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..3094d16d9c --- /dev/null +++ b/files/ja/learn/css/building_blocks/index.html @@ -0,0 +1,88 @@ +--- +title: CSS の構成要素 +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>から派生しています。CSS の言語や文法に慣れてきて、それを使う上での基本的な経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクターの全種類・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。</p> + +<p class="summary">ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</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> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>で説明されている CSS の基本について理解していること。</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="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></dt> + <dd>このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念（カスケード・詳細度・継承）の理解を深めていくことです。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a></dt> + <dd>CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです: + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></dt> + <dd>CSS のすべてにはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することで、より複雑なレイアウトに進んでいけるようにします。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></dt> + <dd>このレッスンでは、CSS の背景と枠線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや背景画像や角丸について、背景と枠線は CSS のスタイリングに関する多くの疑問の解決策です。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></dt> + <dd>近年では、右から左へだけでなく上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな向きをより適切にサポートするために CSS サポートが進化しています。これらのさまざまな向きの考え方については "<strong>writing modes" </strong>と呼ばれます。レイアウトの学習を進めて進めていくと "writing modes" の理解がとても役に立っていきますので、この記事ではそれらを紹介していきます。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></dt> + <dd><font><font>このレッスンでは、CSS のもう 1 つの重要な概念である </font></font><strong><font><font>オーバーフロー（</font></font></strong><strong><font><font>overflow）</font></font></strong><font><font>を見ていきます</font><font>。</font><font>オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。</font><font>このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</font></font></dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></dt> + <dd><font>CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。</font><font>このレッスンでは、もっともよく使用される値と単位について見ていきます。</font></dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></dt> + <dd>これまでのさまざまなレッスンで、CSS を使用してウェブページ上の項目のサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大きく異なっているのかを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></dt> + <dd>このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能であるのかを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことをいくつか取り上げます。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></dt> + <dd>HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。この記事では、表をスタイリングするテクニックとともに、HTML 表を見栄え良くするためのガイドを提供します。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></dt> + <dd>CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに、すべてのモダンブラウザーに入っている開発者ツールがどう役立つかを示します。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></dt> + <dd>スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、保守しやすい CSS を書くためのベストプラクティスと、他の人が保守性を向上させるための解決策の一部を紹介します。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<p>CSS スキルをテストしたいですか？以下の各評価では上記のガイドで説明されている CSS の理解度をテストできます。</p> + +<dl> + <dt><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">基本的な CSS の理解</a></dt> + <dd>この評価では基本的な構文・セレクター・詳細度・ボックスモデル・その他の理解度をテストします。</dd> + <dt><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></dt> + <dd>好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。</dd> + <dt><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></dt> + <dd>ここでは背景と枠線のスタイリングを使った人目を引くボックスの作り方を実践します。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">ボックスの高度なエフェクト</a></dt> + <dd>この記事はトリックの箱として機能し、ボックスの影・ブレンドモード・フィルターのような、ボックスの装飾に使用できる高度な機能のいくつかを紹介します。</dd> +</dl> diff --git a/files/ja/learn/css/building_blocks/organizing/index.html b/files/ja/learn/css/building_blocks/organizing/index.html new file mode 100644 index 0000000000..f1508b0edb --- /dev/null +++ b/files/ja/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,375 @@ +--- +title: CSS の整理 +slug: Learn/CSS/Building_blocks/Organizing +tags: + - Beginner + - CSS + - CodingScripting + - Learn + - comments + - formatting + - methodologies + - organizing + - post-processor + - pre-processor + - styleguide +translation_of: Learn/CSS/Building_blocks/Organizing +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>スタイルシートを整理するためのヒントとベストプラクティスを学び、 CSS の整理およびチーム作業を手助けするいくつかの命名規則とツールについて調べる。</td> + </tr> + </tbody> +</table> + +<h2 id="Tips_to_keep_your_CSS_tidy" name="Tips_to_keep_your_CSS_tidy">CSS を整理するためのヒント</h2> + +<p>スタイルシートを整理して整頓するための一般的な提案を次に示します。</p> + +<h3 id="Does_your_project_have_a_coding_style_guide" name="Does_your_project_have_a_coding_style_guide">プロジェクトのコーディング規約があるか？</h3> + +<p>既存のプロジェクトでチームと作業している場合、最初に確認することは、プロジェクトに CSS の既存のスタイルガイドがあるかどうかです。チームスタイルガイドは常に自分の個人的な好みに勝つ必要があります。多くの場合、正しい方法や間違った方法はありませんが、一貫性が重要です。</p> + +<p>例えば、<a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN コードの例の CSS ガイドライン</a>を見てみましょう。</p> + +<h3 id="Keep_it_consistent" name="Keep_it_consistent">一貫性を保つ</h3> + +<p>プロジェクトのルールを設定したり、単独で作業している場合、最も重要なことは、一貫性を保つことです。一貫性は、クラスに同じ命名規則を使用する、色を説明する1つの方法を選択する、一貫したフォーマットを維持するなど、あらゆる方法で適用できます（例えば、タブまたはスペースのどちらを使用してコードをインデントしますか。スペースの場合、いくつのスペース？）</p> + +<p>常に従う一連のルールがあると、CSS を作成するときに必要な精神的なオーバーヘッドの量が減ります。</p> + +<h3 id="Formatting_readable_CSS" name="Formatting_readable_CSS">CSS を読みやすくする</h3> + +<p>CSS がフォーマットされているのを確認するには、いくつかの方法があります。一部の開発者は、次のようにすべてのルールを1行に配置します。</p> + +<pre class="brush: css notranslate">.box { background-color: #567895; } +h2 { background-color: black; color: white; }</pre> + +<p>他の開発者はすべてを新しい行に分割することを好みます：</p> + +<pre class="brush: css notranslate">.box { + background-color: #567895; +} + +h2 { + background-color: black; + color: white; +}</pre> + +<p>CSSはどちらを使用してもかまいません。個人的には、各プロパティと値のペアを新しい行に置く方が読みやすくなっています。</p> + +<h3 id="Comment_your_CSS" name="Comment_your_CSS">CSS にコメントを書いておく</h3> + +<p>あなたの CSS にコメントを追加することは、将来の開発者があなたの CSS ファイルを使って作業する際の助けになるだけでなく、休暇の後にプロジェクトに戻ってきたときにも役立ちます。</p> + +<pre class="brush: css notranslate">/* これは CSS コメントです +複数行に分割できます。 */</pre> + +<p>ヒントとしては、スタイルシートの論理セクション間にコメントブロックを追加して、スキャンするときにさまざまなセクションをすばやく見つけられるようにしたり、CSS のその部分にジャンプするために検索するものを提供したりすることもできます。コードに表示されない文字列を使用する場合は、検索することでセクションからセクションにジャンプできます。以下では <code>||</code> を使用しています。</p> + +<pre class="brush: css notranslate">/* || 一般的なスタイル */ + +... + +/* || タイポグラフィ*/ + +... + +/* || ヘッダーとメインナビゲーション */ + +... + +</pre> + +<p>あなたのCSSにある全てのことにコメントをつける必要はありません。コメントすべきなのは、理由があって特定の決定をしたものです。</p> + +<p>古いブラウザの非互換性を回避するために、CSS プロパティを特定の方法で使用した可能性があります。例えば：</p> + +<pre class="brush: css notranslate">.box { + background-color: red; /* グラデーションをサポートしない古いブラウザのフォールバック */ + background-image: linear-gradient(to right, #ff0000, #aa0000); +} +</pre> + +<p>おそらく、何かを達成するためにチュートリアルに従ったのではないかと思いますが、CSSが少し自明ではなくなっているのではないかと思います。その場合は、コメントにチュートリアルの URL を追加することができます。1年後かそこらでこのプロジェクトに戻ってきたときに自分自身に感謝するだろうし、漠然とそのことについての素晴らしいチュートリアルがあったことを思い出すことができますが、それはどこにあるのでしょうか？</p> + +<h3 id="Create_logical_sections_in_your_stylesheet" name="Create_logical_sections_in_your_stylesheet">スタイルシートを合理的に分割する</h3> + +<p>スタイルシートで最初にすべての一般的なスタイルを設定することをお勧めします。これは、その要素で特別なことをしない限り、通常適用されるすべてのスタイルを意味します。通常、次のルールを設定します。</p> + +<ul> + <li><code>body</code></li> + <li><code>p</code></li> + <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> + <li><code>ul</code> と <code>ol</code></li> + <li><code>table</code> プロパティ</li> + <li>リンク</li> +</ul> + +<p>スタイルシートのこのセクションでは、サイトのタイプにデフォルトのスタイルを提供したり、データテーブルとリストのデフォルトスタイルを設定したりします。</p> + +<pre class="brush: css notranslate">/* || 一般的なスタイル */ + +body { ... } + +h1, h2, h3, h4 { ... } + +ul { ... } + +blockquote { ... } +</pre> + +<p>このセクションの後で、いくつかのユーティリティクラスを定義できます。例えば、フレックスアイテムとして、または他の方法で表示するリストのデフォルトのリストスタイルを削除するクラス。多くの異なる要素に適用したいことがわかっていることがいくつかある場合、それらはこのセクションにあります。</p> + +<pre class="brush: css notranslate">/* || ユーティリティ */ + +.nobullets { + list-style: none; + margin: 0; + padding: 0; +} + +... + +</pre> + +<p>次に、サイト全体で使用されるすべてのものを追加できます。それは、基本的なページレイアウト、ヘッダー、ナビゲーションスタイルなどのようなものかもしれません。</p> + +<pre class="brush: css notranslate">/* || サイトワイド */ + +.main-nav { ... } + +.logo { ... } +</pre> + +<p>最後に、コンテキスト、ページ、またはそれらが使用されているコンポーネントで分類された特定のものの CSS を含めます。</p> + +<pre class="brush: css notranslate">/* || 店のページ */ + +.product-listing { ... } + +.product-box { ... } +</pre> + +<p>このように物事を順番に並べることで、少なくともスタイルシートのどの部分に変更したいものがあるのかを知ることができます。</p> + +<h3 id="Avoid_overly-specific_selectors" name="Avoid_overly-specific_selectors">過剰なセレクターを避ける</h3> + +<p>非常に特殊なセレクタを作成した場合、別の要素に同じルールを適用するために CSS の塊を複製する必要があることに気づくことがよくあります。例えば、以下のセレクタのようなものがあるかもしれませんが、これは <code>main</code> のクラスを持つ <code><article></code> の中の <code>box</code> のクラスを持つ <code><p></code> にルールを適用します。</p> + +<pre class="brush: css notranslate">article.main p.box { + border: 1px solid #ccc; +}</pre> + +<p>同じルールを <code>main</code> 以外のものや <code><p></code> 以外のものにも適用したい場合は、これらのルールに別のセレクタを追加するか、まったく新しいルールセットを作成しなければなりません。その代わりに、<code>box</code> というクラスを作成して、どこでも適用することができます。</p> + +<pre class="brush: css notranslate">.box { + border: 1px solid #ccc; +}</pre> + +<p>もっと具体的にすることが理にかなっている場合もありますが、これは通常の習慣ではなく、一般的に例外です。</p> + +<h3 id="Break_large_stylesheets_into_multiple_smaller_ones" name="Break_large_stylesheets_into_multiple_smaller_ones">スタイルシートが大きくなってきたら分割する</h3> + +<p>特に、サイトの異なる部分に対して非常に異なるスタイルを持っている場合には、すべてのグローバルルールを含むスタイルシートと、それらのセクションに必要な特定のルールを含む小さなスタイルシートを持ちたいと思うかもしれません。一つのページから複数のスタイルシートにリンクすることができ、カスケードの通常のルールが適用され、後からリンクされたスタイルシートのルールは前からリンクされたスタイルシートのルールの後から適用されます。</p> + +<p>例えば、サイトの一部としてオンラインストアがあり、ストアに必要な商品リストやフォームのスタイリングにのみ多くの CSS が使用されているとします。それらを別のスタイルシートにして、ストアページでのみリンクさせるのは理にかなっていると思います。</p> + +<p><span>これにより、CSS の整理が容易になります。また、複数のユーザーが CSS で作業している場合、2人が同時に同じスタイルシートで作業する必要がなくなり、ソース管理で競合が発生する可能性も少なくなります。 </span></p> + +<h2 id="Other_tools_that_can_help" name="Other_tools_that_can_help">その他の役立つツール</h2> + +<p>CSS 自体には内蔵された整理の方法があまりないので、CSS の書き方に一貫性やルールを作る作業をする必要があります。また、ウェブ・コミュニティでは、大規模な CSS プロジェクトを管理するのに役立つ様々なツールやアプローチが開発されています。これらはあなたが調べてみると役に立つかもしれませんし、他の人と一緒に作業をしているときに出くわす可能性が高いので、これらのいくつかについての簡単なガイドを載せておきます。</p> + +<h3 id="CSS_methodologies" name="CSS_methodologies">CSS の方法論</h3> + +<p>CSS を作成するための独自のルールを考え出す必要はなく、コミュニティーによってすでに設計され、多くのプロジェクトでテストされているアプローチの1つを採用することでメリットが得られる場合があります。これらの方法論は基本的に CSS のコーディングガイドであり、CSS の作成と管理に非常に構造化されたアプローチを採用しています。通常、これらの方法論では、すべてのセレクタを作成してそのプロジェクトのカスタムルールセットに最適化した場合よりも、CSS の使用が冗長になる傾向があります。</p> + +<p>しかし、1つを採用することで多くの構造を得ることができますし、これらのシステムの多くは非常に広く使われているので、他の開発者はあなたが使用しているアプローチを理解し、自分の個人的な方法論を一から作り上げるよりも、同じように CSS を書くことができる可能性が高くなります。</p> + +<h4 id="OOCSS" name="OOCSS">OOCSS</h4> + +<p>あなたが遭遇するであろうアプローチのほとんどは、<a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan の業績</a>によって人気を博した Object Oriented CSS (OOCSS) のコンセプトに起因しています。OOCSS の基本的な考え方は、CSS を再利用可能なオブジェクトに分割し、サイト上の必要な場所で使用できるようにすることです。OOCSS の標準的な例は、<a href="/ja/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a> として記述されているパターンです。これは、片面に固定サイズの画像や動画などの要素を配置し、もう片面には柔軟なコンテンツを配置したパターンです。コメントやリスティングなどのウェブサイトでよく見かけるパターンです。</p> + +<p>OOCSS の手法を採用していない場合は、このパターンが使用されるさまざまな場所に対してカスタムCSSを作成することができます。たとえば、コンポーネント・パーツに対して一連のルールを持つ <code>comment</code> というクラスを作成し、次に、いくつかの小さな違いを除いて、<code>comment</code> クラスとほとんど同じルールを持つ <code>list-item</code> というクラスを作成します。これら2つのコンポーネントの違いは、list-item には下罫線があり、comment 内のイメージには罫線がありますが、list-item のイメージにはないことです。</p> + +<pre class="brush: css notranslate">.comment { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.comment img { + border: 1px solid grey; +} + +.comment .content { + font-size: .8rem; +} + +.list-item { + display: grid; + grid-template-columns: 1fr 3fr; + border-bottom: 1px solid grey; +} + +.list-item .content { + font-size: .8rem; +}</pre> + +<p>OOCSS では、<code>media</code> と呼ばれる1つのパターンを作成して、両方のパターンに共通の CSSをすべて持つようにします。一般的には media オブジェクトの形状を表す基底クラスです。そして、それらの小さな違いに対応するために追加のクラスを追加して、特定の方法でスタイリングを拡張します。</p> + +<pre class="brush: css notranslate">.media { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.media .content { + font-size: .8rem; +} + +.comment img { + border: 1px solid grey; +} + + .list-item { + border-bottom: 1px solid grey; +} </pre> + +<p>HTMLでは、コメントに <code>media</code> と <code>comment</code> クラスの両方を適用する必要があります。</p> + +<pre class="brush: html notranslate"><div class="media comment"> + <img /> + <div class="content"></div> +</div> +</pre> + +<p>リストアイテムは次のように <code>media</code> と <code>list-item</code> が適用されます。</p> + +<pre class="brush: html notranslate"><ul> + <li class="media list-item"> + <img /> + <div class="content"></div> + </li> +</ul></pre> + +<p>Nicole Sullivan がこのアプローチを説明し、促進するために行った作業は、今日ではOOCSS のアプローチに厳密に従っていない人でも、一般的にはこの方法で CSS を再利用することを意味します。これは、一般的に物事に取り組むための良い方法としての理解につながりました。</p> + +<h4 id="BEM" name="BEM">BEM</h4> + +<p>BEM は、Block Element Modifier の略です。BEM では、ブロックはボタン、メニュー、ロゴなどのスタンドアロンエンティティです。要素とは、リストアイテムやタイトルのようなものであり、それが入っているブロックに関連付けられています。修飾子は、スタイルや動作を変更するブロックまたは要素のフラグです。CSS クラスではダッシュとアンダースコアが多用されているため、BEM を使用するコードを認識できます。例えば、<a href="http://getbem.com/naming/">BEMの命名規則</a>に関するページから、この HTML に適用されるクラスを見てみましょう。</p> + +<pre class="brush: html notranslate"><form class="form form--theme-xmas form--simple"> + <input class="form__input" type="text" /> + <input + class="form__submit form__submit--disabled" + type="submit" /> +</form></pre> + +<p>追加のクラスは、OOCSS の例で使用されているクラスに似ていますが、BEM の厳密な命名規則を使用しています。</p> + +<p>BEM は大規模な Web プロジェクトで広く使用されており、多くの人がこの方法で CSS を作成しています。チュートリアルでさえ、CSS がこのように構造化されている理由について触れずに、BEM 構文を使用する例に出くわす可能性があります。</p> + +<p>システムの詳細については、CSS トリックの <a href="https://css-tricks.com/bem-101/">BEM 101</a> を参照してください。</p> + +<h4 id="Other_common_systems" name="Other_common_systems">その他</h4> + +<p>これらのシステムは多数使用されています。その他の一般的なアプローチには、Jonathan Snook によって作成された <a href="http://smacss.com/">CSSのスケーラブルでモジュール式のアーキテクチャ（SMACSS）</a>、Harry Roberts の <a href="https://itcss.io/">ITCSS</a>、および Yahoo! によって最初に作成された<a href="https://acss.io/"> Atomic CSS（ACSS）</a>があります。これらのアプローチのいずれかを使用するプロジェクトに遭遇した場合の利点は、同じスタイルでコーディングする方法を理解するのに役立つ多くの記事とガイドを検索して見つけることができることです。</p> + +<p>このようなシステムを使用することの欠点は、特に小規模なプロジェクトの場合、過度に複雑に見える可能性があることです。</p> + +<h3 id="Build_systems_for_CSS" name="Build_systems_for_CSS">CSS のビルドシステム</h3> + +<p>CSS を編成するもう1つの方法は、フロントエンド開発者が利用できるツールのいくつかを利用することです。これにより、CSS を書くために、よりプログラム的なアプローチを取ることができます。<em>プリプロセッサ</em>と<em>ポスト</em><em>プロセッサ</em>と呼ばれるツールは多数あります。プリプロセッサは未加工ファイルを実行してそれらをスタイルシートに変換し、ポストプロセッサは完成したスタイルシートに何かを実行します。おそらく、ロードを高速化するために最適化します。</p> + +<p>これらのツールを使用するには、開発環境で前処理と後処理を行うスクリプトを実行できる必要があります。多くのコードエディタでこれを行うことができます。または、コマンドラインツールをインストールして支援することもできます。</p> + +<p>最も人気のあるプリプロセッサは <a href="https://sass-lang.com/">Sass</a> です。これは Sass のチュートリアルではありませんので、Sass でできることを簡単に説明します。これは<span> Sass の他の機能を使っていなくても、整理する上で非常に便利です。 </span> Sass についてもっと知りたいのであれば、<a href="https://sass-lang.com/guide">Sass の基礎知識</a>の記事から始めて、他のドキュメントに進んでください。</p> + +<h4 id="Defining_variables" name="Defining_variables">変数の定義</h4> + +<p>CSS にネイティブ<a href="/ja/docs/Web/CSS/Using_CSS_custom_properties">カスタムプロパティが追加された</a>ため、この機能の重要性は低下していますが、Sass を使用する理由の1つは、プロジェクトで使用されるすべての色とフォントを設定として定義し、その変数をプロジェクトで使用できるようにすることです。これは、間違った青の色合いを使用したことがわかった場合、1つの場所で変更するだけでよいことを意味します。</p> + +<p><code>$base-color</code> 以下の最初の行のように呼び出される変数を作成した場合、その色が必要な場所であればどこでも、スタイルシートを介してその変数を使用できます。</p> + +<pre class="brush: css notranslate"><code>$base-color: #c6538c; + +.alert { + border: 1px solid $base-color; +}</code></pre> + +<p>CSS にコンパイルすると、最終的なスタイルシートには次の CSS が含まれます。</p> + +<pre class="brush: css notranslate"><code>.alert { + border: 1px solid #c6538c; +}</code></pre> + +<h4 id="Compiling_component_stylesheets" name="Compiling_component_stylesheets">コンポーネントスタイルシートのコンパイル</h4> + +<p>CSS を整理する1つの方法は、スタイルシートを小さなスタイルシートに分解することであると上記で述べました。Sass を使用すると、これを別のレベルに引き上げ、非常に小さなスタイルシートをたくさん持つことができます。コンポーネントごとに個別のスタイルシートを用意することもできます。Sass のインクルード機能を使用することで、これらすべてを1つまたは少数のスタイルシートにまとめて、実際に Web サイトにリンクできます。</p> + +<p>例えば、<a href="https://sass-lang.com/documentation/at-rules/use#partials">partial</a> を使って、ディレクトリ内にいくつかのスタイルファイル、例えば <code>foundation/_code.scss</code>、<code>foundation/_lists.scss</code>、<code>foundation/_footer.scss</code>、<code>foundation/_links.scss</code> などを作成し、Sass の <code>@use</code> ロールを使って他のスタイルシートにロードすることができます。</p> + +<pre class="brush: css notranslate">// foundation/_index.sass +@use 'code' +@use 'lists' +@use 'footer' +@use 'links'</pre> + +<p>上記のように、パーシャルがすべてインデックスファイルにロードされている場合、ディレクトリ全体を一度に別のスタイルシートにロードすることができます。</p> + +<pre class="brush: css notranslate">// style.sass +@use 'foundation'</pre> + + + +<div class="blockIndicator note"> +<p><strong>注</strong>：Sass を試す簡単な方法は、<a href="https://codepen.io">CodePen</a> を使用すること<a href="https://codepen.io">です</a>。これを有効にすると、CodePen が Sass パーサを実行してくれるので、通常の CSS を適用したウェブページを見ることができます。CSS チュートリアルでは、CodePen のデモでプレーンな CSS ではなく Sass を使用しているのを見つけることがありますので、少しでも知っておくと便利です。</p> +</div> + +<h4 id="Post-processing_for_optimization" name="Post-processing_for_optimization">ポストプロセッサー</h4> + +<p>もし、コメントや空白を大量に追加することでスタイルシートのサイズが大きくなることを気にしているのであれば、本番バージョンでは不要なものを取り除くことで CSS を最適化することが後処理のステップになります。これを実現するポストプロセッサの例としては、<a href="https://cssnano.co/">cssnano</a> があります。</p> + +<h2 id="Wrapping_up" name="Wrapping_up">まとめ</h2> + +<p>これは CSS 学習ガイドの最後の部分で、ここから CSS の探求を続けるための様々な方法があることがお分かりいただけると思います。</p> + +<p>CSS のレイアウトの詳細については、「<a href="/ja/docs/Learn/CSS/CSS_layout">CSSレイアウトの学習</a>」セクションを参照してください。</p> + +<p>また、これで <a href="/ja/docs/Web/CSS">MDN の CSS の資料</a>の残りの部分を探索するためのスキルを身につけることができます。プロパティや値を調べたり、<a href="/ja/docs/Web/CSS/Layout_cookbook">CSS クックブック</a>で使用するパターンを調べたり、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a> などの特定のガイドを読んだりすることができます。</p> + +<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/overflowing_content/index.html b/files/ja/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..313f2cc3b0 --- /dev/null +++ b/files/ja/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,132 @@ +--- +title: 要素のはみ出し（オーバーフロー） +slug: Learn/CSS/Building_blocks/Overflowing_content +tags: + - Beginner + - Block Formatting Context + - CSS + - Data Loss + - Learn + - overflow +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> + +<p><font><font>このレッスンでは、CSS のもう1つの重要な概念である </font></font><strong><font><font>オーバーフロー（</font></font></strong><strong><font><font>overflow）</font></font></strong><font><font>を見ていきます</font><font>。</font><font>オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。</font><font>このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</font></font></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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>オーバーフローとその管理方法を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_overflow" name="What_is_overflow">オーバーフロー (overflow) とは？</h2> + +<p><font><font>CSS のすべてがボックスであり、 </font></font>{{cssxref("width")}} <font><font>と </font></font>{{cssxref("height")}}<font><font>（または </font></font>{{cssxref("inline-size")}} や<font><font> </font></font>{{cssxref("block-size")}}<font><font>) の値を与えることにより、これらのボックスのサイズを制御できることを見てきました。</font><font>オーバーフローはボックス内のコンテンツが多すぎる場合に発生し、快適に収まらないという状態です。</font><font>CSS はこのオーバーフローを管理するためのさまざまなツールを提供しますが、早めに理解しておくと役立つ概念でもあります。</font><font>CSS を書いていると、とりわけ CSS によるレイアウトを深く理解していくにつれ、オーバーフローによく出くわします。</font></font></p> + +<h2 id="CSS_tries_to_avoid_data_loss" name="CSS_tries_to_avoid_data_loss">CSS のデータ損失の回避</h2> + +<p>オーバーフローが発生した場合の CSS の既定の動作を示す2つの例を見てみましょう。</p> + +<p>1つめの例です。まずブロックに <code>height</code> でボックスの高さを制限します。そしてそのスペースよりも多くのコンテンツを追加します。コンテンツはボックスからはみ出し、下の段落にかぶさってしまいます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> + +<p>2つめに、インラインとして制限されているボックス内の単語の例です。ボックスは単語が収まらないほど小さいため、ボックスからはみ出てしまいます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> + +<p><font>CSS のこの既定のアプローチは、コンテンツをかなり乱雑にオーバーフローさせているように感じられるかもしれません。</font><font>追加のコンテンツを非表示にしたり、ボックスを大きくさせたりしないのはなぜなのでしょう。</font></p> + +<p>CSS は可能な限りコンテンツを隠しません。これをやってしまうと、通常は問題となりうるデータ損失が発生するためです。CSS はこのようにコンテンツが消えることを懸念します。コンテンツが消失したことに気付かない可能性があるのは問題だからです。見ている人は消えたことに気付かないかもしれません。フォーム上の送信ボタンが消えてしまい、フォームが完了できない場合それは大きな問題です。代わりに CSS は目に見える方法でオーバーフローしようとします。あなたもしくは訪問者がコンテンツが重なっているという状況に気づき、修正が必要であることを知ることができます。</p> + +<p>ボックスを <code>width</code> または <code>height</code> で制御している場合、CSS は<font>オーバーフローの可能性が管理されていると想定します。</font>一般にボックスにテキストがある場合、ブロックのサイズを制御することは問題になりがちです。例えば、想定していたよりも多くのテキストになってしまったか、フォントサイズを大きくした場合などです。 </p> + +<p><font>次のいくつかのレッスンでは、オーバーフローを起こしにくいサイジング方法を見ていきます。</font><font>固定サイズが必要な場合は、オーバーフローの動作を制御することもできます。</font><font>読み進めましょう。</font></p> + +<h2 id="The_overflow_property" name="The_overflow_property">overflow プロパティ</h2> + +<p>{{cssxref("overflow")}} プロパティは要素のオーバーフローを制御し、ブラウザにどのように動作させるかを伝えます。既定値は <code>visible</code> のため、オーバーフロー時にコンテンツは表示されます。</p> + +<p>オーバーフロー時にコンテンツをトリミングしたい場合、<code>overflow: hidden</code> をボックスに指定します。これは文字通り、はみ出たものを見えなくします。これにより内容が隠れてしまうことが起こりうるため、コンテンツが非表示になっても問題にならない場合にのみに限定した方がいいでしょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> + +<p>コンテンツのオーバーフロー時にスクロールバーを表示したいこともあるでしょう。 <code>overflow: scroll</code> を指定すればコンテンツがオーバーフローしない場合でも、ブラウザーはスクロールバーを表示します。コンテンツに応じてスクロールバーが表示されたり消えたりするのを防ぐため、これが必要な場合があります。</p> + +<p><strong><font><font>下のボックスからコンテンツの一部を削除すると、スクロールするものがなくてもスクロールバー（または少なくともトラック部品）が残っていることがわかります。</font></font></strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> + +<p>上記の例では <code>y</code> 軸のスクロールバーだけがあればいいのですが、横スクロールバーも表示されてしまいます。{{cssxref("overflow-y")}} プロパティを使えば、<code>y</code> 軸のみのスクロールバーを指定できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> + +<p>{{cssxref("overflow-x")}} を使用して、x 軸のみのスクロールバーを表示できますが、文字が見切れてしまうことの回避策としては推奨されません。小さなボックスで長い文字列を処理する場合は、{{cssxref("word-break")}} や {{cssxref("overflow-wrap")}} を検討してください。<a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a> で説明した方法のいくつかは、さまざまな量のコンテンツに適切に対応するボックスを作成するのに役立つ場合があります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> + +<p><code>scroll</code> にしておけばコンテンツが少ないとしても、それとは関係なくスクロールバーは常に表示されます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>overflow</code> プロパティでは x と y の2つの値を渡すことができることに注意してください。2つのキーワードが指定されている場合、ひとつめは <code>overflow-x</code>、2つめは <code>overflow-y</code> として適用されます。それ以外の場合は <code>overflow-x</code> と <code>overflow-y</code> の両方に同じ値が設定されます。例えば、<code>overflow: scroll hidden</code> とした場合は、<code>overflow-x</code> は <code>scroll</code>、<code>overflow-y</code> は <code>hidden</code> となります。</p> +</div> + +<p>コンテンツがボックスに収まらない場合にのみ、スクロールバーを表示する場合は <code>overflow: auto</code> を使用します。<font>この場合、スクロールバーを表示するかどうかはブラウザーによります。</font><font>通常、デスクトップブラウザはコンテンツがオーバーフローする場合にのみそうします。</font></p> + +<p><strong>以下の例では、ボックスに収まるまでコンテンツを削除していくとスクロールバーが消えます。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> + +<h2 id="Overflow_establishes_a_Block_Formatting_Context" name="Overflow_establishes_a_Block_Formatting_Context">オーバーフローとブロック整形コンテキスト</h2> + +<p>CSS には <strong>ブロック整形コンテキスト</strong> (BFC = Block Formatting Context) の概念があります。<font>これは今のところあまり気にする必要はありませんが、</font><code>scroll</code> や <code>auto</code> などのオーバーフローの設定で BFC が作成されることを知っておくと便利です。結果として <code>overflow</code> の値を変更したボックスのコンテンツは、独自のミニレイアウトになります。コンテナの外側の物は中に突っ込むことができず、ボックスから周囲のレイアウトに突き出すこともできません。これによってボックスにはすべてのコンテンツが含まれており、かつ、ページ上の他のアイテムと重ならないという、一貫したスクロール体験を生み出します。</p> + +<h2 id="Unwanted_overflow_in_web_design" name="Unwanted_overflow_in_web_design">オーバーフローの望ましくないウェブデザイン</h2> + +<p>モダンなレイアウト手法（<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a> モジュールで説明）では、オーバーフローを管理します。これらの方法は、ウェブページ上にどれだけのコンテンツが存在するかについての仮定や依存関係なしに大きく機能します。</p> + +<p>しかし過去には開発者は多くの場合、固定された高さを使用して、実際には互いに関係のないボックスの底を揃えようとしました。<font>それは脆く、レガシーなアプリケーションでは、コンテンツが他のコンテンツに重なってしまっているのを見かけることがあります。</font><font>それによってオーバーフローが起きていることがわかります。</font><font>理想としては、ボックスサイズの固定に依存しないようにレイアウトを調整します。</font></p> + +<p>サイトを開発するときは、常にオーバーフローの問題に留意する必要があります。大量のコンテンツと少量のコンテンツを含むデザインをテストし、テキストのフォントサイズを大きくし、CSS が堅牢に対処できていると確認する必要があります。オーバーフローの値を変更してコンテンツを非表示にしたりスクロールバーを追加したりするのは、特別な場合（例えばスクロールが本当に必要な場合など）にのみ使うべきです。</p> + +<h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2> + +<p>このレッスンで吸収すべきことはたくさんあります！ あなたは最も重要な情報を覚えていますか？ あなたの理解度を確認するには、<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a> を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p><font>この短いレッスンではオーバーフローの概念を紹介しました。CSS はオーバーフローしたコンテンツが見えなくなることによる、データ損失の回避を試みることを理解しました。潜在的なオーバーフローを管理できること、また、問題のあるオーバーフローを引き起こしてしまわないかを確認する必要があることもわかりました。</font></p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..57feac8995 --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,180 @@ +--- +title: 属性セレクター +slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +tags: + - Attribute + - Beginner + - CSS + - Learn + - Selectors +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<p>HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 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>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>属性セレクターとは何かと、その使い方を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Presence_and_value_selectors" name="Presence_and_value_selectors">存在や値のセレクター</h2> + +<p>これらのセレクターにより、要素を属性が存在するか (<code>href</code> など)、または属性の値に対して様々な方法で一致させて選択できるようになります。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクター</th> + <th scope="col">例</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>]</code></td> + <td><code>a[title]</code></td> + <td><em>attr</em> という属性名を持つ要素と一致します。 — 値を角括弧の中に入れます。</td> + </tr> + <tr> + <td><code>[<em>attr</em>=<em>value</em>]</code></td> + <td><code>a[href="https://example.com"]</code></td> + <td><em>attr</em> という属性名で値が <em>value</em> と完全一致する要素と一致します。— 文字列は引用符の中に入れます。</td> + </tr> + <tr> + <td><code>[<em>attr</em>~=<em>value</em>]</code></td> + <td><code>p[class~="special"]</code></td> + <td> + <div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.">値が正確に <em>value </em>である <em>attr </em>の属性名を持つ要素、または1つ以上の値を含む <em>attr </em>属性を持つ要素に一致します。</div> + + <div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values."></div> + + <div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.">複数の値のリストでは、個別の値が空白で区切られていることに注意してください。</div> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>|=<em>value</em>]</code></td> + <td><code>div[lang|="zh"]</code></td> + <td>値が正確に <em>value </em>であるか、または <em>value </em>の直後にハイフンが続く値で始まる <em>attr</em> 属性を持つ要素にマッチします。</td> + </tr> + </tbody> +</table> + +<p>以下の例では、これらのセレクタが使用されていることがわかります。</p> + +<ul> + <li><code>li[class]</code> を使用することで、クラス属性を持つ任意のセレクタにマッチさせることができます。これは、最初のものを除いたすべてのリスト項目にマッチします。</li> + <li><code>li[class="a"]</code> は、aのクラスを持つセレクタにはマッチしますが、別のスペースで区切られたクラスを値の一部として持つaのクラスを持つセレクタにはマッチしません。2番目のリスト項目を選択します。</li> + <li><code>li[class~="a"]</code>は、 <code>a</code> のクラスを持つセレクタにマッチしますが、空白で区切られたリストの一部に <code>a</code> のクラスを含む値にもマッチします。2 番目と 3 番目のリスト項目を選択します。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> + +<h2 id="Substring_matching_selectors" name="Substring_matching_selectors">部分文字列一致セレクター</h2> + +<p>これらのセレクタは、属性の値の中の部分文字列をより高度にマッチさせることができます。例えば、 <code>box-warning</code> と <code>box-error</code> のクラスがあり、文字列 "box-" で始まるものを全てマッチさせたい場合、 <code>[class^="box-"]</code> を使用して両方を選択することができます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクター</th> + <th scope="col">例</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>^=<em>value</em>]</code></td> + <td><code>li[class^="box-"]</code></td> + <td>値が <code>value</code> で始まる <code>attr</code> 属性（名前は角括弧内の値）を持つ要素とマッチします。</td> + </tr> + <tr> + <td><code>[<em>attr</em>$=<em>value</em>]</code></td> + <td><code>li[class$="-box"]</code></td> + <td> + <div title="Matches elements with an attr attribute (whose name is the value in square brackets), whose value begins with value.">値が <code>value</code> で終わる <code>attr</code> 属性を持つ要素にマッチします。</div> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>*=<em>value</em>]</code></td> + <td><code>li[class*="box"]</code></td> + <td>文字列内の任意の場所に <code>value</code> を含む attr 属性を持つ要素にマッチします。</td> + </tr> + </tbody> +</table> + +<p>次の例は、これらのセレクタの使用法を示しています。</p> + +<ul> + <li><code>li[class^="a"]</code> は <code>a</code> で始まる属性値にマッチするので、最初の 2 つのリスト項目にマッチします。</li> + <li><code>li[class$="a"]</code> は <code>a</code> で終わる属性値にマッチするので、最初と3番目のリスト項目にマッチします。</li> + <li><code>li[class*="a"]</code>は、<code>a</code> が文字列のどこかに現れる属性値にマッチします。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> + +<h2 id="Case-sensitivity" name="Case-sensitivity">大文字・小文字の区別</h2> + +<p>属性値を大文字小文字を区別せずにマッチさせたい場合は、閉じ括弧の前に値 <code>i</code> を使うことができます。このフラグは、ブラウザにASCII文字を大文字小文字を区別せずにマッチさせるように指示します。このフラグがない場合、値は文書言語の大文字小文字の区別に従ってマッチされます - HTMLの場合は大文字小文字を区別します。</p> + +<p>以下の例では、最初のセレクタは <code>a</code> で始まる値にマッチします。他の 2 つのリスト項目は大文字の A で始まるため、最初のリスト項目にのみマッチします。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>：新しい値 <code>s</code> もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別するマッチングを強制しますが、これはブラウザではあまりサポートされておらず、HTMLコンテキストではあまり役に立ちません。</p> +</div> + +<h2 id="Try_it_out" name="Try_it_out">やってみよう</h2> + +<p>下のライブの例では、属性セレクタを使ったCSSを追加して以下のようにします。</p> + +<ul> + <li><code>title</code> 属性を持つ <code><a></code> 要素をターゲットにして、ボーダーをピンク（<code>border-color: pink</code>）にする。</li> + <li><code><a></code> 要素の <code>href</code> 属性の値のどこかに <code>contact</code> という単語が含まれているものをターゲットにして、ボーダーをオレンジ色にする (<code>border-color: orange</code>)。</li> + <li><code>href</code> 属性の値が <code>https</code> で始まる <code><a></code> 要素を対象とし、ボーダーを緑色(<code>border-color: green</code>)にする。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">ここで解答を見ることができます</a>が、まずは自分で考えてみてください。</p> +</div> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<p>これで属性セレクターが完了しました。次の記事に進んで、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-class and pseudo-element selectors</a>について読むことができます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と境界</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/combinators/index.html b/files/ja/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..309d54b4cc --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,118 @@ +--- +title: 結合子 +slug: Learn/CSS/Building_blocks/Selectors/Combinators +tags: + - Beginner + - CSS + - Learn + - Selectors + - combinators +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<p>ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、コンビネーターと呼ばれます。</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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS で使用できるさまざまな結合子セレクターについて学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="子孫コンビネーター">子孫コンビネーター</h2> + +<p>子孫コンビネーター（通常は単一のスペース（ <code> </code> ）文字で表される）は、2つのセレクターを結合して、最初のセレクターと一致する祖先（親、親の親、親の親の親など）要素がある場合、2番目のセレクターと一致する要素が選択されるようにします。 子孫コンビネーターを利用するセレクターは、子孫セレクターと呼ばれます。</p> + +<pre class="brush: css notranslate">body article p +</pre> + +<p>これらのセレクターは、他のセレクターの子孫である要素を選択します。それらは一致するように直接の子供である必要はありません。</p> + +<p>以下の例では、要素の内部にある <code><p></code> 要素のみを <code>.box</code> クラスと照合しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> + +<h2 id="Child_combinator" name="Child_combinator">子コンビネーター</h2> + +<p>子コンビネーターは、大なり記号（ <code>></code> ）であり、セレクターが直接の子である要素を選択した場合にのみ一致します。階層のさらに下の子孫は一致しません。例えば、<code><article></code> 要素の直接の子である <code><p></code> 要素のみを選択するには：</p> + +<pre class="brush: css notranslate">article > p</pre> + +<p>次の例では、順序付けられていないリストがあり、その中にネストされているのは別の順序付けられていないリストです。子コンビネータを使用して、<code><ul></code> の直接の子である <code><li></code> 要素のみを選択し、上部の境界線を設定しています。</p> + +<p>これを子コンビネーターとして指定している <code>></code> を削除すると、子孫セレクターになり、すべての <code><li></code> 要素に赤い境界線が表示されます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> + +<h2 id="Adjacent_sibling" name="Adjacent_sibling">隣接する兄弟</h2> + +<div title="The adjacent sibling selector (+) is used to select something if it is right next to another element at the same level of the hierarchy.">隣接する兄弟セレクター（ <code>+</code> ）は、階層の同じレベルにある別の要素のすぐ隣にある場合に選択します。例えば、<code><p></code> 要素の直後に来るすべての <code><img></code> 要素を選択するには：</div> + +<pre class="brush: css notranslate">p + img</pre> + +<p>一般的な使用例は、以下の私の例のように、見出しに続く段落で何かを行うことです。ここでは、<code><h1></code> に直接隣接する段落を探し、スタイルを設定しています。</p> + +<p><code><h1></code> と <code><p></code> の間に <code><h2></code> のような他の要素を挿入すると、段落がセレクタによってマッチしなくなり、要素が隣接しているときに適用される背景色と前景色が得られなくなることに気づくでしょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> + +<h2 id="General_sibling" name="General_sibling">一般的な兄弟</h2> + +<p>要素が直接隣接していなくても、その要素の兄弟を選択したい場合は、一般的な兄弟コンビネーター( <code>~</code> )を使うことができます。<code><p></code> 要素の後のどこかに来る <code><img></code> 要素をすべて選択するには、次のようにします。</p> + +<pre class="brush: css notranslate">p ~ img</pre> + +<div title="In the example below we are selecting all <p> elements that come after the <h1>, and even though there is a <div> in the document as well, the <p> that comes after it is selected.">以下の例では、<code><h1></code> の後に続くすべての <code><p></code> 要素を選択しています。また、ドキュメントに <code><div></code> がある場合でも、その後にある <code><p></code> が選択されています。</div> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> + +<h2 id="コンビネーターの使用">コンビネーターの使用</h2> + +<p>ドキュメントの一部を選択するために、前のレッスンで発見したセレクタをコンビネータと組み合わせることができます。 たとえば、<code><ul></code> の直接の子であるクラス "a"のリストアイテムを選択する場合、次のように使用できます。</p> + +<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> + +<p>ただし、文書の特定の部分を選択する大きなセレクタのリストを作成する際には注意が必要です。マークアップの中でその要素の位置を特定してセレクタを作成しているので、CSS ルールを再利用するのは難しいでしょう。</p> + +<p>多くの場合、単純なクラスを作成し、それを問題の要素に適用する方が適切です。つまり、ドキュメント内の何かにアクセスする必要があり、HTMLにアクセスできない場合、おそらくCMSによって生成されているために、コンビネーターに関する知識は非常に役立ちます。</p> + +<h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2> + +<p>この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a> を参照してください。</p> + +<h2 id="Moving_on" name="Moving_on">先へ</h2> + +<p>これは、セレクターに関するレッスンの最後のセクションです。次に、CSSのもう1つの重要な部分である<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">CSSボックスモデルに進み</a>ます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">共役</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/index.html b/files/ja/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..4ca0ff88db --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,233 @@ +--- +title: CSS セレクター +slug: Learn/CSS/Building_blocks/Selectors +tags: + - Attribute + - Beginner + - CSS + - Class + - Learn + - Pseudo + - Selectors + - id +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">{{Glossary("CSS")}}では、ウェブページ上の {{glossary("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>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS セレクターがどのように機能するかを学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_selector" name="What_is_a_selector">セレクターとは</h2> + +<p>実はもうこれまでにセレクターを見たことがあるはずです。CSS セレクターは、CSS のもっとも基本的なルールとなるものです。要素やその他を選択して CSS プロパティ値を適用する HTML 要素をブラウザーに伝えるものです。セレクターによって選択される要素は、選択対象 <em>(subject of the selector</em>) と呼ばれます。</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>これまでの記事で <code>h1</code> 要素や <code>.special</code> クラスなどのいくつかのセレクターを見てきました。それらはドキュメント内の対象をさまざまな方法で指定できるということも学びました。</p> + +<p>"CSS セレクター仕様" (<em>CSS Selectors specification</em>) で、CSS のセレクターは定義されています。CSS の他の部分と同様に、それらが機能するにはブラウザーでのサポートが必要です。よく使うセレクターは確定仕様である <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a> で定義されているため、ブラウザーサポートも期待できます。</p> + +<h2 id="Selector_lists" name="Selector_lists">セレクター一覧</h2> + +<p>同じ CSS を使用するものが複数ある場合は、セレクターリストでまとめてルールを適用することができます。たとえば、<code>h1</code> と <code>.special</code> クラスが同じ CSS だとして、2 つの個別のルールとして記述できます。</p> + +<pre class="brush: css"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>カンマ区切りでセレクターリストにもできます。</p> + +<pre class="brush: css"><code>h1, .special { + color: blue; +} </code></pre> + +<p>カンマの前後に空白を入れることもできますし、改行したほうがセレクターを見つけやすくなり読みやすいかもしれません。</p> + +<pre class="brush: css"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が同じになるように留意してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>この方法でセレクターをグループ化していると、無効なセレクターがある場合はルール全体が無視されます。</p> + +<p>以下の例では無効なセレクターは無視され、<code>h1</code> だけがスタイル適用されます。</p> + +<pre class="brush: css"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p><br> + ただし結合した場合は、<code>h1</code> もクラスも無効なものとしてスタイルされません。</p> + +<pre class="brush: css"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Types_of_selectors" name="Types_of_selectors">セレクターの種類</h2> + +<p>セレクターにはいくつかの異なるグループがあり、どれが必要かを知ることは有用です。ここのサブ記事ではさまざまなセレクターグループを詳しく見ていきます。</p> + +<h3 id="Type_class_and_ID_selectors" name="Type_class_and_ID_selectors">要素・クラス・ID によるセレクター</h3> + +<p>このグループには <code><h1></code> のような HTML 要素を対象とするセレクターを含みます。</p> + +<pre class="brush: css">h1 { }</pre> + +<p>同様にクラスを対象としたセレクターも含みます。</p> + +<pre class="brush: css">.box { }</pre> + +<p>あとは ID です。</p> + +<pre class="brush: css">#unique { }</pre> + +<h3 id="Attribute_selectors" name="Attribute_selectors">属性によるセレクター</h3> + +<p>このセレクターグループは要素の属性によるさまざまな選択方法を提供します。</p> + +<pre class="brush: css">a[title] { }</pre> + +<p>特定の値を持つ属性で選択することもできます。</p> + +<pre class="brush: css">a[href="https://example.com"] { }</pre> + +<h3 id="Pseudo-classes_and_pseudo-elements" name="Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</h3> + +<p>このセレクターグループは、要素の特定の状態をスタイルする疑似クラスを含みます。たとえば、<code>:hover</code> 擬似クラスはマウスポインターがホバーしているときにのみ要素を選択します。</p> + +<pre class="brush: css">a:hover { }</pre> + +<p>また要素自体ではなく要素の特定の部分を選択する擬似要素もあります。たとえば、<code>::first-line</code> は要素 (以下では <code><p></code>) 内の最初の行をまるで <code><span></code> でラップしてスタイルしたかのように動作します。</p> + +<pre class="brush: css">p::first-line { }</pre> + +<h3 id="Combinators" name="Combinators">結合子</h3> + +<p>最後のセレクターグループは、セレクターを組み合わせて文書内のターゲット要素を選びます。たとえば、以下では子コンビネータ (<code>></code>) によって <code><article></code> 要素の直接の子である段落を選択します。</p> + +<pre class="brush: css">article > p { }</pre> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<p>この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a>から見ていくこともできます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Reference_table_of_selectors" name="Reference_table_of_selectors">セレクターのリファレンス表</h2> + +<p>以下の表で使用可能な各セレクターの概要と、それぞれの使い方を示すガイド内ページへのリンクを紹介します。そこには各セレクターのブラウザーサポートを確認できる MDN ページへのリンクもあります。セレクターを検索したり一般的に CSS を体験するときに、ここに戻ってきて参照することができます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクター</th> + <th scope="col">例</th> + <th scope="col">CSS チュートリアル</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ja/docs/Web/CSS/Type_selectors">要素セレクター</a></td> + <td><code>h1 { }</code></td> + <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Type_selectors">要素セレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a></td> + <td><code>* { }</code></td> + <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">全称セレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a></td> + <td><code>.box { }</code></td> + <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">クラスセレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a></td> + <td><code>#unique { }</code></td> + <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID セレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">属性によるセレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラスセレクター</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">疑似クラス</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素セレクター</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">疑似要素</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a></td> + <td><code>article p</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">子孫結合子</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a></td> + <td><code>article > p</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">子結合子</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a></td> + <td><code>h1 + p</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">隣接兄弟</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">一般兄弟</a></td> + </tr> + </tbody> +</table> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..ea84d45c2b --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,397 @@ +--- +title: 疑似クラスと疑似要素 +slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<p>次に取り上げるセレクターのセットは、<strong>疑似クラス</strong>と<strong>疑似要素</strong>と呼ばれます。これらは多数あり、多くの場合、それらは非常に特定の目的に役立ちます。それらの使用方法がわかったら、リストを見て、達成しようとしているタスクに有効なものがあるかどうかを確認できます。ここでも、各セレクターに関連するMDNページは、ブラウザーサポートの説明に役立ちます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件：</th> + <td>基本的なコンピュータリテラシー、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされている基本的なソフトウェア</a><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">、ファイルの操作</a>に関する基本的な知識、HTMLの基本（<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTMLの概要を</a>学ぶ）、CSSのしくみ（<a href="/en-US/docs/Learn/CSS/First_steps">CSSの最初のステップを</a>学ぶ）。</td> + </tr> + <tr> + <th scope="row">目的：</th> + <td>疑似クラスおよび疑似要素セレクターについて学習します。</td> + </tr> + </tbody> +</table> + +<h2 id="疑似クラスとは何ですか？">疑似クラスとは何ですか？</h2> + +<p>疑似クラスは、特定の状態にある要素を選択するセレクターです。たとえば、それらはそのタイプの最初の要素であるか、マウスポインターによってホバーされています。それらは、ドキュメントの一部にクラスを適用したかのように振る舞う傾向があり、マークアップの余分なクラスを削減し、より柔軟で保守可能なコードを提供するのに役立ちます。</p> + +<p>疑似クラスは、コロンで始まるキーワードです。</p> + +<pre class="notranslate">:<em>疑似クラス名</em></pre> + +<h3 id="単純な疑似クラスの例">単純な疑似クラスの例</h3> + +<p>簡単な例を見てみましょう。以下の最初の例に示すように、記事の最初の段落を大きく太字にしたい場合は、その段落にクラスを追加してから、そのクラスにCSSを追加できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> + +<p>ただし、これを維持するのは面倒な場合があります。ドキュメントの上部に新しい段落が追加された場合はどうなりますか？クラスを新しい段落に移動する必要があります。クラスを追加する代わりに、{{cssxref(":first-child")}} 疑似クラスセレクターを使用できます。これにより、<em>常に</em>記事の最初の子要素がターゲットになり、HTMLを編集する必要がなくなります（これは、CMSによって生成された可能性があるため、とにかく常に可能であるとは限りません。）</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> + +<p>すべての疑似クラスは、この同じ方法で動作します。特定の状態にあるドキュメントの一部をターゲットにして、HTMLにクラスを追加したかのように動作します。MDNの他の例をいくつか見てみましょう。</p> + +<ul> + <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li> +</ul> + +<h3 id="ユーザーアクション疑似クラス">ユーザーアクション疑似クラス</h3> + +<p>一部の疑似クラスは、ユーザーが何らかの方法でドキュメントを操作したときにのみ適用されます。これらの<strong>ユーザーアクションの</strong>疑似クラスは、<strong>動的疑似クラス</strong>と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。</p> + +<ul> + <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — 上記の通り; これは、ユーザーが要素（通常はリンク）の上にポインターを移動した場合にのみ適用されます。</li> + <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> + +<h2 id="疑似要素とは何ですか？">疑似要素とは何ですか？</h2> + +<p>疑似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しいHTML要素をマークアップに追加したかのように動作します。疑似要素はダブルコロンで始まり <code>::</code> ます。</p> + +<pre class="notranslate"><em>::疑似要素名</em></pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>：一部の初期の疑似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザは、後方互換性のためにシングルまたはダブルコロン構文で初期の疑似要素をサポートしています。</p> +</div> + +<p>たとえば、段落の最初の行を選択する場合は、それを <code><span></code> 要素にラップして要素セレクターを使用できます。ただし、ラップした単語の数が親要素の幅よりも長いまたは短い場合は、失敗します。1行にいくつの単語が収まるかわからない傾向があるため（画面の幅やフォントサイズが変わると、単語数が変わるため）、HTMLを追加してこれを確実に行うことは不可能です。</p> + +<p><code>::first-line</code> 擬似要素セレクタは確実にあなたのためにこれを行います-それはまだ最初の行のみを選択します言葉の数が増加した場合と減少します。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> + +<p>それはまるで最初のフォーマットされた行を <code><span></code> で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。</p> + +<p>これにより、両方の段落の最初の行が選択されていることがわかります。</p> + +<h2 id="疑似クラスと疑似要素を組み合わせる">疑似クラスと疑似要素を組み合わせる</h2> + +<p>最初の段落の最初の行を太字にしたい場合は <code>:first-child</code> 、 <code>::first-line</code> セレクターとセレクターをチェーンすることができます。前のライブ例を編集して、次のCSSを使用するようにしてください。<span class="tlid-translation translation" lang="ja"><span title=""><article>要素内にある最初の <code><p></code> 要素の最初の行を選択したいと言っています。</span></span></p> + +<pre class="brush: css notranslate"> <code>article p:first-child::first-line { + font-size: 120%; + font-weight: bold; +}</code></pre> + +<h2 id="beforeおよび_afterを使用したコンテンツの生成">:: beforeおよび:: afterを使用したコンテンツの生成</h2> + +<p>CSSを使用してコンテンツをドキュメントに挿入するための <code><a href="/en-US/docs/Web/CSS/content">content</a></code> プロパティと共に使用される特別な疑似要素がいくつかあります。</p> + +<p>以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 <code>::before</code> 疑似要素を <code>::after</code> に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> + +<p>CSSからテキストの文字列を挿入することは、実際にはWebで頻繁に行うことではありません。そのテキストは一部のスクリーンリーダーにはアクセスできず、将来誰かが見つけて編集するのが難しい場合があるためです。</p> + +<p>これらの疑似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> + +<p>これらの疑似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。</p> + +<p>次の例では、 <code>::before</code> 疑似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを <code>display: block</code> に設定しました。次に、CSSを使用して、他の要素と同じようにスタイルを設定します。CSSをいじって、CSSの外観と動作を変更できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> + +<p><code>content</code> プロパティとともに <code>::before</code> と <code>::after</code> 擬似要素を使用することは、CSSでは「生成されたコンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、<a href="http://www.cssarrowplease.com/">CSS Arrow Please Please</a>のサイトで、<a href="http://www.cssarrowplease.com/">CSSで矢印</a>を生成するのに役立ちます。矢印を作成するときにCSSを見ると、{{cssxref("::before")}} および {{cssxref("::after")}} 疑似要素が使用されていることがわかります。これらのセレクターが表示されたら、{{cssxref("content")}} プロパティを見て、ドキュメントに何が追加されているかを確認してください。</p> + +<h2 id="参照セクション">参照セクション</h2> + +<p>疑似クラスと疑似要素は多数あり、参照するリストがあると便利です。以下に、MDNのリファレンスページへのリンクとともに、それらをリストした表を示します。これをリファレンスとして使用して、ターゲットにできるものの種類を確認します。</p> + +<h3 id="疑似クラス">疑似クラス</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクタ</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref(":active")}}</td> + <td>ユーザーが要素をアクティブ化（たとえばクリック）すると一致します。</td> + </tr> + <tr> + <td>{{cssxref(":any-link")}}</td> + <td>リンクの <code>:link</code> と <code>:visited</code> 状態の両方に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":blank")}}</td> + <td>入力値が空の<a href="/en-US/docs/Web/HTML/Element/input"><code><input></code> 要素に</a>一致します。</td> + </tr> + <tr> + <td>{{cssxref(":checked")}}</td> + <td>選択状態のラジオボタンまたはチェックボックスに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":current")}}</td> + <td>現在表示されている要素または要素の祖先と一致します。</td> + </tr> + <tr> + <td>{{cssxref(":default")}}</td> + <td>類似要素のセットの中でデフォルトである1つ以上のUI要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":dir")}}</td> + <td>方向性（HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性またはCSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> プロパティの値）に基づいて要素を選択します。</td> + </tr> + <tr> + <td>{{cssxref(":disabled")}}</td> + <td>無効な状態のユーザーインターフェイス要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":empty")}}</td> + <td>オプションの空白以外の子を持たない要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":enabled")}}</td> + <td>有効な状態のユーザーインターフェイス要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":first")}}</td> + <td><a href="/en-US/docs/Web/CSS/Paged_Media">ページ媒体</a>では、最初のページと一致します。</td> + </tr> + <tr> + <td>{{cssxref(":first-child")}}</td> + <td>兄弟の中で最初にある要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":first-of-type")}}</td> + <td>兄弟の中で最初にある特定のタイプの要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":focus")}}</td> + <td>要素にフォーカスがあるときに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":focus-visible")}}</td> + <td>要素にフォーカスがあり、そのフォーカスがユーザーに表示される場合に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":focus-within")}}</td> + <td>フォーカスを持つ要素と、フォーカスを持つ子孫を持つ要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":future")}}</td> + <td>現在の要素の後の要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":hover")}}</td> + <td>ユーザーが要素にカーソルを合わせると一致します。</td> + </tr> + <tr> + <td>{{cssxref(":indeterminate")}}</td> + <td>値が不確定な状態のUI要素、通常は<a href="/en-US/docs/Web/HTML/Element/input/checkbox">チェックボックスに</a>一致し<a href="/en-US/docs/Web/HTML/Element/input/checkbox">ます</a>。</td> + </tr> + <tr> + <td>{{cssxref(":in-range")}}</td> + <td>範囲制限を持つ要素で、要素の値が範囲内にある場合にマッチします。</td> + </tr> + <tr> + <td>{{cssxref(":invalid")}}</td> + <td>無効な状態の <code><input></code> のような要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":lang")}}</td> + <td>言語（HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a>属性の値）に基づいて要素を<a href="/en-US/docs/Web/HTML/Global_attributes/lang">照合し</a>ます。</td> + </tr> + <tr> + <td>{{cssxref(":last-child")}}</td> + <td>兄弟の中で最後にある要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":last-of-type")}}</td> + <td>兄弟の中で最後にある特定のタイプの要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":left")}}</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、左側のページと一致します。</td> + </tr> + <tr> + <td>{{cssxref(":link")}}</td> + <td>未訪問のリンクに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":local-link")}}</td> + <td>現在のドキュメントと同じサイトにあるページを指すリンクに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":is", ":is()")}}</td> + <td>渡されたセレクターリスト内の任意のセレクターに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":not")}}</td> + <td>このセレクターに値として渡されるセレクターで一致しないものと一致します。</td> + </tr> + <tr> + <td>{{cssxref(":nth-child")}}</td> + <td>兄弟のリストの要素に一致します — 兄弟は<var>an+b</var>の形式の式で一致します（たとえば、2n + 1は1、3、5、7番目などの要素に一致します。すべてが奇数です）。</td> + </tr> + <tr> + <td>{{cssxref(":nth-of-type")}}</td> + <td>特定のタイプの兄弟（ <code><p></code> 要素など）のリストの要素に一致します — 兄弟は<var>、an+b</var>という形式の式で一致します（たとえば、2n + 1は、その要素のタイプの1、3、5 、7番目などに一致します。すべて奇数です。）</td> + </tr> + <tr> + <td>{{cssxref(":nth-last-child")}}</td> + <td>兄弟のリストの要素を末尾から逆に数えて一致させます。兄弟は<var>an+b</var>の形式の式で一致します（たとえば、2n + 1はシーケンスの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。）</td> + </tr> + <tr> + <td>{{cssxref(":nth-last-of-type")}}</td> + <td>特定のタイプの兄弟のリスト（ <code><p></code> 要素など）の要素を最後から逆に数えて一致させます。兄弟は<var>、an+b</var>という形式の式で一致します（たとえば、2n + 1は、シーケンス内のそのタイプの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。）</td> + </tr> + <tr> + <td>{{cssxref(":only-child")}}</td> + <td>兄弟がない要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":only-of-type")}}</td> + <td>兄弟間でそのタイプの唯一の要素である要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":optional")}}</td> + <td>不要なフォーム要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":out-of-range")}}</td> + <td>範囲制限を持つ要素で、要素の値が範囲外にある場合にマッチします。</td> + </tr> + <tr> + <td>{{cssxref(":past")}}</td> + <td>現在の要素より前の要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":placeholder-shown")}}</td> + <td>プレースホルダーテキストを表示しているinput要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":playing")}}</td> + <td>「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「再生中」のときに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":paused")}}</td> + <td>「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「一時停止」されている場合に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":read-only")}}</td> + <td>ユーザーが変更できない要素と一致します。</td> + </tr> + <tr> + <td>{{cssxref(":read-write")}}</td> + <td>ユーザーが変更可能な要素と一致します。</td> + </tr> + <tr> + <td>{{cssxref(":required")}}</td> + <td>必要なフォーム要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":right")}}</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、右側のページに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":root")}}</td> + <td>ドキュメントのルートである要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":scope")}}</td> + <td>スコープ要素であるすべての要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":valid")}}</td> + <td><code><input></code> 要素などで要素が有効な状態のときに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":target")}}</td> + <td>現在のURLのターゲットである場合（つまり、現在の<a href="https://en.wikipedia.org/wiki/Fragment_identifier">URLフラグメントに</a>一致するIDを持つ場合）、要素に一致し<a href="https://en.wikipedia.org/wiki/Fragment_identifier">ます</a>。</td> + </tr> + <tr> + <td>{{cssxref(":visited")}}</td> + <td>訪問したリンクに一致します。</td> + </tr> + </tbody> +</table> + +<h3 id="疑似要素">疑似要素</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクタ</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("::after")}}</td> + <td>元の要素の実際のコンテンツの後に現れるスタイル可能な要素と一致します。</td> + </tr> + <tr> + <td>{{cssxref("::before")}}</td> + <td>元の要素の実際のコンテンツの前に現れるスタイル可能な要素と一致します。</td> + </tr> + <tr> + <td>{{cssxref("::first-letter")}}</td> + <td>要素の最初の文字と一致します。</td> + </tr> + <tr> + <td>{{cssxref("::first-line")}}</td> + <td>含まれている要素の最初の行と一致します。</td> + </tr> + <tr> + <td>{{cssxref("::grammar-error")}}</td> + <td>ブラウザによってフラグが立てられた文法エラーを含むドキュメントの一部に一致します。</td> + </tr> + <tr> + <td>{{cssxref("::marker")}}</td> + <td>通常は箇条書きまたは番号が含まれているリストアイテムのマーカーボックスに一致します。</td> + </tr> + <tr> + <td>{{cssxref("::selection")}}</td> + <td>選択されたドキュメントの部分に一致します。</td> + </tr> + <tr> + <td>{{cssxref("::spelling-error")}}</td> + <td>ブラウザによってフラグが付けられた、スペルミスを含むドキュメントの一部に一致します。</td> + </tr> + </tbody> +</table> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="このモジュールでは">このモジュールでは</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSSセレクター</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">タイプ、クラス、IDセレクター</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">コンビネーター</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">異なるテキスト方向の処理</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">あふれるコンテンツ</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">値と単位</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSSでのアイテムのサイズ変更</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">スタイリングテーブル</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSSのデバッグ</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSSの整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..8f1bbbfaad --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,126 @@ +--- +title: 要素・クラス・ID によるセレクター +slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +tags: + - Beginner + - CSS + - Class + - Learn + - Selectors + - Syntax + - id + - universal +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<p>このレッスンでは、利用できる最も簡単にみえるセレクタをとりあげます。これは今後あなたが作業でよく使うことになります。</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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS をドキュメントに適用するためのさまざまな CSS セレクタについて学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Type_selectors" name="Type_selectors">タイプセレクタ</h2> + +<p><strong>タイプセレクタ</strong>は<em>タグ名セレクタ</em>または<em>要素セレクタ</em>を参照します。これはあなたのドキュメント中のタグまたは要素を選択するからです。次の例で span, em それに strong セレクタを使用します。そのため <code><span></code>, <code><em></code> と <code><strong></code> の要素はスタイル修飾されます。</p> + +<p><strong>CSS ルールを追加して <code><h1></code> 要素を選択してその色を青に変えましょう。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> + +<h2 id="The_universal_selector" name="The_universal_selector">ユニバーサルセレクタ</h2> + +<p>ユニバーサルセレクタはアステリスク (<code>*</code>) で表します。またこれはドキュメントのすべてまたは親要素に含まれるすべての要素( これはそれが連なっている、他の要素やそれらの子要素に連なっている要素すべて) を選択します。次の例ではすべての要素から margin を削除しています。これはブラウザーによって追加されたデフォルトのスタイルの代りに、章立てやパラグラフの margin を消してそれぞれを近く配置させます。これにより個々のパラグラフが見分けがつかなくなってしまいます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> + +<p>この種類の動作はしばしば「スタイルシートのリセット」と呼び、ブラウザーのスタイル設定を取り消します。ユニバーサルセレクタはグローバルな変更をもたらすため、下記に述べる特定の状況のみに使うべきです。</p> + +<h3 id="Using_the_universal_selector_to_make_your_selectors_easier_to_read" name="Using_the_universal_selector_to_make_your_selectors_easier_to_read">ユニバーサルセレクタを使用してセレクタの可読性をあげる</h3> + +<p>ユニバーサルセレクタの使用方法のひとつに、セレクタを読みやすくし、その動作を明かにするのものがあります。例えば、<code><article></code> 要素の最初の子要素を選択し、それがどんな要素であったとしてもそれを太字にしたいとします。これには{{cssxref(":first-child")}} セレクタを使うことができます。これはあとの<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a>のコースで詳細を学びますが、<code><article></code> 要素セレクタの後ろで指定します。</p> + +<pre class="brush: css notranslate">article :first-child { + +}</pre> + +<p>しかしこれは、<code>article:first-child</code> と混同しかねません。これは他の要素の第一子要素の<code><article></code> 要素を選択してしまうのです。</p> + +<p>この混乱を避けるために、<code>:first-child</code> にユニバーサルセレクタを追加します。これで何を選択しているかが明らかです。<code><article></code> 要素の第一子要素にあたるすべての要素を選択しています。</p> + +<pre class="brush: css notranslate">article *:first-child { + +} </pre> + +<h2 id="Class_selectors" name="Class_selectors">クラスセレクタ</h2> + +<p>クラスセレクタの名前はピリオド <code>(.</code>) から始まります。そしてそのクラスが適用されている、ドキュメント内のすべてを選択します。次の例では、<code>.highlight</code> というクラスを作成し、ドキュメントのいくつかの場所に適用します。このクラスが適用されたすべての要素をハイライトします。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> + +<h3 id="Targetting_classes_on_particular_elements" name="Targetting_classes_on_particular_elements">特定の要素のクラスを対象にする</h3> + +<p>特定のクラスが適用された特定の要素を対象にするセレクタを作成できます。次の例では、<code>highlight</code> クラスの <code><span></code> をハイライトしますが、<code>highlight</code> クラスの <code><h1></code> 見出しを異なるようにハイライトします。対象にしたい要素にタイプセレクタを使用して実現できます。ドットの後にクラスを追加しますが、クラスとの間にホワイトスペースをいれません。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> + +<p>このアプローチでは、ルールが特定の要素とクラスの組み合わせにのみ適用されるため、ルールの範囲が狭くなります。そのため、ルールを他の要素にも適用したい場合は、別のセレクタを追加する必要があります。</p> + +<h3 id="Target_an_element_if_it_has_more_than_one_class_applied" name="Target_an_element_if_it_has_more_than_one_class_applied">複数のクラスが適用された要素を対象にする</h3> + +<p>一つの要素に複数のクラスを適用できます。それらを個別に選択することも、すべてのクラスがあるものだけを選択することもできます。これは、サイト上で様々な方法で組み合わせることができるコンポーネントを構築する際に便利です。</p> + +<p>次の例は、ノートのある <code><div></code> です。灰色の境界はそのボックスが <code>notebox</code> クラスもっている場合にのみ適用されます。もしそれが <code>warning</code> や <code>danger</code> クラスも持っていた場合 {{cssxref("border-color")}} を変更します。</p> + +<p>ブラウザーに、2 つのクラスが存在する要素だけ一致するように指定するには、それらのクラスをすべて空白を入れずに繋げて指定します。最後の <code><div></code> には <code>danger</code> クラスがあるだけなので、適用されるスタイルはありません。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> + +<h2 id="ID_Selectors" name="ID_Selectors">ID セレクタ</h2> + +<p>ID セレクタは ピリオドではなく <code>#</code> で始めますが、それ以外は基本的にクラスセレクタと同じです。しかし ID はそのドキュメントの名にはただ一度しか使用できません。ID セレクタはその <code>id</code> が設定されている要素を選択します。要素と ID の両方に一致するものだけを対象にする場合、ID セレクタをタイプセレクタの前に置くことができます。これを次の例で確認しましょう。:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: このレッスンの特例で学んだように ID は非常に特別なもので、他のセレクタを上書きすることがあります。これは対応が難しくなることがあります。多くの場合、ID を使用する代りにクラスを追加するほうが望ましいです。しかしその要素を対象にする方法が ID を使うしかないような場合、例えばそのマークアップにあなたがアクセスできず、編集できないような場合、この方法を使用できます。</p> +</div> + +<h2 id="In_the_next_article" name="In_the_next_article">次の記事</h2> + +<p><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクタ</a> によるセレクタを調べます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクタ</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクタ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクタ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクタ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..80909093b3 --- /dev/null +++ b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,139 @@ +--- +title: CSS によるサイズ設定 +slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS +tags: + - Beginner + - CSS + - Intrinsic size + - Learn + - max size + - min size + - percentage + - sizing + - viewport units +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> + +<p>これまでのさまざまなレッスンで、CSS を使用してウェブページ上のアイテムのサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大事かを理解することが重要です。このレッスンでは、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 に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS によるさまざまなサイズ設定の方法を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="The_natural_or_intrinsic_size_of_things" name="The_natural_or_intrinsic_size_of_things">要素固有のサイズ</h2> + +<p>HTML要素には自然なサイズがあり、CSSの影響を受ける前に設定されます。簡単な例は画像です。画像には、ページに埋め込む画像ファイルで定義された幅と高さがあります。このサイズは<strong>固有のサイズ</strong>と呼ばれ、画像自体に由来します。</p> + +<p><code><img></code> タグまたはCSSの属性を使用してページに画像を配置し、その高さと幅を変更しない場合、その固有のサイズを使用して表示されます。以下の例では、ファイルの範囲を確認できるように画像に境界線を付けています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> + +<p>ただし、空の {{htmlelement("div")}} には独自のサイズはありません。コンテンツのないHTMLに {{htmlelement("div")}} を追加し、画像で行ったように境界線を付けると、ページに線が表示されます。これは、要素の折りたたまれた境界線です。開いたままにするコンテンツはありません。以下の例では、その境界線はコンテナの幅まで伸びています。これはブロックレベルの要素であるため、慣れ親しんだ動作になるはずです。コンテンツがないため、高さ（またはブロックディメンションのサイズ）はありません。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> + +<p>上記の例では、空の要素内にテキストを追加してみてください。要素の高さがコンテンツによって定義されているため、境界線にはそのテキストが含まれています。したがって、<code><div></code> ブロックディメンションにおけるこのサイズは、コンテンツのサイズに由来します。繰り返しますが、これは要素の固有のサイズです。そのサイズはコンテンツによって定義されます。</p> + +<h2 id="Setting_a_specific_size" name="Setting_a_specific_size">サイズの指定</h2> + +<p>もちろん、デザインの要素に特定のサイズを与えることもできます。要素にサイズが指定されている場合（およびそのコンテンツがそのサイズに収まる必要がある場合）、それを<strong>外部サイズ</strong>と呼びます。上記の例の <code><div></code> を見てみます。特定の {{cssxref("width")}} と {{cssxref("height")}} の値を指定できるため、そ <span class="tlid-translation translation" lang="ja"><span title="">コンテンツがどのように配置されても、そのサイズになります。</span> </span> <a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">前のオーバーフローに関するレッスンで</a>見たように、要素の中に収まるスペースよりも多くのコンテンツがある場合、高さを設定するとコンテンツがオーバーフローする可能性があります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> + +<p>このオーバーフローの問題のため、要素の高さを長さまたはパーセンテージで固定することは、Web上で非常に注意深く行う必要があります。</p> + +<h3 id="Using_percentages" name="Using_percentages">比率指定</h3> + +<p>多くの点で、パーセンテージは長さの単位のように機能<a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">し、値と単位に関するレッスンで説明したように、</a>多くの場合、長さと同じ意味で使用できます。パーセンテージを使用している場合、あなたはそれが<em>何に対する</em>比率であるかを認識する必要があります。別のコンテナー内のボックスの場合、子ボックスに幅のパーセンテージを与えると、親コンテナーの幅のパーセンテージになります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> + +<p>これは、パーセンテージがそれを包含するブロックのサイズに対して解決されるためです。パーセンテージを適用しない <code><div></code> 場合、これはブロックレベルの要素であるため、使用可能なスペースの100％を占めます。パーセンテージの幅を指定すると、これは通常埋められるスペースに対するの比率になります。</p> + +<h3 id="Percentage_margins_and_padding" name="Percentage_margins_and_padding">マージンとパディングの比率</h3> + +<p>パーセンテージとして <code>margins</code> と <code>padding</code> を設定すると、奇妙な動作に気付く場合があります。以下の例では、ボックスがあります。内部ボックスに10％の {{cssxref("margin")}} と10％の {{cssxref("padding")}} を与えました。ボックスの上下の padding と margin は、左右の margin と同じサイズです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> + +<p>例えば、上下のマージンのパーセンテージは要素の高さのパーセンテージであり、左右のマージンのパーセンテージは要素の幅のパーセンテージであると予想するかもしれません。しかし、そうではありません。</p> + +<p>マージンとパディングをパーセンテージで設定する場合、値は<strong>インラインサイズ</strong>から計算されます。したがって横書きの言語で作業するときの幅になります。この例では、マージンとパディングはすべて幅の10％です。つまり、ボックス全体で同じサイズのマージンとパディングを使用できます。この方法でパーセンテージを使用する場合、これは覚えておかなければならない事実です。</p> + +<h2 id="min-_and_max-_sizes" name="min-_and_max-_sizes">最小サイズ、最大サイズ</h2> + +<p>固定サイズを与えることに加えて、要素に最小サイズまたは最大サイズを与えるようCSSに要求できます。さまざまな量のコンテンツを含む可能性のあるボックスがあり、常に特定の高さ<em>以上</em>にしたい場合は、そのボックスに {{cssxref("min-height")}} プロパティを設定できます。ボックスは常にこの高さ以上になりますが、ボックスの最小高さでのスペースよりも多くのコンテンツがある場合は、ボックスの高さが高くなります。</p> + +<p>以下の例では、2つのボックスがあり、どちらも150ピクセルの高さが定義されています。左側のボックスの高さは150ピクセルです。右側のボックスには、より多くのスペースを必要とするコンテンツがあるため、150ピクセルよりも高くなっています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> + +<p>これは、オーバーフローを回避しながら、可変量のコンテンツを処理するのに非常に役立ちます。</p> + +<p>{{cssxref("max-width")}} の一般的な用途は、固有の幅で表示するための十分なスペースがない場合に画像を縮小し、その幅よりも大きくならないようにすることです。</p> + +<p>例として、画像に <code>width: 100%</code> を設定する場合、その固有の幅がコンテナーよりも小さいと、画像は強制的に引き伸ばされて大きくなり、ピクセル化されたように見えます。固有の幅がコンテナーよりも大きい場合、オーバーフローします。どちらの場合も、あなたが起こりたいことではないでしょう。</p> + +<p>代わりに <code>max-width: 100%</code> を使用すると、画像は本来のサイズよりも小さくなりますが、サイズの100％で止まります。</p> + +<p>以下の例では、同じ画像を2回使用しています。最初の画像には <code>width: 100%</code> が指定されており、それよりも大きいコンテナー内にあるため、コンテナーの幅まで拡大されます。2番目の画像には <code>max-width: 100%</code> が設定されているため、コンテナを埋めるために引き伸ばされることはありません。3番目のボックスにも同じ画像が含まれており、 <code>max-width: 100%</code> も設定されています。この場合、ボックスに収まるように縮小された様子を確認できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> + +<p>この手法は、画像を<em>レスポンシブ</em>にするために使用されます。そのため、より小さなデバイスで表示すると、適切に縮小されます。ただし、この手法を使用して非常に大きな画像を読み込んでから、ブラウザで縮小するべきではありません。画像は、デザインに表示される最大サイズに必要なサイズよりも大きくならないように適切なサイズにするべきです。大きすぎる画像をダウンロードすると、サイトが遅くなり、ユーザーが従量制の接続を使用している場合は、より多くの費用がかかる可能性があります。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>：<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像技術の</a>詳細をご覧ください。</p> +</div> + +<h2 id="Viewport_units" name="Viewport_units">ビューポートに関する単位</h2> + +<p>ビューポート（サイトの表示に使用しているブラウザーでのページの表示領域）にもサイズがあります。CSSには、ビューポートのサイズに関連する単位（ビューポートの幅 <code>vw</code> とビューポートの高さ <code>vh</code> ）があります。これらの単位を使用すると、ユーザーのビューポートを基準にしてサイズを変更できます。</p> + +<p><code>1vh</code> はビューポートの高さの1％に等しく、<code>1vw</code> はビューポートの幅の1％に等しい。これらの単位を使用して、ボックスだけでなくテキストのサイズも変更できます。以下の例では、20vh と 20vw のサイズのボックスがあります。ボックスには、 {{cssxref("font-size")}} が 10vh の文字 <code>A</code> が含まれています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> + +<p><strong><code>vh</code> との <code>vw</code> 値を変更すると、ボックスまたはフォントのサイズが変更されます。ビューポートに相対的なサイズであるため、ビューポートのサイズを変更しても、サイズが変更されます。ビューポートのサイズを変更したときにサンプルの変更を確認するには、サイズを変更できる新しいブラウザーウィンドウにサンプルを読み込む必要があります（上記の例を含む埋め込み <code><iframe></code> がビューポートであるため）。<a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">サンプルを開き</a>、ブラウザウィンドウのサイズを変更して、ボックスとテキストのサイズがどうなるかを観察します。</strong></p> + +<p>ビューポートに応じてサイズを調整することは、デザインに役立ちます。例えば、全ページのヒーローセクション(hero section)を他のコンテンツの前に表示させたい場合、ページのその部分を100vhの高さにすると、残りのコンテンツはビューポートの下に押しやられてしまい、ドキュメントがスクロールされたときにのみ表示されます。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このレッスンでは、Web上のサイズを決定するときに遭遇する可能性があるいくつかの重要な問題の概要を説明しました。<a href="/ja/docs/Learn/CSS/CSS_layout">CSSレイアウト</a>に移ると、さまざまなレイアウトメソッドを習得する際にサイズ設定が非常に重要になるため、先に進む前に、ここで概念を理解しておくことをお勧めします。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/styling_tables/index.html b/files/ja/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..9d3988ddf7 --- /dev/null +++ b/files/ja/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,316 @@ +--- +title: 表のスタイリング +slug: Learn/CSS/Building_blocks/Styling_tables +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Styling + - Tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<div></div> + +<p class="summary"><span class="seoSummary">HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでに説明した機能のいくつかとともに、HTML 表を見栄え良くするためのガイドを提供します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）と <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 表</a> および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTML 表を効果的に装飾する方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="A_typical_HTML_table" name="A_typical_HTML_table">典型的な HTML 表</h2> + +<p>典型的な HTML 表を見ることから始めましょう。 まあ、典型的な言い方ですが、ほとんどの HTML 表の例は、靴、天気、あるいは従業員に関するものです。 私達はイギリスの有名なパンクバンドについてそれを作ることで、もっと面白くすることにしました。 マークアップはこんな感じです。</p> + +<pre class="brush: html notranslate"><table> + <caption>A summary of the UK's most famous punk bands</caption> + <thead> + <tr> + <th scope="col">Band</th> + <th scope="col">Year formed</th> + <th scope="col">No. of Albums</th> + <th scope="col">Most famous song</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... 簡潔にするためにいくつかの行を削除 + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></pre> + +<p>{{htmlattrxref("scope","th")}}、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}} などの機能のおかげで、表はうまくマークアップされ、簡単に装飾を整えられ、アクセスしやすくなりました。 残念なことに、画面に表示したときは見栄えがよくありません（<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> でライブを見る）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>それは窮屈に見え、読みにくく、そして退屈です。 これを修正するために CSS を使用する必要があります。</p> + +<h2 id="Active_learning_Styling_our_table" name="Active_learning_Styling_our_table">テーブルのスタイリング</h2> + +<p>テーブルの例を一緒にスタイリングしてみましょう。</p> + +<ol> + <li>まず始めに、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">サンプルマークアップ</a>のローカルコピーを作成し、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a> の両方の画像をダウンロードして、3つのファイルをローカルコンピュータのどこかの作業ディレクトリに配置します。</li> + <li>次に、<code>style.css</code> という名前の新しいファイルを作成し、他のファイルと同じディレクトリに保存します。</li> + <li>{{htmlelement("head")}} の内側に次の HTML 行を配置して、CSS を HTML にリンクします。 + <pre class="brush: html notranslate"><link href="style.css" rel="stylesheet" type="text/css"></pre> + </li> +</ol> + +<h3 id="Spacing_and_layout" name="Spacing_and_layout">スペーシングとレイアウト</h3> + +<p>最初にすべきことは、スペーシングやレイアウトを整理することです — デフォルトの表の装飾はとても窮屈です！ これを行うには、<code>style.css</code> ファイルに次の CSS を追加します。</p> + +<pre class="brush: css notranslate">/* spacing */ + +table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 3px solid purple; +} + +thead th:nth-child(1) { + width: 30%; +} + +thead th:nth-child(2) { + width: 20%; +} + +thead th:nth-child(3) { + width: 15%; +} + +thead th:nth-child(4) { + width: 35%; +} + +th, td { + padding: 20px; +}</pre> + +<p>注意すべき最も重要な部分は次のとおりです。</p> + +<ul> + <li>{{cssxref("table-layout")}} の値を <code>fixed</code> に設定すると、デフォルトで表の動作が多少予測しやすくなるため、通常は表に設定することをお勧めします。 通常、表の列は、含まれるコンテンツの量に応じてサイズが変更される傾向があり、これは奇妙な結果を生むことがあります。 <code>table-layout: fixed</code> を使うと、見出しの幅に応じてカラムのサイズを調整し、その内容を適切に処理することができます。そのために、<code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) セレクタ（<code><thead></code> 要素の中の <code><th></code> 要素で、シーケンス中の <em>n</em> 番目の子を選択する）で4つの異なる見出しを選択し、それらに設定されたパーセンテージの幅を与えています。列全体の幅はその見出しの幅に従うので、表の列のサイズを変更するのに適した方法です。 Chris Coyier は、このテクニックを <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a> でさらに詳しく説明しています。<br> + <br> + これは 100% の {{cssxref("width")}} と結合されています。 つまり、表は入れられているコンテナをすべて満たし、とてもレスポンシブになります（しかし、狭い画面幅で見栄えを良くするにはまだ作業が必要です）。</li> + <li>{{cssxref("border-collapse")}} の <code>collapse</code> の値は、あらゆる表の装飾の取り組みにおける標準的なベストプラクティスです。 デフォルトでは、下の画像に示すように、表要素に境界線を設定すると、境界線の間に間隔が空くことになります。<img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;"> これはあまり見栄えがよくありません（それはあなたが望む外観かもしれませんが、誰が知っていますか？）。 <code>border-collapse: collapse;</code> を設定すると、境界線は1つに折りたたまれ、次のようにずっと良く見えます。<img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> + <li>表全体を囲むように {{cssxref("border")}} を付けています。 これは、後で表のヘッダーとフッターに境界線を付けるために必要です — 表の外側全体に境界線がなく、ギャップで終わる場合、それは本当に奇妙でまとまりのないものに見えます。</li> + <li>{{htmlelement("th")}} 要素と {{htmlelement("td")}} 要素に {{cssxref("padding")}} を設定しました。 これにより、データ項目に余裕を持たせることができ、表がもっと見やすくなります。</li> +</ul> + +<p>この時点で、表はすでにずっと良く見えています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Some_simple_typography" name="Some_simple_typography">簡単なタイポグラフィ</h3> + +<p>それでは、テキストを少し整理しましょう。</p> + +<p>まず第一に、パンクバンドについての表にふさわしいフォントを <a href="https://www.google.com/fonts">Google Fonts</a> で見つけてあります。 望むならそこに行って、別なものを探すことができます。私たちが提供する {{htmlelement("link")}} 要素とカスタムの {{cssxref("font-family")}} 宣言を Google Fonts が与えるものと置き換えるだけです。</p> + +<p>まず、HTML <code>head</code> の既存の {{htmlelement("link")}} 要素のすぐ上に、次の <code><link></code> 要素を追加します。</p> + +<pre class="brush: html notranslate"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> + +<p>そして、<code>style.css</code> ファイルの以前の追加の下に、次の CSS を追加します。</p> + +<pre class="brush: css notranslate">/* typography */ + +html { + font-family: 'helvetica neue', helvetica, arial, sans-serif; +} + +thead th, tfoot th { + font-family: 'Rock Salt', cursive; +} + +th { + letter-spacing: 2px; +} + +td { + letter-spacing: 1px; +} + +tbody td { + text-align: center; +} + +tfoot th { + text-align: right; +}</pre> + +<p>ここに表に固有のものは何もありません。 読みやすくするために、次のようにフォントの装飾を調整しています。</p> + +<ul> + <li>グローバルなサンセリフのフォントスタックを設定しました。 これは純粋に装飾的な選択です。 また、素敵に汚れた、パンクな外観のために {{htmlelement("thead")}} 要素内の見出しと {{htmlelement("tfoot")}} 要素内の見出しにもカスタムフォントを設定しました。</li> + <li>読みやすくするために、見出しとセルに {{cssxref("letter-spacing")}} を設定しています。 繰り返しますが、主に装飾的な選択です。</li> + <li>{{htmlelement("tbody")}} 内の表セル内のテキストを見出しと揃えるように中央揃えにしました。 デフォルトでは、セルは {{cssxref("text-align")}} に <code>left</code> の値が与えられ、見出しは <code>center</code> の値が与えられますが、一般的には、両方の揃えを同じに設定する方が見栄えがよくなります。 見出しフォントのデフォルトの太字は、見た目を区別するのに十分です。</li> + <li>{{htmlelement("tfoot")}} 内の見出しは、データと視覚的に関連付けやすくなるように右揃えしています。</li> +</ul> + +<p>結果は少しきれいに見えます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Graphics_and_colors" name="Graphics_and_colors">グラフィックスと色</h3> + +<p>今度はグラフィックと色です！ 表はパンクとその態度でいっぱいですので、それに合わせていくつかの明るい印象的な装飾を与える必要があります。 心配しないで、表をそんなに騒々しくする必要はありません — もっと微妙で上品な何かを選ぶことができます。</p> + +<p>次の CSS を <code>style.css</code> ファイルの一番下に再び追加してください。</p> + +<pre class="brush: css notranslate">thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; +} + +thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; +} +</pre> + +<p>繰り返しますが、ここでは表に固有のものは何もありませんが、いくつか注意することは価値があります。</p> + +<p>{{htmlelement("thead")}} と {{htmlelement("tfoot")}} に {{cssxref("background-image")}} を追加し、ヘッダー内とフッター内のすべてのテキストの {{cssxref("color")}} を白に変更して（そして {{cssxref("text-shadow")}} を指定して）読みやすくしています。 読みやすいように、テキストが背景と比べてコントラストがあるようにしてください。</p> + +<p>また、ヘッダー内とフッター内の {{htmlelement("th")}} 要素と {{htmlelement("td")}} 要素に線形グラデーションを追加して、テクスチャをきれいにし、それらの要素に明るい紫色の境界線を付けました。 複数のネストした要素を使用できるようにしておくと、スタイルを重ね合わせることができます。 はい、複数の背景画像を使用して {{htmlelement("thead")}} 要素と {{htmlelement("tfoot")}} 要素に背景画像と線形グラデーションの両方を配置することもできましたが、複数の背景画像や線形グラデーションをサポートしない古いブラウザーの利点のために別々に行うことにしました。</p> + +<h4 id="Zebra_striping" name="Zebra_striping">ゼブラストライピング</h4> + +<p><strong>ゼブラストライプ</strong>（zebra stripes）を実装する方法を示すために別のセクションを捧げたいと思います — 表のさまざまなデータ行を解析して読みやすくするために、行の色を交互に並べます。 <code>style.css</code> ファイルの一番下に次の CSS を追加します。</p> + +<pre class="brush: css notranslate">tbody tr:nth-child(odd) { + background-color: #ff33cc; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +tbody tr { + background-image: url(noise.png); +} + +table { + background-color: #ff33cc; +}</pre> + +<ul> + <li>先ほど、{{cssxref(":nth-child")}} セレクタが特定の子要素を選択するために使われていたのを見ました。 式をパラメータとして指定することもできるので、一連の要素を選択します。 式 <code>2n-1</code> はすべての奇数番号の子（1、3、5 など）を選択し、式 <code>2n</code> はすべての偶数番号の子（2、4、6 など）を選択します。 上のコードでは <code>odd</code> と <code>even</code> のキーワードを使っていますが、それは前述の式とまったく同じです。 この場合、奇数行と偶数行に異なる（けばけばしい）色を付けます。</li> + <li>また、すべての本体行に繰り返しの背景タイルを追加しました。 これは、テクスチャを提供するためのわずかなノイズです（視覚的な歪みが少しある半透明の <code>.png</code>）。</li> + <li>最後に、<code>:nth-child</code> セレクタをサポートしていないブラウザーでも本体行に背景があるように、表全体の背景色を単色にしました。</li> +</ul> + +<p>この色の爆発により、以下のような見た目になります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>さて、これはあなたの好みではなく、少々限度を超えているかもしれませんが、ここで主張しようとしているのは、表が退屈で学術的である必要はないということです。</p> + +<h3 id="Styling_the_caption" name="Styling_the_caption">キャプションの装飾</h3> + +<p>表でやるべきことがもう一つあります — キャプションの装飾です。 これを行うには、<code>style.css</code> ファイルの一番下に次のコードを追加します。</p> + +<pre class="brush: css notranslate">caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p>{{cssxref("caption-side")}} プロパティに、<code>bottom</code> の値が与えられている以外に、ここで注目に値するものは何もありません。 これにより、キャプションは表の下に配置され、他の宣言と共にこの最終的な外観が得られます（<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> でライブで見る）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="Table_styling_quick_tips" name="Table_styling_quick_tips">表の装飾のちょっとした助言</h2> + +<p>先に進む前に、上に示した最も有用なポイントの簡単なリストをお送りします。</p> + +<ul> + <li>表のマークアップをできる限り単純にし、物事を柔軟に保ちます。 例えば、パーセントを使用することによって、デザインはよりレスポンシブになります。</li> + <li>{{cssxref("table-layout")}}<code>: fixed</code> を使用すると、見出し（{{htmlelement("th")}}）の {{cssxref("width")}} を設定して列幅を簡単に設定でき、より予測可能な表レイアウトを作成できます。</li> + <li>{{cssxref("border-collapse")}}<code>: collapse</code> を使用して、表要素の境界線を互いに折りたたみ、見た目をよりきれいにして制御しやすくします。</li> + <li>{{htmlelement("thead")}}、{{htmlelement("tbody")}}、{{htmlelement("tfoot")}} を使用して表を論理的なまとまりに分割し、CSSを適用するための特別な場所を提供することで、必要に応じてスタイルを重ねることが容易になります。</li> + <li>行を読みやすくするために、ゼブラストライピングを使用します。</li> + <li>{{cssxref("text-align")}} を使用して、{{htmlelement("th")}} と {{htmlelement("td")}} のテキストを揃えることで、きれいにして見やすくします。</li> +</ul> + +<h2 id="あなたのスキルをテストしてください！">あなたのスキルをテストしてください！</h2> + +<p>この記事では多くの情報を取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます。<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks">Test your skills: tables</a> を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>テーブルのスタイリングも終わりに近づいてきたので、他にも何か時間を割くものが必要になってきました。次の記事では、CSS をデバッグする方法を探ります。レイアウトが思うように見えない、プロパティが適用されないなどの問題を解決する方法です。これには、ブラウザの DevTools を使用して問題を解決する方法についての情報も含まれています。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/the_box_model/index.html b/files/ja/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..aca49d9dd1 --- /dev/null +++ b/files/ja/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,343 @@ +--- +title: ボックスモデル +slug: Learn/CSS/Building_blocks/The_box_model +tags: + - Beginner + - CSS + - Learn + - border + - box model + - display + - margin + - padding +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<p>CSS にはボックスの概念があり、これを理解することは 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>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS のボックスモデルとその構成要素、代替モデルへの切り替えについて学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Block_and_inline_boxes" name="Block_and_inline_boxes">ブロックボックスとインラインボックス</h2> + +<p>CSS には、<strong>ブロックボックス</strong>と<strong>インラインボックス</strong>の 2 種類のボックスがあります。これらの特性は、ページフローの観点から、およびページ上の他のボックスとの関係でボックスがどのように動作するかを示します。</p> + +<p>ボックスがブロックとして定義されている場合、次のように動作します:</p> + +<ul> + <li>ボックスはインライン方向に伸びて、コンテナで使用可能なスペースを埋めます。 ほとんどの場合、これは、ボックスが container と同じ幅になり、使用可能なスペースの 100% を占めることを意味します。</li> + <li>ボックスは新しい行に分割されます。</li> + <li>{{cssxref("width")}} と {{cssxref("height")}} のプロパティが尊重されます。</li> + <li>padding、margin および border により、他の要素がボックスから遠ざけられます。</li> +</ul> + +<p>表示タイプをインラインに変更することを決定しない限り、デフォルトでは見出し (例: <code><h1></code>) や <code><p></code> などの要素はすべて外部表示タイプとして <code>block</code> を使用します。</p> + +<p>ボックスの外側の表示タイプが <code>inline</code> の場合:</p> + +<ul> + <li>ボックスは改行されません。</li> + <li>{{cssxref("width")}} と {{cssxref("height")}} のプロパティは適用されません。</li> + <li>padding、margin および border が適用されますが、他のインラインボックスがボックスから移動することはありません。</li> +</ul> + +<p>リンクに使用される <code><a></code> 要素や、<code><span></code>、<code><em></code> および <code><strong></code> はすべて、デフォルトではインラインで表示される要素の例です。</p> + +<p>要素に適用されるボックスのタイプは、<code>block</code> や <code>inline</code> などの {{cssxref("display")}} プロパティ値によって定義され、<code>display</code> の<strong>外側</strong>の値に関連します。</p> + +<h2 id="Aside_Inner_and_outer_display_types" name="Aside_Inner_and_outer_display_types">余談: 内側と外側の表示タイプ</h2> + +<p>この時点で、<strong>内側</strong>と<strong>外側</strong>の表示タイプについても説明するべきでしょう。上記のように、CSS のボックスには<em>外側</em>の表示タイプがあり、ボックスがブロックかインラインかを詳細に示します。</p> + +<p>ただし、ボックスには内部表示タイプもあり、これにより、そのボックス内の要素のレイアウト方法が決まります。デフォルトでは、ボックス内の要素は<strong><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常のフロー</a></strong>でレイアウトされます。つまり、他のブロック要素やインライン要素と同じように動作します（上記で説明したように）。</p> + +<p>ただし、<code>flex</code> などの <code>display</code> の値を使用して、内部の表示タイプを変更できます。要素に <code>display: flex;</code> を設定する場合、外側の表示タイプは <code>block</code> ですが、内側の表示タイプは <code>flex</code> に変更されます。このボックスの直接の子要素はすべてフレックスアイテムになり、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> 仕様で規定されているルールに従ってレイアウトされます。これについては後で学習します。</p> + +<div class="blockIndicator note"> +<p>注：ディスプレイの値、およびブロックおよびインラインレイアウトでのボックスの動作の詳細については、<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">ブロックおよびインラインレイアウト</a>に関する MDN ガイドを参照してください。 </p> +</div> + +<p>CSS レイアウトについてさらに詳しく学習すると、<code>flex</code> や、例えば <code><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">grid</a></code> のようなボックスに設定できる他のさまざまな内部の値と出会うでしょう。</p> + +<p>ただし、ブロックおよびインラインレイアウトは、ウェブ上のデフォルトの動作です。前述のように、<em>通常のフロー</em>と呼ばれることもあります。他の指示がない場合、ボックスはブロックまたはインラインボックスとしてレイアウトされるためです。</p> + +<h2 id="Examples_of_different_display_types" name="Examples_of_different_display_types">さまざまな表示タイプの例</h2> + +<p>次に進み、いくつかの例を見てみましょう。以下に、3 つの異なる HTML 要素があります。これらはすべて、外部表示タイプの <code>block</code> を持っています。1 つ目は段落で、CSS で border が追加されています。ブラウザーはこれを block box としてレンダリングするため、段落は新しい行で始まり、利用可能な全幅に拡張されます。</p> + +<p>2 番目はリストで、これは <code>display：flex</code> を使用してレイアウトされます。これにより、コンテナ内のアイテムのフレックスレイアウトが確立されますが、リスト自体は block boxであり、段落と同様に、container の幅いっぱいに拡張され、新しい行に分割されます。</p> + +<p>この下にブロックレベルの段落があり、その中に 2 つの <code><span></code> 要素があります。通常、これらの要素は <code>inline</code> ですが、要素の 1 つにブロックのクラスがあり、<code>display: block</code> に設定しました。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}</p> + +<p>この次の例では、<code>inline</code> 要素の動作を確認できます。最初の段落の <code><span></code> はデフォルトではインラインのため、強制的に改行しません。</p> + +<p>また、<code>display: inline-flex</code> に設定された <code><ul></code> 要素があり、一部の flex アイテムの周りにインラインボックスを作成します。</p> + +<p>最後に、<code>display: inline</code> に設定された 2 つの段落があります。inline flex container と段落はすべて、ブロックレベルの要素として表示されている場合のように新しい行に分割されるのではなく、1 行で一緒に実行されます。</p> + +<p><strong>この例では、<code>display: inline</code> を <code>display: block</code> に、または<code>display: inline-flex</code> を <code>display: flex</code> に変更して、これらの表示モードの間を切り替えられます。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p> + +<p>これらのレッスンの後半では、フレックスレイアウトなどの問題と出会います。現時点で覚えておくべき重要な点は、<code>display</code> プロパティの値を変更すると、ボックスの外側の表示タイプがブロックかインラインかを変更できるため、レイアウト内の他の要素と一緒に表示する方法が変わることです。</p> + +<p>レッスンの残りの部分では、外側のディスプレイタイプに集中します。</p> + +<h2 id="What_is_the_CSS_box_model" name="What_is_the_CSS_box_model">CSS のボックスモデルとは？</h2> + +<p>完全な CSS ボックスモデルはブロックボックスに適用され、インラインボックスはボックスモデルで定義された動作の一部のみを使用します。 モデルは、ボックスのさまざまな部分 (マージン、ボーダー、パディング、コンテンツ) がどのように連携してページに表示できるボックスを作成するかを定義します。 さらに複雑さを追加するために、標準および代替ボックスモデルがあります。</p> + +<h3 id="Parts_of_a_box" name="Parts_of_a_box">ボックスの構成</h3> + +<p>CSSでブロックボックスを構成するには、次のものがあります。</p> + +<ul> + <li><strong>Content box</strong>: コンテンツが表示される領域。{{cssxref ("width")}} や {{cssxref("height")}} などのプロパティを使用してサイズを変更できます。</li> + <li><strong>Padding box</strong>: パディングはコンテンツの周囲に空白として配置されます。 そのサイズは {{cssxref ("padding")}} および関連するプロパティを使用して制御できます。</li> + <li><strong>Border box</strong>: 境界ボックスは、コンテンツとパディングをラップします。そのサイズとスタイルは、{{cssxref ("border")}} および関連するプロパティを使用して制御できます。</li> + <li><strong>Margin box</strong>: マージンは最も外側のレイヤーで、このボックスと他の要素の間の空白としてコンテンツ、パディング、および境界線をラップします。そのサイズは、{{cssxref ("margin")}} および関連するプロパティを使用して制御できます。</li> +</ul> + +<p>以下の図は、これらのレイヤーを示しています:<img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="The_standard_CSS_box_model" name="The_standard_CSS_box_model">CSS ボックスモデルの標準</h3> + +<p>標準のボックスモデルでは、ボックスに <code>width</code> と <code>height</code> を指定すると、<em>コンテンツボックス</em>の幅と高さが定義されます。 次に、すべての padding と border がその幅と高さに追加され、ボックスが占める合計サイズが取得されます。 これを下の画像に示します。</p> + +<p>ボックスに <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> および <code>padding</code> を定義する次の CSS があると仮定した場合:</p> + +<pre class="brush: css notranslate">.box { + width: 350px; + height: 150px; + margin: 25px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>標準のボックスモデルを使用してボックスが占めるスペースは、実際には 410px (350 + 25 + 25 + 5 + 5) で、高さは 210px (150 + 25 + 25 + 5 + 5) であり、padding と border は コンテンツボックスに使用される幅に追加されます。<img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> マージンは、ボックスの実際のサイズにはカウントされません。確かに、ボックスがページ上で占める合計スペースに影響しますが、ボックスの外側のスペースにのみ影響します。ボックスの領域は境界線で停止します—マージンまでは達しません。</p> +</div> + +<h3 id="The_alternative_CSS_box_model" name="The_alternative_CSS_box_model">CSS ボックスモデルの代替</h3> + +<p>ボックスの実際のサイズを取得するために border と padding を追加する必要があるのはかなり不便だと思うかもしれませんが、正しい感覚でしょう！このため、CSS には、標準ボックスモデルのしばらく後に導入された代替ボックスモデルがありました。このモデルを使用すると、幅はページ上の表示ボックスの幅になるため、コンテンツ領域の幅は、その幅からパディングとボーダーの幅を引いたものになります。上記と同じ CSS を使用すると、以下の結果が得られます (幅 = 350px、高さ = 150px)。</p> + +<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>デフォルトでは、ブラウザーは、標準のボックスモデルを使用します。もし要素に対して代替モデルをオンにしたい場合は、<code>box-sizing: border-box</code> を設定することでそうできます。これにより、設定した任意のサイズで定義された領域として境界ボックスを取るようにブラウザーに指示しています。</p> + +<pre class="brush: css notranslate"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>すべての要素で代替ボックスモデルを使用することを望み、かつこれが開発者の間で一般的な選択である場合、以下のスニペットで見られるように、<code><html></code> 要素で <code>box-sizing</code> プロパティを設定して、他のすべての要素でその値を継承するように設定してください。この背景にある考え方を理解したい場合は、<a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">ボックスサイズ設定に関する CSS トリック</a>の記事を参照してください。</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 興味深い歴史 — Internet Explorer は以前は代替ボックスモデルにデフォルト設定されていましたが、切り替え可能なメカニズムはありませんでした。</p> +</div> + +<h2 id="Playing_with_box_models" name="Playing_with_box_models">ボックスモデルを試してみる</h2> + +<p>以下の例では、2 つのボックスを見ることができます。両方とも <code>.box</code> のクラスを持ち、同じ <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code>、および<code>padding</code> を提供します。唯一の違いは、2 番目のボックスが代替ボックスモデルを使用するように設定されていることです。</p> + +<p><strong>2 番目のボックスのサイズを変更 (<code>.alternate</code> クラスに CSS を追加) して、幅と高さを最初のボックスに一致させることはできますか？</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ここ</a>でこのタスクの解決策を見つけることができます。</p> +</div> + +<h3 id="Use_browser_DevTools_to_view_the_box_model" name="Use_browser_DevTools_to_view_the_box_model">ブラウザーの開発ツールを利用して、ボックスモデルを見てみる</h3> + +<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発ツール</a>を使用すると、ボックスモデルをとても簡単に理解できます。Firefox の DevTools で要素を調べると、要素のサイズに加えて、margin、padding、border を確認できます。 この方法で要素を検査することは、あなたのボックスが本当にあなたが思っているサイズであるかどうかを知る素晴らしい方法です！</p> + +<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="Margins_padding_and_borders" name="Margins_padding_and_borders">Margins、padding および borders</h2> + +<p>上記の例では、{{cssxref ("margin") }}、{{cssxref ("padding") }} および{{cssxref ("border") }} のプロパティが動作しているのを見てきました。 この例で使用されるプロパティは <strong>shorthands</strong> であり、ボックスの 4 辺すべてを一度に設定できます。これらの shorthands には、同等の longhand プロパティもあり、ボックスのさまざまな側面を個別に制御できます。</p> + +<p>これらのプロパティをさらに詳しく見てみましょう。</p> + +<h3 id="Margin" name="Margin">マージン</h3> + +<p>マージンは、ボックスの周りの見えないスペースです。 他の要素をボックスから遠ざけます。 マージンには正または負の値を設定できます。 ボックスの片側に負のマージンを設定すると、ページ上の他の部分と重なる場合があります。 標準または代替のボックスモデルを使用しているかどうかにかかわらず、表示ボックスのサイズが計算された後、マージンは常に追加されます。</p> + +<p>{{cssxref ("margin") }} プロパティを使用して要素のすべてのマージンを一度に制御するか、同等の longhand properties を使用して各辺を個別に制御できます。</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>次の例では、マージン値を変更して、この要素と含まれる要素の間のスペース (負のマージンの場合) を作成または削除するマージンのためにボックスがどのように押し出されるかを確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}</p> + +<h4 id="Margin_collapsing" name="Margin_collapsing">マージンの相殺</h4> + +<p>マージンについて理解する重要なことは、マージンの相殺の概念です。 マージンが接する 2 つの要素が あり、両方のマージンが正の場合、それらのマージンは結合して 1 つのマージンになります。これは、個々のマージンのうちの最大サイズです。一方または両方のマージンが負の場合、負の値の量が合計から差し引かれます。</p> + +<p>以下の例では、2 つの段落があります。 上の段落には、50 ピクセルの <code>margin-bottom</code> があります。2 番目の段落の <code>margin-top</code> は 30 ピクセルです。マージンは一緒に折りたたまれているため、ボックス間の実際のマージンは 50 ピクセルであり、2 つのマージンの合計ではありません。</p> + +<p><strong>これをテストするには、第二段落の <code>margin-top</code> を 0 に設定します。2 つの段落間のマージンは変更されません。第一段落の <code>margin-bottom</code> に設定された 50 ピクセルを保持します。-10pxに設定すると、全体のマージンが40pxになることがわかります— 50pxから差し引かれま</strong>す。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}</p> + +<p>マージンが相殺される場合と相殺されない場合を規定する多くのルールがあります。 詳細については、<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a>に関する詳細ページをご覧ください。現時点で覚えておくべき主なことは、マージンの相殺が起こることです。マージンによるスペースを作成していて、期待したスペースが得られない場合、おそらくこれが起こっています。</p> + +<h3 id="Borders" name="Borders">Borders</h3> + +<p>border は、ボックスの margin と padding の間に描かれます。標準ボックスモデルを使用している場合、border のサイズがボックスの <code>width</code> と <code>height</code> に追加されます。代替ボックスモデルを使用している場合、border のサイズが利用可能な <code>width</code> と <code>height</code> の一部を占めるため、コンテンツボックスが小さくなります。</p> + +<p>border のスタイル設定には、多数のプロパティがあります。4 つの border があり、各 border には、操作したいスタイル、width、color があります。</p> + +<p>{{cssxref("border")}} プロパティを使用して、4 つすべての border の width、color およびスタイルを一度に設定できます。</p> + +<p>各辺のスタイルを個別に設定するには、次を使用できます:</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>すべての辺の幅、スタイル、色を設定するには、次を使用します:</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>片側の色、スタイル、または width を設定するには、最もきめ細かい longhand プロパティのいずれかを使用できます:</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>以下の例では、さまざまなショートハンドとロングハンドを使用して border を作成しています。 さまざまなプロパティを試して、それらがどのように機能するか理解していることを確認してください。border プロパティの MDN ページには、選択可能なさまざまな border スタイルに関する情報が表示されます。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}</p> + +<h3 id="Padding" name="Padding">パディング</h3> + +<p>padding は、border とコンテンツ領域の間にあります。margin とは異なり、負の量の padding はできないため、値は 0 または正の値でなければなりません。要素に適用された背景は padding の背後に表示され、通常は border からコンテンツ遠ざけるために使用されます。</p> + +<p>{{cssxref("padding")}} プロパティを使用して要素の各側の padding を個別に制御するか、同等のロングハンドプロパティを使用して各側を個別に制御できます。</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>以下の例で <code>.box</code> クラスの padding の値を変更すると、ボックスに関連してテキストの開始位置が変わることがわかります。</strong></p> + +<p><strong><code>.container</code> クラスの padding を変更することもできます。これにより、container とボックスの間にスペースができます。padding は任意の要素で変更でき、border と要素内にあるものとの間にスペースを作ります。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}</p> + +<h2 id="The_box_model_and_inline_boxes" name="The_box_model_and_inline_boxes">ボックスモデルとインラインボックス</h2> + +<p>上記のすべては、ブロックボックスに完全に適用されます。一部のプロパティは<code><span></code> 要素によって作成されたものなどの、インラインボックスにも適用できます。</p> + +<p>以下の例では、段落内に <code><span></code> があり、<code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> および <code>padding</code> が適用されています。width と height が無視されていることがわかります。マージン、パディング、ボーダーは尊重されますが、他のコンテンツとインラインボックスの関係は変わらないため、パディングとボーダーは段落内の他の単語と重なります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}</p> + +<h2 id="Using_display_inline-block" name="Using_display_inline-block">display: inline-block を使用する</h2> + +<p><code>display</code> には特別な値があり、<code>inline</code> と <code>block</code> の中間に位置するものを提供します。これは、アイテムを新しい行に分割したくないが、<code>width</code> と <code>height</code> を尊重し、上記の上書きを避けたい場合に便利です。</p> + +<p><code>display: inline-block</code> を持つ要素は、私たちがすでに知っているブロックのサブセットを実行します:</p> + +<ul> + <li><code>width</code> と <code>height</code> のプロパティが尊重されます。</li> + <li>padding、margin、および border により、他の要素がボックスから遠ざけられます。</li> +</ul> + +<p>ただし、新しい行に分割されることはなく、<code>width</code> プロパティと <code>height</code> プロパティを明示的に追加した場合にのみ、コンテンツよりも大きくなります。</p> + +<p><strong>次の例では、<code><span></code> 要素に <code>display: inline-block</code> を追加しました。これを</strong> <strong><code>display: block</code> </strong> <strong>変更したり、行を完全に削除したりして、表示モデルの違いを確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}</p> + +<p>これが役立つのは、padding を追加して、リンクのヒット領域を大きくしたい場合です。<code><a></code> は <code><span></code> のようなインライン要素です。 <code>display：inline-block</code> を使用して padding を設定できるようにし、ユーザーがリンクをクリックしやすくします。</p> + +<p>これはナビゲーションバーにかなり頻繁に表示されます。以下のナビゲーションは、flexbox を使用して行に表示され、<code><a></code> にカーソルを合わせたときに背景色を変更できるように、<code><a></code> 要素に padding を追加しました。paddingは、<code><ul></code> 要素の border に重なるように見えます。これは、<code><a></code>がインライン要素であるためです。</p> + +<p><strong><code>display: inline-block</code> を <code>.links-list a</code> セレクターを使用してルールに追加すると、padding が他の要素によって尊重されるようにすることで、この問題がどのように修正されるかがわかります。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>以上が、ボックスモデルについて理解する必要があるほとんどのことです。レイアウト内の大きなボックスの大きさについて混乱している場合は、このレッスンに戻ってください。</p> + +<p>次のレッスンでは<a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景とボーダー</a>を使用してプレーンボックスをより面白くする方法を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.html b/files/ja/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..1ebb091ee2 --- /dev/null +++ b/files/ja/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,407 @@ +--- +title: CSS の値と単位 +slug: Learn/CSS/Building_blocks/Values_and_units +tags: + - Beginner + - CSS + - Function + - Image + - Learn + - Number + - Position + - color + - length + - percentage + - units + - values +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p><font>CSS で使用されるすべてのプロパティには、特定の値または組み合わせのみが許可されており、MDN の各プロパティに関するページでは有効な値を理解するのに役立ちます。このレッスンでは、もっとも一般的な値と単位について見ていきます。</font></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 の動作概念（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS プロパティで使用されるさまざまな種類の値と単位について学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_CSS_value" name="What_is_a_CSS_value">CSS での値とは？</h2> + +<p>CSS の仕様や MDN のプロパティページでは、<code><color></code> や <code><length></code> のような角括弧で囲まれた値を見つけることができます。<code><color></code> の値がその特定のプロパティとして妥当なとき、ここではそのプロパティの妥当な色を表していることを意味しています。具体的な値は <code><a href="/ja/docs/Web/CSS/color_value"><color></a></code> のリファレンスページを参照してください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <em>データタイプ </em>を参照する CSS の値を確認しましょう。これは、基本的に交換可能です — データタイプとして参照する、CSS であなたが見るものは装飾のための値を示しています。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: CSS の値は<>括弧で示すことが多く、CSS のプロパティによって違います(例えば{{cssxref("color")}} プロパティや <a href="/ja/docs/Web/CSS/color_value"><color></a> データタイプがあります)。CSS のデータタイプ型と HTML の要素は違いますので、混乱しないでください。両方とも<>括弧を使います — しかしそれらを使用するコンテキストは全く異なります。</p> +</div> + +<p>次の例では、キーワードを使用して章立ての色を設定し、かつ背景色を <code>rgb()</code> 関数を使って指定します。:</p> + +<pre class="brush: css notranslate"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>CSS の値は指定可能なサブ値の集合を定義します。これは、<code><color></code> が妥当な箇所では、異なる種類の色の値、キーワード、16進数、<code>rgb()</code> 関数などで設定できるかどうか考える必要はありません。あなたのブラウザーがサポートしていると仮定できる、<em>あらゆる</em> 利用可能な <code><color></code> の値が指定できます。MDN のページはそれぞれのブラウザーがサポートしている値の情報を提供します。例えば、<code><a href="/ja/docs/Web/CSS/color_value"><color></a></code> のページには、ブラウザーの互換性のセクションがあり、サポートされているそれぞれの種類を見られます。</p> + +<p>ここでは見ることが多いいくつかのタイプの値や単位を確認しましょう。また例のさまざまな値を変えて試しましょう。</p> + +<h2 id="Numbers_lengths_and_percentages" name="Numbers_lengths_and_percentages">数値・長さ・割合</h2> + +<p>CSS では数値データ型をいくつかみるでしょう。次のものは数値に分類されています。:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">データタイプ</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/ja/docs/Web/CSS/integer"><integer></a></code></td> + <td><code><integer></code> (整数)は、<code>1024</code> や <code>-55</code> のようなすべての整数です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/CSS/number"><number></a></code></td> + <td><code><number></code> (数)は 10進数です。小数点のあるものとないものがあります。例えば、<code>0.255</code>、<code>128</code> や <code>-1.2</code> です。</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td><code><dimension></code> (寸法)は <code><number></code> に付属するものです。例えば、<code>45deg</code>, <code>5s</code>, それに <code>10px</code> です。<code><dimension></code> には <code><a href="/ja/docs/Web/CSS/length"><length></a></code> (長さ), <code><a href="/ja/docs/Web/CSS/angle"><angle></a></code> (角度), <code><a href="/ja/docs/Web/CSS/time"><time></a></code> (時間), さらに <code><a href="/ja/docs/Web/CSS/resolution"><resolution></a></code> (解像度)型があります。<a href="/ja/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/CSS/percentage"><percentage></a></code></td> + <td><code><percentage></code> (パーセント)は他の値との割合を表します。例えば、<code>50%</code>. この値は常に他の量との相対比です。例えば、ある要素の長さは、その親要素の長さが関連しています。</td> + </tr> + </tbody> +</table> + +<h3 id="Lengths" name="Lengths">Lengths(長さ)</h3> + +<p>数値型でもっともよく遭遇するのは、<code><length></code>です。例えば、<code>10px</code> (ピクセル) や <code>30em</code> です。CSS で使用される長さの種類は二つに分けられます。relative(相対)と absolute(絶対)です。この違いを理解することは非常に重大です。</p> + +<h4 id="Absolute_length_units" name="Absolute_length_units">絶対長の単位</h4> + +<p>次の単位はすべて <strong>absolute</strong> length units(絶対的な長さの単位) です。この単位は、他の長さとの関係で決まりません。一般的にこの単位は常に同じサイズと考えられます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">名前</th> + <th scope="col">換算</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centimeters センチメートル</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Millimeters ミリメートル</td> + <td>1mm = 1/10 cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarter-millimeters 1/4 ミリメートル</td> + <td>1Q = 1/40 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Inches インチ</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas パイカ</td> + <td>1pc = 1in の 1/6</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Points ポイント</td> + <td>1pt = 1in の 1/72</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Pixels ピクセル</td> + <td>1px = 1in の 1/96</td> + </tr> + </tbody> +</table> + +<p>これらの値は印刷には便利ですが、画面出力には向いていません。私たちは、スクリーン上の長さに、例えば <code>cm</code> (センチメートル)を使いません。よく使用するのは <code>px</code> (pixels/ピクセル)になります。</p> + +<h4 id="Relative_length_units" name="Relative_length_units">相対長の単位</h4> + +<p>Relative length units (相対的な長さの単位) は、何かとの比較によってサイズが決まります。それは、例えば、親要素のフォントサイズかもしれませんし、ビューポート(画面幅)かもしれません。この相対的な長さ単位はが便利なのは、それを作成するときにいくつかの点に注意して、そのページ内のテキストのサイズや他の要素の相対的なサイズで作成したときです。次の表にウェブ開発で便利な単位を紹介します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">関係先</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>親要素のフォントサイズ.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>その要素のフォントの文字 "x" の高さ</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>その要素のフォントの文字 "0" の幅</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>ルート要素のフォントサイズ</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>その要素の line-hight プロパティと同じ</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>ビューポート幅の 1%</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>ビューポート高さの 1%</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>ビューポート幅と高さの小さい方の 1%</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>ビューポート幅と高さの大きい方の 1%</td> + </tr> + </tbody> +</table> + +<h4 id="Exploring_an_example" name="Exploring_an_example">試してみる</h4> + +<p>次の例で、絶対的な長さの単位と相対的な長さの単位の振る舞いの違いを確認しましょう。最初のボックスには {{cssxref("width")}} がピクセル単位で指定されています。 <span class="tlid-translation translation" lang="ja"><span title="">絶対単位なので、この幅は他の何が変わっても同じままです。</span></span></p> + +<p>二番目のボックスは相対的な長さの単位の、ビューポート幅に関連した <code>vw</code> を使用しています。この値は、ビューポート幅と関連しており、10vw は ビューポート幅の 10% にあたります。もしブラウザー幅を変化させた場合、このボックスのサイズは変化します。しかし、このページは <code><a href="/ja/docs/Web/HTML/Element/iframe"><iframe></a></code> に埋め込んであるため、次の例は動作しません。この動作を確認するには、<a href="https://mdn.github.io/css-examples/learn/values-units/length.html">このリンクをブラウザーの別タブで開いて、例を確認してください。</a></p> + +<p>三番目のボックスは <code>em</code> 単位を使います。この単位はフォントサイズに関連しています。<code>1em</code> にあたるフォントサイズ設定は {{htmlelement("div")}}で指定してあります。これは<code>.wrapper</code> クラスがあります。 <span class="tlid-translation translation" lang="ja"><span title="">この値を1.5emに変更すると、すべての要素のフォントサイズが増加しますが、最後の項目のみ width がフォントサイズに相対的であるため、最後の項目のみが広くなります。</span></span></p> + +<p>上の手順を行った後で、これらの値を変更してどのようにふるまうかを確認してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_and_rems" name="ems_and_rems">em と rem</h4> + +<p><code>em</code> と <code>rem</code> は開発者がボックスやテキストまですべてのサイズを変更するときによく遭遇する相対的な長さの単位です。これらがどのように動作するか、どのように違いがあるかを理解しましょう。特に<a href="/ja/docs/Learn/CSS/Styling_text">スタイルテキスト</a> や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>のようなより複雑なテーマを扱うようになったときに価値があります。以下の例は、デモを提供しています。</p> + +<p>この HTML はネストしたリストの組です。全部で 3 つのリストがあり、どちらも同じ HTML です。唯一異なるのは、最初のものは <em>ems </em>クラスを持っており、二つ目のものは <em>rems</em> クラスを持っていることです。</p> + +<p>始めるにあたって、<code><html></code> 要素のフォントサイズを 16px に指定しました。</p> + +<p><strong>要約すると、em 単位は活字で言えば「私の親要素のフォントサイズ」を意味します。</strong><code>ems</code> の <code>class</code> を持つ {{htmlelement("ul")}} 内の {{htmlelement("li")}} 要素は、親要素からサイズを受け取ります。そのため、入れ子の各レベルは、それぞれのフォントサイズが <code>1.3em</code> (親のフォントサイズの1.3倍)に設定されているため、徐々に大きくなっていきます。</p> + +<p><strong>要約すると、この rem 単位は活字でいえば、「ルート要素のフォントサイズ」を意味します。</strong>(rem は"root em"を意味します) この <code>rems</code> の <code>class</code> を持つ {{htmlelement("ul")}} の内部の {{htmlelement("li")}} 要素はルート要素(<code><html></code>)からサイズ情報を取得します。 これは、ネストの各レベルが大きくなり続けないことを意味します。</p> + +<div title="ただし、CSSで<html> font-sizeを変更すると、その他のすべて（remサイズとemサイズの両方のテキスト）が相対的に変更されることがわかります。">ただし、CSSで <code><html></code> の <code>font-size</code> を変更すると、その他のすべて（ <code>rem</code> サイズと <code>em</code> サイズの両方のテキスト）が相対的に変更されることがわかります。</div> + +<div title="ただし、CSSで<html> font-sizeを変更すると、その他のすべて（remサイズとemサイズの両方のテキスト）が相対的に変更されることがわかります。"></div> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="Percentages" name="Percentages">Percentages(パーセント)</h3> + +<p>多くの場合、percentage (パーセント)は length(長さ)と同じ方法で使用します。percentages のあるものは、ある他の値との相対的な値を設定します。例えば、あなたがある要素の <code>font-size</code> に percentage を設定した場合、その親要素の <code>font-size</code> のパーセントを意味します。もしある <code>width</code> の値に percentage を使用した場合、その親要素の <code>width</code> のパーセントに設定されます。</p> + +<p>次の例では二つのパーセントでサイズ指定したボックスと、ピクセルでサイズ指定したボックスがあり、これらはそれぞれ同じクラス名を持っています。これは、それぞれ 200px と 40% の幅に設定されています。</p> + +<p>ここで異なるのは、二番目のボックスは 400 ピクセル幅のラッパーの内側にあることです。200px で指定したボックスは、一番目と二番目が同じ幅になっています。しかし、二番目の 40%指定したボックスは違います。二番目のボックスは 400 ピクセルの 40% の幅になります。最初のものよりかなり狭くなっています。</p> + +<p><strong>ラップするボックスの幅またはパーセントの値を変更してその影響を確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>次の例はフォントサイズをパーセントで指定しています。それぞれの <code><li></code> は 80% の <code>font-size</code> です。そのため、ネストしたリストはその親のサイズを継承するため、徐々にフォントサイズが小さくなっています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>注意: 多くの値には length(長さ) と percentage(パーセント)の両方を受け付けますが、中には length しか受け付けないものもあります。どのような値が受け付けられるかを確認するには、MDN プロパティリファレンスページを参照してください。許可される値が <code><a href="/ja/docs/Web/CSS/length-percentage"><length-percentage></a></code> の場合は length と percentage の両方を使用できます。しかし許可される値が <code><length></code> の場合、percentage は使用できません。</p> + +<h3 id="Numbers" name="Numbers">Numbers(数)</h3> + +<p>一部の値は、単位のない数値を受け入れます。 単位のない数値を受け入れるプロパティの例は、要素の不透明度（透明度）を制御する <code>opacity</code> プロパティです。 このプロパティは、<code>0</code>（完全に透明）〜 <code>1</code>（完全に不透明）の数値を受け入れます。</p> + +<p><strong>この下の例を見てください。<code>opacity</code> を <code>0</code> から <code>1</code> までの間の数に変えて、この箱とそのコンテンツがどのよう表示されるかを確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: CSS で値として数を使用する場合、その値を引用符で囲んではなりません。</p> +</div> + +<h2 id="Color" name="Color">色</h2> + +<p>CSS で色を指定する方法はたくさんありますが、その中には最近実装されたものもあります。テキストの色を指定する場合でも、背景の色を指定する場合でも、CSSではどこでも同じ色の値を使うことができます。</p> + +<p>最近のコンピューターで利用できる標準的な色のシステムは 24 ビットです。これは赤、緑、青のチャンネルでそれぞれ 256 の値を持てるため、およそ 1670万色 (256 x 256 x 256 = 16,777,216) の色を指定できることになります。CSS で色を指定するさまざまな方法を見てみましょう。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: このチュートリアルでは、普通のブラウザーがサポートしている、標準的な色の指定方法を見ていきます。他にも方法がありますが、それらはサポートされていないこともあり、標準的な方法ではありません。</p> +</div> + +<h3 id="Color_keywords" name="Color_keywords">カラーキーワード</h3> + +<p>この学習の章や MDN でもよく例を見る方法にカラーキーワードがあります。これは色を指定する方法で非常に単純で理解しやすいものです。カラーキーワードは、その色の名前そのものを入力するだけです。このカラーキーワードのリストは <code><a href="/ja/docs/Web/CSS/color_value"><color></a></code> の値のページで確認できます。</p> + +<p><strong>下の練習で別のカラーキーワードを試して、それがどのように作用するのか確認してください。</strong></p> + +<h3 id="Hexadecimal_RGB_values" name="Hexadecimal_RGB_values">16進数 RGB</h3> + +<p>次のカラーの値の種類は、あたながよく遭遇する 16進数を使うものです。それぞれの 16進数の値には、ハッシュ記号(#) に続いて、6 個の 16進数の数が続きます。この数には、0 から f までの 16 個の文字を使用します。(ここで f は 15 に相当) — つまり <code>0123456789abcdef</code> を使用します。この値の二文字はそれぞれ赤、緑、青のカラーチャンネルの値を表しています。そのため、16 x 16 = 256 つまり、それぞれのチャンネルに 256通りの値を指定できます。</p> + +<p>これらの値は少し複雑で、わかりにくいものです。しかし、16進数はキーワードより多くの用途で使用されます。あなたのカラースキームで表す、好きな色を 16進数で表現できるのです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>もう一度、値を変更させてどのように色が変化するか確認しましょう。</strong></p> + +<h3 id="RGB_and_RGBA_values" name="RGB_and_RGBA_values">RGB と RGBA</h3> + +<p>第三の方法として、RGB を説明します。RGB の値は関数 <code>rgb()</code> に渡して使います。この関数は、3 つのパラメータを受け取り、それぞれ、赤、緑、青のチャンネルの色の値として扱います。ちょうど 16進数での表記とよく似ています。RGB は 2 つの 16進数で表すのと違い 0 から 255 の 10進数の数で指定します。こちらの方が少しわかりやすいです。</p> + +<p>最後の表記を書き直して、RGB で表現してみましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>また、RGBA カラー方式もあります。これは、RGB カラー方式とまったく同じ方法で、RGB で表すすべての値を使用できます。しかし、RGBA は 4 つのパラメータをとり、4番目のパラメータは色のアルファチャンネル、つまり色の不透明度(または透明度)を表します。この 4番目のパラメータの値が <code>0</code> のとき完全な透明を表し、<code>1</code> のとき完全な不透明を表します。その間の値を指定してさまざまなレベルの透明度を指定できます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 色でアルファチャンネルを設定することと、より前に学んだ、{{cssxref("opacity")}} プロパティで設定することの違いに注意しましょう。opacity プロパティで設定した場合、その要素と要素内のすべてが透明になります。一方、RGBA カラーを指定した場合、透明になるのはそのカラーだけです。</p> +</div> + +<p>下記の例では、色付きの箱に含まれる背景画像を追加しました。そして箱にいろいろな透過値をセットしました — アルファチャンネルが小さくなるときに背景がどう表示されるか注意してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>この例では、アルファチャンネル値を変更してみて、色の出力にどう影響するのかを見ています。</strong></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ある時点で、最新のブラウザが更新され、rgba() と rgb()、そして hsl() と hsla() (後述) がお互いの純粋なエイリアスとなり、全く同じ動作をするようになりました。このため <code>rgba()</code> と <code>rgb()</code> の両方はアルファチャンネル値のある/ない色を受け入れています。上記の例の <code>rgba()</code> 関数を <code>rgb()</code> に変更して色が動作するのを見てください! どのスタイルを使うのかはあなた次第ですが、不透明と透明の色定義に別の関数を使うのは (とても) 少しブラウザーサポートが良くなって、コード内のどこで透明色を使っているかの目印になります。</p> +</div> + +<h3 id="HSL_and_HSLA_values" name="HSL_and_HSLA_values">HSL と HSLA</h3> + +<p>RGB よりサポートがちょっと少ないのが HSL 色モデルです (IE の古いバージョンではサポートされません)、これはデザイナーの関心から実装されました。赤、緑、青の代わりに、<code>hsl()</code> 関数は 色相(hue), 彩度(saturation), 輝度(lightness) の値を取り、これは約 1670 万色を、別の方法で分別するのに使われます。</p> + +<ul> + <li><strong>色相(Hue)</strong>: 色のベースとなるシェード。これは 0 から 360 の値を取り、色相環の角度を表します。</li> + <li><strong>彩度(Saturation)</strong>: 色がどれだけ飽和しているか? これは 0–100% の値を取り、0 は色がなく (グレーのシェードに見える)、100% はフルカラーの飽和となります。</li> + <li><strong>(Lightness)</strong>: 色がどれだけ明るいのか? こりは 0–100% の値を取り、0 は明度がなく (完全な黒に見える)、100% はフルの明度です (完全な白となる)。</li> +</ul> + +<p>RGB の例を HSL の色に更新すると次のようになります:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>RGB に RGBA があるように、HSL には同様な HSLA があり、アルファチャンネルの指定が同様にできます。デモとして RGBA の例を HSLA 色を使うようにしたものは次の通りです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>プロジェクトでどの色の値を使っても良いです。たいていのプロジェクトではカラーパレットを決めてから、この色（と決定した色指定の方法）を、プロジェクト全体を通して使います。色モデルを混用することもできますが、一貫させるために通常はプロジェクト全体で同じものを使うのがベストです!</p> + +<h2 id="Images" name="Images">画像</h2> + +<p><code><a href="/ja/docs/Web/CSS/image"><image></a></code> データタイプは画像が妥当な値となる場合に使われます。これは <code>url()</code> 関数で指定される実際の画像ファイルか、グラデーションです。</p> + +<p>下記の例では画像とグラデーションを CSS <code>background-image</code> プロパティに使っています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><image></code> がとり得る他の値もありますが、それは新しくてブラウザーサポートが貧弱です。それについて知りたい場合、MDN の <code><a href="/ja/docs/Web/CSS/image"><image></a></code> データタイプのページを確認してください。</p> +</div> + +<h2 id="Position" name="Position">位置</h2> + +<p><code><a href="/ja/docs/Web/CSS/position_value"><position></a></code> データタイプは 2次元座標を表しており、背景画像のような項目 (<code><a href="/ja/docs/Web/CSS/background-position">background-position</a></code> にて)の位置を決めるのに使われます。これは <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, <code>center</code> のようなキーワードを取って、ボックスの上や左の隅からオフセットさせる長さの値とともに、2次元のボックスの特定の境界にアイテムを揃えます。</p> + +<p>典型的な位置の値は 2 つの値を持ち — 最初は水平位置を、2 つ目は垂直位置をセットします。1 つの軸だけの値を指定する場合、もう 1 つはデフォルトで <code>center</code> となります。</p> + +<p>次の例では、背景画像をキーワードを使ってコンテナの右端の上から 40px の位置に配置しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>この値でいろいろ遊んでみて、画像がどう移動するか見てください。</strong></p> + +<h2 id="Strings_and_identifiers" name="Strings_and_identifiers">文字列と識別子</h2> + +<p>上記の例を通じて、キーワードが値として使われる場所を見てきました (例えば、<code><color></code> キーワードの例として <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, <code>goldenrod</code>)。このキーワードをより正確に述べると、CSS が理解できる特別な値の <em>識別子</em> です。このためそれは引用符で囲まれておらず、文字列として扱われません。</p> + +<p>CSS で文字列が使われる場所もあります、例えば、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#before%E3%81%8A%E3%82%88%E3%81%B3_after%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E7%94%9F%E6%88%90">生成されたコンテンツを指定するとき</a>です。この場合、値は文字列を示すようクォートで囲まれます。下記の例ではクォートで囲まれていない color キーワードと生成されたコンテンツ文字列を一緒に使っています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="Functions" name="Functions">関数</h2> + +<p>最後に見る値は関数として知られる値です。プログラミングでは、関数とは、繰り返されるタスクを実行するのに何度も呼ばれる、開発者とコンピューター両方の手間を省いてくれる、再利用できるコードの一部分です。関数は通常 JavaScript, Python, C++のような言語と関連付けられますが、CSS にもプロパティ値として存在しています。私たちはすでに色の節で <code>rgb()</code>、 <code>hsl()</code> などの関数を見ています。ファイルから画像を返すのに使われた値 — <code>url()</code> — も関数です。</p> + +<p>従来のプログラミング言語にあるような動作をする値は CSS の <code>calc()</code> 関数です。この関数を使うと CSS 内で簡単な計算を行うことができます。特にプロジェクトの CSS を書く際に定義できない値を計算したい場合や、実行時にブラウザに計算させる必要がある場合に便利です。</p> + +<p>例えば、下記では <code>calc()</code> を使って <code>20% + 100px</code> の幅を出しています。20% は親コンテナである <code>.wrapper</code> の幅から計算され、その幅が変わると変更されます。親の 20% がいくらになるのか分からないので、この計算を事前にすることはできません。そのため代わりにブラウザーに計算してもらうよう <code>calc()</code> を使います。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事では多くをカバーしましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and unit</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ここまで最もよく見かける値と単位を一通り見てきました。<a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a> のリファレンスページで、さまざまなタイプをすべて見ることができます。多くはこのレッスンを進んでいくと出てくるでしょう。</p> + +<p>覚えておくべき重要なことは、各プロパティには許可される値の定義されたリストがあり、各値にはサブ値が何であるかを説明する定義があるということです。詳細は MDN で調べることができます。</p> + +<p>例えば、<code><a href="/ja/docs/Web/CSS/image"><image></a> </code>でもカラーグラデーションを作成できることを理解しておくと便利ですが、たぶん当たり前の知識ではないでしょう!</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> |