From 30a11d5754944d7aa77c743a6715a23a89778023 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Dec 2024 01:20:09 +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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/text_styling/fundamentals/index.md | 76 +++++---- .../core/text_styling/index.md | 34 ++-- .../core/text_styling/styling_links/index.md | 78 ++++------ .../core/text_styling/styling_lists/index.md | 145 ++++++++++-------- .../typesetting_a_homepage/index.md | 32 ++-- .../core/text_styling/web_fonts/index.md | 63 ++++---- 6 files changed, 208 insertions(+), 220 deletions(-) diff --git a/files/ja/learn_web_development/core/text_styling/fundamentals/index.md b/files/ja/learn_web_development/core/text_styling/fundamentals/index.md index 5eac72b08ee95c..e19a01916b1264 100644 --- a/files/ja/learn_web_development/core/text_styling/fundamentals/index.md +++ b/files/ja/learn_web_development/core/text_styling/fundamentals/index.md @@ -1,12 +1,13 @@ --- title: 基本的なテキストとフォントのスタイル設定 slug: Learn_web_development/Core/Text_styling/Fundamentals -original_slug: Learn/CSS/Styling_text/Fundamentals l10n: - sourceCommit: 721a334af54dd04cbd005bb91edc2c8ce2ad4744 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}} +{{LearnSidebar}} + +{{NextMenu("Learn_web_development/Core/Text_styling/Styling_lists", "Learn_web_development/Core/Text_styling")}} この記事では、 {{glossary("CSS")}} によるテキストの装飾の習得に向けて旅を始めましょう。 ここでは、フォントの太さ、ファミリーそしてスタイルの設定、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔などを含んだ、テキストやフォントの装飾の基本について詳しく説明します。 @@ -15,26 +16,32 @@ l10n: 前提条件: - HTML の基本（HTML 入門で学習）、 CSS の基本（CSS の第一歩で学習）。 + HTML によるコンテンツの構造化、および CSS によるスタイル設定の基本で学習）。 - 目的: + 学習成果: - ウェブページのテキストを装飾するために必要な基本的なプロパティとテクニックを学ぶこと。 + -## CSS でテキストの装飾には何が関係しているか +## CSS でテキストの装飾に関連するものは何か -HTML と CSS を使った作業ですでに経験したように、要素内のテキストは要素の[コンテンツボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)内にレイアウトされます。 コンテンツ領域の左上（RTL 言語のコンテンツの場合は右上）から始まり、ラインの終りに向かって流れます。 終りに達すると、次のラインに進み、続けてすべてのコンテンツがボックスに配置されるまで次のラインに進みます。 テキストコンテンツは事実上一連のインライン要素のようにふるまい、互いに隣接するラインに配置され、ラインの終りに達するまで、または、{{htmlelement("br")}} 要素を使用して手動で改行を強制しない限り改行を作成しません。 +HTML と CSS を使った作業ですでに経験したように、要素内のテキストは要素の[コンテンツボックス](/ja/docs/Learn_web_development/Core/Styling_basics/Box_model#ボックスの構成)内にレイアウトされます。 コンテンツ領域の左上（RTL 言語のコンテンツの場合は右上）から始まり、ラインの終りに向かって流れます。 終りに達すると、次のラインに進み、続けてすべてのコンテンツがボックスに配置されるまで次のラインに進みます。 テキストコンテンツは事実上一連のインライン要素のようにふるまい、互いに隣接するラインに配置され、ラインの終りに達するまで、または、{{htmlelement("br")}} 要素を使用して手動で改行を強制しない限り改行を作成しません。 > [!NOTE] -> 上の段落で混乱していると感じても問題ありません — 先に進む前に、ボックスモデル理論を磨くために、[ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)の記事に戻って見直してください。 +> 上の段落で混乱していると感じても問題ありません — 先に進む前に、ボックスモデル理論を磨くために、[ボックスモデル](/ja/docs/Learn_web_development/Core/Styling_basics/Box_model)の記事に戻って見直してください。 テキストを装飾するために使用される CSS プロパティは、一般的に次の 2 つのカテゴリーに分類されます。 この記事では、これらのプロパティを個別に説明します。 @@ -68,17 +75,17 @@ HTML と CSS を使った作業ですでに経験したように、要素内の {{cssxref("color")}} プロパティは、選択された要素の前景のコンテンツの色を設定します（通常はテキストですが、{{cssxref("text-decoration")}} プロパティを使用してテキストに下線や上線を配置するなど、他のいくつかの要素を含めることもできます）。 -`color` は次のように任意の [CSS カラー単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#colors)を受け入れることができます。 +`color` は次のように任意の [CSS カラー単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#色)を受け入れることができます。 -```css +```css live-sample___color p { color: red; } ``` -これにより、次のように段落は標準のブラウザーのデフォルトの黒ではなく赤になります。 +これにより、次のように段落は標準のブラウザー既定の黒ではなく赤になります。 -```html hidden +```html hidden live-sample___color

Tommy the cat

Well I remember it as though it were a meal ago…

