さらに CSS について調べる
CSS がコンテンツの管理を容易にし、読者にとってコンテンツをより興味深いにものにする方法を詳しく見てみましょう。
コメント
他のコンピューター言語と同様に、CSS ではコメントがサポートされます。 CSS のセクションでコメントするには、/* comment */ を使用します。
/* はコメントの先頭を識別し、*/ は末尾をマークします。 CSS コメントでは、複数行のテキストを扱うことができます。 コメントは、自分や他の開発者のためにメモを残したり、言語を学んでいる間にメモを取ったりするのに最適な方法です。
重要
CSS コメントは公開されており、Web サイトのブラウザーとユーザーの両方からアクセスできます。 機密情報をコメントに保存しないでください。
CSS コメントの書式は HTML コメントとは異なります。 HTML のコメントでは、<!--comment--> 構文が使用されます。
フォントの設定
CSS を使用して、特定のテキストに使用するフォントをブラウザーに伝えることができます。 読みやすくしたり、スタイルをおしゃれにするために Arial を使用したい場合があります。 次の図は、Arial のテキストと、"Impact" というフォントの他のテキストを示しています。
ページで使用するフォントを設定するための最も一般的なオプションは font-family です。
font-family は通常、フォントの一覧に設定され、ブラウザーではサポート可能な最初のフォントを使用できます。 たとえば、 Tahoma, Verdana, sans-serif の設定では Tahoma を使用し、次に Verdana を使用し、最後に汎用のサンセリフ フォントを使用しようとします。
スタイル、重み、装飾など、他のオプションを使用することもできます。
font-style は、値を italic に設定してテキストを斜体にするために使用されます。
font-weight は、最も一般的な bold を使用して、さまざまな太字の設定をサポートしています。 最後に、text-decoration は、underline、overline、または line-through テキストに使用されます。
| CSSの | 結果 |
|---|---|
font-weight: bold; |
デモ |
font-style: italic; |
デモ |
text-decoration: line-through; |
|
text-decoration は、フォントの表示を変更するために使用される他のオプションとは異なる感じがする場合があります。 主な違いは、text-decoration は、テキストの周囲またはテキストにスタイルを適用するために使用されますが、実際のフォント自体は変更されない点です。 太字と斜体によってフォントが変更されています。
注
Web ページで下線を使用することは、テキストがハイパーリンクのように見える可能性があるため、通常は避ける必要があります。
フォントのサイズ設定
font-size を使用すると、使用するフォント サイズを指定できます。 CSS では、絶対サイズまたは相対サイズ設定を使用できます。 絶対サイズは通常、ピクセル単位で設定され、常に指定されたサイズが使用されます。 相対サイズ設定は、ブラウザーの既定のサイズに基づき、パーセント単位または参照要素のサイズ設定に基づいて測定できます。
注
多くのブラウザーの既定のフォント サイズは 16 ピクセルです。
絶対サイズ設定はピクセル単位で測定でき、px を使用して CSS で示されます。 フォントを 14 ピクセルに設定するには、ディレクティブ font-size: 14px; を使用できます。
フォントの相対サイズ設定は、通常、em または rem を使用して測定されます。
em は要素の略で、親 (em) またはルート (rem) に対して相対的です。 ルートは html 要素です。
1em または 1rem は親またはルート要素のサイズと等しく、2em または 2em は 2 倍のサイズになります。 画面サイズは異なる場合があるため、可能な限り相対的なサイズ設定を使用することをお勧めします。
例として、次の HTML と CSS を考えてみましょう。
<html>
<body>
<div>Sample text</div>
</body>
</html>
html {
font-size: 18px;
}
div {
font-size: 14px;
}
div 要素の 1em が 14 ピクセルの場合、親が div で 14px に設定されている場合、1rem は html ルートが 18px に設定されているため 18 ピクセルになります。
1.5em 要素の div は 21 ピクセル (14 * 1.5 = 21) になり、1.5rem は 27 ピクセル (18 * 1.5 = 27) になります。
em と rem を使用して、親またはルートのサイズを更新するときに、ページの残りの部分を拡大縮小できます。
色
フォントの色は、color プロパティを使用して設定できます。
color は、RGB (赤、緑、青) の値に設定することも、black や lightgray などの多くの名前付きの色のいずれかに設定することもできます。
CSS の RGB 値は、# の前に 16 進値を指定するか、rgb 関数内で 0 から 255 の値にできます。 色を既定の茶色の網掛けに設定するには、color: brown; を使用します。 カスタムの紫の網掛けの場合は、color: #7462e0 を使用できます。
/* named value */
div {
color: brown;
}
/* RGB hex value */
h1 {
color: #7462e0;
}
/* RGB function */
h2 {
color: rgb(105, 6, 19);
}
重要
色の選択は、色覚障碍を持つ人を常に考慮する必要があります。 カラー セーフなどのツールを使用すると、色のコントラストの選択を支援して、すべてのユーザーがサイトにアクセスできるようにします。
ご存知のように、使用可能な名前付きの色は数十種類あり、RGB 値は無限のオプション セットを備えています。 vscode.dev や Visual Studio Code などのエディターを使用すると、使用可能な色の値を支援できます。 どちらのエディターも、CSS にカラースウォッチのプレビューを表示します。 見本の上にマウスを置くと、希望の色を設定するために使用できるカラーセレクターが表示されます。
