close

CSS でテキストを書式設定するためのガイド

Web サイトをデザインする場合、テキストの書式設定は、魅力的で読みやすいインターフェイスを作成するための重要な側面です。

CSS には、フォントの色、サイズ、ファミリー、配置、間隔など、テキストのさまざまな要素をカスタマイズできるいくつかのプロパティが用意されています。

以下に、各テキスト書式設定プロパティの詳細なガイドと各プロパティの例を示します。

 

フォントの色

パラメータ: カラー値。カラー名(例: red)、16 進数コード(例: "#FF0000")、RGB 値(例: "rgb(255, 0, 0)")、または RGBA 値(例: 、「rgba(255, 0, 0, 0.5)」)。 

p {  
  color: blue;  
}

 

フォントサイズ

パラメータ: サイズ値。ピクセル単位(例: 「16px」)、em 単位(例: 「1em」)、rem 単位(例: 「1.2rem」)、ビューポート幅単位(例: 「10vw」) 、ビューポートの高さの単位（「5vh」など）、またはその他の単位。 

h1 {  
  font-size: 24px;  
}

 

フォントファミリー

パラメータ: 優先順序で指定されたフォント ファミリのリスト。 フォント名(例: Arial) を指定することも、特殊文字を含むフォント名を二重引用符で囲むこともできます(例: " Times New Roman)。 

body {  
  font-family: Arial, sans-serif;  
}

 

フォントの太さとスタイル

パラメータ font-weight: normal(default)、 bold、 bolder、 lighter 、または 100 ～ 900 の数値。

パラメータ font-style: normal(default), italic。 

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}

 

文字装飾

パラメータ: "none"(default), "underline", "overline", "line-through"  またはスペースで区切られた値の組み合わせ。 

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}

 

テキストの配置

パラメータ: "left"(default), "right", "center" or "justify"。 

p {  
  text-align: center;  
}

 

行の高さと余白

パラメータ line-height: 数値または現在のフォント サイズのパーセンテージ。

パラメータ margin: ピクセル(px)、em 単位(em)、rem 単位(rem) などの測定値。 

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}

 

複数列のテキストレイアウト

パラメータ: 正の整数または "auto"(default)。 

.container {  
  column-count: 2;  
}

 

ホバー時のテキストの色変更

特定のパラメータはありません。疑似クラスのみを使用します :hover。 

a:hover {  
  color: red;  
}

 

状態に応じてテキストの色が変わります(アクティブ、訪問済み)

特定のパラメータはありません。疑似クラス :active  とのみを使用します :visited。 

a:visited {  
  color: purple;  
}

 

上記の説明と例が、CSS のテキスト書式設定プロパティを使用およびカスタマイズして、Web サイト上に視覚的に魅力的で魅力的なテキスト インターフェイスを作成する方法を理解するのに役立つことを願っています。