From a9ebf315bf57e888dd578d8869c920665fdf8fd5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 2 Jan 2025 23:42:58 +0900 Subject: [PATCH] =?UTF-8?q?2024/12/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#25248)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../advanced_styling_effects/index.md | 189 ++++-- .../attribute_selectors/index.md | 162 ++--- .../backgrounds_and_borders/index.md | 63 +- .../styling_basics/basic_selectors/index.md | 364 +++++++++--- .../core/styling_basics/box_model/index.md | 71 ++- .../styling_basics/cascade_layers/index.md | 210 +++++-- .../core/styling_basics/combinators/index.md | 162 ++++- .../styling_basics/cool-looking_box/index.md | 27 +- .../styling_basics/debugging_css/index.md | 85 ++- .../fancy_letterheaded_paper/index.md | 27 +- .../fundamental_css_comprehension/index.md | 43 +- .../handling_conflicts/index.md | 357 ++++++++--- .../images_media_forms/index.md | 243 ++++++-- .../core/styling_basics/organizing/index.md | 25 +- .../core/styling_basics/overflow/index.md | 65 ++- .../pseudo_classes_and_elements/index.md | 170 +++++- .../core/styling_basics/sizing/index.md | 252 ++++++-- .../core/styling_basics/tables/index.md | 51 +- .../styling_basics/values_and_units/index.md | 552 +++++++++++++++--- 19 files changed, 2356 insertions(+), 762 deletions(-) diff --git a/files/ja/learn_web_development/core/styling_basics/advanced_styling_effects/index.md b/files/ja/learn_web_development/core/styling_basics/advanced_styling_effects/index.md index 0500866dd9f151..cb1c9edc622e4a 100644 --- a/files/ja/learn_web_development/core/styling_basics/advanced_styling_effects/index.md +++ b/files/ja/learn_web_development/core/styling_basics/advanced_styling_effects/index.md @@ -1,31 +1,30 @@ --- -title: ボックスの高度な効果 +title: 高度なスタイル設定の効果 slug: Learn_web_development/Core/Styling_basics/Advanced_styling_effects -original_slug: Learn/CSS/Building_blocks/Advanced_styling_effects l10n: - sourceCommit: 289d6314f3368aa3e28524e7d090f6e9c704e3b1 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- {{LearnSidebar}} -この記事はトリックの箱として機能し、ボックスの影、ブレンドモード、フィルターのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。 +この記事はトリックの箱として機能し、ボックスの影、混合モード、フィルターのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。 @@ -35,8 +34,6 @@ l10n: {{cssxref("box-shadow")}} を使用すると、実際の要素ボックスに 1 つ以上のドロップシャドウを適用できます。 テキストの影と同様に、ボックスの影は、IE9 以降や Edge を含め、ブラウザー間の対応が良く進んでいます。古いバージョンの IE を使用しているユーザーは、影なしで対処するしかないかもしれないので、コンテンツがそれらなしで判読可能であることを確かめるためにデザインをテストするだけです。 -この節の例は [box-shadow.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) にあります（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/box-shadow.html)も参照）。 - ### 簡単なボックスの影 手始めに、簡単な例を見てみましょう。 まず、いくらかの HTML です。 @@ -75,7 +72,7 @@ article { これにより、次のような結果が得られます。 -{{ EmbedLiveSample('A_simple_box_shadow', '100%', 100) }} +{{EmbedLiveSample("A_simple_box_shadow", "", "100px")}} `box-shadow` プロパティ値に次の 4 つの項目があることがわかります。 @@ -127,7 +124,7 @@ article { そして、この結果が得られます。 -{{ EmbedLiveSample('Multiple_box_shadows', '100%', 100) }} +{{EmbedLiveSample("Multiple_box_shadows", "", "100px")}} ここでは、複数の色レイヤーで盛り上がったボックスを作成することで楽しみを演出しましたが、例えば、複数の光源に基づく影でよりリアルな見てくれを作成するなど、好きな方法で使用することができます。 @@ -170,7 +167,7 @@ button:active { これにより、次のような結果が得られます。 -{{ EmbedLiveSample('Other_box_shadow_features', '100%', 70) }} +{{EmbedLiveSample("Other_box_shadow_features", "100%", "70px")}} ここでは、フォーカス/ホバー/アクティブ状態と共にボタンの装飾を設定しました。 このボタンには、デフォルトで単純な黒いボックスの影が設定されています。 さらに、1 つは明るく、もう 1 つは暗い、2 つの内側の影を、ボタンに素晴らしい陰影エフェクトを与えるためにボタンの反対側の角に置きます。 @@ -186,33 +183,109 @@ CSS を使って画像の構図を変えることはできませんが、工夫 2 つ目は `grayscale()` で、パーセント値を用いてどれだけ色を除去するかを設定します。 -{{EmbedGHLiveSample("css-examples/learn/images/filter.html", '100%', 900)}} +下記サンプルのパーセント値とピクセルの引数を変更して、画像がどのように変化するかを試してみてください。 また、値を他のものに置き換えてみることもできます。 上記のライブサンプルで `contrast(200%)`、`invert(100%)`、`hue-rotate(20deg)` を試してみてください。 試せる他のオプションについては、 MDN の [`filter`](/ja/docs/Web/CSS/filter) のページをご覧ください。 + +```html live-sample___filter +
+
+ balloons +
+
+ balloons +
+
+``` + +```css hidden live-sample___filter +.wrapper { + display: flex; + align-items: flex-start; +} + +.wrapper > * { + margin: 20px; + flex: 1; +} + +.box { + border: 5px solid darkblue; +} +``` + +```css live-sample___filter +img { + height: 100%; + width: 100%; + display: block; + object-fit: cover; +} + +.blur { + filter: blur(10px); +} + +.grayscale { + filter: grayscale(60%); +} +``` -**ライブサンプルのパーセント値とピクセルパラメーターを変更して、画像がどのように変化するかを確認してください。他にも値を入れ替えることができます。上のライブ例で、`contrast(200%)`、`invert(100%)`、`hue-rotate(20deg)` を試してみてください。他にもいろいろなオプションがあるので、[`filter`](/ja/docs/Web/CSS/filter)の MDN ページを見ていってください。** +{{EmbedLiveSample("filter", "", "260px")}} フィルターは画像だけでなく、あらゆる要素に適用することができます。利用できるフィルターオプションの中には、他の CSS 機能ととてもよく似たことをするものもあります。例えば `drop-shadow()` はとてもよく似た方法で動作し、[`box-shadow`](/ja/docs/Web/CSS/box-shadow) や [`text-shadow`](/ja/docs/Web/CSS/text-shadow) と似た効果を与えます。しかし、フィルターの実にいいところは、ボックスそのものを一つの大きな塊としてではなく、ボックス内のコンテンツの正確な図形に対して動作することです。 この例では、 ボックスにフィルターを適用してボックスシャドウと比較しています。ご覧のように、 ドロップシャドウフィルターは、 テキストと枠線のダッシュの正確な図形に沿って現れます。ボックスシャドウはボックスの四角形沿いにだけ現れます。 -{{EmbedGHLiveSample("css-examples/learn/images/filter-text.html", '100%', 700)}} +```html live-sample___filter-text +

フィルター

+

ボックスシャドウ

