💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、学生たちは CSS のフォントプロパティを使ってテキストをスタイリッシュにする方法を学び、ウェブデザインにおける基本的な文字装飾技術を探求します。包括的なチュートリアルでは、HTML ドキュメントの作成と、フォントファミリー、サイズ、行間、スタイル、太さなどのさまざまなフォント装飾方法の適用を通じて学習者を案内します。
参加者はまず基本的な HTML 構造を設定し、次にテキストの外見を制御する CSS プロパティを実装することで徐々に文字装飾技術を向上させます。実践的な練習を通じて、学生たちはさまざまなフォント技術を使って視覚的に魅力的で読みやすいウェブコンテンツを作成する方法を見つけ出し、ウェブ文字装飾デザインの実践的な経験を得ることができます。
このステップでは、HTML ファイルを作成し、CSS を使ってテキストをスタイリッシュにするための基本構造を設定する方法を学びます。WebIDE を使って、文字装飾の練習の基礎となる新しい HTML ドキュメントを作成します。
まず、WebIDE の~/projectディレクトリに移動します。ファイルエクスプローラで右クリックして「新しいファイル」を選択することで、typography.htmlという新しいファイルを作成します。
作成する基本的な HTML 構造は次の通りです。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Typography Styling</title>
<style>
/* 後のステップで CSS スタイルをここに追加します */
</style>
</head>
<body>
<h1>Welcome to CSS Typography</h1>
<p>This paragraph will demonstrate various text styling techniques.</p>
</body>
</html>この HTML 構造の主要なコンポーネントを分解してみましょう。
<!DOCTYPE html>はこれを HTML5 ドキュメントとして宣言します<html lang="en">はドキュメントの言語を設定します<head>はドキュメントに関するメタデータを含みます<meta charset="UTF-8">は適切な文字エンコーディングを確保します<meta name="viewport">はレスポンシブデザインに役立ちます<title>はページのタイトルを設定します<style>タグは CSS を追加する場所です（後のステップで拡張します）<body>はページの表示内容を含みますこのファイルをブラウザで開いたときの例の出力は次の通りです。
["見出し「Welcome to CSS Typography」とその下の段落があるシンプルなページ"]このステップでは、CSS を使って見出しに異なるフォントファミリーを適用する方法を学びます。フォントファミリーは、テキストの文字種を決定する重要なプロパティであり、視覚的に魅力的で読みやすい文字装飾を作成することができます。
WebIDE でtypography.htmlファイルを開き、<style>セクションを変更してフォントファミリーのプロパティを追加します。
<style>
h1 {
font-family: Arial, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
}
p {
font-family: Verdana, sans-serif;
}
</style>フォントファミリーのキーコンセプトを見てみましょう。
sans-serifserifmonospace異なる見出しを示すように HTML を拡張します。
<body>
<h1>Main Heading (Arial)</h1>
<h2>Subheading (Times New Roman)</h2>
<p>Paragraph text in Verdana</p>
</body>ブラウザでの例の出力は次の通りです。
[見出しが以下のように表示されるページ：
- Arialのメイン見出し
- Times New Romanのサブ見出し
- Verdanaの段落]このステップでは、CSS を使ってフォントサイズと行間を設定することで、テキストの読みやすさと外観を制御する方法を学びます。これらのプロパティは、視覚的に魅力的で読みやすい文字装飾を作成するために重要です。
typography.htmlファイルを開き、次の CSS で<style>セクションを更新します。
<style>
h1 {
font-family: Arial, sans-serif;
font-size: 36px;
line-height: 1.5;
}
h2 {
font-family: "Times New Roman", serif;
font-size: 24px;
line-height: 1.4;
}
p {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
}
</style>キーコンセプトを分解してみましょう。
異なるテキストサイズを示すように HTML を拡張します。
<body>
<h1>Main Heading (36px)</h1>
<h2>Subheading (24px)</h2>
<p>Paragraph text with increased line height for better readability.</p>
</body>ブラウザでの例の出力は次の通りです。
[見出しが以下のように表示されるページ：
- 大きなメイン見出し
- 小さなサブ見出し
- 読みやすさを向上させるために行間が広がった段落]このステップでは、CSS を使ってフォントスタイルと太さを使ってテキストに強調やバラエティを追加する方法を学びます。これらのプロパティは、視覚的な階層構造を作成し、文字装飾の全体的なデザインを改善するのに役立ちます。
typography.htmlファイルを開き、次の CSS で<style>セクションを更新します。
<style>
h1 {
font-family: Arial, sans-serif;
font-size: 36px;
font-style: italic;
font-weight: bold;
}
h2 {
font-family: "Times New Roman", serif;
font-size: 24px;
font-style: normal;
font-weight: 600;
}
p {
font-family: Verdana, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
}
.highlight {
font-style: italic;
font-weight: bold;
}
</style>キーコンセプトを見てみましょう。
normal：標準的なテキストの外観italic：斜体のテキストoblique：italic に似ていますが、よりまれnormal：通常のテキスト（400）bold：太く、目立つテキスト（700）これらのプロパティを示すように HTML を変更します。
<body>
<h1>Main Heading (Italic and Bold)</h1>
<h2>Subheading (Semi-Bold)</h2>
<p>
Regular paragraph text.
<span class="highlight">This text is highlighted</span>.
</p>
</body>ブラウザでの例の出力は次の通りです。
[見出しが以下のように表示されるページ：
- 斜体で太字のメイン見出し
- セミボールドのサブ見出し
- 強調されたspanが含まれる段落]このステップでは、CSS のfontショートハンドプロパティを使って、複数のフォント関連のプロパティを 1 つの簡潔な宣言にまとめる方法を学びます。この方法により、CSS をより読みやすく効率的にすることができます。
typography.htmlファイルを開き、次の CSS で<style>セクションを更新します。
<style>
h1 {
font:
bold italic 36px Arial,
sans-serif;
}
h2 {
font:
600 24px "Times New Roman",
serif;
}
p {
font:
normal 16px/1.6 Verdana,
sans-serif;
}
.highlight {
font:
bold italic 16px Verdana,
sans-serif;
}
</style>ショートハンドのfontプロパティの構文を分解してみましょう。
font: [font-style] [font-weight] [font-size] [line-height] [font-family]
font: style weight size familyfont: size/line-height familyfont: weight size familyショートハンドのプロパティを示すように HTML を変更します。
<body>
<h1>Main Heading (Shorthand)</h1>
<h2>Subheading (Compact Syntax)</h2>
<p>
Paragraph with line height. <span class="highlight">Highlighted text</span>.
</p>
</body>ブラウザでの例の出力は次の通りです。
[見出しが以下のように表示されるページ：
- 太字と斜体のメイン見出し
- コンパクトなフォント宣言のサブ見出し
- 行間が統合された段落]この実験では、参加者は CSS のフォントプロパティを使ったテキスト装飾の基本を段階的に学びます。最初の段階では、基本構造を持つ HTML ファイルを作成し、必須のメタデータを設定し、文字装飾の実験用のキャンバスを用意します。学習者は、DOCTYPE 宣言、言語設定、ビューポート設定などの重要な HTML 要素と属性を学びます。
この実験は、フォント操作に焦点を当てた実際の CSS 装飾技術に進みます。参加者は、見出しにフォントファミリーを適用する方法、フォントサイズと行間を調整する方法、およびフォントスタイルと太さを変更する方法を探求します。WebIDE で直接作業し、徐々に HTML と CSS コードを構築することで、学生たちはテキストの外観を変える実践的な経験を得るとともに、異なるフォントプロパティが効果的なウェブの文字装飾にどのように貢献するかを理解することができます。
