CSS共通注意事項

CSS垂直中央

Flexbox レイアウトを使用します。表示: flex に親要素を設定し、align-items: center 属性を使用します。これにより、子要素が親要素内で垂直方向の中央に配置されます。

.parent {
  display: flex;
  align-items: center;
}

テーブルレイアウトを使用する: 親要素の表示属性を table に設定し、子要素の表示属性を table-cell に設定し、vertical-align: middle 属性を使用します。

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

絶対配置とtransform属性を使用する: 子要素のposition属性をabsoluteに設定し、top:50%属性とtransform:translateY(-50%)属性を使用します。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

これらの方法は、特定の状況に応じて適切な方法を選択して、垂直方向のセンタリング効果を実現できます。

CSSフォントの間隔

CSS では、letter-spacingプロパティを使用してテキストの間隔を制御できます。各文字間のスペースのサイズを示す長さの値を受け入れることができます。負の値を使用して文字間の間隔を狭くすることもできます。

以下に例を示します。

p {
  letter-spacing: 2px;
}

上の例では、p要素内のテキストの各文字の間に 2 ピクセルが追加されます。

属性に加えて、属性を使用して単語間の間隔を制御することletter-spacingもできます。word-spacing使い方はと似ていますletter-spacing。

p {
  word-spacing: 5px;
}

上の例では、p要素内のテキストの各単語の間に 5 ピクセルのスペースが追加されます。

お役に立てれば！さらにご質問がございましたら、お気軽にお問い合わせください。