+``` -## ブレンドモード +```css live-sample___filter-text +body { + font-family: sans-serif; +} +p { + margin: 1em 2em; + padding: 20px; + width: 100px; + display: inline-block; + border: 5px dashed red; +} + +.filter { + filter: drop-shadow(5px 5px 1px rgb(0 0 0 / 70%)); +} + +.box-shadow { + box-shadow: 5px 5px 1px rgb(0 0 0 / 70%); +} +``` -CSS ブレンドモードでは、要素にブレンドモードを追加することで、2 つの要素が重なったときのブレンド効果を指定することができます。各ピクセルの最終的な表示色は、元のピクセルの色と、その下のレイヤーのピクセルの色を組み合わせたものになります。ブレンドモードは、Photoshop のようなグラフィックアプリケーションのユーザーにはとてもおなじみのものです。 +{{EmbedLiveSample("filter-text")}} -CSS でブレンドモードを使用するプロパティは、次の 2 つがあります。 +## 混合モード -- {{cssxref("background-blend-mode")}} は、単一の要素に設定された複数の背景画像と色をブレンドします。 -- {{cssxref("mix-blend-mode")}} は、設定されている要素と、それが重なっている要素の背景とコンテンツの両方をブレンドします。 +CSS 混合モードでは、要素に混合モードを追加することで、2 つの要素が重なったときの混合効果を指定することができます。各ピクセルの最終的な表示色は、元のピクセルの色と、その下のレイヤーのピクセルの色を組み合わせたものになります。混合モードは、Photoshop のようなグラフィックアプリケーションのユーザーにはとてもおなじみのものです。 + +CSS で混合モードを使用するプロパティは、次の 2 つがあります。 + +- {{cssxref("background-blend-mode")}} は、単一の要素に設定された複数の背景画像と色を混合します。 +- {{cssxref("mix-blend-mode")}} は、設定されている要素と、それが重なっている要素の背景とコンテンツの両方を混合します。 こちらの [blend-modes.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) サンプルページ（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/blend-modes.html)を参照）、および {{cssxref("<blend-mode>")}} リファレンスページには、ここに掲載されている以外にもたくさんの例があります。 > [!NOTE] -> ブレンドモードもまたとても新しいもので、フィルターよりも対応が進んでいません。Edge はまだ対応していませんし、Safari はブレンドモードオプションのいくつかだけに対応しています。 +> 混合モードもまたとても新しいもので、フィルターよりも対応が進んでいません。Edge はまだ対応していませんし、Safari は混合モードオプションのいくつかだけに対応しています。 ### background-blend-mode -ここでも、これをよりよく理解できるように、いくつかの例を見てみましょう。 まず、{{cssxref("background-blend-mode")}} です — ここでは次のいくつかの簡単な {{htmlelement("div")}} を示すことで、オリジナルとブレンドバージョンを比較できます。 +ここでも、これをよりよく理解できるように、いくつかの例を見てみましょう。 まず、{{cssxref("background-blend-mode")}} です — ここでは次のいくつかの簡単な {{htmlelement("div")}} を示すことで、オリジナルと混合バージョンを比較できます。 ```html
@@ -237,17 +310,17 @@ div { } ``` -The result we get is this — you can see the original on the left, and the multiply blend mode on the right: +取得した結果は次のとおりです。左側が元の画像で、右側が乗算混合モードです。 -{{ EmbedLiveSample('background-blend-mode', '100%', 300) }} +{{EmbedLiveSample("background-blend-mode", "", "220px")}} ### mix-blend-mode -それでは、{{cssxref("mix-blend-mode")}} を見てみましょう。 ここでは上と同様の 2 つの `
` を提示しますが、要素がどのようにブレンドされるかを示すために、それぞれが紫色の背景を持つ単純な `
` の上に乗っています。 +それでは、{{cssxref("mix-blend-mode")}} を見てみましょう。 ここでは上と同様の 2 つの `
` を提示しますが、要素がどのように混合されるかを示すために、それぞれが紫色の背景を持つ単純な `
` の上に乗っています。 ```html
- 混合ブレンドモードなし + 混合モードなし
@@ -300,11 +373,11 @@ article div:last-child { これにより、次のような結果が得られます。 -{{ EmbedLiveSample('mix-blend-mode', '100%', 300) }} +{{EmbedLiveSample("mix-blend-mode", "", "220px")}} -ここでは、乗算ブレンドが 2 つの背景画像をブレンドするだけでなく、その下の `
` からの色もブレンドしていることがわかります。 +ここでは、乗算混合が 2 つの背景画像を混合するだけでなく、その下の `
` からの色も混合していることがわかります。 -> **メモ:** {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} など、上記のレイアウトプロパティの一部を理解していなくても心配しないでください。 これらについては、[CSS レイアウト](/ja/docs/Learn/CSS/CSS_layout)のモジュールで詳しく説明します。 +> **メモ:** {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} など、上記のレイアウトプロパティの一部を理解していなくても心配しないでください。 これらについては、[CSS レイアウト](/ja/docs/Learn_web_development/Core/CSS_layout)のモジュールで詳しく説明します。 ## CSS シェイプ @@ -314,7 +387,28 @@ CSS シェイプ仕様により、長方形以外の図形にテキストを回 下記画像には、まん丸のバルーンがあります。実際のファイルは長方形ですが、画像を浮動させ（シェイプは浮動要素にのみ適用されます）、{{cssxref("shape-outside")}} プロパティの値を `circle(50%)` として使用することにより、テキストがバルーンの線に沿って流れる効果を与えることができます。 -{{EmbedGHLiveSample("css-examples/learn/images/shapes.html", '100%', 1000)}} +```html-nolint live-sample___shapes +
+ balloon +

+ 1782 年 11 月 のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、ある話を実行しました。彼らの名前はステファンとジョセフ・モンゴルフィエで、職業は製紙業でした。また、思慮深い頭脳と、科学的な知識や新しい発見すべてに対して深い関心を持っていることでも知られていました。その夜（後に証明されるように、記念すべき夜）の何百万人もの人々は、発行される煙の輪を眺めていましたが、その事実から何か特別なインスピレーションを描画することはありませんでした。 +

+
+``` + +```css live-sample___shapes +body { + font-family: sans-serif; +} +img { + float: left; + shape-outside: circle(50%); +} +``` + +{{EmbedLiveSample("shapes", "", "200px")}} この例のシェイプは画像ファイルのコンテンツに反応しているわけではありません。代わりに、 circle 関数が画像ファイルの中央を中心点として取り、あたかもファイルの中央にコンパスを置いて、ファイルの中に収まる円を描画したかのようになります。その円の周りをテキストが流れるのです。 @@ -326,21 +420,46 @@ CSS シェイプ仕様により、長方形以外の図形にテキストを回 ## -webkit-background-clip: text 先に進む前に、簡単に言及しておきたいと思うもう 1 つの機能は、{{cssxref("background-clip")}} の `text` 値です（現在 Chrome、Safari、Opera が対応しており、Firefox で実装されています）。 独自の `-webkit-text-fill-color: transparent;` 機能とともに使用すると、背景画像を要素のテキストの形に切り取ることができ、いくつかの素晴らしい効果をもたらします。 これは公式の標準ではありませんが、普及しており、開発者によってかなり広く使用されているため、複数のブラウザーにわたって実装されています。 このコンテキストで使用すると、Webkit / Chrome ベース以外のブラウザーでも、両方のプロパティに `-webkit-` ベンダー接頭辞が必要になります。 +下記のライブサンプルで実際の動作をご覧いただけます。 + +```html live-sample___webkit-background-clip +

WOW

+

WOW

+``` + +```css hidden live-sample___webkit-background-clip +body { + font-family: impact, sans-serif; +} + +h2 { + width: 250px; + height: 250px; + text-align: center; + line-height: 250px; + font-size: 50px; +} +``` + +```css live-sample___webkit-background-clip +h2 { + color: white; + display: inline-block; + background: url(colorful-heart.png) no-repeat center; +} -```css .text-clip { -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ``` +{{EmbedLiveSample("webkit-background-clip", "", "340px")}} + では、なぜ他のブラウザーが `-webkit-` 接頭辞を実装したのでしょうか？ 主にブラウザーの互換性のためにです。とても多くのウェブ開発者が `-webkit-` 接頭辞を使用してウェブサイトを実装し始めているため、実際には標準に従っているのに、他のブラウザーでは壊れているように見え始めました。 そこで彼らはそのような機能をいくつか実装することを余儀なくされました。 これは標準的でない接頭辞の付いた CSS 機能を使用する危険性が浮き彫りになります。ブラウザーの互換性の問題を引き起こすだけでなく、変更される可能性もあるため、コードはいつでも壊れる可能性があります。 標準に固執するほうがはるかに良いことです。 本番環境でこのような機能を使用したい場合は、ブラウザー間で徹底的なテストを行い、機能が機能しない場合でもサイトが引き続き使用可能であることを確認してください。 -> [!NOTE] -> 完全な `-webkit-background-clip: text` のコードの例については、[background-clip-text.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) を参照してください（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/background-clip-text.html)も参照）。 - ## まとめ この記事が楽しいものであったことを願います。光り輝くおもちゃで遊ぶことは一般的にそうですし、現行のブラウザーで利用できるようになった高度なスタイル設定ツールの種類を見ることは常に興味深いものです。 diff --git a/files/ja/learn_web_development/core/styling_basics/attribute_selectors/index.md b/files/ja/learn_web_development/core/styling_basics/attribute_selectors/index.md index d8ae8b36f0889e..067ee90dda2971 100644 --- a/files/ja/learn_web_development/core/styling_basics/attribute_selectors/index.md +++ b/files/ja/learn_web_development/core/styling_basics/attribute_selectors/index.md @@ -1,12 +1,13 @@ --- title: 属性セレクター slug: Learn_web_development/Core/Styling_basics/Attribute_selectors -original_slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{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")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Basic_selectors", "Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements", "Learn_web_development/Core/Styling_basics")}} HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。 @@ -15,25 +16,20 @@ HTML の学習で学んだように、要素はマークアップについてさ
- + @@ -41,49 +37,14 @@ HTML の学習で学んだように、要素はマークアップについてさ ## 存在や値のセレクター -これらのセレクターにより、要素を属性が存在するか (`href` など)、または属性の値に対して様々な方法で一致させて選択できるようになります。 +これらのセレクターにより、要素を属性が存在するか（`href` など）、または属性の値に対して様々な方法で一致させて選択できるようになります。 -
前提知識: - HTML の基礎（HTML 入門で学習）、および CSS の機能の考え方（CSS 第一歩で学習）、および CSS の機能の考え方（CSS によるスタイル設定の基本で学習）。
目的: - 現行ブラウザーで利用できる高度なスタイル設定の考え方を身につけること。 + 現代のブラウザーで利用できる高度なスタイル設定の考え方を身につけること。
前提条件: - 基本的なソフトウェアがインストールされていること, basic knowledge of - ファイルの扱い, HTML basics (study - HTML 入門)、および CSS がどのように動作するかという考え（CSS の第一歩）に関する基本的な知識を得ている。 + HTML の基本（ + 基本的な HTML の構文を学んでいること）、基本的な CSS セレクター。
目的:学習成果: - 属性セレクターとは何かと、その使い方を学ぶ。 +
    +
  • 属性セレクターの基本概念。
    • +
  • 存在や値の属性セレクター。
    • +
  • 属性セレクターにおける部分文字列の照合。
    • +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
