1.1 色
CSS (Cascading Style Sheets) は、テキストのスタイリングのために多くのプロパティを提供しているんだ。中でも重要なのは
color、font-size、font-weight だね。これらのプロパティはそれぞれ、テキストの色、大きさ、フォントの太さを調整できるよ。それぞれのプロパティについて詳しく見てみよう。
color プロパティはテキストの色を指定するんだ。さまざまなカラーフォーマットで設定できて、色の名前や16進数の値、RGB、RGBA、HSL、HSLA などがあるんだ。
使用例
1. 色の名前:
CSS
p {
color: red;
}
2. 16進数の値:
CSS
p {
color: #ff0000;
}
3. RGB と RGBA:
CSS
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* 透過赤 */
}
4. HSL と HSLA:
CSS
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* 透過赤 */
}
HTMLでの使用例:
CSS
p {
color: #3498db; /* ブルー */
}
HTML
<body>
<p>このテキストは青色になります。</p>
</body>
1.2 font-size プロパティ
font-size プロパティはテキストのサイズを指定するよ。値は、ピクセル (px) のほか、相対値 (em, rem, %) や、ピクセルから派生したもの (mm, cm, pt, pc)、vw や vh (ビューポート幅と高さ)、その他で指定できるんだ。
使用例
1. ピクセル:
CSS
p {
font-size: 16px;
}
2. 相対値:
%, em, rem
CSS
p {
font-size: 150%; /* ベースフォントサイズの150% */
font-size: 1.5em; /* ベースフォントサイズの1.5倍 */
font-size: 1.5rem; /* <html> 要素のフォントサイズに相対的なサイズ */
}
3. ビューポートユニット:
CSS
p {
font-size: 2vw; /* ビューポート幅の2% */
font-size: 2vh; /* ビューポート高さの2% */
}
HTMLでの使用例:
CSS
p {
font-size: 18px; /* テキストサイズ18ピクセル */
}
HTML
<body>
<p>このテキストは18ピクセルサイズになります。</p>
</body>
1.3 font-weight プロパティ
font-weight プロパティはテキストの太さを指定するんだ。値はキーワード
(normal, bold, bolder, lighter) や、数値 (100から900までで、400がnormalに、700がboldに相当するよ) で指定できるんだ。
使用例
1. キーワード:
CSS
p {
font-weight: bold;
}
2. 数値:
CSS
p {
font-weight: 300; /* 軽いテキスト */
font-weight: 700; /* boldに相当する */
}
HTMLでの使用例:
CSS
p {
font-weight: 700; /* 太字テキスト */
}
HTML
<body>
<p>このテキストは太字になります。</p>
</body>
GO TO FULL VERSION