CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでピクセル（px）を使ってフォントサイズを設定する方法

CSSでfont-sizeプロパティを設定する際には、ピクセル（px）単位を使用できます。テキストのサイズを正確に制御したい場合に特に便利な指定方法です。

ピクセルは絶対的な長さの単位であり、親要素のフォントサイズや他の要素の影響を受けずに、常に固定の大きさで表示されます。そのため、デザイン通りの正確な文字サイズを実現したい場面でよく使われます。

サンプルコード

それでは、ピクセルを使ってフォントサイズを設定する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {background-color:rgba(108,111,35,0.6);
    font-size:30px;
    color:yellow;
    transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>

この例では、ID「demo6」が付いた段落に対してfont-size: 30px;を指定しています。これにより、そのテキストだけが30ピクセルの大きさで表示され、背景色や回転（transform）と組み合わせた装飾的な演出も可能になります。

実行結果

CSSでピクセル（px）を使ってフォントサイズを設定する方法

別のサンプルコード

続いて、もう一つの例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    text-decoration: overline;
    text-decoration-color: yellow;
    font-size: 25px;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

こちらの例では、「demo」クラスに対してfont-size: 25px;を指定しています。クラスセレクターを使うことで、同じスタイルを複数の要素にまとめて適用できる点もポイントです。また、上線（overline）の色を黄色に変更するtext-decoration-colorプロパティとも組み合わせています。

実行結果

CSSでピクセル（px）を使ってフォントサイズを設定する方法

まとめ

ピクセル（px）によるフォントサイズの指定は、意図した通りの正確な文字サイズを実現できるのが大きなメリットです。一方で、ユーザーがブラウザのデフォルト設定で文字サイズを変更しても追従しないため、アクセシビリティを重視する場合はemやremなどの相対単位との使い分けも検討するとよいでしょう。

  1. CSS tab-sizeプロパティを使ってHTMLのタブサイズを設定する方法

    CSSのtab-sizeプロパティを使用すると、タブ文字によって挿入される空白（ホワイトスペース）の幅を自由に設定できます。デフォルトではタブ幅は8文字分に設定されていますが、このプロパティを使えば好みの幅に調整可能です。本記事では、具体的なサンプルコードを通じてtab-sizeプロパティの使い方を解説します。 tab-sizeプロパティの基本 tab-sizeプロパティは、<pre>要素やwhite-space: pre;が適用された要素など、タブ文字がそのまま表示される環境で効果を発揮します。値には整数（文字数）または長さの単位を指定でき、Firefoxなど一部のブラウザではベ

  2. CSSのletter-spacingプロパティを使って文字間隔（字間）を設定する方法

    CSSのletter-spacingプロパティを使用すると、テキストの文字と文字の間隔（字間）を自由に指定できます。値にはnormalのほか、pxやemなどの長さの単位を指定でき、タイトルや見出しのデザイン性を高めたり、可読性を調整したりする際に非常に便利です。 基本の構文 letter-spacing: normal | <length>; normalを指定するとブラウザ標準の間隔になり、数値を指定するとその分だけ文字間が広がります。負の値を指定すれば、文字間を詰めることも可能です。 サンプル1：em単位で文字間隔を指定する 以下の例では、最初のp要素だけにletter-spa