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 93f0f5c25f18dab9d176bd4f6de5d30e にフォント リンクを含めます。

   <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:

5d1e94760349a02ec7e3e05385bc999a
  4a249f0d628e2318394fd9b75b4636b1Welcome to Our Blog473f0a7621bec819994bb5020d29372a
  c1a436a314ed609750bd7c7d319db4daLatest Updates2e9b454fa8428549ca2e64dfac4625cd
  03c914392195facb4bb03ef129401e65Stay updated with the latest trends in web development, design, and more.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeExplore articles, tutorials, and resources to help you master the art of web design.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

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 サイトの他の関連記事を参照してください。