セレクター例説明
[attr]a[title] - attr という属性名を持つ要素と一致します（値を角括弧の中に入れます）。 -
[attr=value]a[href="https://example.com"] - attr という属性名で値が value と完全一致する要素と一致します。文字列は引用符の中に入れます。 -
[attr~=value]p[class~="special"] -

-
値が正確に value である attr の属性名を持つ要素、または 1 つ以上の値を含む attr 属性を持つ要素に一致します。複数の値のリストでは、個別の値が空白で区切られていることに注意してください。 -

-
[attr|=value]div[lang|="zh"] - 値が正確に value であるか、または value の直後にハイフンが続く値で始まるattr 属性を持つ要素に一致します。 -
+| セレクター | 例 | 説明 | +| -------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- | +| `[*attr*]` | `a[title]` | _attr_ という属性名を持つ要素に一致します（値を角括弧の中に入れます）。 | +| `[*attr*=*value*]` | `a[href="https://example.com"]` | _attr_ という属性名で値が _value_ （引用符の中の文字列）と完全一致する要素に一致します。 | +| `[*attr*~=*value*]` | `p[class~="special"]` | _attr_ 属性の値が正確に _value_ である、または（空白区切りの）値のリストの中に _value_ を含んでいる要素に一致します。 | +| `[*attr*\|=*value*]` | `div[lang\|="zh"]` | _attr_ 属性の値が正確に _value_ である、または _value_ の直後にハイフンが入ったもので始まる値を持つ要素に一致します。 | 以下の例では、これらのセレクターが使用されていることがわかります。 @@ -91,19 +52,46 @@ HTML の学習で学んだように、要素はマークアップについてさ - `li[class="a"]` は、a のクラスを持つセレクターには一致しますが、別のスペースで区切られたクラスを値の一部として持つ a のクラスを持つセレクターには一致しません。2 番目のリストアイテムを選択します。 - `li[class~="a"]`は、 `a` のクラスを持つセレクターに一致しますが、空白で区切られたリストの一部に `a` のクラスを含む値にも一致します。2 番目と 3 番目のリストアイテムを選択します。 -{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}} +```html live-sample___attribute +

属性の存在や値のセレクター

+ +``` + +```css live-sample___attribute +body { + font-family: sans-serif; +} +li[class] { + font-size: 120%; +} + +li[class="a"] { + background-color: yellow; +} + +li[class~="a"] { + color: red; +} +``` + +{{EmbedLiveSample("attribute", "", "200px")}} ## 部分文字列照合セレクター -これらのセレクターは、属性の値の中の部分文字列をより高度に照合させることができます。例えば、 `box-warning` と `box-error` のクラスがあり、文字列 "box-" で始まるものを全て一致させたい場合、 `[class^="box-"]` を使用して両方を選択することができます。 +これらのセレクターは、属性の値の中の部分文字列をより高度に照合させることができます。例えば、 `box-warning` と `box-error` のクラスがあり、文字列 "box-" で始まるものを全て一致させたい場合、 `[class^="box-"]` を使用して両方を選択することができます（上記の通り、 `[class|="box"]` でもできます）。 -| セレクター | 例 | 説明 | -| --------------- | ------------------- | ------------------------------------------------------------------------------- | -| `[attr^=value]` | `li[class^="box-"]` | 値が _value_ で始まる _attr_ 属性（名前は角括弧内の値）を持つ要素に一致します。 | -| `[attr$=value]` | `li[class$="-box"]` | 値が _value_ で終わる _attr_ 属性を持つ要素に一致します。 | -| `[attr*=value]` | `li[class*="box"]` | 文字列内の任意の場所に _value_ を含む _attr_ 属性を持つ要素に一致します。 | +| セレクター | 例 | 説明 | +| --------------- | ------------------- | ---------------------------------------------------------------------- | +| `[attr^=value]` | `li[class^="box-"]` | _attr_ 属性の値が _value_ で始まる要素に一致します。 | +| `[attr$=value]` | `li[class$="-box"]` | _attr_ 属性の値が _value_ で終わる要素に一致します。 | +| `[attr*=value]` | `li[class*="box"]` | _attr_ 属性の文字列内のどこかに _value_ を含むを持つ要素に一致します。 | -（ところで、長い間 `^` と `$` は正規表現において、それぞれ _先頭_ と _末尾_ を意味する _アンカー_ として使用されてきたことに注意すると有用かもしれません。） +（参考: 長い間 `^` と `$` は正規表現において、それぞれ _先頭_ と _末尾_ を意味する _アンカー_ として使用されてきたことに注意すると有用かもしれません。） 次の例は、これらのセレクターの使用法を示しています。 @@ -111,21 +99,37 @@ HTML の学習で学んだように、要素はマークアップについてさ - `li[class$="a"]` は `a` で終わる属性値に一致するので、最初と 3 番目のリストアイテムに一致します。 - `li[class*="a"]`は、`a` が文字列のどこかに現れる属性値に一致します。 -{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}} - -## 大文字小文字の区別 +```html live-sample___attribute-substring +