@@ -96,11 +103,11 @@ p { ### フォントファミリー -テキストに別のフォントを設定するには、{{cssxref("font-family")}} プロパティを使用します — これにより、選択した要素に適用するブラウザーのフォント（またはフォントのリスト）を指定できます。 ウェブサイトにアクセスしているマシンで利用可能な場合にのみ、ブラウザーはフォントを適用します。 そうでない場合は、ブラウザーの[デフォルトフォント](#default_fonts)を使用するだけです。 簡単な例はこんな感じです。 +テキストに別のフォントを設定するには、{{cssxref("font-family")}} プロパティを使用します — これにより、選択した要素に適用するブラウザーのフォント（またはフォントのリスト）を指定できます。 ウェブサイトにアクセスしているマシンで利用可能な場合にのみ、ブラウザーはフォントを適用します。 そうでない場合は、ブラウザーの[既定のフォント](#既定のフォント)を使用するだけです。 簡単な例はこんな感じです。 ```css p { - font-family: arial; + font-family: Arial; } ``` @@ -118,7 +125,7 @@ p { 名前 - 総称タイプ + 総称型 メモ @@ -165,10 +172,10 @@ p { > [!NOTE] -> さまざまなリソースの中で、[cssfontstack.com](http://www.cssfontstack.com/) ウェブサイトには、Windows および macOS オペレーティングシステムで利用可能なウェブセーフフォントのリストがあり、使用しても安全と見なせるものについて判断を下すことができます。 +> さまざまなリソースの中で、[cssfontstack.com](https://www.cssfontstack.com/) ウェブサイトには、Windows および macOS オペレーティングシステムで利用可能なウェブセーフフォントのリストがあり、使用しても安全と見なせるものについて判断を下すことができます。 > [!NOTE] -> ウェブページとともにカスタムフォントをダウンロードして、フォントの使用方法を自由にカスタマイズできる方法があります。 それは、**ウェブフォント**（web fonts）です。 これはもう少し複雑で、このモジュールの後の別の記事でこれを議論するでしょう。 +> ウェブページとともにカスタムフォントをダウンロードして、フォントの使用方法を自由にカスタマイズできる方法があります。 それは、**ウェブフォント**（web fonts）です。 これはもう少し複雑で、このモジュールの後の[別な記事](/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts)で説明します。 #### 既定のフォント @@ -261,7 +268,7 @@ body { #### フォントスタック -ウェブページで使用したいフォントの可用性を保証することはできないため（ウェブフォントでさえ何らかの理由で失敗する*可能性*もあります）、ブラウザーに複数のフォントから選択できるように**フォントスタック** (font stack) を指定できます。 これは単に、次のようにカンマで区切られた複数のフォント名からなる `font-family` の値です。 +ウェブページで使用したいフォントの可用性を保証することはできないため（ウェブフォントでさえ何らかの理由で失敗する*可能性*もあります）、ブラウザーに複数のフォントから選択できるように**フォントスタック** (font stack) が指定できます。 これは単に、次のようにカンマで区切られた複数のフォント名からなる `font-family` の値です。 ```css p { @@ -282,7 +289,7 @@ p { 前の例に追加して、次のように段落に sans-serif フォントを付けます。 -```css +```css live-sample___a_font-family_example p { color: red; font-family: Helvetica, Arial, sans-serif; @@ -291,7 +298,7 @@ p { これにより、次のような結果が得られます。 -```html hidden +```html hidden live-sample___a_font-family_example

Tommy the cat

Well I remember it as though it were a meal ago…

@@ -309,7 +316,7 @@ p { ### フォントサイズ -前のモジュールの [CSS の値と単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units)の記事で、[長さとサイズの単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#長さ)を確認しました。 フォントサイズ（{{cssxref("font-size")}} プロパティで設定）は、これらの単位のほとんど（および[パーセント](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#percentages)などの他の単位）で測定された値を取ることができますが、テキストのサイズを設定するために使用する最も一般的な単位は次のとおりです。 +前のモジュールの [CSS の値と単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units)の記事で、[長さとサイズの単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#長さ)を確認しました。 フォントサイズ（{{cssxref("font-size")}} プロパティで設定）は、これらの単位のほとんど（および[パーセント](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#percentages)などの他の単位）で測定された値を取ることができますが、テキストのサイズを設定するために使用する最も一般的な単位は次のとおりです。 - `px` (pixels): テキストを表示したい高さのピクセル数。 これは絶対的な単位です。それはほとんどどんな状況でもページ上のフォントの同じ最終的な計算値になります。 - `em`: 1 `em`は、現在スタイル設定している要素の親要素に設定されているフォント サイズ（具体的には、親要素の中に格納されている大文字の M の幅）に等しくなります。異なるフォントサイズを設定した入れ子要素がたくさんある場合、これは動作がトリッキーになる可能性がありますが、下記で説明するように実現可能です。面倒でしょうか？慣れてしまえばとても自然なことですし、 `em` を使用することで、テキストだけでなくすべてのもののサイズを設定することができます。ウェブサイト全体のサイズを `em` を使用して設定することができるので、メンテナンスが簡単になります。 @@ -414,10 +421,10 @@ text-shadow: 4px 4px 5px red; 4 つのプロパティは次のとおりです。 -1. 元のテキストからの影の水平方向のオフセット。これは、ほとんどの CSS の[長さとサイズの単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#長さ)を取ることができますが、最も一般的には `px` を使用します。この値は含める必要があります。 +1. 元のテキストからの影の水平方向のオフセット。これは、ほとんどの CSS の[長さとサイズの単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#長さ)を取ることができますが、最も一般的には `px` を使用します。この値は含める必要があります。 2. 元のテキストからの影の垂直方向のオフセット。基本的に水平方向のオフセットと同じようにふるまいますが、影を左右ではなく上下に移動する点が異なります。 この値は含める必要があります。 -3. ぼかし半径。値が大きいほど、影はより広く拡散されます。 この値が含まれていない場合、既定値は 0 になり、ぼかしは行われません。 これは、ほとんどの CSS の[長さとサイズの単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#長さ)を取ることができます。 -4. 影のベースカラー — 任意の [CSS カラー単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#colors) を取ります。含まれていない場合、既定値は [`currentcolor`](/ja/docs/Web/CSS/color_value#currentcolor_keyword) であり、影の色は要素の [`color`](/ja/docs/Web/CSS/color) プロパティから導かれます。 +3. ぼかし半径。値が大きいほど、影はより広く拡散されます。 この値が含まれていない場合、既定値は 0 になり、ぼかしは行われません。 これは、ほとんどの CSS の[長さとサイズの単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#長さ)を取ることができます。 +4. 影のベースカラー — 任意の [CSS カラー単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#colors) を取ります。含まれていない場合、既定値は [`currentcolor`](/ja/docs/Web/CSS/color_value#currentcolor_keyword) であり、影の色は要素の [`color`](/ja/docs/Web/CSS/color) プロパティから導かれます。 #### 複数の影 @@ -468,7 +475,7 @@ p { } ``` -{{ EmbedLiveSample('複数の影', '100%', 260) }} +{{ EmbedLiveSample('Multiple_shadows', '100%', 260) }} > [!NOTE] > Sitepoint の記事 [Moonlighting with CSS text-shadow](https://www.sitepoint.com/moonlighting-css-text-shadow/) で、`text-shadow` の使い方のより興味深い例を見ることができます。 @@ -531,7 +538,7 @@ p { ### 行の高さ -{{cssxref("line-height")}} プロパティはテキストの各行の高さを設定します。これはほとんどの[長さとサイズの単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#長さ)をとることができますが、乗数として機能し、一般的に最良の選択肢と考えられる単位なしの値をとることもできます。 {{cssxref("font-size")}} が乗算されて `line-height` が得られます。 本文は行が離れていると、一般的に見栄えがよく、読みやすくなります。 推奨される行の高さは約 1.5 〜 2 （倍の高さ）です。テキストの行をフォントの高さの 1.6 倍に設定するには、次のようにします。 +{{cssxref("line-height")}} プロパティはテキストの各行の高さを設定します。これはほとんどの[長さとサイズの単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#長さ)をとることができますが、乗数として機能し、一般的に最良の選択肢と考えられる単位なしの値をとることもできます。 {{cssxref("font-size")}} が乗算されて `line-height` が得られます。 本文は行が離れていると、一般的に見栄えがよく、読みやすくなります。 推奨される行の高さは約 1.5 〜 2 （倍の高さ）です。テキストの行をフォントの高さの 1.6 倍に設定するには、次のようにします。 ```css p { @@ -585,7 +592,7 @@ p { ### 文字と単語の間隔設定 -{{cssxref("letter-spacing")}} プロパティと {{cssxref("word-spacing")}} プロパティを使用すると、テキスト内の文字と単語の間隔を設定できます。 これらはあまり使用しませんが、ある外観を得るためや、特に濃いフォントの読みやすさを向上させるために使用することがあります。 それらはほとんどの[長さとサイズの単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#長さ)を取ることができます。 +{{cssxref("letter-spacing")}} プロパティと {{cssxref("word-spacing")}} プロパティを使用すると、テキスト内の文字と単語の間隔を設定できます。 これらはあまり使用しませんが、ある外観を得るためや、特に濃いフォントの読みやすさを向上させるために使用することがあります。 それらはほとんどの[長さとサイズの単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#長さ)を取ることができます。 例として、この例の {{htmlelement("p")}} 要素の最初の行に次を適用したとします。 @@ -767,6 +774,11 @@ window.addEventListener("load", drawOutput); ## まとめ -この記事のテキストで遊んで楽しんでください。次の記事では、[HTML リストのスタイル設定](/ja/docs/Learn/CSS/Styling_text/Styling_lists)について知っておくべきことをすべて説明します。 +この記事のテキストで遊んで楽しんでください。次の記事では、HTML リストのスタイル設定について知っておくべきことをすべて説明します。 + +## 関連情報 + +- [Web-safe fonts](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~02b?via=mdn), Scrimba _MDN カリキュラムパートナー_ + - : この対話型のレッスンでは、ウェブセーフフォントを見ていき、単純な例に適用する方法を指定されたフォントを使って楽しく学んでいきます。 -{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}} +{{NextMenu("Learn_web_development/Core/Text_styling/Styling_lists", "Learn_web_development/Core/Text_styling")}} diff --git a/files/ja/learn_web_development/core/text_styling/index.md b/files/ja/learn_web_development/core/text_styling/index.md index cbd2319a781c0a..175be837149eb6 100644 --- a/files/ja/learn_web_development/core/text_styling/index.md +++ b/files/ja/learn_web_development/core/text_styling/index.md @@ -1,36 +1,34 @@ --- title: テキストの装飾 slug: Learn_web_development/Core/Text_styling -original_slug: Learn/CSS/Styling_text +l10n: + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- {{LearnSidebar}} -CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。 +{{NextMenu("Learn_web_development/Core/Text_styling/Fundamentals", "Learn_web_development/Core")}} + +CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。ページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。 ## 前提知識 -このモジュールを始める前に、[HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)のモジュールで説明したようにすでに HTML についての基本的な知識があり、[CSS 入門](/ja/docs/Learn/CSS/First_steps)で説明したように CSS の基本に慣れている必要があります。 +このモジュールを始める前に、 [HTML](/ja/docs/Learn_web_development/Core/Structuring_content) と [CSS の基礎](/ja/docs/Learn_web_development/Core/Styling_basics)に親しんでおいてください。 > [!NOTE] -> 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、[JSBin](https://jsbin.com/)、[Glitch](https://glitch.com/) のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。 - -## ガイド +> 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、[JSBin](https://jsbin.com/)、[Glitch](https://glitch.com/) のようなオンラインコーディングプログラムで（ほとんどの）サンプルコードを試せます。 -このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。 +## チュートリアルと課題 -- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) +- [基本的なテキストとフォントのスタイル設定](/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals) - : この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。 -- [リストの装飾](/ja/docs/Learn/CSS/Styling_text/Styling_lists) - - : リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。この記事はすべてを説明しています。 -- [リンクの装飾](/ja/docs/Learn/CSS/Styling_text/Styling_links) +- [リストのスタイル設定](/ja/docs/Learn_web_development/Core/Text_styling/Styling_lists) + - : リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべき最善の手法がいくつかあります。この記事はすべてを説明しています。 +- [リンクのスタイル設定](/ja/docs/Learn_web_development/Core/Text_styling/Styling_links) - : リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。 -- [ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts) +- [ウェブフォント](/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts) - : ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。 - -## 評価 - -以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。 - -- [コミュニティスクールのホームページの組版](/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) +- [課題: コミュニティスクールのホームページの組版](/ja/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage) 課題 - : この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。 + +{{NextMenu("Learn_web_development/Core/Text_styling/Fundamentals", "Learn_web_development/Core")}} diff --git a/files/ja/learn_web_development/core/text_styling/styling_links/index.md b/files/ja/learn_web_development/core/text_styling/styling_links/index.md index 87f667c01bcdcd..59b554d94880a6 100644 --- a/files/ja/learn_web_development/core/text_styling/styling_links/index.md +++ b/files/ja/learn_web_development/core/text_styling/styling_links/index.md @@ -1,58 +1,52 @@ --- title: リンクのスタイル設定 slug: Learn_web_development/Core/Text_styling/Styling_links -original_slug: Learn/CSS/Styling_text/Styling_links l10n: - sourceCommit: 68da45a87043a9d1bb33db8ae8c4b5393fc1c501 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} +{{LearnSidebar}} -[リンク](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)をスタイル設定するときは、擬似クラスを使用してリンク状態を効果的にスタイル設定する方法を理解することが重要です。 また、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクのスタイル設定方法を理解することが重要です。 この記事では、これらすべてのトピックを見ていきます。 +{{PreviousMenuNext("Learn_web_development/Core/Text_styling/Styling_lists", "Learn_web_development/Core/Text_styling/Web_fonts", "Learn_web_development/Core/Text_styling")}} + +[リンク](/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links)をスタイル設定するときは、擬似クラスを使用してリンク状態を効果的にスタイル設定する方法を理解することが重要です。 また、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクのスタイル設定方法を理解することが重要です。 この記事では、これらすべてのトピックを見ていきます。 - +
前提知識: - HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。 + HTML によるコンテンツの構造化、および CSS によるスタイル設定の基本で学習）。
目的:学習成果: - リンクの状態をスタイル設定する方法と、ナビゲーションメニューのような一般的な UI 機能でリンクを効果的に使用する方法を学ぶこと。 +
    +
  • 既定のリンクスタイルがウェブのユーザビリティにとって重要である理由を理解すること。これらは見慣れているもので、ユーザーがリンクを認識しやすくなります。
    • +
  • リンクの状態のスタイル設定: :hover, :focus, :visited, :active
    • +
  • リンク状態がアクセシビリティとユーザビリティに必要である理由を理解すること。
    • +
  • リンクにアイコンを加えること。
    • +
  • リストとリンクを含むナビゲーションメニューを作成すること。
    • +
-## いくつかのリンクを見てみましょう - -[ハイパーリンクの作成](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)のベストプラクティスに従って、HTML がリンクをどのように実装するかを調べました。 この記事では、この知識を基にして、リンクのスタイル設定のためのベストプラクティスを示します。 - ### リンク状態 -最初に理解するべきことはリンク状態の概念です。リンクが存在できる様々な状態のことで、それらは様々な[擬似クラス](/ja/docs/Learn/CSS/Building_blocks/Selectors#擬似クラス)を使ってスタイル設定することができます。 +最初に理解するべきことはリンク状態の概念です。リンクが存在できる様々な状態のことで、それらは様々な[擬似クラス](/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#擬似クラス)を使ってスタイル設定することができます。 - **リンク**: リンク先があるリンク（つまり、単なる名前付きアンカーではないもの）で、{{cssxref(":link")}} 擬似クラスを使用してスタイル設定します。 - **訪問済み**: 既に訪問済みの（ブラウザーの履歴に存在する）リンクで、{{cssxref(":visited")}} 擬似クラスを使用してスタイル設定します。 - **ホバー**: リンクにユーザーのマウスポインターが合わせられているときのリンクで、{{cssxref(":hover")}} 擬似クラスを使用してスタイル設定します。 -- **フォーカス**: フォーカスしたときのリンク（例えば、 - - Tab - - キーなどを使用してキーボードユーザーによって移動してきたか、{{domxref("HTMLElement.focus()")}} を使用してプログラムでフォーカスした）。これは {{cssxref(":focus")}} 擬似クラスを使用してスタイル設定します。 - +- **フォーカス**: フォーカスしたときのリンク（例えば、 Tab キーなどを使用してキーボードユーザーによって移動してきたか、 {{domxref("HTMLElement.focus()")}} を使用してプログラムでフォーカスした）。これは {{cssxref(":focus")}} 擬似クラスを使用してスタイル設定します。 - **アクティブ**: アクティブ化している（例えばクリックされている）ときのリンクで、{{cssxref(":active")}} 擬似クラスを使用してスタイル設定します。 -### 既定のスタイル +## 既定のスタイル 下記の例は、既定ではリンクがどのように見え、どのように動作するかを示しています。ただし、CSS はテキストをより目立たせるために拡大し、中央に配置しています。この例では、既定のスタイル設定の見た目や 動作と、より多くの CSS スタイルが適用されているこのページの他のリンクの見た目や 動作を比較することができます。 @@ -60,23 +54,7 @@ l10n: - 未訪問のリンクは青になります。 - 訪問済みのリンクは紫になります。 - リンクにポインターを当てると、マウスポインターが小さな手のアイコンに変わります。 -- フォーカスされたリンクには輪郭線が表示されます。このページのリンクはキーボードでタブキーを押すことでフォーカスできるはずです。（Mac の場合、 - - option - - \+ - - tab - - を使用するか、[Full Keyboard Access: All controls](https://support.apple.com/en-us/guide/mac-help/mchlp1399/mac) オプションを、 - - Ctrl - - \+ - - F7 - - を押して有効にする必要があります。 +- フォーカスされたリンクには輪郭線が表示されます。このページのリンクはキーボードでタブキーを押すことでフォーカスできるはずです。 - アクティブなリンクは赤です。クリック時にマウスボタンを押しっぱなしにしてみてください。 @@ -110,7 +88,7 @@ p { > [!NOTE] > リンクのスタイルは上記のプロパティに限定されているいるわけではありません。好きなプロパティを自由に使用できます。 -### リンクのスタイル設定 +## リンクのスタイル設定 既定の状態を少し詳しく見てきたので、典型的なリンクのスタイル設定のセットを見てみましょう。 @@ -200,7 +178,7 @@ CSS を適用するためのサンプル HTML も提供します。 - 次の 2 つのルールでは、`a:focus` と `a:hover` を使用して、フォーカスされたリンクとホバーされたリンクを異なる背景色に設定し、さらにリンクを目立たせるために下線を使用します。 - 最後に、`a:active` は、リンクがアクティブになっている間に反転色にするために使用され、重要なことが起こっていることが分かりやすくします。 -### アクティブラーニング: 自分のリンクをスタイル設定する +## アクティブラーニング: 自分のリンクをスタイル設定する このアクティブラーニングセッションでは、空のルールセットに自分で宣言を追加して、リンクを本当にかっこよく見せてください。 想像力を駆使して、ワイルドに。上記の例と同じように、よりかっこよく機能的なものを思いつくことができると確信しています。 @@ -374,13 +352,13 @@ a[href^="http"]::after { それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後のルールは興味深いもので、{{cssxref("::after")}} 擬似要素を使用しています。`0.8rem x 0.8rem` の擬似要素が、アンカーテキストの後にインライングロックとして置かれています。アイコンは擬似要素の {{cssxref("background")}} として描画されます。 -ここでは[相対的な単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#相対長の単位)である `em` を使用しています。アイコンのサイズはアンカーのテキストサイズに比例します。アンカーのテキストサイズが変更された場合、アイコンのサイズもそれに応じて調整されます。 +ここでは[相対的な単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#相対長の単位)である `em` を使用しています。アイコンのサイズはアンカーのテキストサイズに比例します。アンカーのテキストサイズが変更された場合、アイコンのサイズもそれに応じて調整されます。 -最後の一言です。どのように外部リンクだけを選択したのでしょうか？ [HTML のリンク](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)を適切に記述しているのなら、絶対 URL を使用しているのは外部リンクだけであるはずです。自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用したほうが効率的です。"http" というテキストは（2 番目と 3 番目のリンクのように）外部リンクにのみ現れるので、これを[属性セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors#属性セレクター)で選択できます。`a[href^="http"]` は {{htmlelement("a")}} 要素のうち、[`href`](/ja/docs/Web/HTML/Element/a#href) 属性が "http" で始まるものに限り選択します。 +最後んび。どうやって外部リンクだけを選択したのでしょうか？ [HTML のリンク](/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links)を適切に記述しているのなら、絶対 URL を使用しているのは外部リンクだけであるはずです。自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用したほうが効率的です。"http" というテキストは（2 番目と 3 番目のリンクのように）外部リンクにのみ現れるので、これを[属性セレクター](/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#属性セレクター)で選択できます。`a[href^="http"]` は {{htmlelement("a")}} 要素のうち、[`href`](/ja/docs/Web/HTML/Element/a#href) 属性が "http" で始まるものに限り選択します。 以上です。上のアクティブラーニングの節を再検討して、この新しいテクニックを試してみてください！ -> **メモ:** [背景](/ja/docs/Learn/CSS/Building_blocks)や[レスポンシブウェブデザイン](/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)にまだ慣れていなくても心配しないでください。 これらは他の場所で説明します。 +> **メモ:** [背景](/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders)や[レスポンシブウェブデザイン](/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)にまだ慣れていなくても心配しないでください。 これらは他の場所で説明します。 ## リンクをボタンとしてスタイル設定 @@ -449,7 +427,7 @@ HTML では、{{HTMLElement("nav")}} 要素に `"container"` クラスをつけ CSS には、コンテナーとそこに含まれるリンクのスタイル設定が記述されています。 - 2 番目のルールは次のように指定しています。 - - コンテナーは[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)です。その中に含まれるアイテムは、この場合はリンクが、フレックスアイテムになります。 + - コンテナーは[フレックスボックス](/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox)です。その中に含まれるアイテムは、この場合はリンクが、フレックスアイテムになります。 - フレックスアイテム間の溝は、コンテナーの幅の `0.625%` です。 - 3 番目のルールはリンクをスタイル設定しています。 - 最初の宣言である `flex: 1` は、アイテムの幅が調整されることを表しますので、コンテナーの利用可能な空間をすべて使用します。 @@ -458,6 +436,6 @@ CSS には、コンテナーとそこに含まれるリンクのスタイル設 ## まとめ -この記事が、リンクについて知っておく必要があるすべての情報を提供してくれることを願っています — 今のところは！ テキストのスタイル設定モジュールの最後の記事では、ウェブサイトでの[カスタムフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)（またの名をウェブフォント）の使用方法について詳しく説明しています。 +この記事が、今のところは、リンクについて知っておく必要があるすべての情報を提供してくれることを願っています。 テキストのスタイル設定モジュールの最後の記事では、ウェブサイトでのカスタムフォント（またの名をウェブフォント）の使用方法について詳しく説明しています。 -{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} +{{PreviousMenuNext("Learn_web_development/Core/Text_styling/Styling_lists", "Learn_web_development/Core/Text_styling/Web_fonts", "Learn_web_development/Core/Text_styling")}} diff --git a/files/ja/learn_web_development/core/text_styling/styling_lists/index.md b/files/ja/learn_web_development/core/text_styling/styling_lists/index.md index 2a4aab888c190f..e6da005d9da382 100644 --- a/files/ja/learn_web_development/core/text_styling/styling_lists/index.md +++ b/files/ja/learn_web_development/core/text_styling/styling_lists/index.md @@ -1,20 +1,41 @@ --- -title: リストの装飾 +title: リストのスタイル設定 slug: Learn_web_development/Core/Text_styling/Styling_lists -original_slug: Learn/CSS/Styling_text/Styling_lists +l10n: + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}} - -[リスト](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#リスト)は他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。 - -| 前提知識: | 基本的なコンピューターリテラシー、HTML の基本 ([HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)を学ぶ)、 CSS の基本 ([CSS 入門](/ja/docs/Learn/CSS/First_steps)を学ぶ)、[CSS のテキストとフォントの基礎](/ja/docs/Learn/CSS/Styling_text/Fundamentals)。 | -| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 学習目標: | リストの装飾に関連するベストプラクティスとプロパティに慣れること。 | +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Text_styling/Fundamentals", "Learn_web_development/Core/Text_styling/Styling_links", "Learn_web_development/Core/Text_styling")}} + +[リスト](/ja/docs/Learn_web_development/Core/Structuring_content/Lists)は他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべき最善の手法がいくつかあります。この記事はすべてを説明しています。 + + + + + + + + + + + + +
前提条件: + HTML によるコンテンツの構造化、および CSS によるスタイル設定の基本で学習）。 +
学習成果: +
    +
  • リストアイテムの間隔、例えばマージンや行の高さ。
    • +
  • list-style プロパティの使用方法。
    • +
+
## 簡単なリストの例 -はじめに、簡単なリストの例を見てみましょう。 この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たような装飾機能持っていますが、リストの種類に特有のものもあります。 [装飾していない例](https://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html)は Github にあります ([ソースコード](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html)もチェックしてください) 。 +はじめに、簡単なリストの例を見てみましょう。この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たようなスタイル設定を機能持っていますが、リストの種類に特有のものもあります。 [スタイル設定していない例](https://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html)は Github にあります ([ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-text/styling-lists/unstyled-list.html)もチェックしてください) 。 そのリストの例の HTML はこんな感じです。 @@ -74,19 +95,19 @@ original_slug: Learn/CSS/Styling_text/Styling_lists ``` -ここで実際の例に行き、[ブラウザー開発者ツール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を使用してリスト要素を調べると、次のようないくつかの装飾の既定設定に気付くでしょう。 +ここで実際の例に行き、[ブラウザーの開発者ツール](/ja/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)を使用してリスト要素を調べると、次のようないくつかの既定のスタイル設定に気付くでしょう。 -- {{htmlelement("ul")}} 要素と {{htmlelement("ol")}} 要素の上下の {{cssxref("margin")}} は `16px` (`1em`)、{{cssxref("padding-left")}} は `40px` (`2.5em`) です。 +- {{htmlelement("ul")}} 要素と {{htmlelement("ol")}} 要素の上下の {{cssxref("margin")}} は `16px` (`1em`)、{{cssxref("padding-left")}} は `40px` (`2.5em`) です。書字方向属性の [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) が右書き（`rtl`）に設定されている場合、 `ul` および `ol` 要素では、 {{cssxref("padding-right")}} が効果を発揮し、その既定値は `40px` (`2.5em`) です。 - リスト項目 ({{htmlelement("li")}} 要素) には、間隔の設定に関する既定はありません。 - {{htmlelement("dl")}} 要素の上下の {{cssxref("margin")}} は `16px` (`1em`) ですが、パディングの設定はありません。 - {{htmlelement("dd")}} 要素の {{cssxref("margin-left")}} は `40px` (`2.5em`) です。 - 参照用に含めた {{htmlelement("p")}} 要素には、さまざまな種類のリストと同じ `16px` (`1em`) の上下の {{cssxref("margin")}} があります。 -## リストの間隔の取り扱い +## リストの間隔の扱い -リストを装飾するときは、 (段落や画像などの) 周囲の要素と同じ垂直方向の間隔 (バーティカルリズム (vertical rhythm) とも呼ばれる) と、互いに同じ水平方向の間隔を維持するように装飾を調整する必要があります (Github で[完成した装飾した例](https://mdn.github.io/learning-area/css/styling-text/styling-lists/)を見ることができ、[ソースコード](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html)も見つけることができます) 。 +リストをスタイル設定するときは、 (段落や画像などの) 周囲の要素と同じ垂直方向の間隔 (バーティカルリズム (vertical rhythm) とも呼ばれる) と、互いに同じ水平方向の間隔を維持するようにスタイルを調整する必要があります (Github で[スタイル設定が完成した例](https://mdn.github.io/learning-area/css/styling-text/styling-lists/)を見ることができ、[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-text/styling-lists/index.html)も見つけることができます) 。 -テキストの装飾と間隔調整に使用する CSS は次のとおりです。 +テキストのスタイル設定と間隔調整に使用する CSS は次のとおりです。 ```css /* General styles */ @@ -124,12 +145,12 @@ dt { } ``` -- 1 番目の規則はサイト全体のフォントと `10px` の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。 -- 2 番目と 3 番目の規則では、見出し、さまざまなリストの種類 (リスト要素の子はこれらを継承) 、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。 +- 1 番目のルールはサイト全体のフォントと 10px の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。 +- 2 番目と 3 番目のルールでは、見出し、さまざまなリストの種類 (リスト要素の子はこれらを継承) 、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。 - 4 番目では、段落とリスト項目に同じ {{cssxref("line-height")}} を設定しているため、段落と各個々のリスト項目のラインの間隔は同じになります。 これは、バーティカルリズムを一定に保つのにも役立ちます。 -- 説明リストには 5 番目と 6 番目の規則が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ `line-height` を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。> +- 説明リストには 5 番目と 6 番目のルールが適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ `line-height` を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。> -## リスト固有の装飾 +## リスト固有のスタイル設定 リストの一般的な間隔調整テクニックを見てきました。 次に、リスト固有のプロパティを調べてみましょう。 最初に知っておくべき 3 つのプロパティがあり、それらは {{htmlelement("ul")}} や {{htmlelement("ol")}} 要素に設定できます。 @@ -137,7 +158,7 @@ dt { - {{cssxref("list-style-position")}}: 行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 - {{cssxref("list-style-image")}}: 行頭記号に簡単な正方形や円ではなく、カスタム画像を使うことができます。 -### 行頭記号の装飾 +### 行頭記号のスタイル設定 前述のように、{{cssxref("list-style-type")}} プロパティを使用して、行頭記号 (bullet point) に使用する行頭記号 (bullet) の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。 @@ -178,9 +199,9 @@ ul { } ``` -ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、[ボックスの装飾](/ja/docs/Learn/CSS/Building_blocks)モジュールで詳しく説明します。とりあえず、その例をご紹介しましょう。 +ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、[背景と境界線](/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders)モジュールで詳しく説明します。とりあえず、その例をご紹介しましょう。 -完成した例では、 (既に上で見たものの上に) 次のように順序なしリストを装飾しました。 +完成した例では、 (既に上で見たものの上に) 次のように順序なしリストを設定しました。 ```css ul { @@ -301,22 +322,22 @@ ul { > [!NOTE] > 数値以外の {{cssxref("list-style-type")}} を使用している場合でも、`value` 属性に同等の数値を使用する必要があります。 -## アクティブラーニング: ネストしたリストの装飾 +## アクティブラーニング: ネストしたリストのスタイル設定 -このアクティブラーニングセッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。 +このアクティブラーニングセッションでは、上で学んだことを取り入れて、ネストしたリストをスタイル設定してください。 HTML を提供してあるので、次のことを行います。 1. 順序なしリストに正方形の行頭記号を付けます。 2. 順序なしリスト項目と順序付きリスト項目のフォントサイズの 1.5 のラインの高さを指定します。 3. 順序付きリストに小文字のアルファベットの行頭記号を付けます。 4. 行頭記号の種類、間隔、その他見つけられるものは何でも試して、好きなだけリストの例を試してみてください。 -間違えた場合は、_Reset_ ボタンを使用していつでもリセットできます。 本当に立ち往生したら、答えを見るために _Show solution_ ボタンを押してください。 +間違えた場合は、_リセット_ ボタンを使用していつでもリセットできます。 本当に立ち往生したら、答えを見るために _答えを見る_ ボタンを押してください。 -```html hidden +```html-nolint hidden
-

HTML Input

+

HTML 入力

+ + -

CSS Input

+

CSS 入力

-

Output

+

出力

@@ -348,28 +369,28 @@ ul {
``` ```js hidden -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 solution = document.getElementById("solution"); - -var styleElem = document.createElement("style"); -var headElem = document.querySelector("head"); +const htmlInput = document.querySelector(".html-input"); +const cssInput = document.querySelector(".css-input"); +const reset = document.getElementById("reset"); +const htmlCode = htmlInput.value; +const cssCode = cssInput.value; +const output = document.querySelector(".output"); +const solution = document.getElementById("solution"); + +const styleElem = document.createElement("style"); +const headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput() { @@ -377,16 +398,26 @@ function drawOutput() { styleElem.textContent = cssInput.value; } -reset.addEventListener("click", function () { +reset.addEventListener("click", () => { htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); }); -solution.addEventListener("click", function () { +solution.addEventListener("click", () => { htmlInput.value = htmlCode; - cssInput.value = - "ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}"; + cssInput.value = `ul { + list-style-type: square; +} + +ul li, +ol li { + line-height: 1.5; +} + +ol { + list-style-type: lower-alpha; +}`; drawOutput(); }); @@ -395,24 +426,10 @@ cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); ``` -{{ EmbedLiveSample('Playable_code', 700, 800) }} - -## 関連情報 - -CSS カウンターは、リストの数え方と装飾をカスタマイズするための高度なツールを提供しますが、非常に複雑です。 あなたが自身を伸ばしたいと思うならば、これらを調べることを勧めます。 次を見てください。 - -- {{cssxref("@counter-style")}} -- {{cssxref("counter-increment")}} -- {{cssxref("counter-reset")}} - -## 腕試し - -この記事の最後までたどり着き、アクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後も最も重要な情報を覚えていられますか？モジュールの最後には、あなたがこの情報を覚えているかどうかを確認するための評価があります — [コミュニティスクールのホームページの組版](/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)を参照してください。 - -この評価は、このモジュールで説明されているすべての知識をテストするものなので、先に進む前に他の記事を読んでおくとよいでしょう。 +{{ EmbedLiveSample('Active_learning_Styling_a_nested_list', 700, 800) }} ## まとめ -関連するいくつかの基本的な原則と特定のプロパティを知っていれば、リストの装飾のこつは比較的簡単です。 次の記事では、リンクの装飾テクニックについて説明します。 +リストは、関連付けられた基本原則と特定のプロパティをいくつか知れば、スタイル設定のコツをつかむのは比較的簡単です。次の記事では、リンクのスタイル設定のテクニックについて説明します。 -{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}} +{{PreviousMenuNext("Learn_web_development/Core/Text_styling/Fundamentals", "Learn_web_development/Core/Text_styling/Styling_links", "Learn_web_development/Core/Text_styling")}} diff --git a/files/ja/learn_web_development/core/text_styling/typesetting_a_homepage/index.md b/files/ja/learn_web_development/core/text_styling/typesetting_a_homepage/index.md index fb5fc1f5caa0e9..c2b77a577b195a 100644 --- a/files/ja/learn_web_development/core/text_styling/typesetting_a_homepage/index.md +++ b/files/ja/learn_web_development/core/text_styling/typesetting_a_homepage/index.md @@ -1,29 +1,15 @@ --- -title: コミュニティスクールのホームページの組版 +title: "課題: コミュニティスクールのホームページの組版" slug: Learn_web_development/Core/Text_styling/Typesetting_a_homepage -original_slug: Learn/CSS/Styling_text/Typesetting_a_homepage l10n: - sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} - -この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 途中で楽しい時間があるかもしれません。 - - - - - - - - - - - - -
前提知識: - この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。 -
目的:CSS テキスト装飾テクニックの理解をテストすること。
+{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Text_styling/Web_fonts", "Learn_web_development/Core/CSS_layout", "Learn_web_development/Core/Text_styling")}} + +この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 その過程は楽しくなるかもしれません。 ## 出発点 @@ -83,6 +69,6 @@ l10n: 次のスクリーンショットは、完成したデザインの外観の例です。 -![「コミュニティスクールのウェブサイトホームページ」のテキストスタイル設定評価のデザイン完了画面。見出しは「St Huxley's Community College」となっています。バナーヘッダーとコンテンツを区切る赤い行があります。本文は 3 段組みです。最初の一番広い段組みには、学生にとってのカレッジの重要性を示唆するいくつかの段があります。2 つ目の段組みには、カレッジが提供するトップコースの選択肢へのリンクのリストがあります。3 つ目の段組みには、ウェブサイトのさまざまな節へのリンクが長方形の輪郭線で描かれた縦長のナビゲーションバーがあります。](example2.png) +![課題デザインの完了画面のスクリーンショット。上部の見出しには 'St Huxley's Community College' と表示されています。バナーヘッダーとコンテンツの間には赤い線が引かれています。メインコンテンツは 3 段組みで、 2 つの段にはテキストが含まれ、 3 つ目の段には縦のナビゲーションバーがあります。](example2.png) -{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} +{{PreviousMenuNext("Learn_web_development/Core/Text_styling/Web_fonts", "Learn_web_development/Core/CSS_layout", "Learn_web_development/Core/Text_styling")}} diff --git a/files/ja/learn_web_development/core/text_styling/web_fonts/index.md b/files/ja/learn_web_development/core/text_styling/web_fonts/index.md index bf9f83cde5c0e3..8909ac6c007b4b 100644 --- a/files/ja/learn_web_development/core/text_styling/web_fonts/index.md +++ b/files/ja/learn_web_development/core/text_styling/web_fonts/index.md @@ -1,12 +1,13 @@ --- title: ウェブフォント slug: Learn_web_development/Core/Text_styling/Web_fonts -original_slug: Learn/CSS/Styling_text/Web_fonts l10n: - sourceCommit: fc646c98ea7f77b2f100fc934ccf9f7a73132889 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Text_styling/Styling_links", "Learn_web_development/Core/Text_styling/Typesetting_a_homepage", "Learn_web_development/Core/Text_styling")}} このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます。これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。 @@ -15,18 +16,22 @@ l10n: 前提知識: - HTML の基本（HTML 入門の学中）、 CSS の基本（CSS 入門の学習）、 - CSS のテキストとフォントの基礎。 + HTML によるコンテンツの構造化、 + CSS によるスタイル設定の基本、 + 基本的なテキストとフォントのスタイル設定。 - 目的: + 学習成果: - サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得すること。 + @@ -34,7 +39,7 @@ l10n: ## フォントファミリーの復習 -[基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals)で見たように、HTML に適用されるフォントは {{cssxref("font-family")}} プロパティを使って制御できます。 これは 1 つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。 +[基本的なテキストとフォントのスタイル設定](/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals)で見たように、HTML に適用されるフォントは {{cssxref("font-family")}} プロパティを使って制御できます。 これは 1 つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。 ```css p { @@ -42,11 +47,11 @@ p { } ``` -このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆる[ウェブセーフフォント](/ja/docs/Learn/CSS/Styling_text/Fundamentals#ウェブセーフフォント)です。フォントスタックを使用して、好ましいフォント、ウェブセーフな代替フォント、既定のシステムフォントの順で指定することができます。しかし、これはあなたのデザインが各フォントで作業することを確認するために必要なテストのため、作業量が増えてしまいます。（訳注：日本語フォントを英語フォントの後、既定のフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語の既定のフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。） +このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆる[ウェブセーフフォント](/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals#ウェブセーフフォント)です。フォントスタックを使用して、好ましいフォント、ウェブセーフな代替フォント、既定のシステムフォントの順で指定することができます。しかし、これはあなたのデザインが各フォントで作業することを確認するために必要なテストのため、作業量が増えてしまいます。（訳注：日本語フォントを英語フォントの後、既定のフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語の既定のフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。） ## ウェブフォント -しかし、これはとてもうまく動作する代替案があります。CSS では、ウェブ上で利用できるフォントファイルを指定して、ウェブサイトにアクセスしたときに一緒にダウンロードさせることができます。つまり、この CSS 機能に対応しているブラウザーであれば、指定したフォントを表示することができるのです。すごいですね。 必要な構文は次のようなものです。 +うまく動作する代替案があります。 CSS では、ウェブ上で利用できるフォントファイルを指定して、ウェブサイトにアクセスしたときに一緒にダウンロードさせることができます。つまり、この CSS 機能に対応しているブラウザーであれば、指定したフォントを表示することができるのです。すごいですね。 必要な構文は次のようなものです。 まず最初に、CSS の先頭に {{cssxref("@font-face")}} ブロックがあり、ダウンロードするフォントファイルを指定します。 @@ -70,14 +75,12 @@ html { ウェブフォントに関して留意すべき重要な点が 2 つあります。 1. フォントは一般的に無料で使用できるものではありません。フォントの代金を支払ったり、コード内（またはサイト内）でフォント作成者のクレジット表記をするなどのライセンス条件に従ったりする必要があります。フォントを盗んで、適切なクレジットを与えずに使用すべきではありません。 -2. 主要なブラウザーのすべてが WOFF/WOFF2 （Web Open Font Format version 1 and 2）に対応しています。 IE9（2011 年リリース）など古いブラウザーでも WOFF 形式には対応しています。 +2. 主要なブラウザーのすべてが WOFF/WOFF2 (Web Open Font Format version 1 and 2) に対応しています。 IE9（2011 年リリース）など古いブラウザーでも WOFF 形式には対応しています。 3. WOFF2 は、可変フォント、クロマティックフォント、フォントコレクションを含む TrueType および OpenType の仕様の全てに対応しています。 4. フォントファイルを掲載されている順番は重要です。ダウンロードする複数のフォントファイルのリストをブラウザーに指定された場合、ブラウザーは使用される可能性のある最初のフォントファイルを選ぶことになります。そのため、最初に掲載する形式は、優先される形式、つまり WOFF2 とし、古い形式はその後に掲載されるようにします。ある形式を理解できないブラウザーは、リストの中の次の形式で対応することになります。 5. 古いブラウザーで作業する必要がある場合、EOT (Embedded Open Type), TTF (TrueType Font), SVG ウェブフォントをダウンロードできるように指定する必要があります。この記事では、 Fontsquirrel Webfont Generator を使用して、必要なファイルを生成する方法を説明します。 -[Firefox Font Editor](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/index.html) を使えば、ウェブフォントであろうとなかろうと、ページで使用されているフォントを調べたり操作したりすることができます。この動画は素晴らしいチュートリアルを提供しています。 - -{{EmbedYouTube("UazfLa1O94M")}} +[Firefox Font Editor](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/index.html) を使えば、ウェブフォントであろうとなかろうと、ページで使用されているフォントを調べたり操作したりすることができます。 ## アクティブラーニング: ウェブフォントの例 @@ -112,22 +115,13 @@ html { ジェネレーターの処理が完了したら、ZIP ファイルをダウンロードする必要があります — それを HTML と CSS と同じディレクトリーに保存してください。 -古いブラウザーに対応する必要がある場合は、キットをダウンロードする前に、 Fontsquirrel Webfont Generator で「エキスパート」モードを選択し、SVG、EOT、TTF の形式のいずれかを選択してください。 - -フォント生成のためのウェブサービスは、通常、ファイルサイズを制限しています。そのような場合は、以下のようなツールを使用することを検討してください。 - -1. [sfnt2woff-zopfli](https://github.com/bramstein/sfnt2woff-zopfli) は ttf を woff へ変換 -2. [fontforge](https://fontforge.org/) は ttf を svg へ変換 -3. [batik ttf2svg](https://people.apache.org/~clay/batik/ttf2svg.html) は ttf を svg へ変換 -4. [woff2](https://github.com/google/woff2) は ttf を woff2 へ変換 - ### デモでのコードの実装 この時点で、生成したばかりのウェブフォントのキットを展開します。 展開したディレクトリー内には、3 つの便利なアイテムがあります。 - 各フォントの複数のバージョン（`.woff`、`.woff2` ファイル） 。 - 各フォントのデモ HTML ファイル: ブラウザーにこれらをロードして、フォントがさまざまな使用状況でどのように見えるかを確認します。 -- `stylesheet.css` ファイル: 生成された `@font-face` コードが含まれています。 +- `stylesheet.css` ファイル: 生成された @font-face のコードが含まれています。 デモにこれらのフォントを実装するには、次の手順に従います。 @@ -198,12 +192,15 @@ Fontsquirrel によって生成された `@font-face` 構文を調べてみま > [!NOTE] > ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、{{cssxref("@font-face/unicode-range", "unicode-range")}} の値でウェブフォントで使用する特定の文字範囲を指定することもできます。対応しているブラウザーでは、ページに指定した文字が含まれている場合にのみフォントがダウンロードされるため、不要なダウンロードを省くことができます。Drew McLellan による [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/)（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。 -## 可変フォント +## まとめ -ブラウザーで利用できる新しいフォント技術に、可変フォントと呼ばれるものがあります。これは、幅、太さ、スタイルごとに別個のフォントファイルを保有するのではなく、ひとつのファイルに書体の異なるさまざまなバリエーションを組み込むことができるフォントです。このコースの初級編ではやや高度な内容になっていますが、もしあなたが背伸びをして可変フォントを調べたいなら、[可変フォントガイド](/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide)を読んでみてください。 +テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「コミュニティスクールのホームページの組版」の評価で理解度をテストしましょう。 -## まとめ +## 関連情報 -テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「[コミュニティスクールのホームページの組版](/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)」の評価で理解度をテストします。 +- [可変フォントガイド](/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) + - : 可変フォントを使用すると、幅、太さ、スタイルごとに別個のフォントファイルを保有するのではなく、単一のファイルにさまざまなバリエーションの書体を組み込むことができます。このコースの初心者向けの内容としては少し高度ですが、自分自身を伸ばしたいとお考えの場合は、このガイドを見ていくと良いでしょう。 +- [Fonts knowledge](https://fonts.google.com/knowledge), Google Fonts + - : フォントを使用するさまざまな側面に応じた、有益な詳細記事のシリーズ。 -{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}} +{{PreviousMenuNext("Learn_web_development/Core/Text_styling/Styling_links", "Learn_web_development/Core/Text_styling/Typesetting_a_homepage", "Learn_web_development/Core/Text_styling")}}