はじめに
CSS テキストスタイリングの実験へようこそ！ウェブデザインにおいて、テキストの外観を制御することは、読みやすく、アクセスしやすく、見た目に美しいウェブサイトを作成するための基本です。CSS (Cascading Style Sheets) は、この目的のために特別に設計された強力なプロパティセットを提供します。
この実験では、テキストスタイリングのための最も一般的な CSS プロパティを実際に体験します。テキストの色を変更する方法、フォントサイズを調整する方法、テキストを太字にする方法、配置する方法、そして行間を制御する方法を学びます。ここでは 2 つのファイルを使用します：index.html にはコンテンツが含まれており、style.css には CSS ルールを記述します。実験環境の Web 8080 タブに切り替えることで、変更をリアルタイムで確認できます。
始めましょう！
テキストカラープロパティを設定する
このステップでは、CSS の color プロパティを使用してテキストの色を変更する方法を学びます。このプロパティは、色名（red、blue など）、16 進数値（#FF0000 など）、RGB 値などを受け入れることができます。
まず、WebIDE の左側にあるファイルエクスプローラーで style.css ファイルを見つけます。それをクリックしてエディターで開きます。
次に、段落テキストの色を変更するためのルールを追加しましょう。すべての段落要素を対象とするために p セレクターを使用します。以下のコードを style.css ファイルに追加してください。
p {
color: #2980b9;
}
コードを追加した後、style.css ファイルを保存します。結果を確認するには、インターフェースの上部にある Web 8080 タブをクリックしてください。段落テキストの色が青系の色に変わっているのが見えるはずです。
font-size プロパティをピクセル単位で適用する
このステップでは、font-size プロパティを使用してテキストのサイズを調整します。このプロパティはフォントのサイズを制御します。使用できる単位は多数ありますが（em、rem、% など）、ここでは固定サイズを提供するピクセル（px）から始めます。
読みやすくするために、段落テキストを少し大きくしましょう。style.css ファイルに戻り、既存の p ルールに font-size プロパティを追加してください。
p セレクターのルールは、以下のようになります。
p {
color: #2980b9;
font-size: 18px;
}
ファイルを保存し、再度 Web 8080 タブに切り替えてください。段落内のテキストが以前よりも大きくなっていることに気づくでしょう。
font-weight プロパティで太字テキストを使用する
このステップでは、font-weight プロパティを使用してテキストの太さを制御する方法を学びます。このプロパティは、normal や bold のようなキーワード値、または 100 から 900 までの数値を受け入れることができます。
見出し（h1）をより目立たせるために、その太さを明示的に設定しましょう。見出しはデフォルトで太字になっていることが多いですが、CSS で定義することで一貫性を確保できます。段落テキストも太字にします。
style.css ファイルを変更します。まず、h1 要素の新しいルールを追加します。次に、既存の p ルールに font-weight プロパティを追加します。
h1 {
font-weight: bold;
}
p {
color: #2980b9;
font-size: 18px;
font-weight: bold;
}
ファイルを保存し、Web 8080 タブを確認してください。段落テキストが太字になっているのがわかるはずです。
text-align プロパティで中央揃えを実装する
このステップでは、text-align プロパティを使用してテキストの水平方向の配置を制御します。このプロパティには、left、right、center、justify のような値があります。見出しやその他のブロックレベルのテキスト要素を配置するのに適した方法です。
ページのメイン見出しを中央揃えにしましょう。これを行うために、style.css の h1 ルールに text-align プロパティを追加します。
style.css ファイルの h1 ルールを更新して、text-align: center; を含めるようにしてください。
h1 {
font-weight: bold;
text-align: center;
}
ファイルを保存した後、Web 8080 タブを更新してください。「Welcome to CSS Text Styling」という <h1> 見出しが、ページの最上部にきれいに中央揃えされているはずです。
line-height プロパティで行間を追加する
最終ステップでは、テキスト行間のスペースを調整して、段落の可読性を向上させます。これは line-height プロパティで行います。
line-height に単位なしの値を使用することは一般的なベストプラクティスです。これは、要素のフォントサイズに対する相対的なスペースを作成するためです。たとえば、line-height が 1.6 である場合、スペースはフォントサイズの 1.6 倍になります。
段落に垂直方向のスペースを追加しましょう。style.css ファイルに移動し、p ルールに line-height プロパティを追加します。
最終的な p ルールは次のようになります。
p {
color: #2980b9;
font-size: 18px;
font-weight: bold;
line-height: 1.6;
}
ファイルを保存し、Web 8080 タブで結果を表示してください。段落が以前よりもはるかに読みやすくなり、行間のスペースが快適になったことに気づくでしょう。
まとめ
CSS テキストスタイリングの実験を完了おめでとうございます！ウェブページ上のテキストの外観を制御するための、最も基本的な CSS プロパティのいくつかを正常に学習し、適用しました。
この実験では、以下のことを練習しました。
color: テキストの色を変更するため。font-size: テキストのサイズを制御するため。font-weight: テキストの太さを調整するため。text-align: テキストの水平方向の配置を設定するため。line-height: テキスト行間の垂直方向のスペースを管理するため。
これらの基本的なスキルは、デザイン性に優れ、読みやすいウェブコンテンツを作成するための構成要素です。style.css ファイルで、さまざまな値やプロパティをさらに試してみてください。より CSS に習熟するために、探求を続けてください！