属性の部分文字列照合セレクター

+ +``` -属性値を大文字小文字を区別せずに照合したい場合は、閉じ括弧の前に値 `i` を使うことができます。このフラグは、ブラウザーに {{Glossary("ASCII")}} 文字を大文字小文字を区別せずに照合するように指示します。このフラグがない場合、値は文書言語の大文字小文字の区別に従って照合されます - HTML の場合は大文字小文字を区別します。 +```css live-sample___attribute-substring +body { + font-family: sans-serif; +} +li[class^="a"] { + font-size: 120%; +} -下の例では、最初のセレクターは `a` で始まる値に一致します。他の 2 つのリストアイテムは大文字の A で始まるので、最初のリストアイテムにのみ一致します。 2 つ目のセレクターは大文字と小文字を区別しないフラグを使用しているので、すべてのリストアイテムに一致します。 +li[class$="a"] { + background-color: yellow; +} -{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}} +li[class*="a"] { + color: red; +} +``` -> [!NOTE] -> 新しい値 `s` もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別する照合を強制しますが、これはブラウザーではあまり対応されておらず、HTML の文脈ではあまり役に立ちません。 +{{EmbedLiveSample("attribute-substring", "", "200px")}} -## 次のステップ +## まとめ -これで属性セレクターが完了しました。次の記事に進んで、[pseudo-class and pseudo-element selectors](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)について読むことができます。 +これで属性セレクターについては終了です。次の記事では続いて、擬似クラスと擬似要素セレクターについて説明します。 -{{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")}} +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Basic_selectors", "Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements", "Learn_web_development/Core/Styling_basics")}} diff --git a/files/ja/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md b/files/ja/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md index 1b24ce37ce04d8..7d62e842303443 100644 --- a/files/ja/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md +++ b/files/ja/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md @@ -1,12 +1,13 @@ --- title: 背景と境界線 slug: Learn_web_development/Core/Styling_basics/Backgrounds_and_borders -original_slug: Learn/CSS/Building_blocks/Backgrounds_and_borders l10n: - sourceCommit: 68772e87a84d6d6fc6a8e377dea4998afbeb511c + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Sizing", "Learn_web_development/Core/Styling_basics/Overflow", "Learn_web_development/Core/Styling_basics")}} このレッスンでは、CSS の背景および境界モジュールの機能を使ったクリエイティブな表現方法をいくつか見ていきます。グラデーション、背景画像、角の丸めを加えることを通じて、CSS を使ったスタイル設定の多様な課題に対する解答が得られるでしょう。 @@ -15,27 +16,30 @@ l10n: 前提条件: - 基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本（HTML 入門の学習）、CSS がどのように動作するかの考え（CSS の第一歩で学習）の基本的な知識を得ていること。 + HTML の基本（ + 基本的な HTML の構文を学んでいること）、CSS の値と単位、CSS におけるサイズ設定。 - 目的: - ボックスの背景と境界線をスタイルする方法を学ぶこと。 + 学習成果: + + + ## CSS による背景の設定 -CSS の {{cssxref("background")}} プロパティは、このレッスンで説明する多くの個別指定プロパティ (longhand property) を一度に指定する一括指定プロパティ (shorthand property) です。スタイルシートで複雑な背景プロパティを見かけると、一度に多くの値を渡していて理解するのが少し難しく感じるかもしれません。 +CSS の {{cssxref("background")}} プロパティは一括指定プロパティであり、このレッスンで説明する多くの個別指定プロパティを一度に指定します。スタイルシートで複雑な背景プロパティを見かけると、一度に多くの値を渡していて理解するのが少し難しく感じるかもしれません。 ```css .box { @@ -124,15 +128,15 @@ span { 背景画像と背景色を同時に指定すると、背景色より手前に背景画像が表示されます。 上記の例に `background-color` プロパティを追加して、動作を確認してみましょう。 -#### 背景画像の繰り返しの指定 +#### 背景画像の反復の指定 -{{cssxref("background-repeat")}} プロパティは、画像の繰り返し表示の動作を制御するために使用されます。使用可能な値には次のものがあります: +{{cssxref("background-repeat")}} プロパティは、画像の反復表示の動作を制御するために使用されます。使用可能な値には次のものがあります: -- `no-repeat` — 背景画像が繰り返されるのを完全に防ぎます。 -- `repeat-x` — 水平方向に繰り返します。 -- `repeat-y` — 垂直方向に繰り返します。 -- `repeat` — 既定値です。両方の方向に繰り返します。 -- `space` — 可能な限り何度も繰り返し、利用できる空間があれば、画像と画像の間に空間を加えます。 +- `no-repeat` — 背景画像が反復されるのを完全に防ぎます。 +- `repeat-x` — 水平方向に反復します。 +- `repeat-y` — 垂直方向に反復します。 +- `repeat` — 既定値です。両方の方向に反復します。 +- `space` — 可能な限り何度も反復し、利用できる空間があれば、画像と画像の間に空間を加えます。 - `round` — `space` に似ていますが、余分な空間を埋めるように画像を伸ばします。 以下の例でこれらの値を試してみましょう。値を `no-repeat` に設定したため、星が 1 つだけ表示されます。異なる値（`repeat-x` や `repeat-y`）に変えてみて、その効果を確認してみましょう。 @@ -332,7 +336,7 @@ span { `background-image` プロパティにカンマ区切りで複数の画像を指定することで、複数の背景画像を使用することもできます。 -これを行うと、背景画像が互いに重なり合う可能性があります。背景は、最後に指定したものが一番下に置かれ、先のものが順に上に重ねられます。 +これを行うと、背景画像が重なり合うことがあります。背景は、最後に記載されている背景画像が積み重ねの最下層となり、その上にコードで前の画像が順に積み重ねられます。 > [!NOTE] > グラデーションを通常の背景画像と同じように重ね合わせることができます。 @@ -435,10 +439,9 @@ background-position: ## 境界線 -ボックスモデルについて学習するとき、境界線 (border) がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、境界線をクリエイティブに活用する方法を見ていきます。 -通常、CSS で要素に境界線を追加するときは、CSS の 1 行で境界線の色、幅、[スタイル](/ja/docs/Web/CSS/line-style)を指定する一括指定プロパティを使います。 +[ボックスモデル](/ja/docs/Learn_web_development/Core/Styling_basics/Box_model)について学習するとき、境界線 (border) がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、境界線をクリエイティブに活用する方法を見ていきます。通常、CSS で要素に境界線を追加するときは、CSS の 1 行で境界線の色、幅、[スタイル](/ja/docs/Web/CSS/line-style)を指定する一括指定プロパティを使います。 -{{cssxref("border")}} を使用して、ボックスの 4 辺すべてに境界線を設定できます。 +{{cssxref("border")}} を使用すると、ボックスの 4 辺すべてに境界線を設定できます。 ```css .box { @@ -475,7 +478,7 @@ background-position: ``` > [!NOTE] -> top, right, bottom, left の各方向の境界線を指定するプロパティには、HTML 文書の書字方向 (writing mode) と結びついた[論理的プロパティ](/ja/docs/Web/CSS/CSS_logical_properties_and_values#プロパティ)が割り当てられています（書字方向は、左から右、右から左、上から下といったテキストの方向を制御するものです）。次回のレッスンでは、[テキスト方向の扱い](/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)に応じたこれらの方法を探ります。 +> top, right, bottom, left の各方向の境界線を指定するプロパティには、HTML 文書の書字方向 (writing mode) と結びついた[論理的プロパティ](/ja/docs/Web/CSS/CSS_logical_properties_and_values#プロパティ)が割り当てられています（書字方向は、左から右、右から左、上から下といったテキストの方向を制御するものです）。次回のレッスンでは、[テキスト方向の扱い](/ja/docs/Learn_web_development/Core/Styling_basics/Handling_different_text_directions)に応じたこれらの方法を探ります。 境界線にはさまざまなスタイルを指定できます。以下の例では、ボックスの 4 辺にそれぞれ異なる境界線スタイルを使用しています。境界線の色、幅、スタイルを試して、境界線の動作を確認しましょう。 @@ -553,12 +556,12 @@ h2 { ## スキルテスト -この記事の終わりまで来ましたが、最も重要な情報を覚えていますか？次に進む前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります。[スキルテスト: 背景と境界線](/ja/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders)を見てください。 +この記事の終わりまで来ましたが、最も重要な情報を覚えていますか？次に進む前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります。[スキルテスト: 背景と境界線](/ja/docs/Learn_web_development/Core/Styling_basics/Test_your_skills_backgrounds_and_borders)を見てください。 ## まとめ ここでかなり多くのことを取り上げましたが、ボックスに背景や境界線を追加するにはかなり多くのことがあることがお分かりいただけたと思います。ここで説明した機能についてもっと知りたければ、さまざまなプロパティのページを探してみてください。 MDN でほとんどすべてのページに、知識を深めるために試してみる例があります。 -次のレッスンでは、文書の書字方向が CSS とどのように相互作用するかを説明します。テキストが左から右以外の方向に流れる場合に何が起こるのでしょうか？ +次の記事では、要素ボックス内に収まりきらないほどコンテンツが多い場合に現れる「オーバーフロー」の概念について、さらに詳しく見ていきましょう。 -{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Sizing", "Learn_web_development/Core/Styling_basics/Overflow", "Learn_web_development/Core/Styling_basics")}} diff --git a/files/ja/learn_web_development/core/styling_basics/basic_selectors/index.md b/files/ja/learn_web_development/core/styling_basics/basic_selectors/index.md index c4bf6f92e7abaf..080b777f4f96df 100644 --- a/files/ja/learn_web_development/core/styling_basics/basic_selectors/index.md +++ b/files/ja/learn_web_development/core/styling_basics/basic_selectors/index.md @@ -1,38 +1,38 @@ --- -title: CSS セレクター +title: 基本的な CSS セレクター slug: Learn_web_development/Core/Styling_basics/Basic_selectors -original_slug: Learn/CSS/Building_blocks/Selectors l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} +{{LearnSidebar}} -{{Glossary("CSS")}}では、セレクター (selector) を使って装飾したい {{glossary("HTML")}} 要素を選択します。CSS セレクターは種類豊富なので、装飾したい要素を細かく選択できます。この記事では、さまざまな種類のセレクターについて、その機能を詳しく確認します。 +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Styling_a_bio_page", "Learn_web_development/Core/Styling_basics/Attribute_selectors", "Learn_web_development/Core/Styling_basics")}} + +{{Glossary("CSS")}} において、スタイル設定したいウェブページ上の {{glossary("HTML")}} 要素を対象とするためにセレクターを使用する方法については、すでに説明しました。 CSS セレクターにはさまざまな種類があり、スタイル設定する要素を選択する際にきめ細かい精度を実現できます。次のいくつかの記事では、さまざまなタイプについて詳しく見ていきます。この記事では、基本的なタイプ、クラスおよび ID セレクター、セレクターリストなど、セレクターの基本についておさらいします。また、全称セレクターについても紹介します。 - - + +
前提条件: - 基本的なソフトウェアがインストールされていること, basic knowledge of - ファイルの扱い, HTML basics (study - HTML 入門)、および CSS がどのように動作するかという考え（CSS の第一歩）に関する基本的な知識を得ている。 + HTML の基本（ + 基本的な HTML の構文を学んでいること）。
目的:CSS セレクターがどのように機能するかを学ぶ。学習成果: +
    +
  • 基本的なセレクター型（要素型、クラス、ID）。
    • +
  • ID は文書内の固有であるため、特定の要素を 1 つ選択するには ID を使用すべきであることを理解すること。
    • +
  • それぞれの要素に複数のクラスを指定することができ、必要に応じてスタイルのレイヤーとして使用することができること。
    • +
  • セレクターリスト。
    • +
  • 全称セレクター。
    • +
      +
@@ -43,9 +43,203 @@ CSS セレクターは、CSS ルール (CSS Rule) の最初の部分です。CSS ![多少のコードで、 h1 が強調されている。](selector.png) -他にもいろいろな記事で、様々なセレクターに出会い、様々な方法で文書を対象とするセレクターがあることを知ることができたと思います。例えば、`h1` は HTML 要素で選択する一方 `.special` はクラスで選択します。 +以前の記事で、様々なセレクターに出会い、様々な方法で文書を対象とするセレクターがあることを知ることができたと思います。例えば、`h1` は HTML 要素で選択する一方 `.special` はクラスで選択します。 + +## 要素型セレクター + +**要素型セレクター**は、文書内の HTML のタグや要素を選択するものであるため、タグ名セレクターまたは要素セレクターと呼ばれることもあります。例えば、下記では `span`、`em`、`strong` セレクターを使用しています。 + +CSS ルールを追加して、 `

` 要素を選択し、その色を青に変更してみましょう。 + +```html live-sample___type +

要素型セレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki + bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter + purslane kale. Celery potato scallion desert raisin horseradish spinach +

+``` + +```css live-sample___type +body { + font-family: sans-serif; +} + +span { + background-color: yellow; +} + +strong { + color: rebeccapurple; +} + +em { + color: rebeccapurple; +} +``` + +{{EmbedLiveSample("type", "", "280px")}} + +## クラスセレクター + +クラスセレクターは大文字と小文字を区別し、ドット (`.`) 文字で始まります。文書内でそのクラスが適用されているすべての要素が選択されます。次のライブサンプルでは、 `highlight` というクラスを作成し、それを文書のいくつかの場所に適用しています。このクラスが適用されているすべての要素が強調表示されています。 + +```html live-sample___class +

クラスセレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi + tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+``` + +```css live-sample___class +body { + font-family: sans-serif; +} + +.highlight { + background-color: yellow; +} +``` + +{{EmbedLiveSample("class", "", "220px")}} + +### 特定の要素についたクラスを対象にする + +クラスが適用された特定の要素を対象とするセレクターを作成することができます。例えば、次の例では、 `` のうちクラス名が `highlight` であるものを、 `

` 見出しでクラス名が `highlight` であるものとは異なる形で強調表示します。 対象とする要素型セレクターを使用し、クラス名の間にホワイトスペースを入れずにドットでつなげます。 + +```html live-sample___class-type +

クラスセレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi + tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+``` + +```css live-sample___class-type +body { + font-family: sans-serif; +} + +span.highlight { + background-color: yellow; +} + +h1.highlight { + background-color: pink; +} +``` + +{{EmbedLiveSample("class-type", "", "200px")}} + +この手法はルールの適用範囲を縮小します。ルールは、その具体的な要素とクラスとの組み合わせにのみ適用されます。ルールを他の要素にも適用したい場合は、別のセレクターを追加する必要があります。 + +### 要素に複数のクラスが適用されていた時の対象 + +要素に複数のクラスを適用し、それらを個別に対象にすることも、セレクター内のクラスがすべて存在する場合に要素だけを選択することもできます。これは、サイト上でさまざまな方法で結合できる部分を構築する際に役立つでしょう。 + +次の例では、メモを含む `
` があります。ボックスに `notebox` クラスが設定されている場合、灰色の境界線が適用されます。ボックスに `warning` または `danger` クラスが設定されている場合は、 {{cssxref("border-color")}} を変更します。 + +2 つのクラスがホワイトスペースなしで連結されている場合、要素が一致するようにブラウザーに指示することができます。最後の `
` には `danger` クラスしかないため、スタイル設定が適用されないことがお分かりいただけるでしょう。何らかのスタイル設定を取得するには、 `notebox` も必要です。 + +```html live-sample___class-many +
これは情報のメモです。
+ +
このメモは警告を表します。
+ +
このメモは危険であることを表します。
+ +
+ これはスタイル設定されません。また、 notebox クラスを持つ必要があります。 +
+``` + +```css live-sample___class-many +body { + font-family: sans-serif; +} + +.notebox { + border: 4px solid #666; + padding: 0.5em; + margin: 0.5em; +} + +.notebox.warning { + border-color: orange; + font-weight: bold; +} + +.notebox.danger { + border-color: red; + font-weight: bold; +} +``` + +{{EmbedLiveSample("class-many", "", "200px")}} + +## ID セレクター -セレクターは CSS セレクター仕様で定義されます。ほとんどのセレクターは [Level 3 Selectors specification](https://www.w3.org/TR/selectors-3/) や [Level 4 Selectors specification](https://www.w3.org/TR/selectors-4/) で定義されています。CSS の他の部分と同様に、セレクターが機能するにはブラウザーの対応が必要ですが、どちらも成熟した仕様なのでブラウザーの対応も充実しています。 +ID セレクターは大文字と小文字を区別し、ドット文字の代わりに `#` で始めますが、クラスセレクターと同じ方法で使用します。 ID はページごとに 1 度しか使用することができず、要素には 1 つしか `id` 値を適用できないという違いがあります。 ID は `id` を持つ要素を選択することができ、要素と ID が一致する場合にのみ要素をターゲットとするために、要素型セレクターを ID の前に置くことができます。次の例では、どちらの使用方法も見ることができます。 + +```html live-sample___id +

ID セレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+``` + +```css live-sample___id +body { + font-family: sans-serif; +} + +#one { + background-color: yellow; +} + +h1#heading { + color: rebeccapurple; +} +``` + +{{EmbedLiveSample("id", "", "200px")}} + +> [!WARNING] +> 文書内で同じ ID を複数回使用すると、スタイル設定の目的では動作しているように見えるかもしれませんが、これは行わないでください。これは不正なコードとなり、多くの場所で奇妙な動作を引き起こすことになります。 ## セレクターリスト @@ -80,9 +274,47 @@ h1, 以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が変わらないはずです。 -{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1150)}} +```html live-sample___selector-list +

要素型セレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki + bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter + purslane kale. Celery potato scallion desert raisin horseradish spinach +

+``` + +```css live-sample___selector-list +body { + font-family: sans-serif; +} +span { + background-color: yellow; +} + +strong { + color: rebeccapurple; +} -この方法でセレクターをまとめている場合、間違った文法で書かれたセレクターを 1 つでも含んでいるとルール全体が無視されます。 +em { + color: rebeccapurple; +} +``` + +{{EmbedLiveSample("selector-list", "", "280px")}} + +この方法でセレクターをまとめた場合、間違った構文で書かれたセレクターを 1 つでも含んでいると、ルール全体が無視されます。 次の例では、不正なクラスセレクターのルールは無視され、 `h1` がスタイル設定されます。 @@ -104,79 +336,73 @@ h1, ..special { } ``` -## セレクターの種類 +## 全称セレクター -セレクターにはいくつかのグループ分けがあり、どの種類のセレクターが必要かを知ることは、その仕事に正しいツールを探すのに役立ちます。この記事の下位の記事では、異なるセレクターのグループについてより詳しく見ていきます。 +全称セレクター (universal selector) はアスタリスク (`*`) で示します。これは文書内のすべての要素を選択します。 `*` が[子孫結合子](/ja/docs/Web/CSS/Descendant_combinator)を使用して連結されている場合、その祖先要素内のすべてが選択されます。例えば、 `p *` は `

` 要素内のすべての子要素を選択します。 -### 要素型、クラス、ID セレクター +次の例では、全称セレクターを使用してすべての要素のマージンを削除します。 見出しや段落にマージンを設けて間隔を空けるブラウザーの既定のスタイルではなく、すべてが密接に配置されます。 -[`

`](/ja/docs/Web/HTML/Element/Heading_Elements) のような HTML 要素を選択するセレクターがこのグループに属します。 +```html live-sample___universal +

全称セレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki + bean garlic. +

-```css -h1 { -} +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

``` -クラスセレクターは、 [`class`](/ja/docs/Web/HTML/Global_attributes/class) 属性に特定の値が示されている要素を対象とします。 - -```css -.box { +```css live-sample___universal +body { + font-family: sans-serif; } -``` - -ID セレクターは、 [`id`](/ja/docs/Web/HTML/Global_attributes/id) 属性に特定の値がある要素を対象とします。 -```css -#unique { +* { + margin: 0; } ``` -### 属性セレクター +{{EmbedLiveSample("universal")}} -このセレクターのグループは、要素上の特定の属性の存在に基づいて要素を選択するさまざまな方法を提供します。 +この種の動作は、ブラウザーのスタイル設定をすべて削除する「リセットスタイルシート」で時折見られます。全称セレクターはグローバルな変更を行うため、下記に記述されているような特定の状況でのみ使用しています。 -```css -a[title] { -} -``` +### 全称セレクターを使用して、セレクターを読みやすくする -特定の属性を持ち、かつ、特定の属性値を持つ要素を選択するセレクターもあります。 +全称セレクターの用途のひとつは、セレクターを読みやすく、また、何を行っているのかをより明確にすることです。例えば、記事 `
` 要素の子孫要素で、親の最初の子であるものすべてを選択し、太字にしたい場合、 {{cssxref(":first-child")}} 擬似クラスを使用することができます。この点については、[擬似クラスと擬似要素](/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements)のレッスンで詳しく説明します。 ```css -a[href="https://example.com"] -{ +article :first-child { + font-weight: bold; } ``` -### 擬似クラスおよび擬似要素 +しかし、この記事のセレクターは `article:first-child`、すうなわち他の要素の最初の子であるすべての `
` 要素を選択するセレクターと混同される可能性があります。 -このセレクターのグループには、要素の特定の状態をスタイル設定する擬似クラスが含まれます。例えば、`:hover`擬似クラスは、マウスポインターが上に置かれたときだけ要素を選択します。 +この混乱を避けるために、全称セレクターを `:first-child` 擬似クラスに追加すると、セレクターが何をしているのかがより明確になるようにします。これは、 `
` 要素の最初の子である、または `
` の任意の子孫要素の最初の子である、任意の要素を選択します。 ```css -a:hover { +article *:first-child { + font-weight: bold; } ``` -擬似要素 (pseudo-element) 、つまり要素自体ではなく要素の特定の部分を選択するセレクターもあります。たとえば、`::first-line` は要素（以下の例では `

`）内の最初の行をまるで `` で囲んでスタイル設定したかのように動作します。 - -```css -p::first-line { -} -``` +どちらも同じことをしていますが、読みやすさが大幅に改善されています。 -### 結合子 - -最後のグループのセレクターは、セレクター同士を組み合わせて文書内のターゲット要素を選択します。たとえば、以下の例では子結合子（子コンビネーター、child combinator）(`>`) によって `

` 要素の直接の子である段落を選択します。 +## まとめ -```css -article > p { -} -``` +この記事では、前回よりも少し掘り下げて、型、クラス、 ID セレクターに注目しながら、具体的な HTML 要素を対象とするための CSS セレクターについてまとめました。次の記事では、属性セレクターについて掘り下げていきます。 -## まとめ +> [!NOTE] +> セレクターの完全なリストについては、 [CSS セレクターリファレンス](/ja/docs/Web/CSS/CSS_selectors)を参照してください。 -この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、[要素型、クラス、ID セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)から見ていくこともできます。 +## 関連情報 -セレクターの完全なリストについては、 [CSS セレクターリファレンス](/ja/docs/Web/CSS/CSS_selectors)を参照してください。 +- [CSS classes](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~01d?via=mdn), Scrimba _MDN カリキュラムパートナー_ + - : 対話型レッスンであり、 CSS クラスに関するいくつかのガイダンスを提供します。 -{{NextMenu("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Styling_a_bio_page", "Learn_web_development/Core/Styling_basics/Attribute_selectors", "Learn_web_development/Core/Styling_basics")}} diff --git a/files/ja/learn_web_development/core/styling_basics/box_model/index.md b/files/ja/learn_web_development/core/styling_basics/box_model/index.md index 3b3a21b5f43c17..b3829875e59d14 100644 --- a/files/ja/learn_web_development/core/styling_basics/box_model/index.md +++ b/files/ja/learn_web_development/core/styling_basics/box_model/index.md @@ -1,12 +1,13 @@ --- title: ボックスモデル slug: Learn_web_development/Core/Styling_basics/Box_model -original_slug: Learn/CSS/Building_blocks/The_box_model l10n: - sourceCommit: 033285c99a8e1bc05b646ff19b70d2e8b86dff46 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_layers", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Combinators", "Learn_web_development/Core/Styling_basics/Handling_conflicts", "Learn_web_development/Core/Styling_basics")}} CSS にはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することでより複雑なレイアウトができるようにします。 @@ -15,23 +16,22 @@ CSS にはボックスの概念があり、これを理解することは CSS 前提条件: - 基本的なソフトウェアがインストールされていること、 - ファイルの扱い、 - HTML の基本（HTML 入門で学習）、および CSS の動作に関する考え（CSS の第一歩で学習）に関する基本的な知識を得ている。 + HTML の基本（ + 基本的な HTML の構文を学んでいること）。 - 目標: + 学習成果: - CSS のボックスモデルとその構成要素、代替モデルへの切り替えについて学ぶこと。 +
    +
  • ブロック要素とインライン要素。
    • +
  • 要素を構成するさまざまなボックスと、それらのスタイル設定方法（コンテンツ、マージン、境界、パディング）
    • +
  • 代替ボックスモデル（box-sizing: border-box でアクセス）と、通常のボックスモデルとの違いについて説明します。
    • +
  • マージンの相殺。
    • +
  • 基本的な display の値（block, inline, inline-block, none）とボックスの動作にどう影響するか。
    • +
@@ -43,18 +43,16 @@ CSS にはいくつかの種類のボックスがあり、一般的に**ブロ 一般的に、様々な値を持つことができる {{cssxref("display")}} プロパティを使用して、表示型に様々な値を設定することができます。 -## 外側の表示型 - -ボックスの外側の表示型が `block` である場合は、次のように動作します。 +ボックスの表示型が `block` である場合は、次のように動作します。 -- ボックスは新しい行に分割されます。 +- ボックスは新しい行に現れます。 - {{cssxref("width")}} および {{cssxref("height")}} プロパティが尊重されます。 - パディング、マージン、境界により、このボックスから他の要素が遠ざけられます。 - {{cssxref("width")}} が指定されていない場合、ボックスはインライン方向に伸びて、コンテナーで使用可能な空間を埋めます。多くの場合、ボックスがコンテナーと同じ幅になり、利用可能な空間の 100% を占めるということです。 HTML 要素の中には `

` や `

` のように、既定で `block` を外側の表示型として使用するものがあります。 -ボックスの外側の表示型が `inline` である場合は、次のように動作します。 +ボックスの表示型が `inline` である場合は、次のように動作します。 - ボックスは新しい行に分割されません。 - {{cssxref("width")}} および {{cssxref("height")}} プロパティは適用されません。 @@ -63,18 +61,17 @@ HTML 要素の中には `

` や `

` のように、既定で `block` を外 HTML 要素の中には、 ``、``、``、`` のように、既定で `inline` を外側の表示型として使用するものがあります。 -## 内側の表示型 +ブロックおよびレイアウトは、ウェブにおける既定の振る舞いです。既定では、他に指示がない限り、ボックス内の要素は **[通常フロー](/ja/docs/Learn_web_development/Core/CSS_layout/Introduction#normal_layout_flow)** でレイアウトされ、ブロックボックスやインラインボックスとして振る舞います。 -ボックスには内側の表示型もあり、ボックス内の要素をどのようにレイアウトするかを指定します。 +## 内側の表示型と外側の表示型 -ブロックおよびレイアウトは、ウェブにおける既定の振る舞いです。既定では、他に指示がない限り、ボックス内の要素は **[通常フロー](/ja/docs/Learn/CSS/CSS_layout/Normal_Flow)** でレイアウトされ、ブロックボックスやインラインボックスとして振る舞います。 +`block`および`inline`の表示値は、**外側の表示**型と言います。ボックスが、その周囲の他のボックスと関連してどのようにレイアウトされるかに影響します。ボックスには、**内側の表示**型もあり、ボックス内の要素がどのようにレイアウトされるかを決定します。 -内側の表示型は、例えば`display: flex;`を設定することで変更することができます。この要素は外側の表示型に `block` を使用しますが、内側の表示型は `flex` に変更されます。このボックスの直接の子要素はフレックスアイテムとなり、[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)の仕様に従って動作します。 +内側の表示型は、例えば `display: flex;` を設定することで変更することができます。この要素は外側の表示型に `block` を使用しますが、内側の表示型は `flex` に変更されます。このボックスの直接の子要素はフレックスアイテムとなり、[フレックスボックス](/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox)の仕様に従って動作します。 -CSS のレイアウトのより詳しい学習をする段階では、 [`flex`](/ja/docs/Learn/CSS/CSS_layout/Flexbox) を始めとしたボックスが持つことができる他の様々な内部値、例えば [`grid`](/ja/docs/Learn/CSS/CSS_layout/Grids) などに出会うでしょう。 +CSS のレイアウトのより詳しい学習をしていくと、 [`flex`](/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox) や、ボックスが持つことができる他の様々な、例えば [`grid`](/ja/docs/Learn_web_development/Core/CSS_layout/Grids) などに出会うでしょう。 -> [!NOTE] -> display の値、およびブロックおよびインラインレイアウトでのボックスの動作の詳細については、[ブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)に関する MDN ガイドを参照してください。 +現時点で内側と外側の用語についてあまり心配する必要はありません。これは内部的に現れるもので、他の場所でこれを見かける可能性がある場合に備えてここで言及しただけです。通常は単一の `display` 値を処理するだけで、それについて深く考える必要はありません。 ## さまざまな表示型の例 @@ -188,7 +185,7 @@ ul { CSS でブロックボックスを構成するものとしては、以下のものがあります。 -- **コンテンツボックス**: コンテンツが表示される領域。サイズは {{cssxref("inline-size")}} と {{cssxref("block-size")}}、または {{cssxref("width")}} と {{cssxref("height")}} などのプロパティを使用して制御します。 +- **コンテンツボックス**: コンテンツが表示される領域。サイズは {{cssxref("width")}} や {{cssxref("height")}} などのプロパティを使用して制御します。 - **パディングボックス**: パディングはコンテンツの周囲に空白として配置されます。サイズは {{cssxref("padding")}} および関連するプロパティを使用して制御します。 - **境界ボックス**: 境界ボックスは、コンテンツとパディングを囲みます。サイズは {{cssxref("border")}} および関連するプロパティを使用して制御します。 - **マージンボックス**: マージンは最も外側のレイヤーで、このボックスと他の要素の間の空白としてコンテンツ、パディング、および境界線を囲みます。サイズは {{cssxref("margin")}} および関連するプロパティを使用して制御できます。 @@ -199,7 +196,7 @@ CSS でブロックボックスを構成するものとしては、以下のも ### CSS 標準ボックスモデル -標準ボックスモデルでは、ボックスに `inline-size` と `block-size` （または `width` と `height`）を指定すると、*コンテンツボックス*のインライン方向のサイズととブロック方向のサイズ（横書きの言語では幅と鷹さ）が定義されます。すべての padding と border がその幅と高さに追加され、ボックスが占める合計サイズが取得されます。 +標準ボックスモデルでは、ボックスに `width` と `height` を指定すると、*コンテンツボックス*のインライン方向のサイズととブロック方向のサイズ（横書きの言語では幅と鷹さ）が定義されます。すべてのパディングと境界がその幅と高さに追加され、ボックスが占める合計サイズが算出されます。 以下の CSS をボックスに適用した場合、 @@ -237,9 +234,7 @@ CSS でブロックボックスを構成するものとしては、以下のも ```css .box { width: 350px; - inline-size: 350px; height: 150px; - block-size: 150px; margin: 10px; padding: 25px; border: 5px solid black; @@ -250,7 +245,7 @@ CSS でブロックボックスを構成するものとしては、以下のも ![代替ボックスモデルを使用している場合のボックスのサイズを示した図。](alternate-box-model.png) -すべての要素に代替ボックスモデルを使用するには（開発者の間では一般的な選択です）、 `` 要素に `box-sizing` プロパティを設定し、他の要素はすべてその値を継承するように設定します。 +すべての要素に代替ボックスモデルを使用するには（開発者の間ではよくある選択です）、 `` 要素に `box-sizing` プロパティを設定し、他の要素はすべてその値を継承するように設定します。 ```css html { @@ -297,7 +292,7 @@ html { ### ブラウザーの開発者ツールを使用してボックスモデルを見る -[ブラウザーの開発者ツール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を使用すると、ボックスモデルをはるかに簡単に理解できます。 Firefox の開発者ツールで要素を調べると、要素のサイズに加えて、マージン、パディング、境界が確認できます。この方法で要素を検査することは、ボックスが本当に思っているサイズであるかどうかを知る素晴らしい方法です。 +[ブラウザーの開発者ツール](/ja/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)を使用すると、ボックスモデルをはるかに簡単に理解できます。 Firefox の開発者ツールで要素を調べると、要素のサイズに加えて、マージン、パディング、境界が確認できます。この方法で要素を検査することは、ボックスが本当に思っているサイズであるかどうかを知る素晴らしい方法です。 ![Firefox の開発者ツールを使用した要素のボックスモデルの検査](box-model-devtools.png) @@ -574,7 +569,7 @@ span { これが役立つのは、 `padding` を追加して、リンクのヒット領域を大きくしたい場合です。 `` は `` のようなインライン要素です。 `display: inline-block` を使用してパディングを設定できるようにし、ユーザーがリンクをクリックしやすくします。 -これはナビゲーションバーでとてもよく見られます。下記のナビゲーションはフレックスボックスを使って一列に表示されていますが、 `` 要素にパディングを追加しています。パディングは `