---
title: テキストの装飾
slug: Learn/CSS/Styling_text
tags:
  - Beginner
  - CSS
  - CodingScripting
  - Fonts
  - Landing
  - Links
  - Module
  - Text
  - font
  - letter
  - line
  - lists
  - shadow
  - web fonts
translation_of: Learn/CSS/Styling_text
---
<div>{{LearnSidebar}}</div>

<p class="summary"><span class="seoSummary">CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</span></p>

<h2 id="Prerequisites" name="Prerequisites">前提知識</h2>

<p>このモジュールを始める前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>のモジュールで説明したようにすでに HTML についての基本的な知識があり、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>で説明したように CSS の基本に慣れている必要があります。</p>

<div class="note">
<p><strong>メモ</strong>: 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、<a href="http://jsbin.com/">JSBin</a>、<a href="https://codepen.io/">CodePen</a>、<a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。</p>
</div>

<h2 id="Guides" name="Guides">ガイド</h2>

<p>このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。</p>

<dl>
 <dt><a href="/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></dt>
 <dd>この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。</dd>
 <dt><a href="/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></dt>
 <dd>リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。この記事はすべてを説明しています。</dd>
 <dt><a href="/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></dt>
 <dd>リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。</dd>
 <dt><a href="/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></dt>
 <dd>ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。</dd>
</dl>

<h2 id="Assessments" name="Assessments">評価</h2>

<p>以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。</p>

<dl>
 <dt><a href="/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></dt>
 <dd>この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。</dd>
</dl>