Skip to content

Commit

Permalink
2024/12/20 時点の英語版に基づき更新
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Dec 29, 2024
1 parent 03cc5af commit b1436c3
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 220 deletions.

Large diffs are not rendered by default.

34 changes: 16 additions & 18 deletions files/ja/learn_web_development/core/text_styling/index.md
Original file line number Diff line number Diff line change
@@ -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) <sup>課題</sup>
- : この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。

{{NextMenu("Learn_web_development/Core/Text_styling/Fundamentals", "Learn_web_development/Core")}}
Loading

0 comments on commit b1436c3

Please sign in to comment.