CSSアンダーライン間隔調整
2024-09-10
CSSでテキストとアンダーラインの間隔を調整する方法
日本語解説
CSSでテキストとアンダーラインの間隔を調整するには、主に次のプロパティを使用します。
text-decoration-skip-bottom
- 値は
none(デフォルト)、ink(テキストのインク部分のみ)、underline(アンダーラインのみ)、space(アンダーラインとテキストの底辺の間隔を指定)のいずれかになります。 - アンダーラインとテキストの底辺の間隔を指定します。
例
p {
text-decoration: underline;
text-decoration-skip-bottom: space;
}
text-decoration-thickness
- 値はピクセル単位で指定します。
- アンダーラインの太さを指定します。
p {
text-decoration: underline;
text-decoration-thickness: 3px;
}
line-height
- 値はピクセル単位またはパーセンテージで指定します。
- 行間を調整することで、間接的にアンダーラインとの間隔を調整することもできます。
p {
line-height: 1.5;
}
注意
line-heightは、フォントサイズや他の要素との関係も考慮する必要があります。text-decoration-skip-bottomは、ブラウザのサポート状況によっては機能しない場合があります。
p {
text-decoration: underline;
text-decoration-skip-bottom: space;
}
text-decoration-skip-bottom: space;により、アンダーラインとテキストの底辺の間隔を指定します。
p {
text-decoration: underline;
text-decoration-thickness: 3px;
}
text-decoration-thickness: 3px;により、アンダーラインの太さを3ピクセルに指定します。
line-heightを使用する例:
p {
line-height: 1.5;
}
line-height: 1.5;により、行間を1.5倍に設定し、間接的にアンダーラインとの間隔を調整します。
text-shadowを使用する:
- 値は、水平方向のオフセット、垂直方向のオフセット、ぼかし半径、色を指定します。
- テキストに影を付けることで、アンダーラインとの間隔を調整することができます。
p {
text-decoration: underline;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
カスタムフォントを使用する:
- フォントエディタを使用して、アンダーラインの位置や太さをカスタマイズできます。
- フォント自体にアンダーラインのスタイルが組み込まれている場合、そのスタイルを調整することができます。
JavaScriptを使用して動的に調整する:
- 例えば、
offsetTopやoffsetHeightプロパティを使用して、要素の位置やサイズを取得し、それに応じてスタイルを調整できます。 - JavaScriptを使用して、要素のスタイルを動的に変更することで、アンダーラインとの間隔を調整することができます。
css underline
