forked from mdn/translated-content
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
208 additions
and
220 deletions.
There are no files selected for viewing
76 changes: 44 additions & 32 deletions
76
files/ja/learn_web_development/core/text_styling/fundamentals/index.md
Large diffs are not rendered by default.
Oops, something went wrong.
34 changes: 16 additions & 18 deletions
34
files/ja/learn_web_development/core/text_styling/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")}} |
Oops, something went wrong.