CSS でのタイポグラフィーとフォント スタイル

レクチャー 4: CSS でのタイポグラフィーとフォント スタイル

この講義では、CSS を使用してテキストのスタイルを設定する方法を学びます。タイポグラフィは、読みやすさ、ユーザー エクスペリエンス、全体的な美しさに影響を与える Web デザインの重要な側面です。この講義を終えるまでに、さまざまなフォント スタイルを適用し、Web サイト上のテキストの外観を制御する方法がわかるようになります。

---

Web フォントを理解する

Web フォントを使用すると、Web サイトでさまざまな書体を使用できます。デバイスにプレインストールされているシステム フォントを使用することも、Google Fonts などのサービスを使用してカスタム フォントをインポートすることもできます。

1.システムフォント

システム フォントはほとんどのデバイスにプレインストールされているため信頼性がありますが、デザインのオプションが制限されます。

• 例:

  body {
    font-family: Arial, sans-serif;
  }

2. Google フォント

Google Fonts では、Web サイトに簡単に統合できる幅広い Web フォントを提供しています。

• 例:

  1. まず、HTML にフォント リンクを含めます。

   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

1. 次に、CSS にフォントを適用します。
   

    body {
      font-family: 'Roboto', sans-serif;
    }
   

CSS のフォント プロパティ

CSS には、フォント サイズ、太さ、スタイルなど、フォントのスタイルを設定するためのさまざまなプロパティが用意されています。

1.フォントサイズ

font-size プロパティを使用してテキストのサイズを制御できます。

• 例:

  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }

2.フォントの太さ

font-weight プロパティを使用すると、テキストの太さを設定できます。

• 例:

  h1 {
    font-weight: bold; /* Or use numeric values like 700 */
  }

3.フォントスタイル

font-style プロパティを使用すると、テキストを斜体にすることができます。

• 例:

  em {
    font-style: italic;
  }

4.フォントのバリエーション

テキストを小文字で表示するには、font-variant を使用します。

• 例:

  p.caps {
    font-variant: small-caps;
  }

5.行の高さ

line-height プロパティは、テキストの行間のスペースを制御します。

• 例:

  p {
    line-height: 1.5;
  }

6.テキストの配置

text-align プロパティは、要素内のテキストの水平方向の配置を制御します。

• 例:

  h1 {
    text-align: center;
  }

7.文字装飾

text-decoration プロパティを使用すると、テキストに下線、上線、取り消し線を追加できます。

• 例:

  a {
    text-decoration: underline;
  }

8.テキストシャドウ

text-shadow プロパティを使用して、テキストにシャドウ効果を追加できます。

• 例:

  h2 {
    text-shadow: 2px 2px 5px gray;
  }

実践例:

これらのプロパティを組み合わせて、タイポグラフィーに重点を置いて Web ページのスタイルを設定してみましょう。

HTML:

<div class="content">
  <h1>Welcome to Our Blog</h1>
  <h2>Latest Updates</h2>
  <p class="intro">Stay updated with the latest trends in web development, design, and more.</p>
  <p>Explore articles, tutorials, and resources to help you master the art of web design.</p>
</div>

CSS:

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

この例では:

• すべてのテキストには Google フォント「Open Sans」が使用されています。
• 見出し (h1、h2) は、特定のフォント サイズ、太さ、テキストの影でスタイル設定されます。
• 段落には標準のフォント サイズが与えられ、斜体や小文字などの特別なスタイルが .intro クラスに適用されます。
• コンテンツは、最大幅と自動余白を使用してページの中央に配置されます。

練習演習

1. さまざまな見出しと段落を含む HTML ページを作成します。
2. さまざまなフォント プロパティを適用してテキストのスタイルを設定します。
3. Google フォントを使用して、ウェブページに独特の外観を与えます。
4. テキストの配置、装飾、影の効果を試してみましょう。

---

次回: 次の講義では、CSS レイアウト: Floats、Flexbox、および Grid について説明します。ここでは、複雑で応答性の高いレイアウトを作成する方法を学びます。あなたのウェブサイト。乞うご期待!

---

LinkedIn でフォローしてください
リドイ・ハサン

以上がCSS でのタイポグラフィーとフォント スタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。